/* ============================================================
   Authentication. The only place in this product that uses glass.

   The reasoning: the front door is the one screen with nothing
   behind it to obscure and nothing dense to read, so a translucent
   surface costs nothing and buys the one moment where the product
   is allowed to be atmospheric. Every screen past it is solid,
   because a person reading forty lead names through frosted glass
   is a person squinting.
   ============================================================ */

.auth {
  position: relative;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--s6) var(--s4);
  overflow: hidden;
  isolation: isolate;
}

/* The lighting. Two very soft, very dark pools, offset so the card
   sits on a gradient rather than on a flat field. No neon, no blob
   with a visible edge: at this opacity you read it as depth, not as
   decoration. */
.auth::before,
.auth::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}
.auth::before {
  width: 62vw; height: 62vw;
  max-width: 760px; max-height: 760px;
  top: -22vw; left: -14vw;
  background: radial-gradient(circle,
    color-mix(in oklab, var(--accent) 26%, transparent) 0%,
    transparent 68%);
}
.auth::after {
  width: 54vw; height: 54vw;
  max-width: 640px; max-height: 640px;
  bottom: -20vw; right: -12vw;
  background: radial-gradient(circle,
    color-mix(in oklab, #b8763f 18%, transparent) 0%,
    transparent 70%);
}

/* A very fine grain over the whole thing. It is what stops a large
   dark gradient banding on an 8-bit panel, and it reads as texture
   rather than as an effect. Drawn as an SVG data URI so it costs no
   request and no image decode. */
.auth-grain {
  position: absolute;
  inset: 0;
  /* The parent centres its items, and an absolutely positioned child
     inherits that alignment instead of stretching, which left the
     grain offset by half the gutter. */
  place-self: stretch;
  z-index: -1;
  opacity: 0.4;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

.auth-card {
  position: relative;
  width: min(100%, 396px);
  padding: var(--s7) var(--s6) var(--s6);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  box-shadow:
    0 40px 90px -30px rgba(0,0,0,0.8),
    0 2px 10px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.09);
  animation: auth-in 420ms var(--ease-out) both;
}

/* The blur is progressive-enhancement only. Without support the card
   is simply a solid surface, which is a perfectly good card. */
@supports (backdrop-filter: blur(1px)) {
  .auth-card {
    backdrop-filter: blur(22px) saturate(1.3);
    -webkit-backdrop-filter: blur(22px) saturate(1.3);
    background: color-mix(in srgb, var(--surface) 55%, transparent);
  }
}

:root[data-theme="light"] .auth-card {
  border-color: rgba(30,24,12,0.10);
  box-shadow: 0 40px 90px -30px rgba(30,24,12,0.28), inset 0 1px 0 rgba(255,255,255,0.85);
}

@keyframes auth-in {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s6);
}
.auth-brand .mark { color: var(--accent); }
.auth-brand-name {
  font-family: var(--font-brand);
  font-size: var(--t-17);
  font-weight: 700;
  letter-spacing: -0.015em;
}
.auth-brand-sub {
  font-size: var(--t-12);
  color: var(--text-2);
  letter-spacing: 0.01em;
}

.auth-card h1 { font-size: var(--t-21); margin-bottom: var(--s1); }
.auth-lede { font-size: var(--t-13); color: var(--text-2); margin-bottom: var(--s5); }

.auth-form { display: flex; flex-direction: column; gap: var(--s4); }
.auth-form .input { height: 42px; }
.auth-form .btn { height: 42px; }

.auth-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}

.auth-note {
  display: flex;
  gap: var(--s2);
  align-items: flex-start;
  padding: var(--s3);
  border-radius: var(--r-control);
  font-size: var(--t-12);
  line-height: var(--lh-snug);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text-2);
}
.auth-note[data-kind="error"] {
  background: var(--danger-soft);
  border-color: color-mix(in oklab, var(--danger) 40%, var(--line));
  color: var(--danger-text);
}
.auth-note[data-kind="success"] {
  background: var(--won-soft);
  border-color: color-mix(in oklab, var(--won) 40%, var(--line));
  color: var(--won-text);
}

