/*
 * The Doorstep (D-087). Nova's spec, built.
 *
 * It reads as a popup over the painted gate, because that is what was asked
 * for, but it is a real page: the door state is decided on the server, so
 * there is no overlay script to fail and no flash of the wrong state.
 *
 * Every colour below is an existing token. The one number that is not a token
 * is the card width, 28rem, which Nova specified as --dialog-max; it is
 * declared locally here rather than added to tokens.css, because the other
 * four overlay surfaces on this site have not been migrated to it yet and a
 * half-adopted token is worse than none.
 */

.kfd-page {
  position: relative;
  min-height: 68vh;
  display: grid;
  place-items: center;
  padding: var(--space-5) var(--space-4);
  overflow: hidden;
}

/* The painted gate, full bleed behind everything. object-fit: cover would crop
   faces out of other art; here the art is a wide arch with nothing to lose at
   the sides, and Nova cleared this specific crop. */
.kfd-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.kfd-scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim-navy, rgba(15, 10, 36, 0.55));
}

.kfd-card {
  position: relative;
  width: 100%;
  max-width: 28rem;
  box-sizing: border-box;
  background: var(--color-surface, #fff);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift, 0 18px 44px rgba(15, 10, 36, 0.34));
  padding: var(--space-5) var(--space-4);
  text-align: center;
}

/* The grown-up's half needs room to be read, not a strip to be scrolled. Only
   from 900px up: below that the screen is the constraint, not the card. */
@media (min-width: 900px) {
  .kfd-card.kfd-card--adult {
    max-width: 52rem;
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }
}

/* On a laptop the card was still finishing 88px below the fold (measured at
   1366x768), so the parent had to scroll to reach the very thing they came for.
   The height was not in the words, it was in the padding above and below them:
   the scene keeps its air on a tall screen and gives it back on a short one. */
@media (min-width: 900px) and (max-height: 900px) {
  .kfd-page { padding-top: var(--space-1); padding-bottom: var(--space-1); min-height: 0; }
  .kfd-card.kfd-card--adult {
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
  }
}

.kfd-stage[hidden] { display: none; }

.kfd-h1 {
  margin: 0 0 var(--space-4);
  font-size: clamp(1.35rem, 4.2vw, 1.75rem);
  line-height: 1.25;
  color: var(--color-heading);
}

/* The child's primary. Gold fill with a purple EDGE: the fill alone measures
   2.21:1 against white and a control boundary needs 3:1, which is the same
   live defect that was found on the sign-in button today. The border carries
   it at 15.24:1 and the label sits at 8.70:1 on the gold. */
.kfd-primary {
  display: block;
  width: 100%;
  min-height: var(--tap-play-min, 4.4rem);
  margin: var(--space-4) 0 var(--space-3);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--kf-navy-dark);
  background: var(--kf-gold);
  border: 2px solid var(--kf-purple-deep);
  border-radius: var(--radius-pill);
  cursor: pointer;
}

/* Leaving is a real option, not a booby prize, so it is a proper control with
   its own outline rather than a grey word in a corner. */
.kfd-quiet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  padding: 0 var(--space-4);
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-heading);
  background: transparent;
  border: 2px solid var(--kf-purple-deep);
  border-radius: var(--radius-pill);
  text-decoration: none;
}

.kfd-speak { margin: 0 auto; }

/* The child's reason line. Never smaller than body text: it is the sentence a
   grown-up reads aloud, and the one that tells the child this happens once. */
.kfd-say {
  margin: 0 0 var(--space-3);
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--color-text);
}

/* The greeting that replaced the divider. It names who is being spoken to
   without telling anyone to stop. */
.kfd-hello {
  margin: var(--space-4) 0 var(--space-2);
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-heading);
  text-align: left;
}

/* The exit sits under whichever stage is showing, with air above it so it
   never reads as part of the form. */
.kfd-card > .kfd-quiet { margin-top: var(--space-3); }

.kfd-h2 {
  margin: var(--space-3) 0 var(--space-2);
  font-size: 1.15rem;
  color: var(--color-heading);
}

.kfd-lead,
.kfd-free,
.kfd-privacy {
  margin: 0 0 var(--space-2);
  text-align: left;
  line-height: 1.5;
}

.kfd-lead { color: var(--color-text); }

/* Required, not decoration: this is the sentence that stops the door reading
   as a paywall. It is muted but never small enough to skim past. */
