/* ============================================================
   power-bi/course.css — Power BI 初級編（流れる文字講座）専用スタイル
   前提: /tplybook/tplybook.css を先に読み込む（ノートブック基盤）
   エンジンは /power-bi/course.js
   ============================================================ */

/* ----- モード選択（通常表示のときだけ出る） ----- */
.flow-invite{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  margin:0 0 26px;
}
.flow-invite button{
  display:inline-flex;align-items:center;gap:6px;
  font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.04em;
  color:var(--tb-brand);background:#fef2f2;border:1px solid #f6c9c8;
  border-radius:999px;padding:6px 14px;cursor:pointer;transition:all .15s;
}
.flow-invite button:hover{background:var(--tb-brand);color:#fff;border-color:var(--tb-brand);}
.flow-invite small{font-size:11px;color:var(--tb-ink-faint);font-family:"JetBrains Mono",monospace;}

/* ----- 再生中コントロール（画面下に固定） ----- */
.flow-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  display:none;justify-content:center;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  pointer-events:none;
}
.flow-bar.on{display:flex;}
.flow-bar .inner{
  pointer-events:auto;
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  background:rgba(255,255,255,.94);backdrop-filter:blur(6px);
  border:1px solid var(--tb-line);border-radius:999px;
  padding:7px 12px;box-shadow:0 4px 18px rgba(0,0,0,.08);
  font-family:"JetBrains Mono",monospace;
}
.flow-bar button{
  font-family:inherit;font-size:12px;letter-spacing:.02em;
  border:1px solid var(--tb-line);background:#fff;color:var(--tb-ink);
  border-radius:999px;padding:5px 12px;cursor:pointer;transition:all .12s;
}
.flow-bar button:hover{border-color:var(--tb-brand);color:var(--tb-brand);}
.flow-bar button.primary{background:var(--tb-brand);border-color:var(--tb-brand);color:#fff;}
.flow-bar button.primary:hover{opacity:.9;color:#fff;}
.flow-bar select{
  font-family:inherit;font-size:12px;border:1px solid var(--tb-line);
  border-radius:999px;padding:4px 8px;background:#fff;color:var(--tb-ink-soft);
}
.flow-bar .note{font-size:11px;color:var(--tb-ink-faint);padding:0 2px;}
.flow-bar .note.pulse{color:var(--tb-brand);animation:notePulse 1.2s ease-in-out infinite;}
@keyframes notePulse{50%{opacity:.4;}}

/* ----- 再生ステージ ----- */
.tplybook-prose .flow-hid{visibility:hidden;}
.flow-caret{display:inline-block;width:0;height:1em;position:relative;vertical-align:baseline;}
.flow-caret::after{
  content:"▍";color:var(--tb-brand);position:absolute;left:0;top:0;
  line-height:1;height:1em;
  animation:flowBlink 1s steps(1) infinite;
}
@keyframes flowBlink{50%{opacity:0;}}
.tplybook-prose .flow-hidden{opacity:0;}
.tplybook-prose .flow-shown{opacity:1;transition:opacity .5s;}

/* ----- 図版：未表示のあいだも罫線ノートとして見せる -----
   opacity で figure ごと消すと罫線も消えるため、
   中身（img / figcaption / キャプチャ待ちボックス）だけを隠し、
   figure 自体には本文と同じ罫線を敷く。段落間の余白も
   margin ではなく padding にして罫線を途切れさせない */
.tplybook-prose.flowing .lesson-figure{
  margin:0;padding-bottom:2em;
  background-image:repeating-linear-gradient(
    180deg,
    transparent 0 calc(2em - 1px),
    rgba(176, 141, 87, .22) calc(2em - 1px) 2em
  );
  background-position:0 -4px;
}
.tplybook-prose.flowing .lesson-figure.flow-hidden{opacity:1;}
.tplybook-prose.flowing .lesson-figure.flow-hidden img,
.tplybook-prose.flowing .lesson-figure.flow-hidden figcaption{opacity:0;}
.tplybook-prose.flowing .lesson-figure.flow-hidden::after{opacity:0;}
.tplybook-prose.flowing .lesson-figure img,
.tplybook-prose.flowing .lesson-figure figcaption{transition:opacity .5s;}
.tplybook-prose.flowing .lesson-figure.flow-shown img,
.tplybook-prose.flowing .lesson-figure.flow-shown figcaption{opacity:1;}

/* ----- スクロールバーを常に表示（再生中もバーの位置で現在地がわかる） ----- */
html{overflow-y:scroll;}

/* ----- 蛍光マーカー（Word原稿の黄色蛍光ペン→<mark>）。
       再生中は顕像済みの文字にだけ引かれる ----- */
.tplybook-prose mark{background:linear-gradient(transparent 62%, rgba(255,214,90,.6) 62%);color:inherit;padding:0 1px;}
.tplybook-prose.flowing mark{background:transparent;}
.tplybook-prose.flowing mark .flow-rev{background:linear-gradient(transparent 62%, rgba(255,214,90,.6) 62%);}

/* ----- 再生完了サイン ----- */
.flow-fin{
  text-align:center;font-family:"JetBrains Mono",monospace;font-size:11px;
  letter-spacing:.3em;color:var(--tb-ink-faint);padding:10px 0 0;
  opacity:0;transition:opacity .8s;
}
.flow-fin.on{opacity:1;}

/* ----- 作業コールアウト（原稿の「→」行） ----- */
.lesson-act{
  margin:0 0 2em;padding:0.8em 1.2em;
  border:1px solid var(--tb-line);border-left:3px solid var(--tb-brand);
  border-radius:6px;background:var(--tb-paper-deep);
}
.lesson-act b{
  font-family:"JetBrains Mono",monospace;font-size:12px;
  color:var(--tb-brand);margin-right:.6em;font-weight:400;letter-spacing:.04em;
}

/* ----- キャプチャ待ちプレースホルダ ----- */
.tplybook-cover.wait img, .lesson-figure.wait img{display:none;}
.tplybook-cover.wait::after, .lesson-figure.wait::after{
  content:"キャプチャ待ち： " attr(data-file);
  display:flex;align-items:center;justify-content:center;
  height:200px;border:2px dashed var(--tb-line);border-radius:8px;
  font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.05em;
  color:var(--tb-ink-faint);background:var(--tb-paper-deep);
}

/* ----- 画像クリック拡大（ライトボックス） ----- */
.tplybook-prose .lesson-figure img, .tplybook-cover img{cursor:zoom-in;}
#lightbox{
  position:fixed;inset:0;z-index:300;display:none;
  align-items:center;justify-content:center;
  background:rgba(22,22,22,.86);cursor:zoom-out;padding:24px;
}
#lightbox.on{display:flex;}
#lightbox img{
  max-width:min(96vw,1500px);max-height:92vh;
  border-radius:6px;box-shadow:0 12px 48px rgba(0,0,0,.5);
}

