/* ============================================================================
   STELLAXIS PORTAL STYLESHEET — Brand v2.1, the canonical web tokens
   ----------------------------------------------------------------------------
   Source of truth: OneDrive …/Marketing and Branding/Stellaxis_Brand_Guide_v2.1.md
   (CANONICAL 2026-07-21). Derived from the locked exemplars: the Super 8 login
   + stellaxis.ca. This file is the Wave-1 deliverable of the brand changeover:
   converted surfaces import it instead of hand-restyling.

   Hosted:   https://stellaxis.ca/stellaxis-home/brand/stellaxis-portal.css
   In-repo:  /stellaxis-home/brand/stellaxis-portal.css (same site serves all
             portal domains). Other repos (admin, team-auctions) link the
             hosted URL — do not fork per-surface copies.

   Class prefix `sx-` so it can layer over legacy CSS during a page's
   conversion. RULE: a page converts fully or stays legacy — never half.
   v1.0 · 2026-07-22 · owners Jesse + Alex
   ============================================================================ */

/* Fonts — Proxima Nova via the contractor Typekit kit; Geologica + the honest
   fallback via Google. Self-contained files (decks/boards) embed b64 instead. */
@import url("https://use.typekit.net/orx2ngk.css");
@import url("https://fonts.googleapis.com/css2?family=Geologica:wght@300;400;500;600&family=Nunito+Sans:wght@400;600;700&display=swap");

