/* ==========================================================================
   THE WATTER GAUGE — Board Intelligence
   Official brand system. Colors, gradient, and typography per
   Watter Brand Standards.
   ========================================================================== */

/* ----- Good Sans (official Watter typeface) ----- */
@font-face {
  font-family: 'Good Sans';
  src: url('/brand/fonts/GoodSans-Thin.woff2') format('woff2'), url('/brand/fonts/GoodSans-Thin.woff') format('woff');
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Good Sans';
  src: url('/brand/fonts/GoodSans-ExtraLight.woff2') format('woff2'), url('/brand/fonts/GoodSans-ExtraLight.woff') format('woff');
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Good Sans';
  src: url('/brand/fonts/GoodSans-Light.woff2') format('woff2'), url('/brand/fonts/GoodSans-Light.woff') format('woff');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Good Sans';
  src: url('/brand/fonts/GoodSans-Regular.woff2') format('woff2'), url('/brand/fonts/GoodSans-Regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Good Sans';
  src: url('/brand/fonts/GoodSans-Medium.woff2') format('woff2'), url('/brand/fonts/GoodSans-Medium.woff') format('woff');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Good Sans';
  src: url('/brand/fonts/GoodSans-Bold.woff2') format('woff2'), url('/brand/fonts/GoodSans-Bold.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Good Sans';
  src: url('/brand/fonts/GoodSans-Heavy.woff2') format('woff2'), url('/brand/fonts/GoodSans-Heavy.woff') format('woff');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Good Sans';
  src: url('/brand/fonts/GoodSans-Black.woff2') format('woff2'), url('/brand/fonts/GoodSans-Black.woff') format('woff');
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {
  /* Primary brand colors (per Brand Standards p.35-36) */
  --pure-white: #FFFFFF;
  --onyx: #000000;
  --silver: #B1B1BC;
  --cobalt: #1E00CE;

  /* Official gradient colors — dark maroon → red → orange → gold → sky */
  --grad-maroon: #441212;
  --grad-red: #E03C23;
  --grad-orange: #FF8524;
  --grad-gold: #FDCC3F;
  --grad-sky: #B3E3F3;

  /* Print/alt palette */
  --infinity: #235BA8;
  --deep-blue: #003DA5;

  /* Dark UI surfaces (derived from Onyx) */
  --surface-0: #000000;
  --surface-1: #0a0a0c;
  --surface-2: #111116;
  --surface-3: #1a1a22;
  --surface-4: rgba(255, 255, 255, 0.04);
  --surface-5: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.09);
  --divider-strong: rgba(255, 255, 255, 0.18);

  /* Text tokens */
  --text-primary: #FFFFFF;
  --text-secondary: #B1B1BC;
  --text-tertiary: rgba(177, 177, 188, 0.65);

  /* Semantic */
  --success: #36B37E;
  --danger: #E03C23;
  --warning: #FDCC3F;
  --info: #B3E3F3;

  /* Gradients */
  --grad-brand: linear-gradient(135deg, #441212 0%, #E03C23 25%, #FF8524 55%, #FDCC3F 80%, #B3E3F3 100%);
  --grad-bar: linear-gradient(90deg, #B3E3F3 0%, #FDCC3F 25%, #FF8524 50%, #E03C23 75%, #441212 100%);
  --grad-cobalt: linear-gradient(135deg, #1E00CE 0%, #3315E3 100%);
  --grad-cool: linear-gradient(135deg, #1E00CE 0%, #235BA8 100%);
  --grad-atmosphere: radial-gradient(ellipse at 15% 0%, rgba(30, 0, 206, 0.18) 0%, transparent 50%),
                     radial-gradient(ellipse at 85% 100%, rgba(253, 204, 63, 0.08) 0%, transparent 50%),
                     radial-gradient(ellipse at 55% 50%, rgba(224, 60, 35, 0.06) 0%, transparent 60%);

  /* Typography per Brand Standards p.33 */
  --font-body: 'Good Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Layout */
  --pad-page: clamp(16px, 3vw, 32px);
  --max-page: 1440px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Backward-compat aliases (used by existing page-level inline styles) */
  --obsidian: #111116;
  --platinum: #e9e9ef;
  --cobalt-bright: #2a13e8;
  --magenta: #E03C23;
  --amber: #FF8524;
  --gold: #FDCC3F;
  --sky: #B3E3F3;
  --ink: #1a1a22;
  --graphite: #1a1a22;
  --mint: #36B37E;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: var(--onyx);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

body {
  background-image: var(--grad-atmosphere);
  background-attachment: fixed;
}

::selection { background: var(--cobalt); color: var(--pure-white); }
:focus-visible { outline: 2px solid var(--grad-gold); outline-offset: 2px; }

a { color: var(--grad-sky); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--pure-white); }

/* Official typography system per brand p.33 */
/* Headline: Good Sans Medium, Title Case, tracking: -20pt (-0.03em) */
h1, h2, h3, .headline {
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
/* Subhead: Good Sans Medium, ALL CAPS, tracking: 0 */
.subhead {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
/* Specialty / Tagline: Good Sans Black, ALL CAPS, tracking: 100pt (+0.1em) */
.tagline, .specialty {
  font-family: var(--font-body);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
/* Body: Good Sans Regular, sentence case, leading 40% of size (1.4) */
p, .body { font-weight: 400; line-height: 1.5; }

/* Brand elements */
.grad-bar { height: 3px; background: var(--grad-bar); }
.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.mono { font-family: var(--font-mono); }

/* Buttons */
.btn {
  font-family: inherit; font-size: 11px; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 12px 20px; cursor: pointer; border: 1px solid transparent;
  background: transparent; color: var(--text-primary); transition: all 0.18s var(--ease-out);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none; white-space: nowrap; border-radius: 0;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn-primary {
  background: var(--cobalt); color: var(--pure-white); border-color: var(--cobalt);
}
.btn-primary:hover:not(:disabled) { background: #2a13e8; border-color: #2a13e8; box-shadow: 0 8px 24px rgba(30, 0, 206, 0.5); }

.btn-brand {
  background: var(--grad-brand); color: var(--pure-white);
  box-shadow: 0 6px 22px rgba(224, 60, 35, 0.3);
}
.btn-brand:hover:not(:disabled) { box-shadow: 0 10px 28px rgba(224, 60, 35, 0.45); }

.btn-ghost { border-color: var(--divider-strong); color: var(--text-secondary); }
.btn-ghost:hover:not(:disabled) { border-color: var(--silver); color: var(--pure-white); background: rgba(255, 255, 255, 0.03); }

.btn-danger { border-color: rgba(224, 60, 35, 0.35); color: var(--grad-red); }
.btn-danger:hover:not(:disabled) { background: rgba(224, 60, 35, 0.12); border-color: var(--grad-red); }

.btn-sm { padding: 8px 14px; font-size: 10px; }
.btn-lg { padding: 16px 28px; font-size: 12px; }

/* Inputs */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--text-secondary); font-weight: 500;
}
.field-hint { font-size: 11px; color: var(--text-secondary); }
.input, .textarea, .select {
  font-family: inherit; font-size: 14px; color: var(--text-primary);
  background: rgba(0, 0, 0, 0.45); border: 1px solid var(--divider-strong);
  padding: 12px 14px; transition: border-color 0.2s, background 0.2s;
  border-radius: 0;
}
.input:hover, .textarea:hover, .select:hover { border-color: rgba(255, 255, 255, 0.28); }
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--cobalt); background: rgba(0, 0, 0, 0.6);
}
.input::placeholder, .textarea::placeholder { color: rgba(177, 177, 188, 0.5); }
.textarea { resize: vertical; min-height: 96px; line-height: 1.5; }

/* Cards / surfaces */
.card {
  background: var(--surface-4); border: 1px solid var(--divider);
}
.card-pad { padding: 24px; }

/* Chip/badge */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 9px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 10px; border: 1px solid var(--divider-strong); color: var(--text-secondary);
}
.chip-admin { border-color: rgba(253, 204, 63, 0.4); color: var(--grad-gold); background: rgba(253, 204, 63, 0.08); }
.chip-member { border-color: rgba(54, 179, 126, 0.4); color: var(--success); background: rgba(54, 179, 126, 0.08); }
.chip-pending { border-color: rgba(253, 204, 63, 0.4); color: var(--grad-gold); background: rgba(253, 204, 63, 0.08); }
.chip-rejected { border-color: rgba(224, 60, 35, 0.4); color: var(--grad-red); background: rgba(224, 60, 35, 0.08); }

/* Toast */
.toast-wrap { position: fixed; top: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast {
  pointer-events: auto; background: var(--surface-2); border: 1px solid var(--divider-strong);
  border-left: 3px solid var(--cobalt); padding: 14px 18px; min-width: 280px;
  max-width: 420px; font-size: 13px; line-height: 1.4;
  animation: toast-in 0.32s var(--ease-out);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
}
.toast.success { border-left-color: var(--success); }
.toast.error { border-left-color: var(--grad-red); }
.toast.info { border-left-color: var(--grad-sky); }
@keyframes toast-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(16px); } }
.toast.closing { animation: toast-out 0.24s var(--ease-in-out) forwards; }

/* Spinner */
.spinner {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.25); border-top-color: var(--pure-white);
  border-radius: 50%; animation: spin 0.85s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Brand lockup — uses the official logomark SVG */
.brand-lockup { display: flex; align-items: center; gap: 14px; }
.logomark-img { height: 34px; width: auto; display: block; }
.brand-text { display: flex; flex-direction: column; gap: 2px; }
.brand-name {
  font-family: var(--font-body);
  font-size: 14px; font-weight: 900;
  letter-spacing: 0.1em; text-transform: uppercase;
  line-height: 1; color: var(--pure-white);
  white-space: nowrap;
}
@media (max-width: 560px) {
  .brand-name { font-size: 12px; }
  .brand-tag { font-size: 8px; letter-spacing: 0.2em; }
  .logomark-img { height: 28px; }
}
.brand-tag {
  font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--silver); font-weight: 500;
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--divider-strong); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); }

/* Star control */
.star-btn {
  background: transparent; border: 1px solid var(--divider-strong);
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--silver); transition: all 0.18s var(--ease-out);
}
.star-btn:hover { border-color: var(--grad-gold); color: var(--grad-gold); }
.star-btn.starred { background: rgba(253, 204, 63, 0.12); border-color: var(--grad-gold); color: var(--grad-gold); }
.star-btn svg { width: 14px; height: 14px; }

/* Emoji reactions */
.reactions {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  margin-top: 10px;
}
.rxn {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface-4); border: 1px solid var(--divider);
  padding: 3px 10px; font-size: 12px; cursor: pointer; color: var(--text-secondary);
  transition: all 0.15s var(--ease-out); min-height: 26px;
  border-radius: 999px; font-family: inherit;
}
.rxn:hover { border-color: var(--grad-gold); background: rgba(253, 204, 63, 0.08); color: var(--pure-white); transform: translateY(-1px); }
.rxn.mine {
  background: rgba(30, 0, 206, 0.18);
  border-color: var(--cobalt);
  color: var(--pure-white);
}
.rxn-emoji { font-size: 13px; line-height: 1; }
.rxn-count { font-size: 10px; font-weight: 600; font-family: var(--font-mono); }
.rxn-add { color: var(--silver); padding: 3px 8px; }
.rxn-add svg { width: 14px; height: 14px; }
.rxn-add:hover { color: var(--grad-gold); }

