/* /voicefilter/demo/ 音声ノイズ除去デモ

   白地のライトテーマ。配色は /voicefilter/ の紹介ページ（voicefilter.css の
   デザイントークン）に合わせている。
     処理前 = 青（--before）、処理後 = 赤（--after、ailia ブランドカラー）。app.js の描画色と対応。
   クラス名・id は元のデモ（call-noise-reduction/demo/wasm/public）のまま。
   app.js が id で要素を掴むので、id は変えないこと。 */

:root {
    --bg: #ffffff;
    --surface: #F7FBFF;
    --border: #dfe3e8;
    --ink: #313844;
    --ink-2: #64748B;
    --ink-3: #98a3b3;
    --accent: #003C8D;          /* UI のアクセント（voicefilter サイトと同じ青） */
    --accent-soft: rgba(0, 60, 141, .08);
    --primary: #EB3155;         /* 主ボタン（ailia ブランドの赤に統一） */
    --primary-dark: #c8264a;
    --before: #003C8D;          /* 処理前 = 青。app.js の wave-in / spec-in と対応 */
    --before-soft: rgba(0, 60, 141, .08);
    --after: #EB3155;           /* 処理後 = 赤（結果 = ailia ブランドカラー）。app.js の wave-out / spec-out と対応 */
    --after-soft: rgba(235, 49, 85, .08);
    --error: #c02d2d;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

/* author の display が UA の [hidden]{display:none} に勝ってしまうので、
   hidden を本当に隠すために明示する（.controls は flex、label は inline-flex）。 */
[hidden] { display: none !important; }

body {
    margin: 0;
    /* 共通ヘッダー(/common/header.shtml)の .navArea は position:fixed。
       高さは PC 60px / 1023px 以下 48px。 */
    padding-top: 60px;
    background: var(--bg);
    color: var(--ink);
    font: 15px/1.65 system-ui, -apple-system, "Segoe UI", "Hiragino Sans",
        "Noto Sans JP", sans-serif;
}

@media (max-width: 1023px) {
    body { padding-top: 48px; }
}

/* 共通ヘッダーはリンクの下線をリセットしないので、各ページ側で打ち消す */
.navArea a { text-decoration: none; }

.wrap {
    max-width: 940px;
    margin: 0 auto;
    padding: 32px 20px 64px;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

/* ----------------------------------------------------------------- header */

header.head { display: flex; flex-direction: column; gap: 4px; }

header.head h1 {
    margin: 0;
    font-size: 26px;
    letter-spacing: .01em;
    line-height: 1.35;
}

header.head p.lead-text {
    margin: 4px 0 0;
    color: var(--ink-2);
    font-size: 15px;
}

/* 元のソリューションページへ戻る導線 */
.back {
    margin: 0 0 2px;
    font-size: 13px;
}
.back a { color: var(--ink-2); text-decoration: none; }
.back a:hover { color: var(--accent); text-decoration: underline; }

/* ------------------------------------------------------------------- tabs */

.tabs { display: flex; gap: .5rem; }
.tabs button {
    flex: 1;
    font: inherit;
    font-weight: 700;
    padding: .85rem 1rem;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg);
    color: var(--ink-2);
    cursor: pointer;
    text-align: left;
    line-height: 1.4;
}
.tabs button span {
    display: block;
    font-weight: 400;
    font-size: .84rem;
    color: var(--ink-3);
    margin-top: .15rem;
}
.tabs button.active {
    border-color: #003C8D;
    background: rgba(0,60,141,.08);
    color: #003C8D;
}
.tabs button.active span { color: #003C8D; opacity: .85; }

@media (max-width: 599px) {
    .tabs { flex-direction: column; }
}

/* ------------------------------------------------------------------ panel */

.panel {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.1rem 1.2rem;
    background: var(--bg);
}
.controls { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }
.controls + .controls {
    margin-top: .7rem;
    padding-top: .7rem;
    border-top: 1px solid var(--border);
}

button.action {
    font: inherit;
    font-weight: 700;
    padding: .55rem 1.15rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
button.action.primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
button.action.primary:hover:not(:disabled) { background: rgba(235,49,85,.85); }
button.action:disabled { opacity: .4; cursor: default; }

label {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;          /* 狭い幅では select を次の行へ落とす */
    gap: .4rem;
    max-width: 100%;
    color: var(--ink-2);
    font-size: .9rem;
    white-space: nowrap;      /* 「モデル」が 1 文字ずつ折れないように */
}
/* 「モデル」ラベルだけ太字・アクセントカラーにして目立たせる
   （中の select 自体の色・太さには影響させない）。 */
.model-label {
    font-weight: 700;
    color: var(--accent);
}
input[type=file] {
    font: inherit;
    font-size: .82rem;
    max-width: 230px;
    color: var(--ink-2);
}
select {
    font: inherit;
    max-width: 100%;
    min-width: 0;
    padding: .3rem .5rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--ink);
}
input[type=checkbox] { accent-color: var(--accent); }

/* 感度スライダー：ブラウザ既定のフォーカス時の丸い半透明オーバーレイは消しつつ、
   白いトラックの上に進捗（青）とつまみの輪郭は残す。
   進捗の割合は JS 側で --fill カスタムプロパティとして書き込む。 */
input.mic-gain {
    -webkit-appearance: none;
    appearance: none;
    width: 148px;
    height: 4px;
    background: transparent;
    border: none;
    border-radius: 999px;
    outline: none;
}
input.mic-gain::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: linear-gradient(to right,
        var(--accent) var(--fill, 0%), #fff var(--fill, 0%));
}
input.mic-gain::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    margin-top: -6px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--accent);
    cursor: pointer;
}
input.mic-gain::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: linear-gradient(to right,
        var(--accent) var(--fill, 0%), #fff var(--fill, 0%));
}
input.mic-gain::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--accent);
    cursor: pointer;
}
input.mic-gain:focus { outline: none; }
input.mic-gain::-moz-focus-outer { border: 0; }