:root {
  /* The six — two sanctioned jobs each (guide §2) */
  --sx-deep-blue: #05254c;  /* hero/top-bar fields · primary buttons + heading ink on white */
  --sx-gold:      #ddc774;  /* kickers/bars/actives on deep blue · structure only on white */
  --sx-black:     #0a1321;  /* dark gradient anchor · footer/chrome fields */
  --sx-sky:       #62a2ef;  /* links/secondary emphasis on dark · chart accent (shapes, not text) */
  --sx-gold-dark: #ba9e5a;  /* the working gold on LIGHT fields (eyebrows, borders, buttons) */
  --sx-gold-pale: #fbf095;  /* gradient sheen only — never text */
  --sx-sky-t1:    #81b5f2;  /* derived tints */
  --sx-sky-t2:    #9dc4f5;

  /* Official gradients */
  --sx-grad-background: linear-gradient(135deg, #0a1321 0%, #05254c 55%, #123a6b 100%);
  --sx-grad-gold: linear-gradient(100deg, #ba9e5a 0%, #fbf095 50%, #ba9e5a 100%);

  /* Working neutrals (from the exemplars) */
  --sx-white: #ffffff;
  --sx-line-dark: rgba(255, 255, 255, 0.12);   /* hairlines on deep blue */
  --sx-line-light: #e3e0d8;                    /* hairlines on white/cream */
  --sx-ink: #23303f;                           /* body ink on light fields */

  --sx-font-web: "proxima-nova", "Nunito Sans", Arial, sans-serif;
  --sx-font-head: "Geologica", "Trebuchet MS", Arial, sans-serif;
}

/* ── Base — THE 16px FLOOR IS ABSOLUTE (guide §1) ──────────────────────────
   No HTML text below 16px on any surface. Labels get weight + letter-spacing
   at ≥16px, never smaller sizes. clamp() minimums ≥16px. */
.sx-body {
  margin: 0;
  font-family: var(--sx-font-web);
  font-size: 16px;
  line-height: 1.55;
  color: var(--sx-ink);
  -webkit-font-smoothing: antialiased;
}
.sx-body a { color: var(--sx-deep-blue); }
.sx-on-dark { color: var(--sx-white); }
.sx-on-dark a { color: var(--sx-sky); text-decoration: none; }  /* 5.8:1 */

/* ── Type roles ──────────────────────────────────────────────────────────────
   Web headings = Geologica. CIM-class pages/decks: titles/section heads =
   Proxima Nova 700 (28px+); display numbers = Geologica 300 (never bold data
   numerals); kickers = Geologica 500 uppercase — labels whisper, numbers carry. */
.sx-h1, .sx-h2, .sx-h3 {
  font-family: var(--sx-font-head);
  font-weight: 600;
  color: var(--sx-deep-blue);
  margin: 0 0 0.35em;
}
.sx-h1 { font-size: clamp(28px, 4vw, 40px); }
.sx-h2 { font-size: clamp(22px, 3vw, 30px); }
.sx-h3 { font-size: 19px; }
.sx-on-dark .sx-h1, .sx-on-dark .sx-h2, .sx-on-dark .sx-h3 { color: var(--sx-white); }

.sx-cim-title {           /* CIM-class section heads (700). Deck/presentation titles
                             are Proxima 400 per the canonical template (rev 2026-07-22). */
  font-family: var(--sx-font-web);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 44px);
  color: var(--sx-deep-blue);
}
/* Stats are LABEL-FIRST CARDS (locked 2026-07-22 — reverses "numbers carry"):
   label on top, number below at reading scale, bordered card w/ gold top rule. */
.sx-stat-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--sx-line-light);
  border-top: 3px solid var(--sx-gold-dark);
  border-radius: 10px;
  padding: 14px 18px;
  background: #fff;
}
.sx-stat-card .sx-kicker { font-size: 16px; }
.sx-display-num {         /* the number inside a stat card — light, never bold */
  font-family: var(--sx-font-head);
  font-weight: 300;
  font-size: clamp(32px, 3.2vw, 56px);
  line-height: 1.05;
  margin-top: 8px;
}
.sx-kicker {              /* eyebrows/labels — 16px floor, weight does the work */
  font-family: var(--sx-font-head);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.sx-kicker { color: var(--sx-gold-dark); }          /* on light: dark gold only */
.sx-on-dark .sx-kicker { color: var(--sx-gold); }   /* on deep blue: gold is free (9.1:1) */

/* ── Gold rules (guide §2, locked) ──────────────────────────────────────────
   On white, gold is STRUCTURE ONLY — borders/rules, never words. */
.sx-rule-gold { border: none; border-top: 2px solid var(--sx-gold); margin: 18px 0; }
.sx-callout {
  border-left: 3px solid var(--sx-gold);
  padding-left: 14px;
  color: var(--sx-deep-blue);
}

/* ── Topband lockup (Academy pattern, locked 2026-07-21) ────────────────────
   Deep-blue bar · wordmark + star-and-rings composite (white cuts) · gold rule.
   Assets: /stellaxis-home/brand/ (same folder as this file). */
.sx-topbar {
  background: var(--sx-deep-blue);
  border-bottom: 2px solid var(--sx-gold);
  position: sticky;
  top: 0;
  z-index: 50;
}
.sx-topbar-in {
  max-width: 1080px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.sx-topbar img.sx-wm { height: 24px; width: auto; display: block; }
.sx-topbar img.sx-composite { height: 34px; width: auto; display: block; }
.sx-topbar nav { display: flex; gap: 4px; margin-left: auto; }
.sx-topbar nav a {
  color: var(--sx-white);
  opacity: 0.88;
  font-size: 16px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 6px;
  text-decoration: none;
}
.sx-topbar nav a:hover { opacity: 1; background: rgba(255, 255, 255, 0.08); }
.sx-topbar nav a.on { opacity: 1; box-shadow: inset 0 -2px 0 var(--sx-gold); }

/* ── Buttons ────────────────────────────────────────────────────────────────
   Gold fill = the ONE money action per view, always deep-navy text (white on
   gold fails contrast). Exemplar: the Sign In pill on the Super 8 login. */
.sx-btn {
  display: inline-block;
  font-family: var(--sx-font-web);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 12px 30px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  background: var(--sx-deep-blue);
  color: var(--sx-white);
  transition: opacity 0.2s;
}
.sx-btn:hover { opacity: 0.9; }
.sx-btn-gold { background: var(--sx-gold); color: var(--sx-deep-blue); }
.sx-on-light .sx-btn-gold, .sx-btn-gold.on-light { background: var(--sx-gold-dark); color: var(--sx-white); }

/* Sign-in standard (Jesse, 2026-07-22): EVERY portal login converts to this —
   centered auto-width pill, NOT full-width. */
.sx-btn-signin {
  display: block;
  width: auto;
  min-width: 170px;
  margin: 14px auto 0;
  padding: 12px 38px;
  background: var(--sx-gold);
  color: var(--sx-deep-blue);
  border: none;
  border-radius: 8px;
  font-family: var(--sx-font-web);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
}

/* ── Form fields (from the login exemplar, dark fields) ─────────────────────*/
.sx-on-dark .sx-field input {
  width: 100%;
  padding: 13px 16px;
  background: rgba(10, 19, 33, 0.55);
  border: 1px solid var(--sx-line-dark);
  border-radius: 8px;
  color: var(--sx-white);
  font-family: var(--sx-font-web);
  font-size: 16px;
  outline: none;
}
.sx-on-dark .sx-field input:focus { border-color: var(--sx-gold); }

/* ── Accessibility ──────────────────────────────────────────────────────────*/
.sx-btn:focus-visible, .sx-btn-signin:focus-visible, .sx-topbar nav a:focus-visible {
  outline: 2px solid var(--sx-sky);
  outline-offset: 2px;
}

/* ── Mobile (all projects: single-column, touch-friendly, 16px floor) ───────*/
@media (max-width: 768px) {
  .sx-topbar-in { flex-wrap: wrap; padding: 10px 14px 8px; }
  .sx-topbar nav { width: 100%; order: 10; gap: 2px; padding-top: 4px; flex-wrap: wrap; }
}