/* AutoSmile — sign-in and sign-up, in the current site's design language.
   These pages load tokens.css + autosmile-design-draft.css, so the header,
   footer, type scale and red/white palette are literally the homepage's. Only
   the form itself is defined here: the old styles.css auth card belonged to
   the previous site design and is no longer loaded. */

/* One screen, no page scroll, no footer: on an auth page the only two moves
   are sign in and go back, and both already sit in the header. Only these two
   pages load this file, so the root can be pinned here without a :has()
   selector. The card is centred in everything below the header; if a viewport
   is genuinely too short for the form (a phone in landscape, 200% zoom), that
   band scrolls on its own so no field ever becomes unreachable — the page
   frame still does not move. */
html { height: 100%; overflow: hidden; }
body.auth-page { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100svh; overflow: hidden; }

.auth-main { display: grid; place-items: center; min-height: 0; overflow-y: auto; padding: clamp(1rem, 3vh, 2.5rem) 1.25rem; }
.auth-card { width: min(100%, 420px); }

/* Heading and sub-line read as one block, so they sit closer to each other
   than the block sits to the rule below it. The emblem is gone: the header
   already carries the only mark on screen. */
.auth-card__head { display: grid; justify-items: center; gap: .5rem; margin-bottom: clamp(1.25rem, 3vh, 1.9rem); text-align: center; }
/* .auth-page prefix is load-bearing: autosmile-design-draft.css styles a bare
   h1 for the homepage hero, and its Turkish variant (html[lang="tr"] h1) is
   more specific than a single class — without this the heading rendered at
   84px in Turkish and 28px in English. */
.auth-page .auth-card__head h1 { max-width: 20ch; margin: 0; font-family: var(--font-display); font-size: clamp(22px, 2.2vw + .3vh, 28px); font-weight: 700; line-height: 1.2; letter-spacing: -.025em; text-wrap: balance; }
.auth-page .auth-card__head p { max-width: 38ch; margin: 0; color: var(--color-quiet); font-size: 14px; line-height: 1.5; }

/* One hairline between the promise and the work, same rule colour as the
   section dividers on the homepage. */
.auth-rule { height: 1px; margin: 0 0 clamp(1.1rem, 2.4vh, 1.6rem); background: var(--color-rule); }

.auth-field { display: grid; gap: .3rem; margin-bottom: clamp(.55rem, 1.2vh, .85rem); }
.auth-page .auth-field label { color: var(--color-quiet); font: 600 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.auth-field input {
  width: 100%; min-height: clamp(42px, 5.4vh, 48px); padding: 0 .9rem;
  border: 1px solid color-mix(in srgb, var(--color-charcoal) 28%, transparent); border-radius: 12px;
  background: var(--color-white); color: var(--color-charcoal);
  font: 500 15px var(--font-body); letter-spacing: -.01em;
  transition: border-color .2s var(--ease-out);
}
.auth-field input::placeholder { color: color-mix(in srgb, var(--color-charcoal) 38%, var(--color-white)); }
.auth-field input:hover { border-color: color-mix(in srgb, var(--color-charcoal) 55%, transparent); }
.auth-field input:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; border-color: var(--color-brand); }

.auth-submit { width: 100%; min-height: clamp(44px, 5.6vh, 48px); margin-top: .35rem; border-radius: 12px; font-size: 15px; cursor: pointer; }
.auth-submit:disabled { opacity: .6; cursor: default; }

.auth-message { display: none; margin-bottom: 1rem; padding: .7rem .85rem; border: 1px solid color-mix(in srgb, var(--color-charcoal) 28%, transparent); border-radius: 12px; font-size: 13px; line-height: 1.5; }
.auth-message.show { display: block; }
.auth-message.error { border-color: var(--color-brand); background: var(--color-porcelain); color: var(--color-brand); }
.auth-message.success { border-color: color-mix(in srgb, var(--color-charcoal) 24%, transparent); background: var(--color-mist); color: var(--color-charcoal); }

.auth-page .auth-alt { margin: clamp(.7rem, 1.6vh, 1.1rem) 0 0; color: var(--color-quiet); font-size: 13px; text-align: center; }
.auth-alt a { color: var(--color-brand); font-weight: 600; text-decoration: none; }
.auth-alt a:hover, .auth-alt a:focus-visible { text-decoration: underline; }
.auth-page .auth-note { margin: clamp(.6rem, 1.4vh, 1rem) 0 0; color: var(--color-quiet); font-size: 12px; line-height: 1.6; text-align: center; }

/* The homepage header carries a section nav that only exists on the homepage;
   on these pages the links point back at it, and the two auth links collapse
   to the one the visitor is not already on. */
.auth-page .draft-header__auth[aria-current="page"] { display: none; }

/* The homepage body is scaled to 80% on desktop (see the zoom rule at the end
   of autosmile-design-draft.css). A form is the one place that must not
   shrink: at 80% the inputs land at 38px and the mono labels at 8.8px. */
@media (min-width: 1024px) {
  .auth-page #main { zoom: 1; }
}

/* Short screens: the single screen is the constraint, so the decoration goes
   before the form does. A 1366x768 laptop only needs the first step; below
   640px of height (a phone in landscape, a small laptop at 200% zoom) the
   emblem and the sub-line come out too, leaving the kicker, the heading and
   the fields. */
@media (max-height: 800px) {
  .auth-card__head { gap: .4rem; margin-bottom: 1rem; }
  .auth-main { padding-block: .6rem; }
}
@media (max-height: 740px) {
  .auth-main { padding-block: .25rem; }
}
@media (max-height: 640px) {
  .auth-page .auth-card__head p { display: none; }
  .auth-rule { margin-bottom: .7rem; }
}