/* ============================================================
   movwav theme — viewer.css
   Voice Check の道具の見た目。組み方は2つ：
   - `.sv--page` … /voice-check/ に埋め込む。サイトの style.css と一緒に読まれる
   - `.sv--full` … 全画面の別窓（/?movwav_spectrogram=1）。**style.css は読まない**

   ⚠️ **ここに書くものは全部 `.sv` の内側に閉じる。** ページではサイトの CSS と同居するので、
   `:root` や `body` を触ると、ヘッダーやフッターまで変わる（トークンの `--surface` は
   サイトとこことで値が違う）。例外は別窓の `body.sv-body` だけ。
   色・書体・部品の形は style.css の Sound Check に揃えてある ─ サイトのトークンを変えたら、ここも直すこと。
   ============================================================ */
.sv{
  --ground:     #14110D;
  --surface:    #100E0B;
  --panel:      #1C1813;
  --line:       #2E2820;
  --line-soft:  #221E18;
  --fg:         #EFE9E0;
  --fg-dim:     #A3998C;
  --fg-quiet:   #8A8073;
  --fg-faint:   #6D6458;   /* 文字には使わない（style.css と同じ約束） */
  --accent:     #F7AB00;
  --accent-deep:#BD8200;
  /* 録音中の印だけに使う赤。サイトの色には無いが、**「いま録っている」の合図は赤で誰にでも読める**ので、
     この用途に限って持ち込む（ほかに使わないこと ─ 使うと合図の意味が薄まる） */
  --rec:        #F2554A;
  --font-display: Futura, "Century Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-jp: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Noto Sans JP", sans-serif;
  --font-mono: "SF Mono", Menlo, Consolas, monospace;

  color: var(--fg);
  font-family: var(--font-jp); font-size: 12px; line-height: 1.6;
}
.sv *, .sv *::before, .sv *::after{ box-sizing: border-box; }
.sv [hidden]{ display: none !important; }
.sv :focus-visible{ outline: 1px solid var(--accent); outline-offset: 2px; }

