/* ── FUNNEL VISUALIZATION ── */
.funnel-trio { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 16px; margin: 12px 0; align-items: start; }
.funnel-mini { background: var(--surface-1); border: 1px solid #2A2A2A; border-radius: 6px; padding: 14px; }
.funnel-mini-title {
  font-size: 10px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase;
  color: var(--momo-pink-light); text-align: center; margin-bottom: 10px;
}
.funnel-viz { display: flex; flex-direction: column; align-items: center; margin: 0; }
.funnel-viz-bar {
  width: 100%; text-align: center; padding: 10px 12px; box-sizing: border-box;
  background: var(--surface-2); border: 1px solid var(--momo-pink);
  border-radius: 4px; font-size: 11px; font-weight: 500; color: var(--momo-white);
}
.funnel-viz-arrow { color: #555; font-size: 12px; line-height: 1; margin: 3px 0; }
@media (max-width: 768px) {
  .funnel-trio { grid-template-columns: 1fr; }
}

/* ── PLAYBOOK TAB BAR ── */
.playbook-tabs { display: flex; gap: 0; border-bottom: 1px solid #222; margin-bottom: 24px; overflow-x: auto; }
.playbook-tab {
  padding: 10px 18px; font-size: 12px; font-weight: 500; color: #555;
  cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap;
  background: none; border-left: none; border-right: none; border-top: none;
  font-family: var(--font-sans); transition: color 0.15s;
}
.playbook-tab:hover { color: #ccc; }
.playbook-tab.active { color: var(--momo-pink); border-bottom-color: var(--momo-pink); }
.playbook-tab-icon { margin-right: 6px; }

/* ── SUB-SECTION LABEL (within a tab) ── */
.subsec-label {
  font-size: 11px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--gray-300); margin: 24px 0 4px;
}
.subsec-label:first-child { margin-top: 0; }
.subsec-sub { font-size: 12px; color: var(--text-secondary); margin-bottom: 12px; }

/* ── TIMELINE ── */
.timeline-list { display: flex; flex-direction: column; }
.timeline-item { display: grid; grid-template-columns: 100px 1fr 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid #222; align-items: start; }
.timeline-item:last-child { border-bottom: none; }
.timeline-badge {
  font-size: 9px; font-weight: 700; letter-spacing: 1px; color: #fff;
  background: var(--momo-pink); border: none; border-radius: 20px; padding: 3px 10px;
  text-align: center; align-self: flex-start; margin-top: 2px; white-space: nowrap;
}
.timeline-name { font-size: 13px; font-weight: 500; color: var(--momo-white); margin-bottom: 4px; }
.timeline-notes { font-size: 12px; color: #aaa; line-height: 1.6; }
.timeline-output { font-size: 12px; color: var(--text-secondary); }
@media (max-width: 768px) {
  .timeline-item { grid-template-columns: 1fr; gap: 6px; }
}

/* ── HORIZONTAL TIMELINE ── */
.h-timeline { display: flex; align-items: flex-start; overflow-x: auto; padding: 8px 4px 20px; }
.h-timeline-item { flex: 0 0 230px; padding-right: 22px; }
.h-timeline-item:last-child { flex: 0 0 208px; padding-right: 4px; }
.h-timeline-node { display: flex; align-items: center; height: 14px; margin-bottom: 10px; }
.h-timeline-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  background: var(--momo-pink); box-shadow: 0 0 0 3px #2A1420;
}
.h-timeline-connector { flex: 1; height: 2px; background: #2A2A2A; margin-left: 3px; }
.h-timeline-item:last-child .h-timeline-connector { display: none; }
.h-timeline-item .timeline-badge { display: inline-block; margin-bottom: 8px; }
.h-timeline-item .timeline-output {
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed #2A2A2A;
}
.h-timeline-item .timeline-output:empty { display: none; }
@media (max-width: 768px) {
  .h-timeline-item { flex-basis: 200px; }
}

/* ── CHANNEL PRIORITY CARD ── */
.channel-card {
  background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 6px;
  padding: 14px 16px; margin-bottom: 8px; display: grid;
  grid-template-columns: 36px 1fr; gap: 12px;
}
.channel-priority-num { font-family: var(--font-display); font-size: 22px; color: var(--momo-pink); line-height: 1; }
.channel-name { font-size: 14px; font-weight: 500; color: var(--momo-white); margin-bottom: 6px; }
.channel-role, .channel-note { font-size: 12px; color: #aaa; line-height: 1.6; margin-bottom: 4px; }
.channel-role strong, .channel-note strong { color: #ccc; }
.channel-note ul { margin: 4px 0 4px 18px; padding: 0; }
.channel-note li { margin-bottom: 3px; }

/* ── PLACEHOLDER CELLS ── */
.cell-placeholder { color: #444; font-style: italic; font-size: 12px; }

/* ── SEVERITY BADGES (War Room) ── */
.badge-severity {
  display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: 1px;
  border-radius: 3px; padding: 2px 8px; text-transform: uppercase; vertical-align: middle;
}
.badge-critical { background: #2d0a0a; color: #f87171; border: 1px solid #f87171; }
.badge-high     { background: #2a1a00; color: #f59e0b; border: 1px solid #f59e0b; }
.badge-planning { background: #0a1a2d; color: #60a5fa; border: 1px solid #60a5fa; }
.badge-ops      { background: #1a1a2d; color: #a78bfa; border: 1px solid #a78bfa; }

/* ── WAR ROOM SCENARIO (collapsible) ── */
.scenario {
  background: var(--surface-2); border: 1px solid #2A2A2A; border-radius: 6px;
  margin-bottom: 12px; overflow: hidden;
}
.scenario summary {
  list-style: none; cursor: pointer; padding: 14px 16px;
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 500; color: var(--momo-white);
}
.scenario summary::-webkit-details-marker { display: none; }
.scenario summary::before {
  content: '▸'; color: var(--text-secondary); font-size: 11px; transition: transform 0.15s;
}
.scenario[open] summary::before { transform: rotate(90deg); }
.scenario-body { padding: 0 16px 16px; }
.scenario-def { font-size: 12px; color: #ccc; margin-bottom: 12px; }
.scenario-def strong { color: var(--momo-white); }

/* ── CHECKLIST (visual only) ── */
.checklist { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.checklist-item { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: #ccc; }
.checklist-item input[type="checkbox"] { accent-color: var(--momo-pink); margin-top: 2px; flex-shrink: 0; }

/* ── CONSTRUCTION BANNER (promotional playbook) ── */
.construction-banner {
  background: #2a1a00; border: 1px solid #f59e0b; border-radius: 6px;
  padding: 14px 18px; margin-bottom: 28px; font-size: 13px; color: #f5c168; line-height: 1.6;
}
.construction-banner strong { color: #f59e0b; }

/* ── TRAFFIC SEGMENT CARDS (War Room) ── */
.tseg-list { display: flex; flex-direction: column; gap: 10px; }
.tseg-card {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start;
  background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 6px; padding: 12px 14px;
}
.tseg-num {
  width: 22px; height: 22px; border-radius: 50%; background: var(--momo-pink); color: #fff;
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tseg-title { font-size: 13px; font-weight: 500; color: var(--momo-white); margin-bottom: 4px; }
.tseg-desc { font-size: 12px; color: #aaa; line-height: 1.6; }

/* ── CAMPAIGN NATURE — ENTRANCE ANIMATION (scoped to this tab only) ── */
@keyframes pb-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
#pbtab-nature .prop-row { animation: pb-fade-up 0.4s ease both; }
#pbtab-nature .prop-row:nth-child(1) { animation-delay: 0.03s; }
#pbtab-nature .prop-row:nth-child(2) { animation-delay: 0.08s; }
#pbtab-nature .prop-row:nth-child(3) { animation-delay: 0.13s; }
#pbtab-nature .prop-row:nth-child(4) { animation-delay: 0.18s; }
#pbtab-nature .prop-row:nth-child(5) { animation-delay: 0.23s; }
#pbtab-nature .prop-row:nth-child(6) { animation-delay: 0.28s; }

/* ── OCTALYSIS WHEEL ── */
.octalysis-wheel { display: flex; justify-content: center; margin: 4px 0 12px; }
.octalysis-svg { width: 100%; max-width: 460px; height: auto; overflow: visible; }
.oct-polygon { fill: rgba(165, 0, 100, 0.04); stroke: #333; stroke-width: 1.5; }
.oct-polygon-primary { fill: none; stroke: var(--momo-pink); stroke-width: 2.5; opacity: 0.8; }
.oct-center-circle { fill: var(--surface-2); stroke: #333; stroke-width: 1; }
.oct-center-text { fill: var(--text-secondary); font-size: 13px; font-family: var(--font-sans); text-anchor: middle; }
.oct-dot { fill: #333; stroke: #555; stroke-width: 1; }
.oct-dot.primary { fill: var(--momo-pink); stroke: none; animation: oct-pulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.oct-num { fill: #999; font-size: 11px; font-weight: 700; font-family: var(--font-sans); }
.oct-node.primary .oct-num { fill: #fff; }
.oct-label { fill: #777; font-size: 11px; font-family: var(--font-sans); }
.oct-label.primary { fill: var(--momo-pink-light); font-weight: 500; }
.oct-caption { font-size: 12px; color: #ccc; text-align: center; max-width: 540px; margin: 8px auto 0; line-height: 1.6; }
@keyframes oct-pulse {
  0%, 100% { r: 16; opacity: 1; }
  50% { r: 19; opacity: 0.7; }
}

/* ── WEEK SELECTOR (War Room weekly log) ── */
.week-selector { display: flex; gap: 8px; margin: 12px 0 20px; flex-wrap: wrap; }
.week-pill {
  padding: 5px 14px; font-size: 11px; font-weight: 500;
  border: 0.5px solid #333; border-radius: 20px; cursor: pointer;
  background: transparent; color: #666; transition: all .15s;
}
.week-pill:hover { color: #ccc; }
.week-pill.active { background: var(--momo-pink); border-color: var(--momo-pink); color: #fff; }
.week-panel { display: none; }
.week-panel.active { display: block; }
.week-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
@media (max-width: 768px) { .week-cards { grid-template-columns: 1fr; } }

/* ── DECISION FLOW BLOCK ── */
.flow-block {
  background: #161616; border: 0.5px solid #2a2a2a; border-radius: 6px;
  padding: 14px 16px; font-family: monospace; font-size: 12px; color: #888;
  line-height: 1.8; margin: 8px 0; white-space: pre-wrap;
}
.flow-block strong { color: #fff; }
.flow-block .flow-yes { color: #81c784; }
.flow-block .flow-no  { color: #f48fb1; }
.flow-block .flow-action { color: var(--momo-pink); font-weight: 500; }

/* ── DATA TABLE HIGHLIGHTS ── */
.td-high { background: #0d2a10; color: #81c784; font-weight: 500; }
.td-low  { background: #2a0010; color: #f48fb1; font-weight: 500; }

/* ── MINI TABS (sub-tabs inside a playbook tab panel) ── */
.mini-tabs { display: flex; gap: 0; border-bottom: 0.5px solid #222; margin: 12px 0 16px; overflow-x: auto; }
.mini-tab {
  padding: 8px 16px; font-size: 12px; font-weight: 500; color: #666;
  cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap;
}
.mini-tab:hover { color: #ccc; }
.mini-tab.active { color: var(--momo-pink); border-bottom-color: var(--momo-pink); }
.mini-panel { display: none; }
.mini-panel.active { display: block; }

/* ── COMM FRAMEWORK — GAMIFICATION (interactive tab demo + detail blocks) ── */
.cf-tabs { display: flex; gap: 0; border-bottom: 0.5px solid #222; margin-bottom: 20px; overflow-x: auto; }
.cf-tab {
  padding: 9px 18px; font-size: 12px; font-weight: 500; color: #666;
  cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; transition: all .15s;
}
.cf-tab:hover { color: #ccc; }
.cf-tab.active { color: #A50064; border-bottom-color: #A50064; }
.cf-panel { display: none; }
.cf-panel.active { display: block; }

/* Phase flow */
.phase-flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin: 14px 0; }
.phase-card { background: #1a1a1a; border: 0.5px solid #2a2a2a; padding: 12px 10px; text-align: center; position: relative; }
.phase-card:first-child { border-radius: 6px 0 0 6px; }
.phase-card:last-child { border-radius: 0 6px 6px 0; }
.phase-card:not(:last-child)::after {
  content: '→'; position: absolute; right: -10px; top: 50%; transform: translateY(-50%);
  color: #A50064; font-size: 16px; font-weight: 700; z-index: 2; background: #111; padding: 0 2px;
}
.phase-name { font-size: 11px; font-weight: 600; color: #A50064; text-transform: uppercase; letter-spacing: .8px; margin-bottom: 6px; }
.phase-obj { font-size: 11px; color: #888; line-height: 1.45; margin-bottom: 6px; }
.phase-dur { font-size: 10px; color: #555; font-style: italic; margin-top: 4px; }
.ta-hc, .ta-mass, .ta-players {
  font-size: 9px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase;
  padding: 2px 6px; border-radius: 3px; display: inline-block;
}
.ta-hc { background: #2d0a0a; color: #f87171; border: 0.5px solid #c62828; }
.ta-mass { background: #0a1a2d; color: #90caf9; border: 0.5px solid #1565c0; }
.ta-players { background: #0d2a1a; color: #7ec87e; border: 0.5px solid #2e7d32; }

/* Message hierarchy 2-col */
.msg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.msg-primary { background: #0d2a10; border: 0.5px solid #2e7d32; border-radius: 8px; padding: 14px; }
.msg-primary h4 { color: #a5d6a7; font-size: 13px; font-weight: 500; margin: 0 0 8px; }
.msg-primary ul { font-size: 12px; color: #81c784; padding-left: 14px; margin: 4px 0; line-height: 1.7; }
.msg-primary .msg-note { font-size: 11px; color: #a5d6a7; margin-top: 8px; line-height: 1.6; }
.msg-secondary { background: #161616; border: 0.5px solid #2a2a2a; border-radius: 8px; padding: 14px; }
.msg-secondary h4 { color: #fff; font-size: 13px; font-weight: 500; margin: 0 0 8px; }
.msg-secondary ul { font-size: 12px; color: #888; padding-left: 14px; margin: 4px 0; line-height: 1.7; }
.msg-secondary .msg-note { font-size: 11px; color: #666; margin-top: 8px; line-height: 1.6; }

/* Channel matrix cells */
.ch-yes { color: #81c784; font-size: 13px; text-align: center; }
.ch-sel { color: #ffb74d; font-size: 11px; text-align: center; }
.ch-no { color: #333; text-align: center; }
.ch-legend { font-size: 11px; color: #666; margin-top: 8px; }
.ch-legend .ch-yes, .ch-legend .ch-sel { display: inline; font-size: 11px; }

/* Asset rule cards */
.asset-rule { display: flex; gap: 12px; align-items: flex-start; padding: 11px 14px; background: #161616; border: 0.5px solid #2a2a2a; border-radius: 6px; margin-bottom: 8px; }
.asset-rule:last-child { margin-bottom: 0; }
.asset-num { width: 22px; height: 22px; border-radius: 50%; background: #A50064; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.asset-rule strong { display: block; color: #fff; font-size: 12px; font-weight: 500; margin-bottom: 3px; }
.asset-rule p { font-size: 12px; color: #888; margin: 0; line-height: 1.55; }

@media (max-width: 768px) {
  .phase-flow { grid-template-columns: 1fr; }
  .phase-card:not(:last-child)::after { content: '↓'; right: 50%; top: auto; bottom: -12px; transform: translateX(50%); }
  .msg-grid { grid-template-columns: 1fr; }
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .channel-card { grid-template-columns: 28px 1fr; }
}