/* 体験型チュートリアル (SPEC_v1.1 §4.5) の見た目。コーチ枠 #coach / 光らせる .tuto-glow / 窓の部品。
   点滅の @keyframes tuto-blink は app.css にある (ここでは定義しない)。 */

/* ---- コーチ枠 (右パネルの一番上。画像を隠さない) ---- */
#coach{flex:0 0 auto;margin:8px;padding:10px 12px 10px;background:var(--panel2);border:1px solid var(--line);
  border-left:3px solid var(--acc);border-radius:9px;font-size:12.5px;line-height:1.65;color:var(--ink)}
#coach[hidden]{display:none !important}
#coach .coach-step{font-size:11px;color:var(--acc);font-weight:700;letter-spacing:.04em;font-variant-numeric:tabular-nums}
#coach .coach-title{font-size:14.5px;font-weight:700;margin:1px 0 5px;color:var(--ink)}
#coach .coach-body{color:var(--ink);overflow-wrap:anywhere}
#coach .coach-body p{margin:0 0 6px}
#coach .coach-body b{color:#fff}
#coach .coach-body kbd{font-family:inherit;font-size:11px;color:var(--dim);background:rgba(0,0,0,.28);
  border:1px solid var(--line);border-radius:4px;padding:0 4px}
#coach .coach-check{margin:8px 0 0;padding:5px 9px;border-radius:6px;background:rgba(0,0,0,.22);
  color:var(--dim);font-size:12px;font-weight:600}
#coach .coach-check.ok{color:var(--ok);background:rgba(90,209,138,.12)}
#coach .coach-hint{margin:6px 0 0;padding:5px 9px;border-radius:6px;background:rgba(255,207,107,.10);
  color:var(--warn);font-size:12px;overflow-wrap:anywhere}
#coach .coach-hint[hidden]{display:none}
#coach .coach-actions{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px}
#coach .coach-actions button{padding:4px 12px;font-size:12px;border-radius:6px}
#coach .coach-dots{display:flex;gap:4px;align-items:center;margin-top:8px}
#coach .coach-dots span{width:14px;height:4px;border-radius:2px;background:#3a3d47;display:inline-block}
#coach .coach-dots span.done{background:#3d6b52}
#coach .coach-dots span.now{background:var(--acc)}

/* ---- 光らせる (ふちが脈打つ。レイアウトは動かさない) ---- */
@keyframes tuto-glow{
  from{box-shadow:0 0 0 1px rgba(124,196,255,.55),0 0 3px 0 rgba(124,196,255,.35)}
  to{box-shadow:0 0 0 2px rgba(124,196,255,.95),0 0 12px 3px rgba(124,196,255,.7)}
}
.tuto-glow{animation:tuto-glow 1.2s ease-in-out infinite alternate;border-color:var(--acc) !important;position:relative;z-index:2}
#wh-ev.tuto-glow{border-radius:7px}
#wh-bsz.tuto-glow{border-radius:6px}          /* スライダーの光るふちの角を丸める */
@media (prefers-reduced-motion:reduce){
  .tuto-glow{animation:none;box-shadow:0 0 0 2px rgba(124,196,255,.95),0 0 10px 2px rgba(124,196,255,.55)}
}

/* ---- 窓の部品 (はじめに / 完了 / 塗り方の説明) ---- */
.modal.tuto-intro,.modal.tuto-done{max-width:460px}
.modal.tuto-fallback{max-width:560px}
.modal .tuto-lead{margin:6px 0 4px;color:var(--ink);line-height:1.75}
.modal .tuto-sub{margin:4px 0 2px;font-size:12.5px;color:var(--dim)}
.warn-box{margin:12px 0 6px;padding:10px 12px;background:rgba(255,207,107,.09);border:1px solid rgba(255,207,107,.45);
  border-radius:8px;color:#ffe3a3;font-size:13px;line-height:1.7}
.warn-box b{color:#fff}
.modal .tuto-check{display:flex;align-items:center;gap:8px;margin:14px 0 0;font-size:13px}
.modal .tuto-check input{width:auto;margin:0}
.modal .tuto-check label{cursor:pointer}
.modal.tuto-fallback .tuto-guide{margin:6px 0 4px;max-height:52vh;overflow:auto;font-size:13px}
.modal.tuto-fallback .tuto-guide h3{font-size:14px;color:var(--acc)}
.modal.tuto-fallback .tuto-guide ol{padding-left:20px;margin:6px 0}
.modal.tuto-fallback .tuto-guide li{margin:4px 0}