/* ==========================================================================
   Recordstone -- sign-in screen only.

   Deliberately NOT the Command Center design system. The rest of this app
   (and data/command_center.html) is the dark-navy/silver institutional theme
   documented in .claude/rules/command-center-design.md; this file is a
   different visual language on purpose, scoped to the sign-in screen alone.
   It is loaded ONLY by templates/login.html via base.html's extra_head block,
   so app.css -- which every other page shares -- stays untouched.

   Every selector below is nested under body.page-recordstone. app.css still
   loads first on this page (base.html hardcodes it), so the resets here are
   explicit rather than assumed: app.css sets body background/color/font and a
   corner-glow ::before on .page-branded, which this page does not use.

   Playfair Display is self-hosted (see webapp/static/fonts/). It is NOT
   loaded from Google Fonts: webapp/security.py sends
   `default-src 'self'` with no font-src, so an external stylesheet and font
   files would both be blocked by CSP. Self-hosting keeps the page inside the
   existing policy rather than loosening a deliberately fail-closed header.
   ========================================================================== */

@font-face {
  font-family: "Playfair Display";
  src: url("fonts/playfairdisplay.woff2") format("woff2");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("fonts/playfairdisplay-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Palette values are sampled from the concept reference rather than guessed:
   the panel is a warm near-black (not neutral #0c0c0c), and the headline ink
   and button face are the same off-white. */
body.page-recordstone {
  --rs-black: #14120f;      /* the right-hand panel */
  --rs-bone: #f3f2f2;       /* headline + button face */
  --rs-grey: #8d8d8d;       /* subhead + secondary copy */
  --rs-grey-dim: #6a6a6a;   /* tertiary / dev-mode copy */
  --rs-rule: rgba(255, 255, 255, 0.13);
  --rs-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --rs-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  margin: 0;
  background: var(--rs-black);
  color: var(--rs-bone);
  font-family: var(--rs-sans);
  min-height: 100vh;
}

.rs-split {
  display: grid;
  grid-template-columns: 41% 59%;  /* the reference measures 41.7% */
  min-height: 100vh;
}

/* -- left: the wave, full-bleed, full height ------------------------------ */
.rs-photo {
  position: relative;
  background-color: #000;
  background-image: url("img/recordstone_hero.jpg");
  background-size: cover;
  /* The break sits slightly right of centre in the source frame; favouring
     that side keeps the crest in the panel at narrow column widths. */
  background-position: 58% center;
  background-repeat: no-repeat;
}

/* -- right: the black panel ----------------------------------------------- */
.rs-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px clamp(40px, 5.5vw, 96px);
  background: var(--rs-black);
}

.rs-inner {
  width: 100%;
  /* Sized so the text column keeps roughly the reference's ~3/4 share of the
     panel on a 1920-wide display, rather than sitting as a narrow strip in a
     wide panel. */
  max-width: 820px;
}

/* -- lockup: stone mark + wordmark ---------------------------------------- */
.rs-lockup {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: clamp(48px, 9vh, 104px);
}

.rs-mark {
  /* Sized from the reference, where the tile measures ~6.4% of viewport width
     and stands noticeably taller than the two-line wordmark beside it. */
  width: 100px;
  height: 100px;
  flex: none;
  display: block;
}

.rs-wordmark {
  margin: 0;
  font-family: var(--rs-serif);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0.30em;
  color: var(--rs-bone);
}

.rs-subwordmark {
  margin: 6px 0 0;
  font-family: var(--rs-serif);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.22em;
  color: var(--rs-grey);
}

/* -- headline + subhead ---------------------------------------------------- */
.rs-headline {
  margin: 0;
  font-family: var(--rs-serif);
  font-weight: 700;
  font-size: clamp(32px, 3.5vw, 66px);
  line-height: 1.14;
  letter-spacing: -0.005em;
  color: var(--rs-bone);
}

.rs-subhead {
  margin: clamp(24px, 3.4vh, 38px) 0 0;
  max-width: 50ch;
  font-family: var(--rs-serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(16px, 1.25vw, 20px);
  line-height: 1.55;
  color: var(--rs-grey);
}

/* -- the single action ----------------------------------------------------- */
.rs-action {
  margin-top: clamp(44px, 8vh, 92px);
  padding-top: clamp(32px, 5vh, 52px);
  border-top: 1px solid var(--rs-rule);
}

.rs-signin {
  display: inline-block;
  padding: 24px 46px;  /* ~63px tall, matching the reference button */
  background: var(--rs-bone);
  color: #0a0a0a;
  border: 1px solid var(--rs-bone);
  font-family: var(--rs-serif);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 140ms ease, border-color 140ms ease;
}
.rs-signin:hover,
.rs-signin:focus-visible {
  background: #fff;
  border-color: #fff;
  color: #0a0a0a;
}
.rs-signin:focus-visible {
  outline: 2px solid var(--rs-bone);
  outline-offset: 3px;
}

/* -- quiet states: not-configured warning + dev-mode fallback -------------- */
.rs-note {
  margin: 0;
  max-width: 52ch;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--rs-grey);
}

.rs-dev {
  margin-top: clamp(28px, 4.5vh, 44px);
  padding-top: clamp(20px, 3vh, 28px);
  border-top: 1px solid var(--rs-rule);
}

.rs-dev-label {
  margin: 0 0 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--rs-grey-dim);
}

.rs-dev-note {
  margin: 0 0 14px;
  max-width: 52ch;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--rs-grey-dim);
}