/* 入力（ファイル / マイク）をアイコンで並べて選ぶトグル。
   下の <select id="source">/#enrol-source> はそのまま残し、視覚的にだけ隠す
   （app.js は select の value / change イベントで動いているため、機能はそのまま）。 */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
/* select 要素は幅 1px にしても中身の分だけ広がることがあるため、
   完全に display:none にする（JS からは value / dispatchEvent が
   使えれば十分で、視覚的に見せる必要はない）。 */
select.sr-only { display: none; }
.source-toggle { display: inline-flex; gap: .4rem; }
.source-status {
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink-2);
    margin-left: .3rem;
}
.source-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    font: inherit;
    font-size: .88rem;
    font-weight: 700;
    padding: .6rem 1.1rem;
    min-width: 108px;
    border-radius: 10px;
    border: 2px solid var(--ink-2);
    background: #fff;
    color: var(--ink-2);
    cursor: pointer;
}
.source-btn.active {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
}
/* svg は既定で display:inline のため、テキストとの間に画像と同じ
   ベースライン分の隙間ができ、中央が微妙にずれて見える。block にして解消。 */
.source-btn svg { display: block; flex-shrink: 0; }

/* モデル選択の補足（1 話者 / 複数話者の推奨） */
.engine-hint {
    margin: .35rem 0 0;
    font-size: .8rem;
    color: var(--ink-3);
    line-height: 1.6;
    width: 100%;
}
.engine-hint b { color: var(--ink-2); font-weight: 600; }

/* ------------------------------------------------------------------ panes */

.panes { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 740px) { .panes { grid-template-columns: 1fr; } }

.pane h2 {
    margin: 0 0 .45rem;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .02em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    min-height: 1.9rem;
}
.pane-actions { display: flex; gap: .35rem; }

button.small {
    font: inherit;
    font-size: .74rem;
    font-weight: 600;
    padding: .2rem .6rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--ink-2);
    cursor: pointer;
    letter-spacing: 0;
}
button.small.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .3rem .45rem;
}
/* 登録ボタン: テキストラベル（録音／停止）を入れるので、固定サイズの正方形
   ではなく内容に合わせた幅の丸みのあるボタンにする。 */
#enrol {
    min-width: 4.4rem;
    height: 2.6rem;
    padding: 0 1rem;
    border-radius: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
}
button.small:disabled { opacity: .35; cursor: default; }
.pane.before button.small:not(:disabled) { color: var(--before); border-color: var(--before); }
.pane.after  button.small:not(:disabled) { color: var(--after);  border-color: var(--after); }
.pane.before h2 { color: var(--before); }
.pane.after  h2 { color: var(--after); }

canvas {
    width: 100%;
    height: 84px;
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 7px;
}
canvas + canvas { margin-top: .45rem; height: 100px; }

/* 話者抽出の手順 1（登録）。パネルの端まで広げて、下の操作行と揃える */
.step {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: .9rem 1.2rem;
    margin: 0 -1.2rem 1rem;
    background: var(--surface);
}
.step h2, #run-heading h2 {
    margin: 0 0 .3rem;
    font-size: .95rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: .5rem;
}
#run-heading h2 { margin: 0 0 .6rem; }
.num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
}
.lead { margin: 0 0 .7rem; font-size: .86rem; color: var(--ink-2); }
.chip { font-size: .8rem; color: var(--ink-3); }
.enrol-wave { height: 54px; margin-top: .7rem; }
.enrol-heading {
    margin: .9rem 0 .35rem;
    font-size: .8rem;
    font-weight: 700;
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
}

.footnote {
    display: flex;
    gap: 1.4rem;
    flex-wrap: wrap;
    color: var(--ink-3);
    font-size: .82rem;
}
.footnote b { color: var(--ink-2); font-weight: 600; }

/* 話者抽出モードで、声を登録するまで「2 試す」を触れなくする。
   inert 属性はクリックもキーボード操作も一括で無効化する（app.js 側で
   個々の disabled を管理しなくて済むように、見た目と操作を同じ属性で揃える）。 */
#run-section[inert] { opacity: .45; filter: grayscale(.4); }

.status { font-size: .85rem; color: var(--ink-3); min-height: 1.4em; }

/* 小さな読み込み中インジケーター（ファイルの処理中に表示）。
   パーセント表示は小さいファイルでは一瞬すぎて見えないため、こちらに変更。 */
.spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    vertical-align: -2px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: vf-spin .7s linear infinite;
}
@keyframes vf-spin { to { transform: rotate(360deg); } }
.status.ok { color: var(--after); }
.status.bad { color: var(--error); }
.hint { font-size: .85rem; color: var(--ink-2); margin: .75rem 0 0; }

/* マイクのレベルメーター（10 個の点と 1 本の印） */
canvas.mic-level { width: 148px; height: 20px; flex: 0 0 auto; background: transparent; border: 0; border-radius: 0; }
.mic-gain-value { font-family: var(--mono); font-size: .78rem; color: var(--ink-3); }

/* ----------------------------------------------------------------- notes */

.notes {
    font-size: .84rem;
    color: var(--ink-2);
    line-height: 1.8;
    padding: 0 .2rem;
}
.notes ul { margin: 0; padding-left: 1.2em; }
.notes li + li { margin-top: .2em; }