/* threshold.css -- THE THRESHOLD: the sign-in page in the Midnight skin (Tier A step 3,
   B-CODE; ORDERS_2026-10-10 B2; Site Design Spec v1_1, whose normative render is
   directive/design/sow_design_concept_v2.html, corpus C-6509).

   SERVED ONLY WHILE ROK_MAKEOVER IS ON, as /app/threshold.css, after /app/tokens.css
   (execution/engines/routes/makeover_routes.py, ASSETS). Flag off, both 404 and the
   sign-in page is exactly today's page. Routing RULED by Lane A, D53 (option 1, the
   #270 / corpus C-6509 precedent).

   PRESENTATION ONLY. Every rule is scoped to the threshold's two pages, sign-in and sign-up
   (body[data-page] "signin" or "signup"; sign-up joined in the auth makeover, Lane A order
   2026-10-18, corpus C-6921), so linking this file anywhere else changes nothing. It
   changes no copy, no field and no behaviour. It reveals the three `hidden` threshold
   elements and dresses what is already there. The display lines "Leave the library." and
   "Enter the war room" are the founder's ruling (D53), and they live in signin.html and
   signup.html, not here.

   tokens.css redefines --ink as the PARCHMENT ink (#241E12). intake.css's chrome reads
   --ink as its light text colour, so the midnight half re-scopes --ink and --ink-soft to
   bone. The parchment band sits outside that scope and keeps the root's ink.

   MOTION (spec v1_1 section 5, inventory v2): the threshold seam pulses (4s), and buttons lift
   on hover and press 1px down. The gold button's shine sweep is retired: it crossed the
   button's own label (the living surface's law, corpus C-6932), as it did on the lander's
   CTA. Inputs brighten their seam on focus. Under prefers-reduced-motion, nothing loops. */

body:is([data-page="signin"], [data-page="signup"]) {
  min-height: 100vh;
  color: var(--bone);
  font-family: "Albert Sans", system-ui, sans-serif;
  background:
    radial-gradient(1100px 620px at 18% -8%, rgba(19,30,56,.95), transparent 62%),
    radial-gradient(900px 560px at 92% 12%, rgba(13,21,38,.9), transparent 60%),
    var(--g1);
}

/* the midnight half reads bone; the parchment band keeps the root's ink */
body:is([data-page="signin"], [data-page="signup"]) header,
body:is([data-page="signin"], [data-page="signup"]) footer,
body:is([data-page="signin"], [data-page="signup"]) .card,
body:is([data-page="signin"], [data-page="signup"]) .status,
body:is([data-page="signin"], [data-page="signup"]) .th-enter {
  --ink: var(--bone);
  --ink-soft: var(--bone-mute);
  --line: var(--glass-line);
}

body:is([data-page="signin"], [data-page="signup"]) header h1 { font-family: "Cinzel", serif; font-weight: 700;
  letter-spacing: .08em; color: var(--bone); }
body:is([data-page="signin"], [data-page="signup"]) header .tag { color: var(--gold); border-color: var(--glass-line); }
body:is([data-page="signin"], [data-page="signup"]) a { color: var(--bone); text-decoration-color: var(--gold-dim); }
body:is([data-page="signin"], [data-page="signup"]) a:hover { text-decoration-color: var(--gold-hi); }

/* THE THRESHOLD: one panel, parchment above, midnight below, the gold seam between */
body:is([data-page="signin"], [data-page="signup"]) main {
  margin-top: 1.25rem;
  border: 1px solid var(--glass-line);
  border-radius: var(--r-panel);
  overflow: hidden;
  background: linear-gradient(180deg, var(--g2), var(--g1));
  padding: 0 1.5rem 1.5rem;
}
body:is([data-page="signin"], [data-page="signup"]) .th-top[hidden],
body:is([data-page="signin"], [data-page="signup"]) .th-seam[hidden],
body:is([data-page="signin"], [data-page="signup"]) .th-enter[hidden] { display: block; }