/* The demo account chooser. Not part of the product; it exists so the
   demo can be walked through without a password list beside it. */
.auth-accounts { margin-top: var(--s5); }
.auth-accounts {
  border: 1px dashed var(--line-2);
  border-radius: var(--r-control);
  padding: var(--s2) var(--s3);
}
.auth-accounts summary {
  display: flex;
  align-items: center;
  gap: var(--s2);
  cursor: pointer;
  font-size: var(--t-12);
  color: var(--text-2);
  list-style: none;
}
.auth-accounts summary::-webkit-details-marker { display: none; }
.auth-accounts summary::after {
  content: ""; margin-left: auto; width: 6px; height: 6px;
  border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3);
  transform: rotate(45deg); transition: transform var(--fast) var(--ease);
}
.auth-accounts[open] summary::after { transform: rotate(-135deg); }
.auth-accounts summary:hover { color: var(--text); }
.auth-account {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s2);
  border-radius: var(--r-control);
  text-align: left;
  transition: background var(--fast) var(--ease);
}
.auth-account:hover { background: var(--surface-2); }
.auth-account-avatar {
  display: grid; place-items: center;
  width: 28px; height: 28px; flex: none;
  border-radius: var(--r-chip);
  background: var(--surface-3);
  font-size: var(--t-11); font-weight: 650;
  color: var(--text-2);
}
.auth-account-name { font-size: var(--t-13); }
.auth-account-role { font-size: var(--t-11); color: var(--text-3); }

.auth-legal {
  margin-top: var(--s5);
  text-align: center;
  font-size: var(--t-11);
  color: var(--text-3);
}

/* The locked screen and the invited-client reassurance share this. */
.locked-card h1 { font-size: var(--t-21); }
.locked-note {
  padding: var(--s3);
  margin-bottom: var(--s4);
  border-radius: var(--r-control);
  background: var(--surface-2);
  border-left: 2px solid var(--booked);
  font-size: var(--t-13);
  color: var(--text-2);
  line-height: var(--lh-snug);
}
.locked-safe {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  padding: var(--s3);
  margin: var(--s4) 0;
  border-radius: var(--r-control);
  background: var(--won-soft);
  border: 1px solid color-mix(in oklab, var(--won) 28%, var(--line));
}
.locked-safe svg { color: var(--won-text); flex: none; margin-top: 2px; }
.locked-safe p { font-size: var(--t-12); line-height: var(--lh-body); color: var(--won-text); }
.auth-foot .micro { display: inline-flex; align-items: center; gap: 5px; }
.locked-card .btn-primary { text-decoration: none; }
.locked-card .btn-primary:hover { text-decoration: none; }

/* ------------------------------------------------- the split door
   One card on a phone. From 960px the door gets a left half that shows
   what is behind it: the brand, one sentence, and three pieces of the
   real interface layered at slight angles. Built from HTML, so it is
   sharp at any density and follows the theme. */

.auth-story { display: none; }

@media (min-width: 960px) {
  .auth {
    grid-template-columns: minmax(0, 1.15fr) minmax(420px, 1fr);
    place-items: stretch;
    padding: 0;
  }
  .auth-side {
    display: grid;
    place-items: center;
    padding: var(--s8) var(--s6);
  }
  /* The brand lives on the left now; the card does not repeat it. */
  .auth-side .auth-brand { display: none; }
  .auth-card { width: min(100%, 384px); }

  .auth-story {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--s8);
    padding: var(--s8) clamp(var(--s8), 5vw, var(--s10));
    border-right: 1px solid var(--line);
    background:
      linear-gradient(180deg, color-mix(in oklab, var(--surface) 70%, transparent), transparent 70%),
      repeating-linear-gradient(90deg, transparent 0 63px, color-mix(in oklab, var(--line) 55%, transparent) 63px 64px),
      repeating-linear-gradient(0deg, transparent 0 63px, color-mix(in oklab, var(--line) 55%, transparent) 63px 64px);
    overflow: hidden;
  }
  /* The grid fades out toward the card so the two halves meet softly. */
  .auth-story::after {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(120% 90% at 0% 0%, transparent 40%, var(--canvas) 100%);
    pointer-events: none;
    z-index: 0;
  }
  .auth-story > * { position: relative; z-index: 1; }
}

