/* ============================================================================
   THE DOORS, in the kit.
   ============================================================================

   WHAT THIS FILE IS

   The two public doors, sign in and join, the company doors, and the screen
   that asks a member of staff which company they are working in today. One
   sheet for all of them, loaded before kit.css, which is still the last word.

   IT REPLACES assets/auth.css, AND WHY THAT MATTERS

   auth.css was generated from handover/design/app/auth-v2.html by
   scripts/extract_design.py. That file is a year older than the kit: boxed
   fields on a warm grey ground, a button that swaps colour on hover, a heading
   in a serif, a forest green and an amber. kit.css could repaint the colours
   because they were all read through names, but it could not turn a box into a
   line or make a button fill from below, because those are shapes, not colours.

   So the doors are drawn here, from handover/design/00-THE-KIT.md and the parts
   in handover/design/app/site-v3.html, and the extractor no longer writes over
   them. It says so out loud every time it runs.

   THE FOUR THINGS THE KIT ASKS FOR THAT auth.css COULD NOT GIVE

     a field        no box. A label, the text, and a hairline under it that
                    draws itself in the accent when the field has the cursor
     a button       fills from below on hover. It does not change colour
     the type       two scales, never one for both. 11px eyebrow labels for the
                    apparatus, the reading scale for anything a person reads
     the logo       SkillTeam's own file, white on the near black panel,
                    rather than the word SKILLTEAM set in the body face

   WHAT READS THIS

   tests/test_doors.php parses this sheet, lays the dark panel out as a flex
   column at four window sizes, and fails if any gap on it is decided by the
   size of somebody's screen. It also reads the field and the button back out
   and fails if a field grows a box again or a button starts changing colour.
   Both halves: the markup the server prints, and what a browser does with it.
   ========================================================================= */

:root{
  /* One curve, everywhere. Section 5 of the kit. Fast out, long settle. */
  --e:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--w);color:var(--i);font-family:var(--f);
  font-size:var(--r1);line-height:1.6;letter-spacing:-.013em;-webkit-font-smoothing:antialiased}
button,input,select,textarea,a{font:inherit;color:inherit;letter-spacing:inherit}
a{text-decoration:none}
.hide{display:none!important}

/* The logo is not here. It is SkillTeam's own file, one file for every ground,
   and assets/kit.css holds the box it sits in for every screen at once. Section
   4 of the kit. */

/* --------------------------------------------------------------- the shape
   A door is two halves: the world on the left, and the one thing being asked
   on the right. */
.split{display:grid;grid-template-columns:minmax(0,470px) 1fr;min-height:100vh}
.main{display:flex;align-items:center;justify-content:center;padding:clamp(30px,5vw,64px)}
.card{width:100%;max-width:440px}
.card--wide{max-width:560px}

/* ------------------------------------------------------------- the panel
   Near black, and it carries the colours of the world the person is in, which
   is the fastest possible answer to "am I in the right place".

   The three parts are the mark, the sentence and the quiet line. The mark and
   the sentence are one group at the top, one section apart. The quiet line
   stays at the bottom, which is what a footnote is for. No gap on this panel
   is decided by the height of somebody's window, and tests/test_doors.php lays
   it out at four sizes and fails if one is. */
.aside{background:var(--panel);color:var(--panel-t);padding:clamp(30px,4vw,64px);
  display:flex;flex-direction:column;justify-content:flex-start}
.aside__mark{margin-bottom:44px;display:flex;align-items:center;gap:12px;
  font-size:var(--t3);font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.aside__mark i{font-style:normal;color:var(--aw)}
.aside__chip{width:30px;height:30px;background:var(--accent);color:var(--w);display:flex;
  align-items:center;justify-content:center;font-size:var(--t2);font-weight:700;flex:0 0 auto}
.aside__mid h2{font-weight:700;font-size:clamp(27px,3vw,38px);line-height:1.1;
  letter-spacing:-.032em;margin:0 0 22px;max-width:15ch}
.aside__mid p{color:rgba(255,255,255,.62);font-size:var(--r1);margin:0;max-width:34ch}
.aside__ft{margin-top:auto;padding-top:44px;font-size:var(--t3);color:rgba(255,255,255,.44);
  line-height:1.6}
.aside__ft a{color:rgba(255,255,255,.72);border-bottom:1px solid rgba(255,255,255,.3);cursor:pointer}
.aside__ft a:hover{color:var(--w);border-bottom-color:var(--w)}

/* The four steps on the Studio panel. Rows on the near black, one hairline of
   ground apart, the number in the pale accent because the accent itself
   disappears against near black. */
.stack{display:flex;flex-direction:column;gap:2px;margin:30px 0 0}
.stack div{background:rgba(255,255,255,.07);padding:12px 16px;
  font-size:var(--t4);font-weight:700;color:rgba(255,255,255,.78)}
.stack div b{color:var(--aw);font-weight:700;margin-right:12px}

/* What the shop has, on the public door. One row per collection. */
.cat{display:flex;flex-direction:column;gap:2px;margin:30px 0 0}
.cat div{background:rgba(255,255,255,.07);padding:12px 16px;display:grid;
  grid-template-columns:1fr auto;gap:12px;align-items:baseline}
.cat b{font-size:var(--t4);font-weight:700;color:rgba(255,255,255,.9)}
.cat s{text-decoration:none;font-size:var(--t2);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.45)}

