/* Singbud free tools (free/)
   Builds on css/styles.css (tokens, type, buttons, FAQ cards, footer) and blog/blog.css (top bar, hero,
   prose, related cards, the closing section). Only the tools' own layout lives here.
   Same rules as the rest of the site: flat colour blocks, no gradients, no blurry shadows. */

/* ---------- Hero with the tool in it ---------- */

.tool-hero { padding: 22px 0 40px; }
.tool-hero .crumbs { margin-bottom: 14px; }
.tool-head { max-width: 760px; }
.tool-head .post-title { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.2rem); }
.tool-head .post-lede { max-width: 52ch; font-size: 1.15rem; margin-top: 12px; }

.tool {
  position: relative;
  margin-top: 24px;
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: 0 6px 0 #CDEBEB;
  padding: 22px 18px 20px;
}
.tool-view { display: grid; gap: 16px; justify-items: center; text-align: center; }
.tool-view[hidden] { display: none !important; }
.tool-bud { width: 132px; }
.tool-bud.is-small { width: 96px; }
.tool-bud svg { width: 100%; height: auto; }
.tool-bud.is-singing .bud-beak-lo { animation: beak 0.5s ease-in-out infinite alternate; transform-box: view-box; }
@keyframes beak { to { transform: rotate(14deg); } }
.tool-title {
  font-family: var(--font-head); font-weight: 700; font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem);
  line-height: 1.15; letter-spacing: -0.02em; max-width: 24ch; text-wrap: balance;
}
.tool-title:focus { outline: none; }
.tool-text { color: var(--ink-soft); max-width: 46ch; }
.tool-tips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tool-tips li { background: var(--mint); border-radius: 999px; padding: 6px 14px; font-size: 0.95rem; font-weight: 600; }
.tool-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.tool-actions .btn { gap: 10px; }
.tool-actions .btn svg { width: 22px; height: 22px; flex: none; }
.tool-status { min-height: 1.5em; font-size: 0.98rem; color: var(--ink-soft); max-width: 46ch; }
.tool-status.is-error { color: var(--coral-text); font-weight: 600; }
.tool-private { margin: 16px auto 0; font-size: 0.95rem; color: var(--ink-soft); text-align: center; max-width: 60ch; text-wrap: balance; }
.tool-private svg { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; }
.tool .btn-link { font-size: 1rem; }

