/* Speaking pace calculator page. Sits on the site's shared container system
   (.wrap = max-width var(--maxw)) and reuses shared tokens from site.css
   (--yellow, --ink, --muted, --faint, --hair, --e-blue). Self-contained
   layout for the hero, the live tool card, and the SEO prose below it. */

.pc-page { padding: 80px 0 96px; }

/* the state machine hides panels via the hidden attribute; author display rules
   would otherwise override the UA's [hidden]{display:none} */
#pc [hidden] { display: none !important; }

/* hero */
.pc-hero { text-align: center; margin: 0 0 44px; }
.pc-kicker { font-size: 14px; letter-spacing: .02em; color: var(--muted); margin: 0 0 14px; }
.pc-title { font-size: clamp(32px, 5vw, 50px); line-height: 1.06; letter-spacing: -0.022em; margin: 0 auto 18px; max-width: 18ch; }
.pc-lede { font-size: clamp(18px, 2.1vw, 21px); line-height: 1.5; color: var(--muted); margin: 0 auto; max-width: 56ch; }

/* the tool card */
.pc-tool { margin: 0 auto; }
.pc-card { border: 1px solid var(--hair); border-radius: 20px; background: #fff; padding: 44px 28px 48px; min-height: 320px; box-shadow: 0 30px 70px -46px rgba(0,0,0,0.4); }

/* idle / unsupported: centered soft panel */
.pc-msg { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; min-height: 232px; }
.pc-msg p { color: var(--muted); margin: 0 auto; max-width: 46ch; font-size: 17px; line-height: 1.5; }
.pc-fine { font-size: 13.5px; color: var(--faint) !important; }

/* running: big number, band gauge, status, controls */
.pc-run { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.pc-num { font-size: clamp(56px, 12vw, 92px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.pc-num .pc-unit { font-size: 0.28em; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-left: 6px; }

.pc-gauge { width: 100%; max-width: 440px; }
.pc-gauge-track { position: relative; height: 12px; border-radius: 999px; background: var(--w-grey, #f0f1f3); overflow: hidden; }
.pc-gauge-band { position: absolute; top: 0; bottom: 0; background: var(--sig-gauge, #22c55e); opacity: .38; }
.pc-gauge-track { overflow: visible; }
.pc-gauge-marker { position: absolute; top: 50%; width: 3px; height: 22px; border-radius: 2px; background: var(--ink); transform: translate(-50%, -50%); transition: left .18s ease; }
.pc-gauge-scale { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }

/* Live mic-level bar: it maps the microphone's real loudness reading, so the page
   visibly hears the visitor from the first word while the dial still gathers words. */
.pc-hear { width: 180px; height: 4px; margin: 14px auto 0; border-radius: 999px; background: var(--w-grey, #f0f1f3); overflow: hidden; }
.pc-hear-fill { height: 100%; width: 0%; border-radius: 999px; background: var(--sig-gauge, #22c55e); opacity: .55; transition: width 120ms ease; }
.pc-status { margin: 0; font-size: 17px; color: var(--muted); min-height: 1.5em; }
.pc-avg-live { margin: 6px 0 0; font-size: 14px; color: var(--faint); }
.pc-count { margin: 4px 0 0; font-size: 14px; color: var(--faint); }
.pc-diag-row { margin: 18px 0 0; font-size: 12px; color: var(--faint); }
.pc-diag { border: 0; background: none; padding: 0; font: inherit; color: var(--muted); text-decoration: underline; cursor: pointer; }
.pc-diag-note { margin-left: 6px; }
.pc-status.fast, .pc-status.slow { color: #d1495b; font-weight: 550; }

.pc-underbar { display: flex; align-items: center; gap: 20px; }
.pc-elapsed { font-size: 13px; color: var(--faint); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 8px; }
.pc-elapsed::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); flex: 0 0 auto; }

/* results */
.pc-results { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; min-height: 232px; justify-content: center; }
.pc-avg { margin: 0; font-size: clamp(24px, 4vw, 32px); font-weight: 600; letter-spacing: -0.02em; }
.pc-verdict { margin: 0; font-size: 18px; line-height: 1.5; color: var(--muted); max-width: 48ch; }

.pc-support { margin: 18px auto 0; text-align: center; font-size: 13.5px; color: var(--faint); max-width: 56ch; line-height: 1.5; }

/* SEO prose sections */
.pc-sec { margin: 72px 0 0; }
.pc-sec h2 { font-size: clamp(24px, 3vw, 30px); letter-spacing: -0.015em; margin: 0 0 18px; }
.pc-sec p { color: var(--muted); font-size: 17px; line-height: 1.6; max-width: 64ch; margin: 0 0 14px; }
.pc-sec ul { margin: 0; padding-left: 20px; color: var(--muted); font-size: 17px; line-height: 1.6; max-width: 64ch; }
.pc-sec li { margin: 0 0 8px; }
.pc-sec a { color: var(--ink); font-weight: 550; }

/* the small pace table */
.pc-table { border-collapse: collapse; margin: 0 0 12px; font-size: 16px; }
.pc-table th, .pc-table td { text-align: left; padding: 9px 22px 9px 0; border-bottom: 1px solid var(--hair); color: var(--muted); }
.pc-table th { color: var(--ink); font-weight: 550; }
.pc-cap { font-size: 14px; color: var(--faint); margin: 0; }

.pc-pointer { max-width: 640px; margin: 40px auto 0; text-align: center; font-size: 17px; line-height: 1.5; color: var(--muted); }
.pc-pointer a { color: var(--ink); font-weight: 550; }

@media (max-width: 620px) {
  .pc-page { padding: 52px 0 72px; }
  .pc-card { padding: 34px 22px 40px; }
  .pc-sec { margin-top: 56px; }
}