/* =============================================================================
   LessonNote — 3パネル可変レイアウト（app.css の後ろに読む・上書き専用）

   ここだけを読めば「レッスン画面の枠組み」が分かるようにしてある。
   色・余白・角丸は app.css のトークン（--sp-* / --r-* / --border / --surface …）を
   そのまま使う。新しい色は足さない。

   DOM（ui/lesson.js が組む）
     .ln-lesson
       .ln-head  ( … ＋ .ln-layout-bar )
       .ln-panes                                   … 横に並ぶ枠（flex）
         .ln-slot.ln-col-left                      … 枠1つ
           .ln-pane-tabs                           … 枠に2枚以上ある時だけ出るタブ
           section.ln-memo.ln-pane                 … パネル本体
         .ln-splitter.ln-pane-splitter             … 枠と枠のあいだ（ドラッグで幅）
         .ln-slot
         .ln-splitter.ln-pane-splitter
         .ln-slot.ln-col-right

   ※ .ln-col-left / .ln-col-right は「一番左の枠／一番右の枠」に付く別名。
      app.css の旧2カラム用の指定がそのまま当たるので、ここで打ち消している。
   ============================================================================= */

/* --- 1. 枠が並ぶ場所 ------------------------------------------------------- */

.ln-lesson > .ln-panes {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;                       /* すきまは仕切り（.ln-splitter）が担当する */
  padding: var(--sp-5);
  background: var(--bg);
  overflow: hidden;
}

/* --- 2. 枠（1〜3枚のパネルが入る） ----------------------------------------- */

.ln-panes > .ln-slot {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
  min-height: 0;
  background: transparent;
  border: 0;                    /* 旧 .ln-col-left の border-right を消す */
  overflow: hidden;
  /* flex-grow は lesson.js が幅（重み）から入れる */
}

/* 旧2カラム時代の指定を打ち消す（別名が付いているので当たってしまう） */
.ln-panes > .ln-col-left,
.ln-panes > .ln-col-right {
  background: transparent;
  border: 0;
  gap: var(--sp-3);
}

/* 枠の中のパネルは、残りの高さを全部使う */
.ln-slot > .ln-memo,
.ln-slot > .ln-ref,
.ln-slot > .ln-notes {
  flex: 1 1 auto;
  min-height: 0;
  border-bottom: 0;             /* 旧 .ln-memo の下線を消す（いまはカード） */
}

/* 資料パネルのハイライト色。
   reference.js は「印」を `var(--ln-ref-mark, …)` でインラインに塗るので、
   この変数を決めておかないと定数のクリーム色が居座り、ダークで文字が読めなくなる。
   app.css の .ln-ref-mark と同じ半透明にそろえる（新しい色は足さない）。 */
.ln-ref { --ln-ref-mark: color-mix(in srgb, var(--al-5) 26%, transparent); }

/* 並び替えでドラッグしている最中のパネル */
.ln-pane.is-moving {
  opacity: .55;
  transform: scale(.995);
}

.ln-slot.is-drop {
  outline: 2px dashed var(--brand);
  outline-offset: -3px;
  border-radius: var(--r-5);
}

body.ln-pane-dragging { cursor: grabbing; user-select: none; }
body.ln-pane-dragging * { user-select: none !important; }

/* --- 3. 仕切り ------------------------------------------------------------- */

.ln-panes > .ln-splitter {
  display: block;               /* app.css は 1023px 以下で消しているので戻す */
  flex: 0 0 14px;
  align-self: stretch;
  position: relative;
  cursor: col-resize;
  background: transparent;
  border: 0;
  padding: 0;
  touch-action: none;
}

.ln-panes > .ln-splitter::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 50%;
  width: 1px;
  height: auto;
  margin: 0;
  transform: translateX(-50%);
  border-radius: var(--r-pill);
  background: var(--border-2);
  transition: background-color .14s ease, width .14s ease;
}

.ln-panes > .ln-splitter:hover::before,
.ln-panes > .ln-splitter.is-dragging::before {
  width: 3px;
  background: var(--brand);
}

/* --- 4. パネルの見出し帯（掴んで並び替え・◀ ▶ ×） ------------------------- */

.ln-pane-head {
  cursor: grab;
  flex-wrap: nowrap;
  row-gap: 4px;
}

body.ln-pane-dragging .ln-pane-head { cursor: grabbing; }