.rxn-picker {
  position: absolute; z-index: 200;
  background: var(--surface-2); border: 1px solid var(--divider-strong);
  padding: 6px; display: flex; gap: 2px; flex-wrap: wrap;
  box-shadow: 0 12px 36px rgba(0,0,0,0.6); max-width: 260px;
}
.rxn-pick {
  background: transparent; border: none; font-size: 22px;
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.12s; border-radius: 4px;
}
.rxn-pick:hover { background: var(--surface-5); transform: scale(1.15); }

/* Target comment composer */
.target-comment {
  display: flex; gap: 8px; margin-top: 10px;
}
.target-comment .comment-input {
  flex: 1; padding: 8px 12px; background: rgba(0,0,0,0.3);
  border: 1px solid var(--divider); color: var(--text-primary);
  font: inherit; font-size: 13px; min-height: 36px; resize: vertical;
}
.target-comment .comment-input:focus { outline: none; border-color: var(--cobalt); }
.target-comment button { flex-shrink: 0; }

/* Target comment list (reply thread under an item) */
.target-comments-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.target-comment-item {
  background: var(--surface-4); border-left: 2px solid var(--cobalt);
  padding: 8px 12px; font-size: 13px; line-height: 1.45;
}
.target-comment-meta { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); margin-top: 3px; }
.target-comment-author { color: var(--text-primary); font-weight: 500; }

/* Screen reader only */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}