/* ProGain Coach Progression Decision Board V1
   Native Coach OS section rendered inside the authenticated admin iframe.
   The outer Coach OS shell owns global navigation; this file owns only the
   measurements/progression workspace. */

#section-coach-progression {
  --cp-bg: #08090a;
  --cp-surface: #101214;
  --cp-surface-2: #151719;
  --cp-surface-3: #1a1c1f;
  --cp-line: rgba(255,255,255,.075);
  --cp-line-strong: rgba(255,255,255,.13);
  --cp-text: #f5f5f2;
  --cp-muted: rgba(245,245,242,.48);
  --cp-faint: rgba(245,245,242,.28);
  --cp-yellow: #FAEF23;
  --cp-green: #67df63;
  --cp-orange: #ff8b3d;
  --cp-red: #ff665f;
  --cp-shadow: 0 28px 80px rgba(0,0,0,.28);
  min-height: 100vh;
  color: var(--cp-text);
  background:
    radial-gradient(circle at 78% 6%, rgba(250,239,35,.055), transparent 26rem),
    linear-gradient(180deg, #090a0b 0%, #08090a 100%);
  padding: clamp(18px, 2.5vw, 34px);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#section-coach-progression * { box-sizing: border-box; }
#section-coach-progression button,
#section-coach-progression select { font: inherit; }

.cpdb-shell { width: min(1580px, 100%); margin: 0 auto; }
.cpdb-hidden { display: none !important; }

/* ── header ───────────────────────────────────────────────────────── */
.cpdb-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}
.cpdb-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--cp-faint);
  font-size: .73rem;
  font-weight: 700;
}
.cpdb-breadcrumb b { color: rgba(255,255,255,.68); font-weight: 800; }
.cpdb-header h1 {
  margin: 0;
  font-size: clamp(1.75rem, 3vw, 2.7rem);
  line-height: .98;
  letter-spacing: -.055em;
  font-weight: 900;
}
.cpdb-header-copy {
  margin: 10px 0 0;
  color: var(--cp-muted);
  font-size: .86rem;
  line-height: 1.55;
  max-width: 760px;
}
.cpdb-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex: 0 0 auto;
}
.cpdb-select-wrap {
  position: relative;
  min-width: 180px;
}
.cpdb-select-wrap i {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cp-muted);
  pointer-events: none;
}
.cpdb-select {
  width: 100%;
  min-height: 42px;
  padding: 0 38px 0 38px;
  color: var(--cp-text);
  background: #121416;
  border: 1px solid var(--cp-line-strong);
  border-radius: 12px;
  outline: none;
  appearance: none;
  font-size: .74rem;
  font-weight: 750;
}
.cpdb-select-wrap::after {
  content: "⌄";
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-57%);
  color: var(--cp-muted);
  pointer-events: none;
}
.cpdb-refresh {
  width: 42px;
  height: 42px;
  border: 1px solid var(--cp-line-strong);
  border-radius: 12px;
  color: var(--cp-muted);
  background: #121416;
  cursor: pointer;
}
.cpdb-refresh:hover { color: var(--cp-yellow); border-color: rgba(250,239,35,.35); }

.cpdb-insight-line {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 0 18px;
  border-bottom: 1px solid var(--cp-line);
  color: rgba(255,255,255,.72);
  font-size: .82rem;
  line-height: 1.5;
}
.cpdb-insight-line-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 9px;
  color: var(--cp-yellow);
  background: rgba(250,239,35,.09);
  box-shadow: 0 0 24px rgba(250,239,35,.08);
}

/* ── state ────────────────────────────────────────────────────────── */
.cpdb-state {
  display: grid;
  place-items: center;
  min-height: 420px;
  padding: 42px 18px;
  text-align: center;
  color: var(--cp-muted);
}
.cpdb-state-ring {
  width: 36px;
  height: 36px;
  margin-bottom: 14px;
  border: 3px solid rgba(255,255,255,.08);
  border-top-color: var(--cp-yellow);
  border-radius: 50%;
  animation: cpdb-spin .8s linear infinite;
}
@keyframes cpdb-spin { to { transform: rotate(360deg); } }
.cpdb-state strong { display: block; color: var(--cp-text); margin-bottom: 6px; }