.kfd-free {
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

.kfd-privacy { font-size: 0.95rem; }
.kfd-privacy a { color: var(--color-link); }

/* The adult stage inherits the site's form styling from kf-account's page CSS
   only on the account pages, so the doorstep restates the few rules the built
   form needs. Same shapes, same tokens, same 56px adult control height. */
/* THE GUARD THE SIGN-IN PAGE ALREADY HAD, AND I DID NOT COPY WITH THE REST.
   kf-account.js sets form.hidden = true the moment the link is sent, which is
   correct and has always been correct. An author `display: flex` beats the
   browser's [hidden] { display: none }, so the form stayed on screen with a
   filled-in address and a send button, and Deniz pressed it again and again
   because a send button on screen means nothing was sent.
   account/index.astro carries this same rule with the same reason written
   above it. I copied the form's look into this file and left its behaviour
   behind. */
.kfd-form-slot .kf-form[hidden] {
  display: none;
}

.kfd-form-slot .kf-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--kf-lilac-soft);
  border: 2px solid var(--kf-lilac);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin: var(--space-3) 0;
  text-align: left;
}
.kfd-form-slot label {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--kf-purple-deep);
}
.kfd-form-slot input {
  font: inherit;
  min-height: 3.5rem;
  padding: 0.6rem 0.9rem;
  border: 2px solid var(--kf-lilac);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
}
.kfd-form-slot .kf-submit {
  min-height: 3.5rem;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--kf-navy-dark);
  background: var(--kf-gold);
  border: 2px solid var(--kf-purple-deep);
  border-radius: var(--radius-pill);
  padding: 0.7rem 1.4rem;
  cursor: pointer;
}
.kfd-form-slot input:focus-visible,
.kfd-form-slot .kf-submit:focus-visible,
.kfd-primary:focus-visible,
.kfd-quiet:focus-visible {
  outline: 3px solid var(--kf-teal);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .kfd-page { padding: var(--space-4) var(--space-3); }
  .kfd-card { padding: var(--space-4) var(--space-3); }
}

/* The sent panel. Same lilac frame the form had, so the confirmation stands
   exactly where the form stood: the eye that watched the button finds the
   answer in the same place. */
.kf-sent {
  background: var(--kf-lilac-soft);
  border: 2px solid var(--kf-lilac);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin: var(--space-3) 0;
  text-align: left;
}
.kf-sent p { margin: 0 0 var(--space-2); line-height: 1.5; }
.kf-sent-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--color-heading);
  outline: none;
}
.kf-sent-back {
  font: inherit;
  font-weight: 700;
  color: var(--color-link);
  background: none;
  border: 0;
  padding: 0.4rem 0;
  cursor: pointer;
  text-decoration: underline;
}
.kf-sent-back:focus-visible { outline: 3px solid var(--kf-teal); outline-offset: 2px; }

/* ---- the two ways in (D-151), twin of the block in AccountDoorPage.astro ----
   The sent panel now offers a typed code as well as the emailed link, and they
   are ALTERNATIVES. What makes that readable is not colour: the code sits in
   its own raised card, the link way sits flat on the panel, and a real "or"
   rule is drawn between them. The headings say "way 1" and "way 2" in words,
   so the meaning survives with styles off; the rule itself is aria-hidden. */
.kf-sent .kf-way-title {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-heading);
  margin: var(--space-3) 0 var(--space-2);
}
.kf-sent .kf-way-note {
  font-size: 0.95rem;
  color: var(--color-text-muted);
}
.kf-sent .kf-code-form {
  background: var(--color-surface);
  border: 2px solid var(--kf-lilac);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin: 0 0 var(--space-3);
}
.kf-sent .kf-code-label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--kf-purple-deep);
  margin-bottom: var(--space-2);
}
.kf-sent .kf-code-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.kf-sent .kf-code-input {
  font: inherit;
  font-size: 1.5rem;
  font-weight: 700;
  /* text-indent cancels the trailing gap letter-spacing leaves after the last
     digit, so the centred text is actually centred. */
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-align: center;
  min-height: 3.5rem;
  width: 9.5rem;
  max-width: 100%;
  padding: 0.5rem 0.6rem;
  border: 2px solid var(--kf-lilac);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
}
.kf-sent .kf-code-submit {
  min-height: 3.5rem;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--kf-navy-dark);
  background: var(--kf-gold);
  border: 2px solid var(--kf-purple-deep);
  border-radius: var(--radius-pill);
  padding: 0.7rem 1.4rem;
  cursor: pointer;
}
.kf-sent .kf-code-input:focus-visible,
.kf-sent .kf-code-submit:focus-visible {
  outline: 3px solid var(--kf-teal);
  outline-offset: 2px;
}
/* Reserved height, so a wrong code does not shove the button down under the
   thumb that is about to press it again. */
.kf-sent .kf-code-status {
  min-height: 1.4em;
  margin: var(--space-2) 0 0;
  font-weight: 700;
  color: var(--kf-gold-deep);
}
.kf-sent .kf-or {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0;
  color: var(--kf-lilac-deep);
  font-weight: 700;
}
.kf-sent .kf-or::before,
.kf-sent .kf-or::after {
  content: '';
  flex: 1;
  height: 2px;
  background: var(--kf-lilac);
}

/* The one-line note under the doorstep's send button (denetim bulgusu B1).
   Quieter than the label, but not decoration: it is the only place this card
   says the code and the link are alternatives. Measure-capped so it never runs
   the full width of a wide card. */
.kfd-form-slot .kfd-form-note {
  margin: var(--space-2) 0 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--color-text-muted);
  max-width: 34ch;
}