/* ============================================================================
   BG SERVICE GATE — shared stylesheet
   ----------------------------------------------------------------------------
   THE SINGLE SOURCE. Edit here, never in a gate's assets/ copy.
   ./sync.sh mirrors ALL of _shared/ into each gate's assets/ (rsync --delete:
   deletions propagate). Brand-identity files (favicons, wordmark, og image)
   are NOT shared — they are per-brand and live at each gate's root.

   THE REGISTER RULE (corrected 2026-07-25 after Steve's review):

     One visual system, three registers — and the TYPE CONSTITUTION IS THE
     SYSTEM (flagship style-guide §03). Its datum: ALL running text is
     Source Serif 4. Tomorrow's constitutional jobs are the wordmark, CTAs,
     and assertion moments — it NEVER sets a paragraph, on any page, so it
     never sets one here. (The first build "subtracted" Source Serif and let
     body copy fall to Tomorrow — an off-system render that exists nowhere
     else in the brand. Wrong; do not repeat it.)

     What actually subordinates a gate is REGISTER, not typeface removal:
     - a few lines of running text, no editorial moments, no display serif;
     - components are the flagship's components, verbatim (.btn-primary,
       .context-link recipes below) — never freehand variants;
     - the voltage accent has exactly ONE use: the sign-in action.

   CONTRAST LAW (WCAG AA on paper #FAFAF7):
     --ink-tertiary #6B6B68 = 5.11:1 — the floor for body-size text.
     --ink-quiet #A8A6A0    = 2.33:1 — DECORATION ONLY, never text.
     The sign-in button is the flagship .btn-primary component verbatim
     (system consistency is the law; its contrast profile is the flagship's
     to change, not a gate's to fork).

   Tokens are copied verbatim from the flagship's assets/binary-glyph-style.css
   §01. Synced 2026-07-25.
   ========================================================================= */


/* ---- 00 — FONTS (self-hosted; no cross-origin dependency, by design) ----
   The gate must render when something else is broken. It fetches nothing from
   binaryglyph.com. Paths are relative to this file's location in assets/.
   Every declared face is used: Source Serif 4 roman (running text) + italic
   (the context link), Tomorrow 700 (mark, button), JetBrains Mono 400
   (eyebrow). Ship nothing unused. */

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('fonts/source-serif-4/source-serif-4-roman.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url('fonts/source-serif-4/source-serif-4-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Tomorrow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/tomorrow/tomorrow-700.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/jetbrains-mono/jetbrains-mono-400.woff2') format('woff2');
}


/* ---- 01 — TOKENS (subset; flagship §01 verbatim) ---- */

:root {
  --bg-paper:      #FAFAF7;
  --bg-cream:      #F4F2EB;
  --ink-black:     #0A0A0A;
  --ink-secondary: #1F1F1F;
  --ink-tertiary:  #6B6B68;
  --ink-quiet:     #A8A6A0;  /* decoration only — 2.33:1 on paper, never text */
  --rule:          #D4D2CC;
  --rule-soft:     #E8E6E0;
  --accent:        #DC4A1F;
  --accent-deep:   #B23A14;

  --font-editorial:  'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-technical:  'Tomorrow', system-ui, -apple-system, sans-serif;
  --font-mono:       'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --type-body:       clamp(16px, 0.55vw + 0.85rem, 18px);   /* reading body — every normal paragraph, every page */
  --type-small:      clamp(13px, 0.30vw + 0.73rem, 14px);   /* labels, cells */

  --tracking-caps-tech: 0.06em;   /* All-caps Tomorrow small sizes */

  --space-base:      16px;
  --space-loose:     26px;
  --space-wide:      42px;

  --motion-quick:    150ms;
  --ease-default:    cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out:        cubic-bezier(0.0, 0.0, 0.2, 1);
}