/* 見出しの中で「伸びる係」を1つに決める（右端に操作ボタンを寄せるため） */
.ln-pane-head > .ln-ref-hint,
.ln-pane-head > .ln-memo-hint {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-0);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* app.css の「見出しの最初の span＝タイトル扱い」を打ち消す（説明文なので普通の文字に） */
.ln-pane-head > .ln-memo-hint,
.ln-memo > .ln-pane-head > .ln-memo-hint:first-of-type,
.ln-ref > .ln-pane-head > .ln-ref-hint:first-of-type {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.ln-pane-head > .ln-lang-toggle,
.ln-pane-head > .ln-ref-tools,
.ln-pane-head > .ln-notes-tabs { margin-left: 0; }

/* パネルが細くなったら、見出しは折り返して説明文を落とす。
   （ボタンは1つも消さない＝授業中に「押せない」を作らない） */
.ln-panes .ln-pane { container-type: inline-size; container-name: lnpane; }

@container lnpane (max-width: 360px) {
  /* ここまで細いと役割の一言も入らない。タブ名／title が代わりに伝える。 */
  .ln-pane-head > .ln-memo-hint,
  .ln-pane-head > .ln-ref-hint { display: none; }
}

@container lnpane (max-width: 300px) {
  .ln-pane-head { flex-wrap: wrap; }
  .ln-pane-ctl { margin-left: auto; }
}

.ln-pane-ctl {
  order: 99;                    /* 何が入っている見出しでも必ず右端 */
  margin-left: auto;
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  padding-left: var(--sp-2);
}

.ln-pane-btn {
  flex: none;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-1);
  line-height: 1;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-1);
  cursor: pointer;
  transition: color .12s ease, background-color .12s ease, border-color .12s ease;
}

.ln-pane-btn:hover {
  color: var(--text);
  background: var(--surface);
  border-color: var(--border-2);
}

.ln-pane-btn.ln-pane-close:hover {
  color: var(--danger);
  border-color: var(--danger);
  background: var(--danger-bg);
}

.ln-pane-btn.is-off,
.ln-pane-btn:disabled {
  opacity: .28;
  cursor: default;
  pointer-events: none;
}

/* --- 5. 枠のタブ（メモ ↔ 資料）--------------------------------------------- */
/*  役割の違いを取り違えないよう、タブ名に「自動で解析／選んだ所だけ」と書く。 */

.ln-pane-tabs {
  flex: none;
  display: flex;
  gap: 4px;
  padding: 0;
}

.ln-pane-tab {
  flex: 1 1 0;
  min-width: 0;
  padding: 7px 10px;
  font-size: var(--fs-1);
  font-weight: 700;
  color: var(--muted);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: color .12s ease, background-color .12s ease, border-color .12s ease;
}

.ln-pane-tab:hover { color: var(--text); }

.ln-pane-tab.is-on {
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
}

:root[data-theme="dark"] .ln-pane-tab.is-on { color: #1C1917; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ln-pane-tab.is-on { color: #1C1917; }
}

/* --- 6. ヘッダーのレイアウト操作 ------------------------------------------- */

.ln-layout-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 5px;
  margin-left: auto;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
}

.ln-layout-tog {
  cursor: pointer;
  opacity: .5;
}

.ln-layout-tog.is-on {
  opacity: 1;
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
}

:root[data-theme="dark"] .ln-layout-tog.is-on { color: #1C1917; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ln-layout-tog.is-on { color: #1C1917; }
}

.ln-layout-preset,
.ln-layout-reset {
  min-height: 24px;
  padding: 2px 9px;
  font-size: var(--fs-0);
  border-radius: var(--r-pill);
}

.ln-layout-preset { min-width: 84px; }
.ln-layout-reset { padding: 2px 7px; }

/* ヘッダーは「レイアウト操作」と「Topics/Library/Finish」の2かたまり。
   どちらも右側に寄せたいので、auto マージンは左のかたまりだけに付ける。 */
.ln-lesson > .ln-head > .ln-head-actions { margin-left: var(--sp-3); }

/* --- 7. 狭い画面 ----------------------------------------------------------- */
/*  枠の数は lesson.js が実測して決める（パネル1枚あたり 300px を切ったら減らす）。
    CSS 側は「文字と余白を詰める」だけを担当する。 */

@media (max-width: 1023px) {
  .ln-lesson > .ln-panes { padding: var(--sp-4); }
  .ln-panes > .ln-slot { gap: var(--sp-2); }
}

@media (max-width: 767px) {
  .ln-lesson > .ln-panes { padding: var(--sp-3); }
  .ln-panes > .ln-splitter { flex-basis: 10px; }
  .ln-layout-bar { order: 9; flex: 1 1 100%; justify-content: center; margin-left: 0; }
  .ln-pane-head > .ln-ref-hint,
  .ln-pane-head > .ln-memo-hint { display: none; }   /* タブ名が役割を伝えるので省く */
  .ln-pane-tab { font-size: var(--fs-0); padding: 6px 8px; }
}

/* --- 8. 印刷 --------------------------------------------------------------- */

@media print {
  .ln-layout-bar,
  .ln-pane-ctl,
  .ln-pane-tabs,
  .ln-panes > .ln-splitter { display: none !important; }
  .ln-lesson > .ln-panes { display: block; padding: 0; overflow: visible; }
  .ln-panes > .ln-slot { display: block; overflow: visible; }
}