/* =============================================================================
 * kc-signin.css — the member door's own sheet, on the shared landing skin
 * =============================================================================
 *
 * LOAD ORDER: kc-theme.css, kc-uplift.css, kc-landing-skin.css, then this.
 *
 * kc-landing-skin.css draws the page: the ground, the glass nav, the wordmark,
 * the eyebrow and heading scale, the card, the inputs, the one gradient action
 * and the two-column .ks-door. This file holds ONLY what the skin has no rule
 * for on /signin — the eight states kc-signin.js toggles (hidden, booting,
 * .msg on/err/ok/info, .glyph/.glyph.wait), the one-tab strip, the password
 * reveal, the providers, the terminal card and a little layout. Where the skin
 * has a class, the markup wears it; nothing here restates a skin rule.
 *
 * Colours: the ks- tokens (which read the platform's live --page/--ink1/--acc
 * tokens, so light and dark both hold) and the same three status inks the
 * skin uses. No hex of its own, no font name of its own.
 *
 * kc-signin.js REPLACES className on #msg, #doneMsg and #doneGlyph, so those
 * three keep their old class names (.msg, .glyph) rather than ks- ones.
 * ========================================================================== */

/* `hidden` must beat every display rule below and in the skin. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }

/* --- skip link --------------------------------------------------------------- */
.door-skip {
  position: absolute; left: -9999px; top: 8px; z-index: 70;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  background: var(--ks-plate); color: var(--ks-ink-1);
  border: 1px solid var(--ks-line-2); border-radius: 999px;
  font-weight: 600; font-size: 14px;
}
.door-skip:focus { left: var(--ks-gutter); }

/* --- the left column ----------------------------------------------------------- */
.door-invite { display: flex; flex-direction: column; gap: 22px; }
.door-invite .ks-h1 { max-width: 12ch; }

/* Three short lines under the lede — a mono tick, not a paragraph each. */
.door-lines { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 12px; max-width: 40ch; }
.door-lines li {
  display: flex; align-items: center; gap: 12px;
  font-size: 15px; line-height: 1.4; color: var(--ks-ink-2);
}
.door-lines svg { flex: 0 0 auto; color: var(--ks-acc); }

/* Only ever shown when this device really holds quiz answers (kc-signin.js
   fills #carryChips with bare <span>s, so the chips are styled from here). */
.door-carry { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; padding-top: 22px; border-top: 1px solid var(--ks-line); max-width: 44ch; }
.door-carry .ks-body { font-size: 15px; }
.door-carry .ks-chips { margin-top: 4px; }
.door-carry .ks-chips > span {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--ks-line-2); color: var(--ks-ink-2);
  font-family: var(--ks-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
}

/* --- the card ------------------------------------------------------------------ */
/* Until kc-signin.js has read the session the form is inert and says so by
   being dimmed. No spinner: the page is already drawn. */
.booting .seg,
.booting form { opacity: .5; pointer-events: none; }

/* The tab strip. One tab is visible today (Create account stays hidden in the
   DOM, see signin.html); the selected one carries the accent rule, the way the
   nav marks the current page. */
