/* Shadow Reapers shared brand. Edit here; run node scripts/sync-brand-theme.mjs. */
:root {
  color-scheme: dark;
  --sr-bg: #090b0e;
  --sr-surface: #101318;
  --sr-raised: #171b22;
  --sr-line: #2a3039;
  --sr-text: #e9edf0;
  --sr-muted: #9ca6b1;
  --sr-accent: #ff5a68;
  --sr-action: #e32636;
  --sr-action-hover: #c8202f;
  --sr-tint: #2a1116;
  --sr-focus: #ff8a94;
  --sr-success: #c8d0d8;
  --sr-warning: #f0c783;
  --bg: var(--sr-bg);
  --panel: var(--sr-surface);
  --panel2: var(--sr-raised);
  --panel3: #1d222a;
  --surface: var(--sr-surface);
  --card: var(--sr-surface);
  --stroke: var(--sr-line);
  --edge: var(--sr-line);
  --line: var(--sr-line);
  --text: var(--sr-text);
  --white: var(--sr-text);
  --muted: var(--sr-muted);
  --soft: var(--sr-muted);
  --dim: var(--sr-muted);
  --faint: #8e98a3;
  --red: var(--sr-accent);
  --red2: var(--sr-action);
  --lime: var(--sr-accent); /* Legacy Company accent name, retained for compatibility. */
  --accent: var(--sr-accent);
  --accentText: #18080c;
  --gold: #e7c8b1;
  --amber: var(--sr-warning);
  --teal: var(--sr-success);
}
html { background: var(--sr-bg); scroll-padding-top: 24px; }
body {
  color: var(--sr-text);
  background: radial-gradient(ellipse at 85% 0%, #e3263614, transparent 44%), var(--sr-bg);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%;
}
::selection { background: #b81c2a; color: white; }
a { color: var(--sr-accent); }
.link { border-color: var(--sr-line); }
:focus-visible { outline: 3px solid var(--sr-focus); outline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--sr-focus); outline-offset: 3px; }
a, button, input, select, summary { touch-action: manipulation; }
button, input, select, textarea { font-family: inherit; }
button, .btn, .refresh, .show-all, summary { min-height: 44px; }
button:not(:disabled), summary { cursor: pointer; }
input, select, textarea { accent-color: var(--sr-action); }
input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea,
.field input, .field select, .field textarea, .payout-fields input, .payout-fields select,
.payout-load select, .payout-person-input, .payout-plan-text, #payout-period,
.vault-controls input, .vault-controls select {
  background: #0b0e12; color: var(--sr-text); border-color: #4a5562;
  border-radius: 9px; min-height: 44px;
}
input::placeholder, textarea::placeholder { color: #8e98a3; opacity: 1; }
.panel, .card, .kpi, .entry, .status-box, .key-card, .login-card, .modal,
.team-person-card, .training-employee-card, .stock-mobile-card, .peer-card,
.performance-person, .insight-person-card, .payout-person {
  background: var(--sr-surface); border-color: var(--sr-line); border-radius: 14px;
}
.panel, .card, .kpi { box-shadow: 0 8px 24px #00000018; }
.payout-summary>div, .statstack div, .xanax-metric { background: var(--sr-raised); border-color: var(--sr-line); }
.payout-summary strong, .card strong, .key-metrics strong { color: var(--sr-text); }
.payout-summary small, .card small, .key-metrics small, .muted, .summary, .sub,
.player small, .number small, .payout-person .payout-person-meta, .payout-person-grid label,
.status-box small, .loading-note { color: var(--sr-muted); }
.btn, .refresh, .show-all, #refreshPage, #refresh-vault, #vault-more, .vault-actions a, .hub-home, .hub-side-link {
  background: var(--sr-tint); color: #ffe1e4; border-color: #7a1f2a; border-radius: 9px;
}
.btn:hover, .refresh:hover, .show-all:hover, #refreshPage:hover, .vault-actions a:hover,
.hub-home:hover, .hub-side-link:hover { background: #3a141b; border-color: var(--sr-accent); color: white; }
.btn.primary, .primary-btn { background: var(--sr-action); color: white; border-color: var(--sr-action); }
.btn.primary:hover, .primary-btn:hover { background: var(--sr-action-hover); color: white; }
.btn.ghost { background: transparent; }
/* Healthy states stay neutral; explicit labels distinguish success from warnings. */
.btn.discord { background: #5865f2; color: white; border-color: #5865f2; }
.tag.good, .success-small, .positive, .kpi-bottom .positive, .healthy, .status-box .healthy { color: var(--sr-success); }
.tag.good { background: var(--sr-raised); }
.peer-tag.close { background: var(--sr-raised); border-color: var(--sr-line); color: var(--sr-text); }
.star-watch-metric strong, .performance-summary strong, .war-faction strong,
.war-outcome, .winner-label, .war-rate strong, .payout-person-grid strong { color: var(--sr-text); }
.war-report-btn { background: var(--sr-tint); border-color: #7a1f2a; color: #ffe1e4; }
.toggleline input { accent-color: var(--sr-action); }
.toast { border-color: var(--sr-line); background: var(--sr-surface); color: var(--sr-text); }
.login-page:before { border-color: #e3263622; box-shadow: 0 0 0 50px #e3263608, 0 0 0 100px #e3263608; }
.tag.warn, .status.warn, .payout-pending { color: var(--sr-warning); }
.tag.danger, .error, .status-box .error { color: #ffabae; }
.notice, .notice.good { background: var(--sr-raised); border-color: var(--sr-line); color: var(--sr-text); }
.notice.warn { background: #2c231b; border-color: #7c6544; color: #efd5ae; }
.notice.info { background: #141a22; border-color: #3d4a5a; color: #d3dbe3; }
.notice.warning { background: #2c231b; border-color: #7c6544; color: #efd5ae; }
.status { background: var(--sr-surface); border-color: var(--sr-line); color: var(--sr-muted); }
.status.warn { background: #2c231b; border-color: #7c6544; }
.brand, .eyebrow, .overline, .top .brand, .card .meta { color: var(--sr-accent); }
.brand-text strong, .brand strong { color: var(--sr-text); }
.sidebar .brand strong { font-size: 14px; line-height: 1.25; }
.sidebar .mark { flex-shrink: 0; font-size: 19px; }
.top nav a, .top-nav a, .toprow a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sr-muted); }
.top nav a:hover, .top-nav a:hover, .toprow a:hover { color: var(--sr-accent); }
.top nav, .top-nav { flex-wrap: wrap; column-gap: 18px; row-gap: 4px; }
.toprow { flex-wrap: wrap; gap: 8px 16px; }
.sidebar, .mobilebar { background: #0c0f13; border-color: var(--sr-line); }
.mark, .big-mark, .war-mark {
  background: url(/brand/emblem.svg) center / contain no-repeat; color: transparent; font-size: 0;
  border: 0; border-radius: 0; box-shadow: none; transform: none; padding: 0;
}
.mark { display: inline-grid; min-width: 36px; min-height: 36px; }
.war-mark { width: 38px; height: 38px; }
.big-mark { width: 72px; height: 72px; }
.nav-link:hover { background: var(--sr-raised); }
.nav-link.active, .chip.active, .chip:hover { background: var(--sr-tint); border-color: #7a1f2a; color: var(--sr-accent); }
.nav-link.active { box-shadow: inset 3px 0 var(--sr-accent); }
.nav-link .pill { background: #e3263644; }
.nav-label { color: #9ca6b1; }
.avatar, .rank, .kpi-symbol, .feed-circle { background: #1d222a; border-color: #3a4350; }
.live-dot { background: var(--sr-success); box-shadow: 0 0 0 4px #c8d0d81a; }
.banner, .training-reset-panel { background: linear-gradient(115deg, #2a1116, #13161b); border-color: #5c1d27; }
.banner:after { border-color: #e3263622; box-shadow: 0 0 0 40px #e3263608, 0 0 0 100px #e3263608; }
.banner .banner-desc, .bignum-label { color: #c8d0d8; }
.banner .stars-filled, .peer-rating .stars-filled { color: var(--gold); }
.login-features span { background: var(--sr-raised); color: var(--sr-muted); }
.login-foot { color: var(--sr-muted); }
.chart { border-color: var(--sr-line); }
.chart:before { border-color: #3a435066; box-shadow: 0 62px 0 #3a435066; }
.bar { background: linear-gradient(180deg, #ff5a68, #b81c2a); }
.bar.current { background: linear-gradient(180deg, #ffc2c7, #c2505c); }
.table th { background: #151920; color: #b9c2cc; }
.table tr:hover td { background: #191e26; }
.table td, .queue-entry, .activity-item, .row, .payout-table td { border-color: var(--sr-line); }
.table td { color: #dfe4e8; }
.activity-item time { color: #9ca6b1; }
.training-card-stats, .team-person-stats, .team-person-bottom { border-color: var(--sr-line); }
.site-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.site-nav a { display: inline-flex; align-items: center; padding: 10px 13px; min-height: 44px; border-radius: 8px; color: #c8d0d8; font-size: 13px; font-weight: 700; }
.site-nav a:hover, .site-nav a[aria-current=page] { background: var(--sr-tint); color: var(--sr-accent); }
.xanax-metric:first-child { background: var(--sr-tint); border-color: #7a1f2a; }
.shell .summary, .tags span { background: var(--sr-surface); }
.xanax-metric-value { color: var(--sr-text); }
.xanax-metric-label { color: #c8d0d8; }
.tabs .tab.active { background: var(--sr-tint); color: var(--sr-accent); border-color: var(--sr-accent); }
.card.featured { background: linear-gradient(145deg, #241117, #101318 65%); border-color: #6b1d27; }
.entry:hover { border-color: #7a1f2a; }
.login-page { background: radial-gradient(ellipse at 50% 0%, #e3263626, transparent 65%), var(--sr-bg); }
.login-card { border-top: 3px solid var(--sr-action); }
/* Hub pages share one navigation; tools link straight to their own applications. */
.faction-header { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; padding: 22px 0; border-bottom: 1px solid var(--sr-line); }
.faction-brand img { display: block; width: 200px; height: auto; }
.faction-brand { margin-right: auto; font-size: 16px; font-weight: 850; letter-spacing: .06em; line-height: 1.3; color: var(--sr-text); }
.faction-brand span { color: var(--sr-accent); }
.faction-brand small { display: block; margin-top: 6px; font-size: 9px; letter-spacing: .2em; color: var(--sr-muted); }
.account-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--sr-muted); font-size: 13px; }
.faction-page .hero { min-height: 0; padding: 32px 0 24px; border: 0; }
.faction-page h1 { font-size: clamp(32px, 5vw, 54px); line-height: 1.1; letter-spacing: -.045em; margin: 14px 0; overflow-wrap: anywhere; }
.faction-page .intro, .faction-page .sub { font-size: 15px; max-width: 650px; margin-bottom: 0; }
.faction-page .cards { grid-template-columns: repeat(3,minmax(0,1fr)); }
.faction-page .card { min-height: 0; padding: 22px; }
.faction-page .card strong { margin: 12px 0 8px; font-size: 19px; }
.leaderboard-page .section-title { margin: 24px 0 18px; }
.leaderboard-page .section-title .eyebrow { display: none; }
.leaderboard-page .section-title h2 { font-size: clamp(24px,4vw,34px); margin: 0; }
.coverage-details { margin-top: 24px; border: 1px solid var(--sr-line); border-radius: 12px; padding: 0 16px; color: var(--sr-muted); font-size: 13px; line-height: 1.7; }
.coverage-details>summary { display: flex; align-items: center; gap: 10px; padding: 12px 0; color: var(--sr-text); font-weight: 700; }
.coverage-details>summary::before { content: '+'; color: var(--sr-accent); }
.coverage-details[open]>summary::before { content: '−'; }
.coverage-details .summary { margin: 8px 0 18px; }
.coverage-details .summary>div { padding: 14px; }
.coverage-details .summary strong { font-size: 20px; }
@media(max-width: 760px) {
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea,
  .field input, .field select, .field textarea, .payout-fields select { font-size: 16px; }
  .btn { white-space: normal; text-align: center; }
  .top nav { gap: 4px 14px; }
  .top { padding-bottom: 16px; }
  .mobilebar { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .main { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  .wrap, main:not(.main), .shell { padding-bottom: max(28px, env(safe-area-inset-bottom)); }
  .site-nav { width: 100%; justify-content: space-between; border-top: 1px solid var(--sr-line); padding-top: 8px; }
  .site-nav a { padding-inline: 10px; }
  .faction-header .site-nav { order: 3; }
  .faction-page .cards { grid-template-columns: 1fr; }
  .faction-page .hero { padding: 25px 0 20px; }
}
@media(prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *:before, *:after { animation: none !important; transition: none !important; }
}