/* ----------------------------------------------------------------- the ask */
h1{font-weight:700;font-size:clamp(30px,3.4vw,38px);line-height:1.06;
  letter-spacing:-.042em;margin:0 0 12px}
.sub,.card__sub,.pick__sub{color:var(--i2);font-size:var(--r2);line-height:1.45;margin:0 0 44px;
  letter-spacing:-.022em}
.em{font-weight:700;color:var(--i)}

/* One line with something on each end: a thing to tick, and a way out. */
.row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 30px}
.chk{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:var(--t4);color:var(--i2)}
.chk i{width:16px;height:16px;border:1px solid var(--ln2);display:block;position:relative;font-style:normal}
.chk input{position:absolute;opacity:0;width:0;height:0}
.chk input:checked + i{background:var(--i);border-color:var(--i)}
.chk input:checked + i::after{content:"";position:absolute;left:4px;top:0;width:5px;height:9px;
  border:solid var(--w);border-width:0 2px 2px 0;transform:rotate(43deg)}

/* ---------------------------------------------------------------- a field
   No box. Section 6 of the kit: a label, the text, and a line under it that
   draws itself in the accent on focus.

   The line is the focus indicator, which is why the browser's own outline is
   taken off the text and put nowhere else. Never take one away without putting
   something visible in its place: this is the something. */
.f{display:block;margin-bottom:22px}
.f label{display:block;font-size:var(--t2);font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--i3);margin-bottom:8px}
.f .hint{font-size:var(--t3);color:var(--i3);margin:0 0 8px;line-height:1.5}
.f input{display:block;width:100%;padding:12px 0;border:0;background:none;outline:0;
  font-size:var(--r3);letter-spacing:-.026em;color:var(--i);cursor:auto}
.f input::placeholder{color:var(--i4)}
.bar{display:block;height:1px;background:var(--ln2);position:relative}
.bar::after{content:"";position:absolute;inset:0;background:var(--a);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--e)}
.f input:focus~.bar::after{transform:scaleX(1)}
.f.bad .bar{background:var(--no)}
.f.bad .bar::after{background:var(--no);transform:scaleX(1)}

.err{font-size:var(--t3);font-weight:700;color:var(--no);margin-top:8px;
  display:flex;align-items:flex-start;gap:8px}
.err b{width:16px;height:16px;background:var(--no);color:var(--w);font-size:var(--t1);
  font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 auto;margin-top:2px}

/* --------------------------------------------------------------- a button
   Solid near black, and on hover the accent fills it from below. It does not
   change colour: nothing here transitions a background. */
.btn{position:relative;overflow:hidden;isolation:isolate;width:100%;border:0;cursor:pointer;
  background:var(--i);color:var(--w);padding:16px 22px;border-radius:2px;
  font-size:var(--t3);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  display:flex;align-items:center;justify-content:center;gap:12px}
.btn::before{content:"";position:absolute;inset:0;background:var(--a);z-index:-1;
  transform:translateY(101%);transition:transform .5s var(--e)}
.btn:hover::before{transform:none}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:square}
.btn--g{background:none;color:var(--i);box-shadow:inset 0 0 0 1px var(--ln2)}
.btn--g::before{background:var(--i)}
.btn--g:hover{color:var(--w)}

/* Enter submits, and it submits the thing the screen is for. Invisible, and
   out of the tab order, so no script is involved at all. */
.st-enter{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ------------------------------------------------------- anything else said */
.foot{margin-top:30px;padding-top:22px;border-top:1px solid var(--ln);
  font-size:var(--t4);color:var(--i3);line-height:1.6}
.lnk{font-size:var(--t4);font-weight:700;color:var(--i2);background:none;border:0;
  cursor:pointer;position:relative;padding:0 0 2px;border-bottom:1px solid var(--ln2)}
.lnk::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--a);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--e)}
.lnk:hover{color:var(--i)}
.lnk:hover::after{transform:scaleX(1)}
.foot .lnk{color:var(--i2)}

/* ------------------------------------------------------------ ways in
   A row of them only ever appears when a company allows more than one. The
   chosen one carries a rule that draws itself, the same rule the site header
   uses under a link. */
