/* ============================================================
 * v3-tools.css — group layer for the "tools" pages
 * Pages: hatsuon.html, shindan.html, join.html, free.html, gift.html
 * Load order: … → rin-v3.css → v3-site.css → v3-tools.css
 * Only fixes what v3-site.css leaves off on these pages; no copy changes.
 * ============================================================ */

/* ---------- 1. tool panels (発音チェック / 英語力診断) ---------- */

/* 英語力診断の発音測定: pron-check.js injects `.hc-btn{background:var(--lp-paper)}` after
   the page CSS, which paints the primary action black. Put it back on the v3 brass. */
body.v3-site .pc-root .hc-btn:not(.ghost):not(.recording) {
  background: var(--v3-accent);
  border-color: var(--v3-accent);
  color: var(--v3-on-accent);
  border-radius: 0;
  font-family: var(--serif);
  min-height: 46px;
}
body.v3-site .pc-root .hc-btn.ghost { border-radius: 0; font-family: var(--serif); min-height: 46px; }
body.v3-site .pc-root .hc-card { margin: 0 0 24px; }

/* 例文リストの和訳: --lp-mute on the grey row measured 3.56:1 */
body.v3-site .hc-s .jp { color: var(--v3-body); }

/* 発音チェック本文の小見出し: inline font-size:1.18rem made them the same size as the body text */
body.v3-site .hc-head + .section + .section h2.lp-h2 {
  font-size: clamp(22px, 2vw, 28px) !important;
  font-weight: 400;
  line-height: 1.5;
  margin: 72px 0 20px !important;
  max-width: 30em;
}
body.v3-site .hc-head + .section + .section .wrap > h2.lp-h2:first-child { margin-top: 0 !important; }

/* 診断結果の中の囲み: v3-site's `.section .sub { margin: 0 }` (meant for band subtitles)
   removed the gap between the text and the button below it */
body.v3-site .sd-result .sd-gift .sub { margin: 0 0 16px; font-size: 15px; line-height: 1.9; max-width: none; }
body.v3-site .sd-result .sd-gift > p:first-child { margin: 0 0 8px; }
body.v3-site .sd-result :is(.sd-gift, .sd-line, .sd-cta, .sd-share) { padding: 22px 24px; }
body.v3-site .sd-result .sd-share .btn { margin: 0 0 12px; }

/* ---------- 2. 無料教材 ---------- */
/* 注記: opacity .6 on the warm-white ground measured 3.33:1 */
body.v3-site .free-note { opacity: 1; color: var(--v3-mute); }

/* ---------- 3. 特典教材 ---------- */
/* 瞬間英作文の問い (.jp.q) is the prompt the reader answers; v3-site dimmed it with the other .jp lines */
body.v3-site .item .jp.q { color: var(--v3-text); font-size: 17px; line-height: 1.8; }
/* the closing CTA is the only block in its section: the section padding already gives the space */
body.v3-site .section > .wrap > .gift-cta:first-child { margin-top: 0; }

/* ---------- 4. 入会・無料相談 (join has no .site-premium, so .wrap kept style.css's 24px) ---------- */
body.v3-site:not(.site-premium) .wrap { padding-left: 32px; padding-right: 32px; }

/* dark → light alternation: 「相談から始める」(dark) was followed by THE FLOW (dark),
   then LET'S TALK (light). THE FLOW turns warm white and LET'S TALK turns dark. */
@media screen {
  body.v3-site .hero + .section + .section + .section {
    --v3-bg: #F5F5F2;
    --v3-bg-2: #EAEAE5;
    --v3-bg-3: #E1E0D8;
    --v3-text: #0A0A0B;
    --v3-body: #3E3C37;
    --v3-mute: #6A665E;
    --v3-rule: rgba(10, 10, 11, .14);
    --v3-rule-2: rgba(10, 10, 11, .30);
    --v3-accent-text: #8E6326;
    --v3-accent-wash: rgba(192, 138, 62, .13);
    --v3-input: #FBFBF9;
    --brass: #8E6326;
    /* legacy variables are resolved on body, so this block (not a v3-site light scope) re-binds them */
    --canvas-night: var(--v3-bg);
    --canvas-night-soft: var(--v3-bg-2);
    --on-primary: var(--v3-text);
    --on-primary-mute: var(--v3-body);
    --hairline: var(--v3-rule);
    --hairline-light: var(--v3-rule);
    --hairline-strong: var(--v3-rule-2);
    --surface-2: var(--v3-accent-wash);
    --surface-border: var(--v3-rule);
    --glass-bg: var(--v3-bg);
    --glass-border: var(--v3-rule);
    --input-fill: var(--v3-input);
    --lp-canvas: var(--v3-bg);
    --lp-canvas-2: var(--v3-bg-2);
    --lp-surface: var(--v3-bg-3);
    --lp-paper: var(--v3-text);
    --lp-body: var(--v3-body);
    --lp-mute: var(--v3-mute);
    --lp-hair: var(--v3-rule);
    --lp-hair-2: var(--v3-rule-2);
    --rin-bg: var(--v3-bg);
    --rin-surface: var(--v3-bg-2);
    --rin-surface-raised: var(--v3-bg-3);
    --rin-text: var(--v3-text);
    --rin-text-muted: var(--v3-body);
    --rin-border: var(--v3-rule);
    --rin-brass-light: var(--v3-accent-text);
    background: var(--v3-bg) !important; /* beats inline style="background:var(--canvas-night)" */
    color: var(--v3-text);
  }
  body.v3-site .hero + .section + .section + .section + .band {
    --v3-bg: #0A0A0B;
    --v3-bg-2: #141412;
    --v3-bg-3: #1D1B17;
    --v3-text: #F5F5F2;
    --v3-body: #C4BFB4;
    --v3-mute: #948F85;
    --v3-rule: rgba(245, 245, 242, .16);
    --v3-rule-2: rgba(245, 245, 242, .32);
    --v3-accent-text: #DDBB84;
    --v3-accent-wash: rgba(192, 138, 62, .10);
    --v3-input: #0F0F0E;
    --brass: #C08A3E;
    color: var(--v3-text);
  }
}

/* ---------- 5. small screens ---------- */
@media (max-width: 720px) {
  /* v3-site's mobile padding loses to its own `html body.v3-site :is(.hc-card, .sd-card)` rule,
     so the panels kept 36px and nested boxes left a ~230px text column on a 390px screen */
  html body.v3-site :is(.hc-card, .sd-card) { padding: 26px 18px; }
  html body.v3-site .sd-card .hc-card { padding: 22px 16px; }
  body.v3-site .sd-result :is(.sd-gift, .sd-line, .sd-cta, .sd-share) { padding: 18px 16px; }

  /* 発音チェックの操作ボタン: fill each row instead of leaving ragged widths */
  body.v3-site :is(.hc-actions, .hc-demo, .hc-mini-actions) > .hc-btn { flex: 1 1 auto; justify-content: center; }
  body.v3-site .hc-head + .section + .section h2.lp-h2 { margin-top: 56px !important; }

  body.v3-site:not(.site-premium) .wrap { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 374px) {
  body.v3-site:not(.site-premium) .wrap { padding-left: 14px; padding-right: 14px; }
}