/* ---- 02 — BASE ---- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* Centering lives on the CHILD (margin: auto), not on justify-content, so an
   overflowing viewport can never clip the top of the page unreachably. svh
   line second: it wins where supported and sidesteps the iOS 100vh toolbar
   overhang; vh remains as the fallback. Running text is Source Serif by
   constitution (§03 datum). */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  background: var(--bg-paper);
  color: var(--ink-secondary);
  font-family: var(--font-editorial);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}


/* ---- 03 — THE SCREEN ---- */

.gate {
  width: 100%;
  max-width: 32rem;
  margin: auto;
  padding: 3rem 1.5rem;
}

/* The mark is lowercase by law: the portal renders "autosponse" lowercase and
   the historical wordmark was lowercase. The gate matches the seam, not the
   prose register (running text writes "Autosponse"). */
.gate__mark {
  margin: 0;
  font-family: var(--font-technical);
  font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 3vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink-black);
}

/* The mono strip is the technical-register signal: it says "service surface,"
   not "practice site," before a word of copy is read. */
.gate__eyebrow {
  margin: 0.9rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
}

.gate__rule {
  height: 1px;
  margin: 1.75rem 0;
  border: 0;
  background: var(--rule);
}

.gate__lede {
  margin: 0 0 0.85rem;
  font-size: var(--type-body);
  color: var(--ink-secondary);
}

.gate__note {
  margin: 0;
  font-size: var(--type-small);
  color: var(--ink-tertiary);
}


/* ---- 04 — THE ONE ACTION ----
   The flagship .btn-primary component, verbatim (system components are never
   forked on a gate). Only the class name differs. If a gate ever needs a
   second action, copy the flagship .btn-secondary recipe then — do not keep
   it here unused. (Canon 2026-07-26: no client is given webmail, so SHW has
   exactly one sign-in like every other gate.) */

.gate__action { margin: 2rem 0 0; display: flex; flex-wrap: wrap; gap: 12px; }

.gate__signin {
  display: inline-block;
  background: var(--accent);
  color: var(--bg-paper);
  text-decoration: none;
  font-family: var(--font-technical);
  font-weight: 700;
  font-size: var(--type-small);
  letter-spacing: var(--tracking-caps-tech);
  text-transform: uppercase;
  padding: var(--space-base) var(--space-loose);
  border: none;
  cursor: pointer;
  transition: background var(--motion-quick) var(--ease-default);
  min-height: 44px;  /* Accessibility: minimum touch target */
}
.gate__signin:hover,
.gate__signin:focus {
  background: var(--accent-deep);
  color: var(--bg-paper);
}
.gate__signin:active {
  transform: scale(0.98);
  transition: transform 100ms var(--ease-out), background var(--motion-quick) var(--ease-default);
}


.gate__support {
  margin: 1.1rem 0 0;
  font-size: var(--type-small);
  color: var(--ink-tertiary);
}

/* Hostnames and other technical strings inside support text render in mono —
   that is the mono face's constitutional job (technical marks), and a client
   matching a bounce header against the page needs the string exact. */
.gate__support code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}


/* ---- 05 — THE CONTEXT LINK ----
   The flagship .context-link component, verbatim (§14: the closing paragraph
   hands the reader to the next surface — here, the practice's email
   discipline on binaryglyph.com). */

.gate__context {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: var(--type-body);
  color: var(--ink-tertiary);
  margin-top: var(--space-wide);
  padding-top: var(--space-wide);
  border-top: 1px solid var(--rule-soft);
}
.gate__context a {
  color: var(--ink-secondary);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--rule);
}
.gate__context a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}


/* ---- 06 — ATTRIBUTION (the colophon; the context link above carries the
        rule, so this block is borderless) ---- */

.gate__operator {
  margin: 1.4rem 0 0;
  font-size: var(--type-small);
  color: var(--ink-tertiary);
}

.gate__operator p { margin: 0 0 0.3rem; }
.gate__operator p:last-child { margin-bottom: 0; }
.gate__operator a { color: var(--ink-tertiary); }

a { color: var(--ink-black); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--accent-deep); }


/* ---- 07 — FOCUS + MOTION ---- */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}