/* A quiet "skip" or "play again" link next to the main button */
.text-btn {
  background: none; border: 0; padding: 8px 6px; cursor: pointer; font-weight: 700; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.text-btn:hover { text-decoration-color: var(--ink); }
.text-btn[disabled] { opacity: 0.5; cursor: default; }

/* Choice chips (how do you feel about your singing?) */
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.chip {
  border: 2px solid #CDEBEB; background: var(--white); border-radius: 999px; padding: 8px 16px;
  font-weight: 700; cursor: pointer; min-height: 44px;
}
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.chip:focus-visible, .text-btn:focus-visible, .key:focus-visible, .td-answer:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* Round progress dots */
.dots { display: flex; gap: 8px; justify-content: center; list-style: none; margin: 0; padding: 0; }
.dots li { width: 12px; height: 12px; border-radius: 50%; background: #DCEFEF; }
.dots li.is-now { background: var(--ink); }
.dots li.is-hit { background: var(--teal-dark); }
.dots li.is-near { background: var(--yellow); }
.dots li.is-miss { background: var(--cheek); }

/* The live voice picture */
.voice-chart { width: 100%; height: 190px; border-radius: 22px; background: var(--mint); }
.level { width: 160px; height: 10px; border-radius: 999px; background: #DCEFEF; overflow: hidden; }
.level i { display: block; height: 100%; width: 0; background: var(--teal-dark); border-radius: inherit; transition: width 80ms linear; }

/* ---------- 1. Am I singing in tune? ---------- */

.it-big { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.6rem, 2rem + 3vw, 3.6rem); line-height: 1; letter-spacing: -0.03em; }
.it-notes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; width: 100%; max-width: 520px; }
.it-notes li { background: var(--mint); border-radius: 16px; padding: 10px 4px; display: grid; gap: 2px; justify-items: center; font-size: 0.85rem; line-height: 1.25; }
.it-notes b { font-family: var(--font-head); font-size: 1.15rem; }
.it-notes .mark { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: var(--ink); }
.it-notes .is-hit .mark { background: var(--teal); }
.it-notes .is-near .mark { background: var(--yellow); }
.it-notes .is-miss .mark { background: var(--cheek); }
.it-notes .is-quiet .mark { background: #DCEFEF; }
.it-notes small { color: var(--ink-soft); }
.it-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font-size: 0.9rem; color: var(--ink-soft); }
.it-key span { display: inline-flex; align-items: center; gap: 6px; }
.it-key i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.result-box { background: var(--cream); border-radius: 22px; padding: 16px 18px; max-width: 560px; text-align: left; }
.result-box p + p { margin-top: 0.6em; }
.result-box strong { font-weight: 700; }

/* ---------- 2. Tone deaf test ---------- */

.td-progress { width: 100%; max-width: 420px; height: 10px; border-radius: 999px; background: #DCEFEF; overflow: hidden; }
.td-progress i { display: block; height: 100%; width: 0; background: var(--coral); border-radius: inherit; transition: width 300ms ease; }
.td-count { font-weight: 700; color: var(--ink-soft); font-size: 0.95rem; }
.td-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 440px; }
.td-answer {
  --edge: #A9DCDC;
  display: grid; justify-items: center; gap: 4px; padding: 16px 10px 14px; border: 0; border-radius: 22px;
  background: var(--mint); box-shadow: 0 5px 0 var(--edge); cursor: pointer; font-weight: 800; font-size: 1.15rem;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.td-answer svg { width: 34px; height: 34px; }
.td-answer small { font-weight: 600; font-size: 0.85rem; color: var(--ink-soft); }
.td-answer:hover { background: #E2F6F6; }
.td-answer:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--edge); }
.td-answer[disabled] { opacity: 0.55; cursor: default; transform: none; }
.td-answer.is-right { background: var(--belly); --edge: var(--teal-dark); }
.td-answer.is-wrong { background: var(--blush); --edge: var(--cheek); }
.td-feedback { min-height: 1.6em; font-weight: 700; }
.td-scale { width: 100%; max-width: 560px; }
.td-scale svg { width: 100%; height: auto; }

/* ---------- 3. Pitch checker ---------- */

.pc-readout { display: grid; grid-template-columns: 1fr; gap: 10px; justify-items: center; width: 100%; }
.pc-note { font-family: var(--font-head); font-weight: 800; font-size: clamp(3.6rem, 2.8rem + 4vw, 5.2rem); line-height: 1; letter-spacing: -0.03em; min-width: 3ch; }
.pc-note sub { font-size: 0.45em; vertical-align: baseline; margin-left: 2px; font-weight: 700; color: var(--ink-soft); }
.pc-hz { font-size: 0.95rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; min-height: 1.5em; }
.pc-tuner { position: relative; width: 100%; max-width: 420px; height: 46px; }
.pc-scale { position: absolute; inset: 0 0 auto; height: 26px; border-radius: 999px; background: var(--mint); overflow: hidden; }
.pc-scale::before { content: ''; position: absolute; left: 40%; width: 20%; top: 0; bottom: 0; background: var(--belly); }
.pc-scale::after { content: ''; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 2px; margin-left: -1px; background: var(--teal-deeper); }
.pc-ticks { position: absolute; left: 0; right: 0; top: 28px; display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--ink-soft); font-weight: 600; }
.pc-needle {
  position: absolute; top: -4px; left: 50%; width: 14px; height: 34px; margin-left: -7px; border-radius: 7px;
  background: var(--dash); border: 3px solid var(--ink); transition: left 90ms linear, background 150ms ease; opacity: 0.35;
}
.pc-needle.is-on { opacity: 1; background: var(--coral); }
.pc-needle.is-close { background: var(--teal-dark); }
.pc-cents { font-weight: 700; min-height: 1.6em; }