/* ----- 講座一覧（index.php） ----- */
/* アイコンはベースラインに載せ、高さを「P」のキャップハイト(約0.72em)に合わせる */
.course-title-icon{width:.72em;height:.72em;vertical-align:baseline;margin-right:.32em;}
.course-toc{list-style:none;margin:0;padding:0;}
.course-toc li{margin:0 0 10px;}
.course-toc a{
  display:flex;align-items:baseline;gap:12px;
  padding:12px 14px;border:1px solid var(--tb-line);border-radius:8px;
  background:#fff;text-decoration:none;color:var(--tb-ink);
  transition:all .13s;
}
.course-toc a:hover{border-color:var(--tb-brand);transform:translateX(2px);}
.course-toc .no{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--tb-brand);flex:none;}
.course-toc .t{font-size:14.5px;line-height:1.5;}
.course-lede{font-size:14.5px;color:var(--tb-ink-soft);line-height:1.9;margin:0 0 22px;} /* 吹き出し(.course-talk)の下余白22pxと揃える */
/* 講師の吹き出し（表紙） */
.course-talk{display:flex;align-items:flex-start;gap:14px;margin:0 0 22px;}
.course-talk-face{flex:0 0 64px;text-align:center;}
.course-talk-face img{
  width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 35%;
  border:2px solid var(--tb-line);background:var(--tb-paper);display:block;margin:0 auto;
}
.course-talk-name{display:block;font-size:11px;color:var(--tb-ink-faint);margin-top:5px;line-height:1.2;}
.course-talk-bubble{
  position:relative;flex:1;min-width:0;
  background:var(--tb-paper-tint);border:1px solid var(--tb-line);border-radius:10px;
  padding:13px 18px;font-size:14.5px;line-height:1.95;color:var(--tb-ink);
}
.course-talk-bubble::before{
  content:"";position:absolute;top:24px;left:-7px;width:12px;height:12px;
  background:inherit;border-left:1px solid var(--tb-line);border-bottom:1px solid var(--tb-line);
  transform:rotate(45deg);
}
.course-dl{margin:0 0 26px;}
.course-dl a{
  display:inline-flex;align-items:center;gap:8px;
  font-family:"JetBrains Mono",monospace;font-size:12.5px;letter-spacing:.02em;
  color:var(--tb-brand);background:#fef2f2;border:1px solid #f6c9c8;
  border-radius:999px;padding:8px 16px;text-decoration:none;transition:all .15s;
}
.course-dl a:hover{background:var(--tb-brand);color:#fff;}

/* ----- 前へ／次へ をボタン化（Power BI のページだけ） ----- */
.tplybook-article-nav{gap:14px;align-items:stretch;}
a.tplybook-nav-item{
  padding:12px 16px;border:1px solid var(--tb-line);border-radius:10px;
  background:#fff;gap:6px;
  transition:border-color .15s,background .15s,transform .15s,box-shadow .15s;
}
a.tplybook-nav-item:hover{
  border-color:var(--tb-brand);background:#fff7f7;
  box-shadow:0 2px 10px rgba(240,78,75,.12);
}
a.tplybook-nav-prev:hover{transform:translateX(-2px);}
a.tplybook-nav-next:hover{transform:translateX(2px);}
a.tplybook-nav-item .tplybook-nav-label{font-weight:700;color:var(--tb-brand);font-size:12.5px;}
/* タイトルは1行固定。はみ出した分は「…」にして左右のボタンの高さを揃える */
a.tplybook-nav-item .tplybook-nav-title{
  display:block;width:100%;max-width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:13.5px;line-height:1.55;
}
a.tplybook-nav-item:hover .tplybook-nav-title{color:var(--tb-brand-dark);}
/* 最初／最後の回の空きスロットは枠を出さず幅だけ確保する */
span.tplybook-nav-item{visibility:hidden;}
@media (max-width:640px){
  span.tplybook-nav-item{display:none;}
}

@media (prefers-reduced-motion: reduce){
  .flow-caret::after{animation:none;}
  .tplybook-prose .flow-shown{transition:none;}
}