/* ---- 別窓だけ：画面いっぱい。上から 名前と再生 / 入力 / 道具 / 見取り図 / 本体 / 読み取り、本体だけが伸びる ---- */
body.sv-body{ margin: 0; height: 100vh; height: 100dvh; overflow: hidden; background: #100E0B; }
.sv--full{
  display: grid;
  grid-template-rows: auto auto auto 40px 1fr auto;
  /* ⚠️ 列は必ず minmax(0,1fr)。既定の auto だと、道具の列の最小幅まで窓からはみ出す */
  grid-template-columns: minmax(0, 1fr);
  height: 100%;
  padding: 0 16px;
  background: var(--surface);
}

/* ---- ページだけ：流れの中に置く。本体の高さは画面に合わせて決める ---- */
.sv--page{
  display: grid; grid-template-columns: minmax(0, 1fr);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 0 16px;
}
.sv--page .sv-main{ height: clamp(300px, 58vh, 620px); }

/* ---- 名前と再生 ---- */
.sv-top{
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
  padding: 12px 0 10px;
  border-bottom: 1px solid var(--line-soft);
}
.sv-id{ display: flex; align-items: baseline; gap: 14px; min-width: 0; flex: 1 1 320px; }
.sv-eyebrow{
  font-family: var(--font-display); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent); flex: none;
}
.sv-name{ font-size: 13px; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sv-meta{ font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; color: var(--fg-dim); white-space: nowrap; }
.sv-transport{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.sv-time{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--fg-dim); font-variant-numeric: tabular-nums; min-width: 17ch; }

/* ---- ボタン（Sound Check の .rm-play / .rm-clear と同じ形）---- */
.sv-btn{
  --c: 7px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
  color: var(--fg-dim); padding: 6px 14px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(var(--line), var(--line)) border-box;
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
  transition: color .2s;
}
.sv-btn:hover{ color: var(--fg); }
.sv-btn:disabled{ color: var(--fg-faint); cursor: default; }
.sv-play[aria-pressed="true"]{
  color: #14110D;
  background: linear-gradient(var(--accent), var(--accent)) padding-box, linear-gradient(var(--accent), var(--accent)) border-box;
}
.sv-play-mark{ width: 0; height: 0; flex: none; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.sv-play[aria-pressed="true"] .sv-play-mark{ width: 8px; height: 8px; border: 0; background: currentColor; }

.sv-field{ display: inline-flex; align-items: center; gap: 8px; }
.sv-field, .sv-field output{ font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; color: var(--fg-dim); }
.sv-field output{ min-width: 3ch; font-variant-numeric: tabular-nums; }
.sv-field input[type="range"]{ -webkit-appearance: none; appearance: none; width: 90px; height: 3px; background: var(--line); cursor: pointer; }
.sv-field input[type="range"]::-webkit-slider-thumb{ -webkit-appearance: none; appearance: none; width: 11px; height: 15px; background: var(--accent); cursor: grab; }
.sv-field input[type="range"]::-moz-range-thumb{ width: 11px; height: 15px; background: var(--accent); border: 0; border-radius: 0; }

/* ---- 音を入れる ---- */
.sv-inputs{
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  padding: 12px 0 4px;
}
/* **塗りのボタンは「録る」だけ。** 来る人のほとんどがスマホなので、主役を1つにする */
.sv-rec{
  color: #14110D; font-size: 12px; padding: 10px 20px; letter-spacing: .08em;
  font-family: var(--font-jp); font-weight: 600;
  background: linear-gradient(var(--accent), var(--accent)) padding-box, linear-gradient(var(--accent), var(--accent)) border-box;
}
.sv-rec:hover{ color: #14110D; }
.sv-rec-dot{ width: 9px; height: 9px; border-radius: 50%; background: #14110D; flex: none; }
/* 録音中は「止める」の形に。点は四角になって、ゆっくり明滅する */
.sv-rec[aria-pressed="true"] .sv-rec-dot{ border-radius: 0; animation: sv-blink 1s steps(2, start) infinite; }
@keyframes sv-blink{ to{ opacity: .35; } }
@media (prefers-reduced-motion: reduce){ .sv-rec[aria-pressed="true"] .sv-rec-dot{ animation: none; } }
.sv-inputs #sv-open, .sv-inputs #sv-sample{ padding: 9px 14px; }
.sv-rec-status{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.sv-rec-status.is-error{ color: var(--accent); font-family: var(--font-jp); letter-spacing: .02em; }
.sv-inputs-end{ margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: 8px; }
.sv-full svg{ flex: none; }

/* ---- 道具 ---- */
.sv-tools{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 9px 0; }
.sv-group{ display: inline-flex; align-items: center; gap: 8px; }
.sv-label{ font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .16em; color: var(--fg-quiet); }
/* 択一。Sound Check の波形の3択（.rm-waves）と同じ組み方 */
.sv-seg{ display: inline-flex; border: 1px solid var(--line); }
.sv-seg button{
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em;
  color: var(--fg-dim); background: none; border: 0; border-radius: 0;
  padding: 4px 9px; cursor: pointer; margin: 0;
  transition: color .2s, background .2s;
}
.sv-seg button + button{ border-left: 1px solid var(--line); }
.sv-seg button:hover{ color: var(--fg); }
.sv-seg button[aria-pressed="true"]{ color: #14110D; background: var(--accent); }
.sv-seg button:focus-visible{ outline: 1px solid var(--fg); outline-offset: -3px; }
.sv-seg .jp{ font-family: var(--font-jp); font-size: 10.5px; }
.sv-check{ display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; color: var(--fg-dim); }
.sv-check input{ accent-color: var(--accent); margin: 0; }
.sv-legend{ display: inline-flex; flex-wrap: wrap; gap: 4px 10px; font-family: var(--font-mono); font-size: 10px; color: var(--fg-dim); }
.sv-legend i{ display: inline-block; width: 12px; height: 2px; vertical-align: middle; margin-right: 4px; }
.sv-legend i.is-dash{ background: repeating-linear-gradient(90deg, var(--fg) 0 3px, transparent 3px 5px); }

/* ページ：細かい設定は「詳しい設定」に畳む（見かたの2択は本体の真上のタブ） */
.sv--page:not(.is-advanced) .sv-adv{ display: none; }

/* ---- 見かたのタブ（ページ）----
   左右半分ずつ。**選んでいる側は、上にオレンジの線・地を明るく・下の罫線を切る** ─ 本体とつながった見出しに見せる。
   選んでいない側も字は読める濃さ（--fg-dim）にして、「もう1つある」ことが分かるようにする */
.sv-modetabs{
  display: grid; grid-template-columns: 1fr 1fr;
  margin: 8px 0 6px;
  border-bottom: 1px solid var(--line);
}
.sv-modetab{
  display: grid; gap: 3px; justify-items: start; text-align: left;
  padding: 12px 18px 11px; margin: 0 0 -1px;
  background: transparent; color: var(--fg-dim); cursor: pointer;
  border: 1px solid transparent; border-top: 2px solid transparent; border-radius: 0;
  font-family: var(--font-jp);
  transition: color .2s, background .2s;
}
.sv-modetab b{ font-size: 16px; font-weight: 600; letter-spacing: .04em; line-height: 1.3; }
.sv-modetab small{ font-size: 11px; color: var(--fg-quiet); line-height: 1.4; }
.sv-modetab:hover{ color: var(--fg); background: rgba(35,32,25,.5); }
.sv-modetab[aria-pressed="true"]{
  color: var(--fg); background: var(--panel);
  border-color: var(--line) var(--line) var(--panel);
  border-top-color: var(--accent);
}
.sv-modetab[aria-pressed="true"] b{ color: var(--accent); }
.sv-modetab[aria-pressed="true"] small{ color: var(--fg-dim); }
.sv-modetab:focus-visible{ outline: 1px solid var(--fg); outline-offset: -4px; }
/* 「自由」（詳しい設定を触ったあと）のときは、どちらも押されていない ─ 両方を控えめに見せるだけ */
.sv-more{
  margin-left: auto;
  font-family: var(--font-jp); font-size: 11px; color: var(--fg-dim);
  background: none; border: 0; padding: 6px 2px; cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.sv-more::after{ content: " ＋"; }
.sv--page.is-advanced .sv-more::after{ content: " −"; }
.sv-more:hover{ color: var(--fg); }

/* ---- 再生の段：ページでは本体のすぐ下（2026年9月13日）----
   **指で押す大きさにする**（再生は高さ44px、ほかは44px四方。iOS の目安）。
   見出しの段にあると、スマホでは波形から画面1枚ぶん離れて「見ながら押す」ができなかった */
.sv-transport--below{
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding: 10px 0 2px 56px;
}
.sv-transport--below .sv-play{ min-height: 44px; min-width: 116px; font-size: 12px; letter-spacing: .1em; }
.sv-tbtns{ display: inline-flex; border: 1px solid var(--line); }
.sv-tbtn{
  width: 44px; height: 42px; padding: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 0; color: var(--fg-dim); cursor: pointer;
  font-family: var(--font-jp); font-size: 11px;
}
.sv-tbtn + .sv-tbtn{ border-left: 1px solid var(--line); }
.sv-tbtn--text{ width: auto; padding: 0 14px; }
.sv-tbtn:hover{ color: var(--fg); }
.sv-tbtn:disabled{ color: var(--fg-faint); cursor: default; }
.sv-tbtn:focus-visible{ outline: 1px solid var(--fg); outline-offset: -3px; }
.sv-transport--below .sv-time{ font-size: 12px; min-width: 0; }
.sv-transport--below .sv-vol{ margin-left: auto; }
/* 指のとき、音量のつまみを大きくする（11×15px ではつかめない） */
@media (pointer: coarse){
  .sv-field input[type="range"]{ height: 28px; background: linear-gradient(var(--line), var(--line)) center / 100% 3px no-repeat; }
  .sv-field input[type="range"]::-webkit-slider-thumb{ width: 18px; height: 26px; }
  .sv-field input[type="range"]::-moz-range-thumb{ width: 18px; height: 26px; }
}

/* ---- 見取り図 ---- */
.sv-overwrap{ padding: 4px 0 6px 56px; }
.sv--page .sv-overwrap{ height: 40px; }
#sv-over{ display: block; width: 100%; height: 30px; background: #17140F; cursor: pointer; touch-action: none; }

/* ---- 本体 ---- */
.sv-main{ display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 22px; min-height: 0; }
/* ⚠️ **目盛りの canvas は枠の中に浮かせる。** グリッドの項目として置くと、
   canvas の高さが行の最小の高さになって、窓を縮めても本体が縮まない */
.sv-axis{ position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.sv-axis canvas{ position: absolute; left: 0; top: 0; display: block; }
.sv-axis-f{ grid-column: 1; grid-row: 1; }
.sv-plot{
  grid-column: 2; grid-row: 1;
  position: relative; min-height: 0; overflow: hidden;
  background: var(--ground);
  cursor: crosshair; touch-action: none;
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
/* ページでは縦のスクロールをブラウザに返す（指で本体を触ってもページが流れるように）。
   左右のドラッグと、2本指の拡大縮小は viewer.js が受ける */
.sv--page .sv-plot{ touch-action: pan-y; }
.sv-plot.is-panning{ cursor: grabbing; }
.sv-plot canvas{ position: absolute; left: 0; top: 0; display: block; }
.sv-axis-t{ grid-column: 2; grid-row: 2; }

/* 録音中の印 */
.sv-recbadge{
  position: absolute; left: 10px; top: 8px; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: .16em; color: var(--fg);
  background: rgba(15,13,10,.85); padding: 6px 12px 6px 10px;
  box-shadow: inset 0 0 0 1px var(--rec);
  pointer-events: none; font-variant-numeric: tabular-nums;
}
#sv-recbadge-time{ font-family: var(--font-mono); font-weight: 400; font-size: 12px; letter-spacing: .04em; }
.sv-recbadge i{ width: 9px; height: 9px; border-radius: 50%; background: var(--rec); animation: sv-blink 1s steps(2, start) infinite; }
/* 録音中は、下の再生ボタンが「止める」になる。赤い縁と点で、いま押すと何が止まるのかを言う */
.sv-play.is-rec{
  color: var(--fg);
  background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(var(--rec), var(--rec)) border-box;
}
.sv-play.is-rec .sv-play-mark{ width: 9px; height: 9px; border: 0; border-radius: 50%; background: var(--rec); animation: sv-blink 1s steps(2, start) infinite; }
.sv-time.is-rec{ color: var(--rec); }
@media (prefers-reduced-motion: reduce){
  .sv-recbadge i, .sv-play.is-rec .sv-play-mark{ animation: none; }
}

.sv-busy{
  position: absolute; right: 10px; top: 8px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .16em; color: var(--fg-quiet);
  background: rgba(15,13,10,.8); padding: 3px 8px; pointer-events: none;
}

/* 音が無いとき・読み込み中・投げ込み中の案内 */
.sv-drop{
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px;
  width: 100%; border: 0; margin: 0; padding: 0 16px; cursor: pointer; text-align: center;
  background: rgba(16,14,11,.92);
  color: var(--fg-dim); font-family: var(--font-jp); font-size: 13px; letter-spacing: .04em; line-height: 1.7;
  box-shadow: inset 0 0 0 1px var(--line);
}
.sv-drop-sub{ font-size: 11px; color: var(--fg-quiet); }
.sv-drop.is-error{ color: var(--accent); }
.sv-drop.is-loading{ cursor: progress; }
.sv.is-dragging .sv-drop{ display: flex !important; color: var(--fg); box-shadow: inset 0 0 0 2px var(--accent); }
/* 録音中は案内を出さない（本体に流れる帯を見せる） */
.sv.is-recording .sv-drop{ display: none !important; }

/* ---- 読み取り ---- */
.sv-status{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 22px;
  padding: 8px 0 12px 56px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; color: var(--fg-dim);
  min-height: 34px;
}
.sv-read{ font-variant-numeric: tabular-nums; flex: 1 1 auto; white-space: pre-wrap; min-width: 0; }
.sv-voice{ color: var(--fg-dim); }
.sv-voice.is-busy{ color: var(--fg-quiet); }
.sv-caveat{ flex-basis: 100%; font-family: var(--font-jp); font-size: 10.5px; color: var(--fg-quiet); }
.sv-noscript{ padding: 12px 0; color: var(--accent); }

@media (max-width: 720px){
  .sv--full, .sv--page{ padding: 0 10px; }
  .sv-tools{ gap: 6px 10px; }
  .sv-overwrap, .sv-status{ padding-left: 0; }
  .sv-id{ flex-basis: 100%; flex-wrap: wrap; gap: 4px 10px; }
  .sv-time{ min-width: 0; }
  .sv-main{ grid-template-columns: 40px minmax(0, 1fr); }
  .sv--page .sv-main{ height: clamp(280px, 52vh, 460px); }
  /* 録るボタンは横いっぱい。ほかの2つはその下に半分ずつ */
  .sv-inputs{ display: grid; grid-template-columns: 1fr 1fr; }
  .sv-rec{ grid-column: 1 / -1; padding: 13px 20px; font-size: 13px; }
  .sv-rec-status{ grid-column: 1 / -1; }
  .sv-inputs-end{ grid-column: 1 / -1; margin-left: 0; }
  .sv-inputs-end .sv-full{ display: none; }   /* 別窓はパソコン向け */
  .sv-read{ font-size: 10px; }
  /* 再生の段：1行目に 再生（広く）＋位置と範囲のボタン、2行目に 時刻と音量 */
  .sv-transport--below{ padding-left: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; }
  .sv-transport--below .sv-play{ min-width: 0; width: 100%; }
  .sv-transport--below .sv-time{ grid-column: 1; font-size: 11px; white-space: nowrap; }
  .sv-transport--below .sv-vol{ grid-column: 2; margin-left: 0; justify-self: end; }
  /* ⚠️ つまみを長くすると左の時刻に食い込む（110px で「0:02.800音量」とくっついた） */
  .sv-transport--below .sv-vol{ gap: 6px; }
  .sv-transport--below .sv-vol input[type="range"]{ width: 72px; }
  .sv-modetab{ padding: 10px 12px 9px; }
  .sv-modetab b{ font-size: 15px; }
  .sv-modetab small{ font-size: 10px; }
}