.rs-dev-link {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rs-grey);
  text-decoration: none;
  border-bottom: 1px solid var(--rs-rule);
  padding-bottom: 3px;
}
.rs-dev-link:hover,
.rs-dev-link:focus-visible {
  color: var(--rs-bone);
  border-bottom-color: var(--rs-bone);
}

/* -- narrow viewports: the 40/60 split would become a sliver --------------- */
@media (max-width: 900px) {
  .rs-split { grid-template-columns: 1fr; }
  /* In a short horizontal band, bias up the frame so the crest shows rather
     than a mid-wave crop. */
  .rs-photo { min-height: 34vh; background-position: 58% 22%; }
  .rs-panel { justify-content: flex-start; padding: 48px 28px 64px; }
}

/* -- email sign-in ("magic link"): the secondary path, for people who have --
   -- no Google account. Deliberately quieter than .rs-signin: Google stays  --
   -- the primary action, this is the alternative below it.                  -- */
.rs-magic {
  margin-top: clamp(24px, 3.5vh, 36px);
  padding-top: clamp(20px, 3vh, 28px);
  border-top: 1px solid var(--rs-rule);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  max-width: 52ch;
}

.rs-magic-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rs-grey);
}

.rs-magic-input {
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: 1px solid var(--rs-rule);
  color: var(--rs-bone);
  font-family: var(--rs-sans);
  font-size: 14px;
}

.rs-magic-input::placeholder { color: var(--rs-grey-dim); }

.rs-magic-input:focus-visible {
  outline: 2px solid var(--rs-bone);
  outline-offset: 2px;
  border-color: var(--rs-bone);
}

.rs-magic-submit {
  padding: 14px 28px;
  background: transparent;
  color: var(--rs-bone);
  border: 1px solid var(--rs-rule);
  font-family: var(--rs-serif);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.rs-magic-submit:hover,
.rs-magic-submit:focus-visible {
  border-color: var(--rs-bone);
  background: rgba(255, 255, 255, 0.06);
}

.rs-magic-submit:focus-visible {
  outline: 2px solid var(--rs-bone);
  outline-offset: 3px;
}

/* -- footer: authorized-use notice ---------------------------------------- */
/* One quiet line. It closes the composition (the panel previously just
   stopped) and carries the authorized-use notice a private financial system
   is conventionally expected to state. Sized and coloured to recede -- this
   must never compete with the headline or the sign-in action. */
.rs-foot {
  margin-top: clamp(48px, 8vh, 88px);
  font-size: 12px;
  line-height: 1.7;
  color: var(--rs-grey);
}

.rs-foot p {
  margin: 0;
}