.tabs{display:flex;gap:30px;margin:0 0 30px;border-bottom:1px solid var(--ln)}
.tabs button{background:none;border:0;cursor:pointer;padding:0 0 12px;position:relative;
  font-size:var(--t2);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--i3)}
.tabs button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--a);transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--e)}
.tabs button:hover::after,.tabs button.on::after{transform:scaleX(1)}
.tabs button.on{color:var(--i)}

/* ------------------------------------------------------------ the six digits
   Six fields, each with the same line under it a field has, because a printed
   code is still something somebody types into a form. Two pixels rather than
   one, so the line does not move when it changes colour. */
.code{display:flex;gap:8px}
.code input{flex:1;min-width:0;text-align:center;font-size:var(--t8);font-weight:700;
  letter-spacing:-.03em;padding:12px 0;background:none;border:0;outline:0;color:var(--i);
  border-bottom:2px solid var(--ln2);transition:none}
.code input:focus{border-bottom-color:var(--a)}
.code.bad input{border-bottom-color:var(--no)}

/* --------------------------------------------------- which company, for staff
   The one screen behind the Studio door. Rows, not cards: a hairline between
   them, the company's own colour down the left of each. */
.pick{width:100%;max-width:560px}
.acs{display:flex;flex-direction:column}
.ac{display:grid;grid-template-columns:2px 44px 1fr auto;align-items:stretch;width:100%;
  background:none;border:0;border-top:1px solid var(--ln);cursor:pointer;text-align:left;
  padding:0;transition:none}
.ac:last-child{border-bottom:1px solid var(--ln)}
.ac:hover{background:var(--aw)}
.ac__s{background:var(--b)}
.ac__i{display:flex;align-items:center;justify-content:center;background:var(--b);
  color:var(--w);font-size:var(--t3);font-weight:700;min-height:64px}
.ac__b{padding:16px;align-self:center}
.ac__n{display:block;font-size:var(--t5);font-weight:700;line-height:1.3}
.ac__r{display:block;font-size:var(--t2);font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--i3);margin-top:4px}
.ac__u{align-self:center;padding:0 22px;font-size:var(--t2);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--i3)}
.ac--sub .ac__b{padding-left:30px;position:relative}
.ac--sub .ac__b::before{content:"";position:absolute;left:16px;top:50%;width:8px;height:2px;
  background:var(--ln2)}
.pnote,.pick__note{margin-top:22px;font-size:var(--t3);color:var(--i3);line-height:1.6}

/* ------------------------------------------------------------- what has focus
   One ring, in the accent of whoever's world this is, square like everything
   else, and only when somebody is navigating by keyboard. A text field is not
   in this list because the line under it already draws itself, and two
   indicators on one field is one too many. */
:where(a,button,summary,[tabindex]):focus-visible{outline:2px solid var(--a);outline-offset:2px}
.aside :where(a,button,[tabindex]):focus-visible{outline-color:var(--w)}
.code input:focus-visible{outline:2px solid var(--a);outline-offset:2px}

/* --------------------------------------------------------------- narrow
   The panel closes up into a bar across the top, and the sentence in the
   middle of it is not drawn at all, so the two lines that are left sit
   together rather than being pushed apart by a window nobody chose. */
@media (max-width:900px){
  .split{grid-template-columns:1fr}
  .aside{padding:22px}
  .aside__mid{display:none}
  .aside__mark{margin-bottom:0}
  .aside__ft{margin-top:16px;padding-top:0}
  .main{padding:44px 22px}
  /* A thumb, not a cursor. Show is 26px tall on the reading scale, which is
     right beside a field on a laptop and too small to hit on a phone. */
  .pw__eye{min-height:44px;padding-left:12px}
}

/* --------------------------------------------------------------- a password
   The field is the same underlined field as every other one. Show sits inside
   it on the right, on the apparatus scale, so it reads as a control and not as
   part of what the person is typing. */
.pw{display:flex;align-items:center;gap:12px}
.pw input{display:block;width:100%;padding:12px 0;border:0;background:none;outline:0;
  font:inherit;font-size:var(--r1);color:var(--i);letter-spacing:.08em}
.pw__eye{flex:none;background:none;border:0;cursor:pointer;padding:4px 0;
  font:inherit;font-size:var(--t2);font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--i3)}
.pw__eye:hover{color:var(--i)}

/* An address we are showing back, not asking for. Same place a field's text
   would sit, plainly not editable. */
.said{margin:0;padding:12px 0;font-size:var(--r1);color:var(--i3);
  border-bottom:1px solid var(--ln)}

/* The second way in, under the button. Not a footer: it belongs to the form
   above it, so it sits tighter than one. */
.alt{margin:16px 0 0;font-size:var(--t4);color:var(--i2);line-height:1.5}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}