body:is([data-page="signin"], [data-page="signup"]) .th-top {
  margin: 0 -1.5rem;
  padding: 1.6rem 1.85rem;
  background: var(--parchment);
  color: var(--ink);
  font-family: "Cinzel", serif;
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: .04em;
}
body:is([data-page="signin"], [data-page="signup"]) .th-seam {
  height: 2px;
  margin: 0 -1.5rem;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold-hi), var(--gold-dim));
  box-shadow: 0 0 16px rgba(200,163,90,.5);
}
body:is([data-page="signin"], [data-page="signup"]) .th-enter {
  margin: 1.5rem 0 .25rem;
  font-family: "Cinzel", serif;
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}

/* the two cards: glass on midnight */
body:is([data-page="signin"], [data-page="signup"]) .card {
  margin-top: 1rem;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-card);
  backdrop-filter: blur(8px);
}
body:is([data-page="signin"], [data-page="signup"]) .card h2 { font-family: "Cinzel", serif; font-weight: 600;
  color: var(--bone); }
body:is([data-page="signin"], [data-page="signup"]) .hint { color: var(--bone-mute); }

body:is([data-page="signin"], [data-page="signup"]) input {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-ctrl);
  padding: 12px 14px;
  color: var(--bone);
  font: 400 15px "Albert Sans", system-ui, sans-serif;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
body:is([data-page="signin"], [data-page="signup"]) .row + .row { margin-top: .7rem; }
/* the action stands apart from the fields (Lane A D63, the founder's staging note: on /signup the
   password field and Create account touched). The button's row carries its own 20 px, never its
   neighbour's .7rem: it touched while an admitted browser hid sign-up's invite field between the two
   rows (both are gone with the beta token, #510), and the fields' own spacing is not an action's. */
body:is([data-page="signin"], [data-page="signup"]) form > .row:has(> button.primary) { margin-top: 1.25rem; }
/* the line under the action (sign-up's "We send a confirmation link...", sign-in's two links) centres in the
   space between the button's bottom and the card's bottom edge (the founder's verdict on the doors, Lane A
   D63): its margin above is the card's 1rem bottom padding and 1px border below it, and none below. */
body:is([data-page="signin"], [data-page="signup"]) .card > form + .hint { margin: calc(1rem + 1px) 0 0; }
body:is([data-page="signin"], [data-page="signup"]) input::placeholder { color: var(--bone-mute); }
body:is([data-page="signin"], [data-page="signup"]) input:focus { border-color: var(--gold); box-shadow: var(--glow-soft);
  outline: none; }

/* the gold button: lift on hover, 1px down on press (its shine sweep is retired: it crossed
   the button's own label, the living surface's law; the auth makeover, corpus C-6921) */
body:is([data-page="signin"], [data-page="signup"]) button.primary {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: var(--r-ctrl);
  padding: 12px 22px;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-dim));
  color: var(--g1);
  font: 600 15px "Albert Sans", system-ui, sans-serif;
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
body:is([data-page="signin"], [data-page="signup"]) button.primary:hover { transform: translateY(-2px);
  box-shadow: var(--glow); }
body:is([data-page="signin"], [data-page="signup"]) button.primary:active { transform: translateY(1px); }
body:is([data-page="signin"], [data-page="signup"]) button.primary:focus-visible { outline: 2px solid var(--gold-hi);
  outline-offset: 2px; }

body:is([data-page="signin"], [data-page="signup"]) footer .legal { color: var(--bone-mute); }

@media (prefers-reduced-motion: no-preference) {
  body:is([data-page="signin"], [data-page="signup"]) .th-seam { animation: th-seam 4s ease-in-out infinite; }
}
@keyframes th-seam { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.5); } }

@media (prefers-reduced-motion: reduce) {
  body:is([data-page="signin"], [data-page="signup"]) input,
  body:is([data-page="signin"], [data-page="signup"]) button.primary { transition: none; }
  body:is([data-page="signin"], [data-page="signup"]) button.primary:hover,
  body:is([data-page="signin"], [data-page="signup"]) button.primary:active { transform: none; }
}

@media (max-width: 520px) {
  body:is([data-page="signin"], [data-page="signup"]) main { padding: 0 1rem 1.25rem; }
  body:is([data-page="signin"], [data-page="signup"]) .th-top,
  body:is([data-page="signin"], [data-page="signup"]) .th-seam { margin: 0 -1rem; }
  body:is([data-page="signin"], [data-page="signup"]) .th-top { padding: 1.3rem 1.25rem; }
}