.auth-story-brand {
  display: flex; align-items: center; gap: var(--s3);
  font-family: var(--font-brand); font-weight: 700; font-size: var(--t-17);
  letter-spacing: -0.015em;
}
.auth-story-brand .mark { color: var(--accent); }

.auth-story-copy { max-width: 30rem; margin-top: auto; }
.auth-story-copy h2 {
  font-family: var(--font-brand);
  font-size: clamp(2rem, 1.2rem + 1.9vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 700;
  text-wrap: balance;
}
.auth-story-copy p {
  margin-top: var(--s4);
  font-size: var(--t-15);
  line-height: var(--lh-body);
  color: var(--text-2);
  max-width: 26rem;
}
.auth-story-foot { font-size: var(--t-11); color: var(--text-3); margin-top: auto; }

/* The glimpse: three cards, offset and tilted a degree or two, so it
   reads as a desk of work rather than a screenshot. */
.auth-glimpse {
  position: relative;
  height: 260px;
  max-width: 460px;
}
.glimpse {
  position: absolute;
  display: flex;
  border-radius: var(--r-card);
  border: 1px solid var(--line-2);
  background: var(--surface);
  box-shadow: var(--lift-3), var(--edge-top);
  font-size: var(--t-12);
  animation: glimpse-in 640ms var(--ease-out) both;
}
.glimpse strong { font-size: var(--t-13); font-weight: 600; color: var(--text); }
.glimpse-sub { color: var(--text-2); }

.glimpse-lead {
  top: 0; left: 0; width: 300px;
  flex-direction: column; gap: 5px; padding: var(--s3) var(--s4);
  transform: rotate(-1.6deg);
  border-left: 2px solid var(--attention);
}
.glimpse-top { display: flex; justify-content: space-between; gap: var(--s3); }
.glimpse-amount { font-weight: 650; font-variant-numeric: tabular-nums; color: var(--text); }
.glimpse-foot {
  display: flex; gap: var(--s2); margin-top: 3px; padding-top: 6px;
  border-top: 1px solid var(--line); font-size: var(--t-11); color: var(--text-3);
}
.glimpse-source { color: var(--accent-text); font-weight: 600; }

.glimpse-call {
  top: 104px; left: 120px; width: 330px;
  align-items: center; gap: var(--s3); padding: var(--s3);
  transform: rotate(1.2deg);
  border-color: color-mix(in oklab, var(--attention) 35%, var(--line-2));
  animation-delay: 90ms;
}
.glimpse-dot {
  display: grid; place-items: center; flex: none;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--attention-soft); color: var(--attention-text);
}
.glimpse-btn {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  padding: 5px 10px; border-radius: var(--r-control);
  background: var(--accent); color: var(--text-on-accent);
  font-weight: 600; font-size: var(--t-12);
}

.glimpse-qr {
  top: 186px; left: 30px;
  flex-direction: column; gap: 4px; padding: var(--s3) var(--s4);
  transform: rotate(-0.8deg);
  animation-delay: 180ms;
}
.glimpse-figures { display: flex; gap: var(--s5); }
.glimpse-figures span { display: flex; align-items: baseline; gap: 5px; }
.glimpse-figures b { font-size: var(--t-21); font-weight: 650; font-variant-numeric: tabular-nums; color: var(--text); }
.glimpse-figures small { font-size: var(--t-11); color: var(--text-3); }

@keyframes glimpse-in {
  from { opacity: 0; translate: 0 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .glimpse, .auth-card { animation: none; }
}