/* ─────────────────────────────────────────────────────────────────
   PLANNER · Listening deep-dive page styles (.prl-*).

   Parallel to .prd-* (Reading). Reuses .pwr-* hero classes from the
   Writing planner so the three subjects feel like a family — anything
   Listening-specific lives here.
   ───────────────────────────────────────────────────────────── */

/* 3-column hero — mirrors Writing (band/insight + middle card +
   history). Middle card holds the section breakdown gauges instead
   of Writing's skill-distribution radar. */
.pwr-hero-grid.prl-hero-grid--3col {
  grid-template-columns: 1.25fr 1fr 1fr;
}
@media (max-width: 1100px) {
  .pwr-hero-grid.prl-hero-grid--3col { grid-template-columns: 1fr; }
}

/* Section breakdown card — middle column. Centred vertically so the
   four gauges sit in the middle of the card like Writing's radar. */
.prl-sec-card {
  align-items: stretch;
  justify-content: center;
}

/* 2x2 gauge grid — fills the card more than a single 1x4 row and
   gives each gauge enough breathing room to read as a proper dial. */
.prl-gauge-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 14px;
  align-items: end;
  justify-items: center;
  padding: 4px 8px 0;
}
.prl-gauge-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.prl-gauge-key {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #8C7757;
}

/* Half-circle gauge SVG. Background track + foreground arc fill;
   dasharray on .prl-gauge-fg controls the fill length. The fill
   colour is set per-section so each gauge has its own identity. */
.prl-gauge {
  width: 100%;
  height: auto;
  display: block;
  max-width: 140px;
}
.prl-gauge-bg {
  fill: none;
  stroke: rgba(74, 58, 38, 0.10);
  stroke-width: 8;
  stroke-linecap: round;
}
.prl-gauge-fg {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dasharray 360ms ease;
}
.prl-gauge--s1 .prl-gauge-fg { stroke: #4A87A3; }   /* slate blue   */
.prl-gauge--s2 .prl-gauge-fg { stroke: #6FA050; }   /* sage green   */
.prl-gauge--s3 .prl-gauge-fg { stroke: #C77A4E; }   /* terracotta   */
.prl-gauge--s4 .prl-gauge-fg { stroke: #9D7FA8; }   /* muted plum   */

.prl-gauge-num {
  font-family: 'Fraunces', 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  fill: #2A1F12;
  font-variant-numeric: tabular-nums;
  text-anchor: middle;
}

/* Weakest tag below the gauge — ghost copies hold the line so all
   four gauges sit on the same baseline. */
.prl-gauge-weak {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #CB4528;
  margin-top: 1px;
}
.prl-gauge-weak--ghost {
  color: transparent;
  user-select: none;
}

/* Card footer caption — small muted print telling the user the window
   the section bands are computed over. */
.prl-sec-foot {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  color: #8C7757;
  text-align: center;
  margin-top: 4px;
}