/*
 * The leader's door.
 *
 * Same split as the interview room — artwork on one side, the thing you came to
 * do on the other — because they are the two halves of the same product and a
 * leader arriving here should recognise where they are.
 *
 * ⚠ THIS PARAGRAPH DESCRIBED A DOOR THAT NO LONGER EXISTS, and it is worth
 * leaving the correction visible. It said "there is one password and no user
 * model, so there is no username field ... every one of those would imply the
 * host can tell two leaders apart, which it cannot". All of that stopped being
 * true when the shared password was replaced by a person signing in as
 * themselves — and the same drift left the input rule below matching
 * `type="password"` on a page whose only inputs are an address and a code.
 * Prose and selectors went stale together, silently, for the same reason.
 *
 * What it is now: a person signs in as themselves and Candoor mails a six-digit
 * code. There is still nothing to recover, because there is still no password —
 * a fresh code is always one request away.
 */

/* ⚠ THE OVERRIDES ARE GONE, AND THIS DOOR OPENS ONTO THE CONSOLE.
   It had its own paper (#f4efe2 against the console's #f2ecd9), its own ink
   (#17211d against #0d0f0c), its own hairline (#d9d0b9 against #d8cfb4) and its
   own green (#116655, a third one, beside --teal and --green). Four
   near-misses, none of them decided against the others — you signed in on one
   cream and landed on another, in the same second, and it read as a slightly
   different product having taken your address.

   What is left is what this page genuinely owns: the poster's own furniture. */
:root {
  /* The pressed state of the one button, and the refusal colour. Neither has a
     shared equivalent because no other screen has a single full-width CTA. */
  --accent-deep: #0b4a3d;
  --danger: #a3361f;
  /* Cream ON the poster, which is dark. Not `--paper`: this is a foreground. */
  --foam: #f6f1e2;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ⚠ `--accent` did TWO jobs here under one name, and the console keeps them
     apart: `--teal` is the accent — a focus ring, a link, the current thing —
     and `--green` is a primary action. One value for both meant the button that
     signs you in was a different colour from every button you meet once you are
     in, which is a small incoherence on the one screen a customer sees first.

     `--accent` survives as the local name for the accent role, because the
     poster's own rules read better for it. The button asks for the other one. */
  --accent: var(--teal);
  --action: var(--green);
  /* The panel behind the form. Was `--paper-deep`; the shared name is --sunk. */
  --paper-deep: var(--sunk);
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(15px, 0.4vw + 14px, 17px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;

  display: grid;
  grid-template-columns: 1fr 1fr;
  /* dvh, not vh: on iOS the address bar makes vh taller than the visible area,
     which would push the button off the bottom of the only screen that matters
     here. */
  min-height: 100dvh;
}

h1, h2 { margin: 0; font-weight: 600; text-wrap: balance; }
p { margin: 0; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--accent); color: var(--foam); }

/* ── Left: the mountain ─────────────────────────────────────────────────── */

.face {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.8rem, 3vw, 3.2rem);
  overflow: hidden;

  background: #17423f url("/login-bg.webp") 50% 42% / cover no-repeat;
}

/* A scrim, not a tint, and heavier at the bottom where the words are. This
   artwork runs from a near-white sun to a near-black ridge, so there is no ink
   colour that reads over all of it — the scrim is what makes one exist. */
.face::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(12, 26, 24, 0.12) 0%,
    rgba(12, 26, 24, 0.3) 42%,
    rgba(12, 26, 24, 0.78) 100%);
  pointer-events: none;
}

.face > * { position: relative; z-index: 1; }

.wordmark {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--foam);
  opacity: 0.85;
  position: absolute;
  top: clamp(1.8rem, 3vw, 3.2rem);
  left: clamp(1.8rem, 3vw, 3.2rem);
}

.face__line {
  font-size: clamp(1.5rem, 2.4vw, 2.3rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--foam);
  max-width: 18ch;
}

.face__note {
  margin-top: 0.9rem;
  color: var(--foam);
  opacity: 0.82;
  font-size: 0.95rem;
  max-width: 34ch;
}

/* ── Right: the door ────────────────────────────────────────────────────── */

.door {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.8rem, 4vw, 3.6rem);
  background: var(--paper);
}

.door__in { width: min(100%, 27rem); margin: 0 auto; }

.door__title {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.door__lede {
  margin-top: 0.7rem;
  color: var(--ink-soft);
  font-size: 0.98rem;
}

form { margin-top: 1.9rem; }

label {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
}

/* ⚠ THIS SAID `input[type="password"]`, AND THERE IS NO PASSWORD ANY MORE.
   It was written for the shared-password door; when email + six-digit code
   replaced that, the rule stayed and quietly stopped matching anything. So the
   address box and the code box on the product's front door were unstyled
   browser defaults — a 147px input sitting above its own 432px button, on the
   first screen a customer ever sees.

   Nothing failed. A stylesheet whose selector no longer matches is silent, and
   this is the one page nobody working on Candoor looks at twice, because we are
   all already signed in. That is exactly how it survived a redesign of the flow
   it belongs to.

   Typed by what the control IS rather than by today's markup, so the next input
   added to this page is styled before somebody notices it is not. */
input[type="email"],
input[type="text"],
input[type="password"] {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  padding: 0.85rem 0.95rem;
  color: var(--ink);
  background: #fffdf6;
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: var(--lift);
}

input[type="email"]:focus,
input[type="text"]:focus,
input[type="password"]:focus { border-color: var(--accent); outline-offset: 1px; }

.btn {
  margin-top: 1rem;
  width: 100%;
  font-family: var(--sans);
  font-weight: 650;
  font-size: 0.98rem;
  padding: 0.85rem 1rem;
  color: var(--foam);
  background: var(--action);
  border: 1px solid var(--accent-deep);
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.btn:hover { background: var(--accent-deep); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.6; cursor: default; transform: none; }

.error {
  margin-top: 0.9rem;
  color: var(--danger);
  font-size: 0.92rem;
}

/* The one thing a leader might otherwise go looking for a link to do. Saying
   plainly that there is no reset is kinder than a "forgot password?" that leads
   nowhere. */
.door__foot {
  margin-top: 1.8rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 0.86rem;
}
.door__foot a { color: var(--accent); }

/* Stacked, with the artwork as a band rather than a column. A 50/50 split on a
   phone gives two unusable halves. */
@media (max-width: 760px) {
  body { grid-template-columns: 1fr; min-height: 100dvh; }
  .face { min-height: 38svh; background-position: 50% 46%; }
  .face__line { font-size: 1.4rem; }
  .door { padding: 2rem 1.4rem 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}