/* ============================================================ MASTHEAD */
.masthead {
  background: var(--ink);
  padding: 0 32px;
  position: relative;
  overflow: hidden;
}
.masthead-inner {
  max-width: 1480px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px 0 0;
  position: relative; z-index: 2;
}
.brand-stack { display: flex; align-items: center; gap: 16px; }
.brand-mark {
  font-size: 10px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 3px;
}
.brand-title {
  font-weight: 700; font-size: 22px; line-height: 1.1;
  letter-spacing: -0.01em; color: white;
}
.brand-title-sub {
  font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 2px; font-weight: 400;
}
.masthead-mpo-logo { height: 52px; width: auto; display: block; }
.head-meta {
  display: flex; align-items: center; gap: 20px;
  padding-bottom: 18px;
}
.head-meta-stats {
  text-align: right;
  font-size: 11px; color: rgba(255,255,255,0.45); line-height: 1.7;
}
.head-meta-stats strong { color: rgba(255,255,255,0.8); font-weight: 600; }

/* CI toggle in masthead — compact pill style */
.ci-toggle-pill {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  padding: 6px 10px;
  white-space: nowrap;
}
.ci-toggle-pill span {
  font-size: 10px; font-weight: 600; letter-spacing: 0.10em;
  text-transform: uppercase; color: rgba(255,255,255,0.55);
}
.ci-toggle-pill select {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 4px;
  padding: 3px 22px 3px 8px;
  font-size: 11px; font-weight: 600; color: white;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path fill='none' stroke='white' stroke-width='1.5' d='M1 1l4 4 4-4'/></svg>");
  background-repeat: no-repeat; background-position: right 7px center;
}
.ci-toggle-pill select option { background: #1B2A4A; color: white; }

/* Rainbow audio bars */
.audio-bars {
  display: flex; align-items: flex-end;
  height: 18px; gap: 1px; width: 100%; overflow: hidden;
}
.audio-bars .bar { flex: 1; border-radius: 1px 1px 0 0; min-width: 2px; }

/* ============================================================ TABS */
.tabnav {
  background: white;
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 30;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.tabnav-inner {
  max-width: 1480px; margin: 0 auto;
  padding: 0 32px;
  display: flex; gap: 0;
}
.tab {
  background: none; border: none;
  padding: 14px 20px 12px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  transition: color 150ms, border-color 150ms;
  display: flex; align-items: center; gap: 8px;
}
.tab .tab-dot {
  width: 6px; height: 6px; border-radius: 50%;
  flex-shrink: 0; opacity: 0;
  transition: opacity 150ms;
}
.tab[data-tab="single"]    .tab-dot { background: var(--c-magenta); }
.tab[data-tab="season"]    .tab-dot { background: var(--c-blue); }
.tab[data-tab="optimiser"] .tab-dot { background: var(--c-teal); }
.tab[data-tab="reference"] .tab-dot { background: var(--c-orange); }
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); border-bottom-color: var(--ink); }
.tab.active .tab-dot { opacity: 1; }

/* ============================================================ LAYOUT */
.page {
  max-width: 1480px; margin: 0 auto;
  padding: 24px 32px 80px;
}
.pane { display: none; }
.pane.active { display: block; animation: fadeUp 200ms ease-out; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================ SECTION HEADER */
.section-header { margin-bottom: 20px; }
.section-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--c-magenta); margin-bottom: 4px;
}
.section-eyebrow.blue    { color: var(--c-blue); }
.section-eyebrow.teal    { color: var(--c-teal); }
.section-eyebrow.orange  { color: var(--c-orange); }
.section-title {
  font-weight: 700; font-size: 22px; line-height: 1.15;
  color: var(--ink); margin: 0 0 6px; letter-spacing: -0.01em;
}
.section-sub {
  font-size: 13px; line-height: 1.6; color: var(--muted);
  max-width: 820px; margin: 0;
}

/* ============================================================ CARDS */
.card {
  background: white;
  border: 1px solid var(--rule);
  padding: 18px 20px;
  border-radius: var(--radius);
}
.card + .card { margin-top: 12px; }
.card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-2);
}
.card-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--c-magenta); margin-bottom: 3px;
}
.card-eyebrow.blue   { color: var(--c-blue); }
.card-eyebrow.teal   { color: var(--c-teal); }
.card-eyebrow.orange { color: var(--c-orange); }
.card-eyebrow.green  { color: var(--c-green); }
.card-eyebrow.violet { color: var(--c-violet); }
.card-eyebrow.muted  { color: var(--muted-soft); }
.card-title {
  font-weight: 700; font-size: 14px; color: var(--ink);
  letter-spacing: 0.01em;
}
.card-badge {
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted-soft);
  background: var(--paper-grey); padding: 3px 8px; border-radius: 4px;
}

/* ============================================================ FORMS */
.field { margin-bottom: 12px; }
.field label {
  display: block; font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 4px;
}
.field input, .field select {
  width: 100%; padding: 8px 10px;
  border: 1.5px solid var(--rule);
  background: white; font-size: 13px; color: var(--ink);
  border-radius: var(--radius-sm);
  transition: border-color 130ms, box-shadow 130ms;
}
.field input:focus, .field select:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(27,42,74,0.08);
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path fill='none' stroke='%231B2A4A' stroke-width='1.5' d='M1 1l4 4 4-4'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center;
  padding-right: 26px;
}
.field-row { display: grid; gap: 10px; }
.field-row.cols-2 { grid-template-columns: 1fr 1fr; }
.field-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }

/* Template picker */
.tmpl-row {
  display: flex; gap: 8px; align-items: center;
  margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-2);
}
.tmpl-row label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
  white-space: nowrap; flex-shrink: 0;
}
.tmpl-row select {
  flex: 1; border: 1.5px solid var(--rule); border-radius: var(--radius-sm);
  padding: 7px 26px 7px 10px; font-size: 12px; color: var(--ink);
  background: white; cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path fill='none' stroke='%231B2A4A' stroke-width='1.5' d='M1 1l4 4 4-4'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center;
}
.tmpl-row select:focus { outline: 2px solid var(--c-teal); outline-offset: 1px; border-color: transparent; }
.tmpl-clear-btn {
  background: none; border: 1.5px solid var(--rule); border-radius: var(--radius-sm);
  padding: 6px 10px; font-size: 10px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); cursor: pointer; flex-shrink: 0;
  transition: border-color 130ms, color 130ms;
}
.tmpl-clear-btn:hover { border-color: var(--c-teal); color: var(--c-teal); }