.seg { display: flex; gap: 22px; margin: 0; padding: 0 0 14px; border-bottom: 1px solid var(--ks-line); }
.seg button {
  appearance: none; background: none; border: 0; padding: 4px 0 8px; margin-bottom: -15px; cursor: pointer;
  font-family: var(--ks-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ks-ink-3); border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.seg button:hover { color: var(--ks-ink-1); }
.seg button[aria-selected="true"] { color: var(--ks-ink-1); border-bottom-color: var(--ks-acc); }

.door-note { font-size: 14px; line-height: 1.5; color: var(--ks-ink-3); margin: 0; }
/* The note belongs to the sign-in tab: kc-signin.js hides the strip for the
   reset and recovery states and does not know about the note, so it follows. */
.seg[hidden] + .door-note { display: none; }

form { display: flex; flex-direction: column; gap: 18px; }
.ks-field__row .ks-quiet { font-family: var(--ks-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; }

/* The submit sits a little apart from the fields, the quiet routes under it. */
form .ks-cta { margin-top: 6px; }
.door-alt { margin: 0; font-size: 14px; color: var(--ks-ink-3); }
.door-alt .ks-quiet { font-size: 14px; }

/* kc-signin.js writes className = "msg on <kind>" on #msg and #doneMsg, so the
   status line is addressed by those names. Hidden until it has something to
   say; then a plain sentence in the status ink, no box round it. */
.msg { display: none; margin: 0; font-size: 14px; line-height: 1.5; color: var(--ks-ink-2); }
.msg.on { display: block; }
.msg.err  { color: var(--ks-bad); }
.msg.ok   { color: var(--ks-good); }
.msg.info { color: var(--ks-ink-2); }

/* --- the providers (inert until kc-signin.js confirms one is switched on) ------ */
.oauth { display: flex; flex-direction: column; gap: 10px; }
.orline { display: flex; align-items: center; gap: 12px; margin: 4px 0 6px; font-family: var(--ks-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ks-ink-3); }
.orline::before, .orline::after { content: ""; flex: 1 1 0; height: 1px; background: var(--ks-line); }
.pbtn { width: 100%; }
.pbtn svg { flex: 0 0 auto; display: block; }
.pbtn[disabled] { color: var(--ks-ink-2); cursor: default; transform: none; }
.pbtn[disabled]:hover { border-color: var(--ks-line-2); }
.pbtn[disabled] svg { opacity: .55; }
.oauth.preview .pbtn[disabled] { color: var(--ks-ink-1); }
.oauth.preview .pbtn[disabled] svg { opacity: 1; }
.onote { margin: 4px 0 0; font-size: 13px; line-height: 1.55; color: var(--ks-ink-3); }

/* --- terminal states: link sent, password saved, already signed in, dead link -- */
.done { display: flex; flex-direction: column; gap: 16px; }
.done .glyph {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 999px;
  border: 1px solid var(--ks-good); color: var(--ks-good);
}
.done .glyph.wait { border-color: var(--ks-acc); color: var(--ks-acc); }
.done .ks-body { font-size: 15px; }
.door-who { display: flex; align-items: center; gap: 12px; }
.door-who .av {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--ks-acc); color: var(--ks-acc);
  font-weight: 600; font-size: 14px; text-transform: uppercase;
}
.door-who .txt { min-width: 0; }
.door-who .txt b { display: block; font-weight: 600; font-size: 14px; line-height: 1.3; color: var(--ks-ink-1); word-break: break-word; }
.door-who .txt span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ks-ink-3); }

/* --- what happens to what you type here ------------------------------------------ */
.truth { padding-top: 6px; border-top: 1px solid var(--ks-line); }
.truth summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  min-height: 40px; font-size: 14px; color: var(--ks-ink-3);
}
.truth summary::-webkit-details-marker { display: none; }
.truth summary::before { content: "+"; width: 1em; text-align: center; color: var(--ks-acc); transition: transform .18s ease; }
.truth[open] summary::before { transform: rotate(45deg); }
.truth summary:hover { color: var(--ks-ink-1); }
.truth ul { margin: 4px 0 8px; padding: 0 0 0 18px; display: grid; gap: 10px; }
.truth li { font-size: 13px; line-height: 1.55; color: var(--ks-ink-3); }
.truth li::marker { color: var(--ks-acc); }

.door-legal { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--ks-ink-3); }
.door-legal a { color: var(--ks-acc); }

/* --- foot ------------------------------------------------------------------------ */
.door-foot { padding: 20px var(--ks-gutter) calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ks-line); display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: baseline; }
.door-foot .ks-note { flex: 1 1 auto; }

/* --- spinner inside the submit while a request is out ------------------------------ */
.spin { display: inline-block; width: 18px; height: 18px; border-radius: 999px; border: 2px solid currentColor; border-right-color: transparent; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes kcDoorSpin { to { transform: rotate(360deg); } }
  .spin { animation: kcDoorSpin .7s linear infinite; }
}

/* --- phone ------------------------------------------------------------------------ */
/* The brand already goes home, so the third link steps out where the nav is
   narrow; the skin lets the row scroll, but a clipped link reads as a bug. */
@media (max-width: 760px) { .door-nav__home { display: none; } }
/* Requested for kc-landing-skin.css: the brand steps down on a phone so the
   two remaining links fit without the row scrolling. */
@media (max-width: 480px) { .ks-nav__brand { font-size: 16px; letter-spacing: 0.12em; } .ks-nav__links { gap: 12px; } }
@media (max-width: 900px) {
  .ks-door { min-height: 0; padding-block: 36px 56px; gap: 32px; }
  .door-invite { gap: 18px; }
  .door-invite .ks-h1 { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .seg button, .truth summary::before { transition: none; }
}

/* THE GROUND IS THE LANDING'S. Flat #0b0a14 over kc-uplift's aurora --page, and
   the skin's plate and lines pinned to the landing literals (founder,
   2026-09-17: "it should be space black"). */
:root, body.ks { background: #0b0a14 !important; }
:root { --ks-bg: #0b0a14; --ks-plate: rgba(20, 18, 32, 0.66); --ks-line: rgba(236, 231, 223, 0.07); --ks-line-2: rgba(236, 231, 223, 0.18); }