/* =========================================================================
   MY GM HUB — RESKIN BRIDGE LAYER  (wwegm-v2 staging)
   Maps the live app's existing structural markup onto the broadcast-control
   design system (design-tokens.css + app.css + artboards.css).
   ENGINE / RENDER JS UNTOUCHED — this is a CSS-forward reskin per the
   canonical Claude Design handoff rule. Loaded LAST so it wins the cascade.
   Inline-styled render output is re-tinted via design tokens where it uses
   the shared palette; structural app classes are fully restyled here.
   ========================================================================= */

/* ── global broadcast surface (design-tokens.css :root already defines the
      token values; this re-points the app's own --bg/--panel vars at them so
      every inline style that reads var(--panel) etc. picks up the new look) ── */
:root {
  --bg:      #0A0D11;
  --panel:   #141823;
  --panel2:  #1A1F2E;
  --border:  #21262D;
  --text:    #E8ECF4;
  --dim:     #7A8499;
  --accent:  #C8102E;
  --accent2: #E8A23A;
  --green:   #4ADE80;
  --red:     #EF4444;
  --blue:    #58A6FF;
}

html, body, body.wwegm-app-v2 {
  background: var(--bg) !important;
  color: var(--ink, #E8ECF4);
  font-family: var(--f-ui, 'Inter', system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
}

/* ── TOP BAR — header → broadcast lockup with crimson dashed underline ── */
body.wwegm-app-v2 > header {
  height: 52px; padding: 0 var(--s-8, 20px) !important;
  background: linear-gradient(180deg, #0e1117, var(--bg)) !important;
  border-bottom: 1px solid var(--line, #21262D) !important;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 30;
}
body.wwegm-app-v2 > header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: repeating-linear-gradient(90deg, var(--crimson, #C8102E) 0 6px, transparent 6px 12px);
  opacity: .35;
}
body.wwegm-app-v2 > header h1 {
  margin: 0; font-family: var(--f-display, 'Oswald', sans-serif);
  font-size: 18px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink, #E8ECF4);
}
body.wwegm-app-v2 > header h1 .accent { color: var(--crimson-2, #E11D48); }
body.wwegm-app-v2 > header .meta { font-size: 11px; color: var(--ink-3, #7A8499); display: flex; gap: 16px; align-items: center; }
body.wwegm-app-v2 > header .meta b { color: var(--ink, #E8ECF4); }
body.wwegm-app-v2 > header #campaignLabel {
  font-family: var(--f-mono, 'JetBrains Mono', monospace);
  color: var(--ink-3, #7A8499); font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
}
body.wwegm-app-v2 > header .btn-home {
  height: 26px; padding: 0 12px; border-radius: var(--r-3, 5px);
  background: var(--panel-2, #1A1F2E); border: 1px solid var(--line-2, #2A3142);
  color: var(--ink, #E8ECF4); font: 500 12px/1 var(--f-ui, 'Inter', sans-serif); cursor: pointer;
}
body.wwegm-app-v2 > header .btn-home:hover { border-color: var(--line-3, #364056); background: var(--panel-3, #232A3A); }

/* ── PAGE WRAP — slightly wider, console density ── */
.wrap { max-width: 1280px; margin: 0 auto; padding: var(--s-9, 24px); }

/* ── IN-CAMPAIGN NAV → scope-bar feel (sticky, broadcast) ── */
#campaign-nav {
  background: var(--bg-2, #0F1117) !important;
  border: 1px solid var(--line, #21262D) !important;
  border-radius: var(--r-3, 5px) !important;
  padding: var(--s-2, 4px) !important;
  position: sticky; top: 52px; z-index: 20;
  box-shadow: 0 1px 0 rgba(0,0,0,.4);
}
.campaign-nav-tab {
  font-family: var(--f-display, 'Oswald', sans-serif) !important;
  letter-spacing: .06em !important; text-transform: uppercase !important;
  border-radius: var(--r-2, 3px) !important; transition: all var(--d-fast,120ms) var(--ease, ease);
}
.campaign-nav-tab[style*="linear-gradient"] {
  background: var(--crimson, #C8102E) !important;
  color: #fff !important;
  border-bottom: 3px solid var(--crimson, #C8102E) !important;
  box-shadow: 0 0 0 2px rgba(200,16,46,.18) !important;
}

/* ── HEADINGS — Oswald display ── */
h2 { font-family: var(--f-display, 'Oswald', sans-serif); font-size: 22px; font-weight: 600;
     letter-spacing: .04em; text-transform: uppercase; color: var(--ink, #E8ECF4); margin: 0 0 16px; }
h3 { font: 600 11px/1.1 var(--f-ui, 'Inter', sans-serif); letter-spacing: .14em;
     text-transform: uppercase; color: var(--ink-3, #7A8499); margin: 0 0 10px; }

/* ── CARD — panel with hairline + subtle elevation ── */
.card {
  background: var(--panel, #141823) !important;
  border: 1px solid var(--line, #21262D) !important;
  border-radius: var(--r-3, 5px) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.4);
}
.placeholder-box { border: 1px dashed var(--line-2, #2A3142); border-radius: var(--r-3, 5px); color: var(--ink-3, #7A8499); }
.suggest-card { background: var(--bg-2, #0F1117); border: 1px solid var(--line, #21262D); border-radius: var(--r-3, 5px); }

/* ── BUTTONS — design-system btn ── */
.btn {
  height: 30px; padding: 0 var(--s-6, 12px); border-radius: var(--r-3, 5px);
  font: 500 12px/1 var(--f-ui, 'Inter', sans-serif); cursor: pointer;
  border: 1px solid var(--line-2, #2A3142); background: var(--panel-2, #1A1F2E);
  color: var(--ink, #E8ECF4);
  transition: border-color var(--d-fast,120ms) var(--ease, ease), background var(--d-fast,120ms) var(--ease, ease);
}
.btn:hover { border-color: var(--line-3, #364056); background: var(--panel-3, #232A3A); }
.btn-primary {
  background: var(--crimson, #C8102E) !important; border-color: var(--crimson, #C8102E) !important;
  color: #fff !important; font-weight: 600; text-transform: uppercase; letter-spacing: .12em;
  box-shadow: 0 0 0 1px rgba(200,16,46,.3), 0 6px 16px rgba(200,16,46,.18);
}
.btn-primary:hover { background: var(--crimson-2, #E11D48) !important; border-color: var(--crimson-2, #E11D48) !important; opacity: 1; }
.btn-secondary { background: transparent !important; border-color: var(--line-2, #2A3142) !important; color: var(--ink, #E8ECF4) !important; }
.btn-secondary:hover { border-color: var(--line-3, #364056) !important; }
.btn-success { background: var(--money, #4ADE80) !important; border-color: var(--money, #4ADE80) !important; color: #06210f !important; font-weight: 600; }
.btn-danger { background: rgba(239,68,68,.06) !important; color: var(--danger, #EF4444) !important; border-color: rgba(239,68,68,.35) !important; }
.btn-danger:hover { background: rgba(239,68,68,.14) !important; }

/* ── INPUTS — panel-3 fields, cyan focus ── */
input, select, textarea {
  background: var(--panel-3, #232A3A) !important;
  border: 1px solid var(--line-2, #2A3142) !important;
  color: var(--ink, #E8ECF4) !important;
  border-radius: var(--r-2, 3px) !important;
  font-family: var(--f-ui, 'Inter', sans-serif);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--cyan, #35C5C7) !important; box-shadow: 0 0 0 2px rgba(53,197,199,.14); }
input[type=range] { padding: 0 !important; accent-color: var(--crimson, #C8102E); }
label { font: 600 10px/1 var(--f-ui, 'Inter', sans-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3, #7A8499); }

/* ── TABLES — dense broadcast grid, mono numerics ── */
table { width: 100%; border-collapse: collapse; }
th { font: 600 10px/1 var(--f-ui, 'Inter', sans-serif); letter-spacing: .14em; text-transform: uppercase;
     color: var(--ink-4, #535C70); background: var(--panel-2, #1A1F2E); padding: 10px 12px;
     border-bottom: 1px solid var(--line, #21262D); text-align: left; }
td { padding: 10px 12px; border-bottom: 1px solid var(--line, #21262D); font-size: 12px; color: var(--ink-2, #B6BECC); }
tr:hover td { background: var(--panel-2, #1A1F2E) !important; }
td b, td strong { color: var(--ink, #E8ECF4); font-weight: 600; }

/* ── BADGES / TAGS / CHIPS ── */
.badge { border-radius: var(--r-2, 3px); font: 600 11px/1 var(--f-ui, 'Inter', sans-serif); padding: 3px 8px; }
.badge-draft { background: var(--warn-soft, rgba(245,158,11,.12)); color: var(--warn, #F59E0B); }
.badge-show  { background: var(--money-soft, rgba(74,222,128,.14)); color: var(--money, #4ADE80); }
.tag { background: var(--panel-2, #1A1F2E); border: 1px solid var(--line, #21262D); border-radius: var(--r-2, 3px);
       font: 500 11px/1 var(--f-mono, monospace); color: var(--ink-3, #7A8499); padding: 2px 8px; }
.empty { color: var(--ink-3, #7A8499); font-size: 13px; text-align: center; padding: 40px 20px; }

/* ── ERA / STRATEGY CHIPS → broadcast era-chip look ── */
.strat-chip {
  background: var(--panel, #141823) !important;
  border: 1px solid var(--line, #21262D) !important;
  border-radius: var(--r-3, 5px) !important;
  color: var(--ink, #E8ECF4) !important;
  font-family: var(--f-ui, 'Inter', sans-serif);
}
.strat-chip:hover:not(.disabled):not(.active) { border-color: var(--line-3, #364056) !important; }
.strat-chip.active {
  background: linear-gradient(135deg, var(--crimson-soft, rgba(200,16,46,.14)), var(--panel, #141823)) !important;
  border-color: var(--crimson, #C8102E) !important; color: var(--ink, #E8ECF4) !important;
  box-shadow: 0 0 0 1px var(--crimson-line, rgba(200,16,46,.45)) !important;
}
.strat-chip.active .desc { color: var(--ink-2, #B6BECC) !important; }
.strat-chip.disabled { opacity: .55 !important; background: var(--bg-2, #0F1117) !important; }
.strat-chip .soon {
  background: var(--line-2, #2A3142) !important; color: var(--ink-3, #7A8499) !important;
  font-family: var(--f-ui, 'Inter', sans-serif); letter-spacing: .12em;
}

/* week indicator — mono numerals, broadcast */
.week-indicator .num { font-family: var(--f-mono, monospace); font-size: 24px; color: var(--crimson-2, #E11D48); }

/* ── NEW-CAMPAIGN MODAL → console panel ── */
#new-campaign-modal { background: var(--scrim, rgba(5,7,10,.66)) !important; backdrop-filter: blur(2px); }
#new-campaign-modal > div {
  background: var(--panel, #141823) !important;
  border: 1px solid var(--line, #21262D) !important;
  border-radius: var(--r-4, 8px) !important;
  box-shadow: var(--el-4, 0 24px 60px rgba(0,0,0,.7));
}

/* ── WEEKLY ENGINE — re-tint its own .wv-* hooks to the design system ── */
.wwegm-weekly-v2 { font-family: var(--f-ui, 'Inter', sans-serif); }
.wwegm-weekly-v2 .wv-section-title h1 {
  font-family: var(--f-display, 'Oswald', sans-serif) !important;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink, #E8ECF4) !important;
}
.wwegm-weekly-v2 .wv-week-num { font-family: var(--f-mono, monospace) !important; color: var(--crimson-2, #E11D48) !important; }
.wwegm-weekly-v2 .wv-sub { font-family: var(--f-mono, monospace); color: var(--ink-3, #7A8499); letter-spacing: .1em; }

/* ── FOOTER — hairline, muted ── */
body.wwegm-app-v2 > footer {
  border-top: 1px solid var(--line, #21262D) !important;
  color: var(--ink-4, #535C70) !important;
  font-family: var(--f-ui, 'Inter', sans-serif) !important;
}
body.wwegm-app-v2 > footer a { color: var(--ink-3, #7A8499) !important; }

/* keep mobile single-column overrides authoritative over this layer */
@media (max-width: 768px) {
  .wrap { padding: var(--s-6, 12px); }
  body.wwegm-app-v2 > header { padding: 0 12px !important; }
}