/* ── 3-column decision board ──────────────────────────────────────── */
.cpdb-board {
  display: grid;
  grid-template-columns: minmax(460px, 1.28fr) minmax(330px, .85fr) minmax(270px, .62fr);
  gap: 14px;
  margin-top: 18px;
  align-items: start;
}
.cpdb-panel {
  overflow: hidden;
  border: 1px solid var(--cp-line);
  border-radius: 20px;
  background: linear-gradient(150deg, rgba(22,24,26,.97), rgba(13,15,16,.97));
  box-shadow: var(--cp-shadow);
}
.cpdb-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 54px;
  padding: 15px 17px;
  border-bottom: 1px solid var(--cp-line);
}
.cpdb-panel-title {
  margin: 0;
  color: rgba(255,255,255,.72);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .085em;
  text-transform: uppercase;
}
.cpdb-panel-head small { color: var(--cp-faint); font-size: .62rem; font-weight: 700; }

/* ── body zone overview ───────────────────────────────────────────── */
.cpdb-zones { padding: 0 16px 4px; }
.cpdb-zone {
  display: grid;
  grid-template-columns: 92px minmax(0,1fr);
  gap: 14px;
  padding: 18px 0;
}
.cpdb-zone + .cpdb-zone { border-top: 1px solid var(--cp-line); }
.cpdb-zone-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.cpdb-zone-label {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--cp-yellow);
  font-size: .69rem;
  font-weight: 950;
  letter-spacing: .08em;
}
.cpdb-zone-label i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: rgba(250,239,35,.08);
}
.cpdb-anatomy { width: 72px; height: 140px; opacity: .88; }
.cpdb-anatomy .body { fill: rgba(255,255,255,.15); stroke: rgba(255,255,255,.22); stroke-width: 1.2; }
.cpdb-anatomy .zone { fill: rgba(250,239,35,.68); filter: drop-shadow(0 0 8px rgba(250,239,35,.3)); }
.cpdb-zone-list { display: grid; gap: 8px; align-content: center; }
.cpdb-metric-row {
  display: grid;
  grid-template-columns: minmax(96px,1fr) 88px 76px 70px 110px;
  align-items: center;
  gap: 9px;
  min-height: 56px;
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 11px;
  background: rgba(0,0,0,.11);
}
.cpdb-metric-name { min-width: 0; }
.cpdb-metric-name strong { display:block; color:rgba(255,255,255,.82); font-size:.73rem; line-height:1.2; }
.cpdb-metric-name small { display:block; margin-top:4px; color:var(--cp-faint); font-size:.57rem; }
.cpdb-current strong { display:block; color:#fff; font-size:.94rem; letter-spacing:-.03em; }
.cpdb-current small { color:var(--cp-faint); font-size:.55rem; }
.cpdb-start, .cpdb-delta { color:var(--cp-muted); font-size:.64rem; font-weight:750; }
.cpdb-delta.up { color:var(--cp-green); }
.cpdb-delta.down { color:#73b6ff; }
.cpdb-delta.watch { color:var(--cp-orange); }
.cpdb-trend-word {
  justify-self: start;
  padding: 5px 7px;
  border-radius: 999px;
  font-size: .54rem;
  font-weight: 900;
  white-space: nowrap;
  color: rgba(255,255,255,.52);
  background: rgba(255,255,255,.06);
}
.cpdb-trend-word.up { color:var(--cp-green); background:rgba(103,223,99,.09); }
.cpdb-trend-word.watch { color:var(--cp-orange); background:rgba(255,139,61,.10); }
.cpdb-trend-word.down { color:#73b6ff; background:rgba(115,182,255,.09); }
.cpdb-spark { display:block; width:110px; height:34px; overflow:visible; }
.cpdb-spark-grid { stroke:rgba(255,255,255,.05); stroke-width:1; }
.cpdb-spark-line { fill:none; stroke:var(--cp-yellow); stroke-width:2.1; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 4px rgba(250,239,35,.18)); }
.cpdb-spark-dot { fill:#101214; stroke:var(--cp-yellow); stroke-width:1.7; vector-effect:non-scaling-stroke; }

/* ── trend matrix ─────────────────────────────────────────────────── */
.cpdb-matrix-wrap { padding: 12px; overflow-x: auto; overscroll-behavior-inline: contain; }
.cpdb-matrix {
  width: 100%;
  min-width: 470px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--cp-line);
  border-radius: 13px;
}
.cpdb-matrix th,
.cpdb-matrix td {
  padding: 9px 7px;
  border-bottom: 1px solid rgba(255,255,255,.055);
  text-align: center;
  font-size: .59rem;
}
.cpdb-matrix th { color:var(--cp-faint); font-weight:800; background:rgba(255,255,255,.018); }
.cpdb-matrix th:first-child,
.cpdb-matrix td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 102px;
  text-align: left;
  color: rgba(255,255,255,.66);
  font-weight: 800;
  background: #141618;
}
.cpdb-matrix tr:last-child td { border-bottom: 0; }
.cpdb-trend-dot {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: .55rem;
  font-weight: 950;
  color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.09);
}
.cpdb-trend-dot.up { color:#0a1509; background:var(--cp-green); border-color:var(--cp-green); box-shadow:0 0 12px rgba(103,223,99,.18); }
.cpdb-trend-dot.down { color:#07111b; background:#73b6ff; border-color:#73b6ff; }
.cpdb-trend-dot.watch { color:#1c0b02; background:var(--cp-orange); border-color:var(--cp-orange); }
.cpdb-trend-dot.first { color:var(--cp-muted); background:rgba(255,255,255,.05); }

.cpdb-legend { padding: 4px 14px 16px; }
.cpdb-legend h3 { margin:0 0 10px; color:var(--cp-faint); font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; }
.cpdb-legend-item { display:flex; align-items:flex-start; gap:9px; padding:7px 0; }
.cpdb-legend-item b { display:block; color:rgba(255,255,255,.70); font-size:.62rem; }
.cpdb-legend-item small { display:block; margin-top:2px; color:var(--cp-faint); font-size:.54rem; line-height:1.35; }

/* ── coach reading ────────────────────────────────────────────────── */
.cpdb-coach-column { position: sticky; top: 12px; display:grid; gap:10px; }
.cpdb-coach-title {
  padding: 15px 15px 5px;
  color: var(--cp-yellow);
  font-size: .66rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cpdb-reading-card {
  margin: 0 10px;
  padding: 13px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.018));
}
.cpdb-reading-card:last-child { margin-bottom:10px; }
.cpdb-reading-head { display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.cpdb-reading-icon {
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:50%;
  color:var(--cp-muted);
  background:rgba(255,255,255,.07);
}
.cpdb-reading-card.progress .cpdb-reading-icon { color:var(--cp-green); background:rgba(103,223,99,.09); }
.cpdb-reading-card.watch .cpdb-reading-icon { color:var(--cp-orange); background:rgba(255,139,61,.10); }
.cpdb-reading-card.action .cpdb-reading-icon { color:var(--cp-yellow); background:rgba(250,239,35,.10); }
.cpdb-reading-head strong { color:rgba(255,255,255,.66); font-size:.59rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.cpdb-reading-list { display:grid; gap:8px; }
.cpdb-reading-item { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:start; }
.cpdb-reading-item span { color:rgba(255,255,255,.76); font-size:.65rem; line-height:1.35; }
.cpdb-reading-item b { color:var(--cp-green); font-size:.66rem; white-space:nowrap; }
.cpdb-reading-item em { color:var(--cp-faint); font-size:.55rem; font-style:normal; grid-column:1/-1; margin-top:-6px; }
.cpdb-empty-reading { color:var(--cp-faint); font-size:.62rem; line-height:1.45; }
.cpdb-action-list { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.cpdb-action-list li { position:relative; padding-left:18px; color:rgba(255,255,255,.64); font-size:.62rem; line-height:1.45; }
.cpdb-action-list li::before { content:"✓"; position:absolute; left:0; color:var(--cp-yellow); font-weight:900; }
.cpdb-decision-note { margin:8px 10px 10px; color:var(--cp-faint); font-size:.52rem; line-height:1.4; }

/* ── key recommendation ───────────────────────────────────────────── */
.cpdb-key {
  grid-column: 1 / span 2;
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 16px;
  align-items: center;
  margin-top: 0;
  padding: 18px 20px;
  border: 1px solid rgba(250,239,35,.42);
  border-radius: 17px;
  background: linear-gradient(90deg, rgba(250,239,35,.08), rgba(250,239,35,.02) 55%, transparent);
  box-shadow: inset 0 0 50px rgba(250,239,35,.025);
}
.cpdb-key-icon { display:grid; place-items:center; width:50px; height:50px; border-radius:16px; color:var(--cp-yellow); font-size:1.4rem; background:rgba(250,239,35,.08); }
.cpdb-key small { display:block; color:var(--cp-yellow); font-size:.59rem; font-weight:950; letter-spacing:.09em; text-transform:uppercase; }
.cpdb-key strong { display:block; margin-top:5px; color:#fff; font-size:clamp(.92rem,1.5vw,1.18rem); line-height:1.35; }
.cpdb-key p { margin:3px 0 0; color:var(--cp-muted); font-size:.68rem; line-height:1.4; }

/* ── responsive ───────────────────────────────────────────────────── */
@media (max-width: 1220px) {
  .cpdb-board { grid-template-columns: minmax(440px, 1.2fr) minmax(310px,.8fr); }
  .cpdb-coach-column { position: static; grid-column:1/-1; grid-template-columns:repeat(4,minmax(0,1fr)); }
  .cpdb-coach-column > .cpdb-panel-head,
  .cpdb-coach-title { grid-column:1/-1; }
  .cpdb-reading-card { margin:0; }
  .cpdb-decision-note { grid-column:1/-1; }
  .cpdb-key { grid-column:1/-1; }
}

@media (max-width: 900px) {
  #section-coach-progression { padding: 16px 14px 72px; }
  .cpdb-header { align-items:stretch; flex-direction:column; gap:14px; }
  .cpdb-toolbar { width:100%; }
  .cpdb-select-wrap:first-child { flex:1 1 auto; }
  .cpdb-board { grid-template-columns:1fr; }
  .cpdb-key { grid-column:1; }
  .cpdb-coach-column { grid-column:1; grid-template-columns:1fr 1fr; }
  .cpdb-zone { grid-template-columns:78px minmax(0,1fr); }
  .cpdb-metric-row { grid-template-columns:minmax(95px,1fr) 82px 68px 105px; }
  .cpdb-start { display:none; }
}

@media (max-width: 620px) {
  #section-coach-progression { padding: 14px 10px 72px; }
  .cpdb-header h1 { font-size:1.7rem; }
  .cpdb-header-copy { font-size:.74rem; }
  .cpdb-toolbar { display:grid; grid-template-columns:1fr 102px 42px; gap:7px; }
  .cpdb-select-wrap { min-width:0; }
  .cpdb-select { padding-left:34px; padding-right:28px; font-size:.67rem; }
  .cpdb-insight-line { font-size:.72rem; }
  .cpdb-panel { border-radius:16px; }
  .cpdb-panel-head { padding:13px 12px; }
  .cpdb-zones { padding:0 11px 2px; }
  .cpdb-zone { display:block; padding:14px 0; }
  .cpdb-zone-visual { flex-direction:row; justify-content:space-between; margin-bottom:10px; }
  .cpdb-anatomy { width:38px; height:70px; }
  .cpdb-metric-row {
    grid-template-columns:minmax(86px,1fr) 74px 68px 72px;
    gap:5px;
    padding:8px;
    min-height:52px;
  }
  .cpdb-current strong { font-size:.82rem; }
  .cpdb-spark { width:72px; height:30px; }
  .cpdb-trend-word { display:none; }
  .cpdb-delta { font-size:.58rem; }
  .cpdb-matrix-wrap { padding:8px; }
  .cpdb-coach-column { grid-template-columns:1fr; gap:8px; }
  .cpdb-reading-card { margin:0 8px; }
  .cpdb-key { grid-template-columns:40px 1fr; gap:11px; padding:14px; border-radius:14px; }
  .cpdb-key-icon { width:38px; height:38px; border-radius:12px; font-size:1rem; }
  .cpdb-key strong { font-size:.84rem; }
  .cpdb-key p { font-size:.61rem; }
}

@media (max-width: 390px) {
  .cpdb-toolbar { grid-template-columns:1fr 92px 40px; }
  .cpdb-metric-row { grid-template-columns:minmax(78px,1fr) 70px 56px 64px; }
  .cpdb-spark { width:64px; }
  .cpdb-metric-name strong { font-size:.67rem; }
  .cpdb-metric-name small { font-size:.52rem; }
}