.keys-wrap { width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: 6px; }
.keys { position: relative; height: 128px; margin: 0 auto; }
.key {
  position: absolute; top: 0; border: 2px solid var(--ink); cursor: pointer; padding: 0 0 8px;
  display: flex; align-items: flex-end; justify-content: center; font-size: 0.72rem; font-weight: 700;
  transition: background 120ms ease;
}
.key.is-white { height: 124px; background: var(--white); border-radius: 0 0 10px 10px; color: var(--ink-soft); z-index: 1; }
.key.is-black { height: 78px; background: var(--ink); border-radius: 0 0 8px 8px; z-index: 2; color: transparent; }
.key.is-white:hover { background: #F6FCFC; }
.key.is-sung.is-white { background: var(--teal); color: var(--ink); }
.key.is-sung.is-black { background: var(--teal-deeper); }
.key.is-on.is-white { background: var(--sun); }
.key.is-on.is-black { background: #55656C; }
.key.is-c { color: var(--ink); }

/* ---------- 4. Sky Song ---------- */

.sky { position: relative; margin-top: 22px; border-radius: var(--r-lg); overflow: hidden; background: #BFEFF1; box-shadow: 0 6px 0 #CDEBEB; height: min(72vh, 560px); min-height: 380px; touch-action: manipulation; }
.sky canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.sky-hud { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; pointer-events: none; }
.sky-hud > * { pointer-events: auto; }
.sky-stat { background: rgba(255,255,255,0.9); border-radius: 16px; padding: 4px 14px; display: grid; justify-items: center; line-height: 1.1; min-width: 64px; }
.sky-stat small { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.sky-stat b { font-family: var(--font-head); font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.sky-hearts { display: flex; gap: 4px; background: rgba(255,255,255,0.9); border-radius: 16px; padding: 8px 12px; }
.sky-hearts i { width: 22px; height: 22px; display: block; }
.sky-hearts svg { width: 100%; height: 100%; fill: #DCEFEF; stroke: var(--ink); stroke-width: 1.6; }
.sky-hearts i.is-on svg { fill: var(--coral); }
.sky-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.9); display: grid; place-items: center; cursor: pointer; }
.sky-btn svg { width: 20px; height: 20px; }
.sky-btn:focus-visible { outline: 3px solid var(--ink); }
.sky-count { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; font-family: var(--font-head); font-weight: 800; font-size: clamp(4rem, 3rem + 6vw, 7rem); color: var(--ink); text-shadow: 0 4px 0 rgba(255,255,255,0.8); }
.sky-layer { position: absolute; inset: 0; display: grid; place-items: center; padding: 14px; overflow-y: auto; }
.sky-card {
  background: var(--white); border-radius: 28px; box-shadow: 0 6px 0 #CDEBEB; padding: 18px 18px 16px;
  width: 100%; max-width: 440px; display: grid; gap: 12px; justify-items: center; text-align: center; margin: auto;
}
.sky-card .tool-bud { width: 104px; }
.sky-card h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.sky-card h2:focus { outline: none; }
.sky-how { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; text-align: left; font-size: 0.98rem; }
.sky-how li { display: flex; gap: 10px; align-items: baseline; }
.sky-how li span { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--mint); display: grid; place-items: center; font-weight: 800; font-size: 0.85rem; }
.sky-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.sky-mode { border: 2px solid #CDEBEB; background: var(--white); border-radius: 18px; padding: 8px 10px; display: grid; gap: 2px; cursor: pointer; text-align: center; min-height: 44px; }
.sky-mode small { color: var(--ink-soft); font-size: 0.82rem; }
.sky-mode[aria-checked="true"] { border-color: var(--ink); background: var(--mint); }
.sky-mode:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.sky-best { font-weight: 700; color: var(--ink-soft); }
.sky-big { font-family: var(--font-head); font-weight: 800; font-size: 3.4rem; line-height: 1; }
.sky-stats { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; justify-content: center; }
.sky-stats li { background: var(--mint); border-radius: 14px; padding: 6px 12px; display: grid; justify-items: center; line-height: 1.2; }
.sky-stats b { font-family: var(--font-head); font-size: 1.2rem; }
.sky-stats small { font-size: 0.8rem; color: var(--ink-soft); }
.sky-share { width: 100%; background: var(--cream); border-radius: 18px; padding: 10px 14px; font-size: 0.95rem; text-align: left; }
.sky-card .tool-private { margin-top: 0; font-size: 0.88rem; }
.sky-find { display: grid; gap: 10px; justify-items: center; }

/* ---------- The free tools index ---------- */

.tool-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.tool-card-art { height: 170px; background: var(--mint); display: grid; place-items: center; }
.tool-card-art .bud-stage { width: 130px; }
.tool-card-art svg { width: 100%; height: auto; }
.tool-card-art.is-blush { background: var(--blush); }
.tool-card-art.is-sun { background: var(--sun); }
.tool-card-art.is-sky { background: #BFEFF1; }
.free-strip { background: var(--mint); padding: 52px 0 60px; }
.free-strip h2 { font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.3rem); margin-bottom: 24px; }

/* The closing section: soft, two links, no store buttons */
.next { background: var(--coral); color: var(--cream); padding: 52px 0 64px; }
.next-grid { display: grid; gap: 10px; align-items: center; }
.next-bud { width: 160px; margin: 0 auto; }
.next .eyebrow { color: var(--sun); }
.next h2 { color: var(--white); }
.next .sec-lede { color: #FFE9E4; margin-left: 0; }
.next-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; max-width: 520px; }
.next-actions .btn-secondary { --edge: #B8473D; }
.next-fine { margin-top: 16px; color: #FFE9E4; font-size: 0.98rem; }

/* ---------- Larger screens ---------- */

@media (min-width: 560px) {
  .tool { padding: 28px 28px 24px; }
  .voice-chart { height: 220px; }
  .next-actions { flex-direction: row; flex-wrap: wrap; }
  .tool-cards { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 760px) {
  .tool-hero { padding: 20px 0 52px; }
  .tool-bud { width: 116px; }
  .tool-view { gap: 14px; }
}

@media (min-width: 900px) {
  .tool { padding: 26px 40px 24px; }
  .next { padding: 72px 0 84px; }
  .next-grid { grid-template-columns: 240px 1fr; gap: 48px; }
  .next-bud { width: 220px; }
  .free-strip { padding: 72px 0 84px; }
  .tool-cards.is-four { grid-template-columns: repeat(4, 1fr); }
}

/* Short windows: keep the tool's main button above the fold */
@media (max-height: 620px) {
  .tool-hero { padding-top: 12px; }
  .tool-head .post-lede { display: none; }
  .tool-head .post-title { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem); }
  .tool { margin-top: 14px; padding-top: 16px; }
  .tool-bud { width: 92px; }
  .voice-chart { height: 150px; }
  .sky { height: max(350px, calc(100vh - 236px)); min-height: 0; margin-top: 14px; }
  .sky-layer { padding: 8px; }
  .sky-card { padding: 12px 16px; gap: 8px; }
  .sky-card .tool-bud, .sky-card .tool-private { display: none; }
  .sky-how { font-size: 0.92rem; gap: 2px; }
  .sky-mode { padding: 5px 8px; }
  .sky-big { font-size: 2.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tool-bud.is-singing .bud-beak-lo { animation: none; }
  .pc-needle, .td-progress i, .level i { transition: none; }
}

/* Touch screens have no arrow keys */
@media (pointer: coarse) { .td-answer small { display: none; } }

/* Phones: the tool card explains itself, so the hero lede steps aside and the main button stays on the
   first screen. */
@media (max-width: 559px) {
  .tool-hero { padding-top: 14px; }
  .tool-head .post-lede { display: none; }
  .tool { margin-top: 16px; padding-top: 18px; }
  .tool-view { gap: 12px; }
  .tool-bud { width: 96px; }
  .tool-tips li { font-size: 0.88rem; padding: 4px 12px; }
  .chip { padding: 6px 14px; font-size: 0.95rem; }
}

/* Sky Song on phones: a taller sky, and a start card that fits inside it */
@media (max-width: 559px) {
  .sky { height: clamp(480px, calc(100vh - 150px), 680px); height: clamp(480px, calc(100svh - 150px), 680px); margin-top: 16px; }
  .sky-layer { padding: 10px; }
  .sky-card { padding: 14px 14px 12px; gap: 8px; }
  .sky-card .tool-bud { width: 64px; }
  .sky-how { font-size: 0.92rem; gap: 4px; }
  .sky-mode { padding: 6px 8px; }
  .sky-card .tool-private { display: none; }   /* said under the game too */
  .sky-big { font-size: 2.8rem; }
  .sky-share { font-size: 0.88rem; }
}

/* Pitch checker on wide screens: the readout beside the voice line, the keyboard underneath */
.pc-side { display: grid; gap: 14px; justify-items: center; width: 100%; }
@media (min-width: 900px) {
  .pc-view { grid-template-columns: 360px 1fr; align-items: center; column-gap: 32px; }
  .pc-view .voice-chart { height: 260px; }
  .pc-view .keys-wrap { grid-column: 1 / -1; }
}

/* Start cards on wide screens: Bud on the left, the words and the button on the right, so the
   button stays on the first screen of a laptop, even a short window */
@media (min-width: 760px) {
  .tool-view.is-intro { grid-template-columns: 170px minmax(0, 1fr); justify-items: start; text-align: left; column-gap: 32px; row-gap: 12px; max-width: 820px; margin: 0 auto; }
  .tool-view.is-intro > .tool-bud { grid-row: 1 / span 6; align-self: center; width: 170px; }
  .tool-view.is-intro .chips, .tool-view.is-intro .tool-tips, .tool-view.is-intro .tool-actions { justify-content: flex-start; }
  .tool-view.is-intro .tool-text { max-width: 52ch; }
}

/* Vocal range test */
.range-bud { width: 96px; }
.range-lead, .range-say { max-width: 46ch; color: var(--ink-soft); margin: 0; }
.range-step { font-weight: 700; color: var(--teal-deeper); margin: 0; }
.range-title { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.8rem); margin: 0; }
.range-bar { width: min(100%, 420px); height: 10px; border-radius: 99px; background: var(--mint); overflow: hidden; }
.range-bar span { display: block; height: 100%; width: 0; background: var(--teal-dark); border-radius: 99px; }
.range-result { font-size: clamp(2.6rem, 2rem + 3vw, 4rem); }
.range-to { font-size: .4em; font-weight: 600; color: var(--ink-soft); margin: 0 .2em; }
.range-near { max-width: 46ch; }
.range-near h3 { font-size: 1.1rem; margin: 8px 0; }
.range-near ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; padding: 0; margin: 0 0 8px; font-weight: 700; }
.range-near p { font-size: .95rem; color: var(--ink-soft); margin: 0; }
.range-near a { text-decoration: underline; text-underline-offset: 3px; }

/* Song key finder */
.kf { width: 100%; text-align: left; justify-items: stretch; }
.kf-grid { display: grid; gap: 16px; }
.kf-group { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
.kf-group legend { font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; padding: 0; margin-bottom: 10px; }
.kf-group label { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; }
.kf-wide, .kf-note { grid-column: 1 / -1; }
.kf-group select { width: 100%; min-height: 46px; padding: 8px 10px; border-radius: 12px; border: 2px solid var(--teal); background: #fff; color: var(--ink); font: inherit; font-weight: 500; }
.kf-note { font-size: .95rem; color: var(--ink-soft); margin: 0; }
.kf-note a { text-decoration: underline; text-underline-offset: 3px; }
.kf-answer { background: var(--mint); border-radius: 18px; padding: 18px 20px; text-align: center; }
.kf-answer p { margin: 6px auto 0; max-width: 56ch; }
.kf-headline { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); line-height: 1.2; color: var(--ink); }
.kf-fit { font-weight: 600; }
@media (min-width: 720px) { .kf-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }