/* ナレッジ管理タブ（画面K）。
   表・カード・フォーム・しるしは components.css / admin.css をそのまま使う。
   ここに置くのは、この画面にしか出てこないものだけ（原文を見せる箱・判定の色）。 */

/* 操作の結果。**画面の下に固定する** —— この画面は縦に長く、上に出すと
   下の方で操作した人には見えない（差し替えを保存しても何も起きていないように見えた）。 */
.kbmsg { position:fixed; right:var(--s5); bottom:var(--s5); z-index:48; max-width:420px;
         background:var(--surface); border:1px solid var(--line-strong);
         border-radius:var(--r2); padding:var(--s2) var(--s4); font-size:var(--f-sm);
         color:var(--ink); box-shadow:var(--sh2); }
.kbmsg[hidden] { display:none; }
.kbmsg.ok  { border-color:var(--ok-line);  background:var(--ok-soft);  color:var(--ok); }
.kbmsg.bad { border-color:var(--bad-line); background:var(--bad-soft); color:var(--bad); }

.kbchk { font-size:var(--f-sm); color:var(--ink-2); display:flex; align-items:center;
         gap:var(--s1); white-space:nowrap; }

/* 索引に載っている原文。**折り返して全部見せる**（根拠を確かめる画面なので省略しない） */
.kbchunk { padding:var(--s3); margin-bottom:var(--s2); max-width:1060px; }
.kbchunk .h { font-size:var(--f-sm); font-weight:600; display:flex; gap:var(--s2);
              align-items:center; flex-wrap:wrap; }
.kbchunk .h .n { color:var(--ink-2); font-weight:400; font-variant-numeric:tabular-nums; }
.kbchunk pre { white-space:pre-wrap; word-break:break-word; font-size:var(--f-sm);
               line-height:1.7; background:var(--surface-2); border-radius:var(--r1);
               padding:var(--s3); margin:var(--s2) 0 0; }
.kbchunk .acts { margin-top:var(--s2); display:flex; gap:var(--s2); flex-wrap:wrap; }
.kbchunk.hidden { opacity:.55; border-style:dashed; }
.kbchunk.over { border-color:var(--warn-line); background:var(--warn-soft); }
.kbchunk textarea { width:100%; min-height:170px; font-size:var(--f-sm); line-height:1.7;
                    font-family:var(--mono); }
/* 原文から飛んできた塊を一瞬だけ光らせる（どこへ移動したか分からないと迷子になる） */
.kbchunk.flash { outline:2px solid var(--accent); outline-offset:2px; }

/* 採点結果。前回との差は符号つきで出す（増減が読み取れないと比べる意味がない） */
.kbdelta { font-variant-numeric:tabular-nums; font-weight:600; }
.kbdelta.up { color:var(--ok); }
.kbdelta.down { color:var(--bad); }

.kbform { padding:var(--s3) var(--s4); margin-bottom:var(--s3); max-width:1060px; }
.kbform label { display:block; font-size:var(--f-sm); color:var(--ink-2);
                margin:var(--s2) 0 var(--s1); }
.kbform input, .kbform textarea { width:100%; }
.kbform textarea { min-height:160px; font-size:var(--f-sm); line-height:1.7;
                   font-family:var(--mono); resize:vertical; }
.kbform .acts { margin-top:var(--s3); display:flex; gap:var(--s2); flex-wrap:wrap; }

/* 資料ファイルの原文（分割の切れ目つき）。
   **等幅で、折り返して、全部見せる。** 索引に何が入ったかを確かめる画面なので、
   横スクロールで隠すと肝心の行が読めない。 */
.kbsource { margin-bottom:var(--s3); max-width:1060px; }
.kbraw { max-height:540px; overflow-y:auto; padding:var(--s1) 0; }
/* 切れ目の見出し（.cut）は flex-basis:100% で1段目を占める。**flex-wrap が要る** ——
   無いと見出しと行番号と本文が同じ段に押し込まれ、文字が縦に潰れる（2026-09-02 に踏んだ）。 */
.kbraw .ln { display:flex; flex-wrap:wrap; gap:0 var(--s3); padding:1px var(--s3);
             cursor:pointer; font-size:var(--f-sm); line-height:1.7; }
.kbraw .ln:hover { background:var(--accent-soft); }
/* 塊ごとに地の色を変える。**切れ目そのものを見せる**のがこの表示の目的 */
.kbraw .ln.alt { background:var(--surface-2); }
.kbraw .ln.alt:hover { background:var(--accent-soft); }
/* どの塊にも入らなかった行（分割の隙間）。見えないと「消えた」ことに気づけない */
.kbraw .ln.out { background:var(--warn-soft); }
.kbraw .no { color:var(--ink-3); min-width:34px; text-align:right; user-select:none;
             font-variant-numeric:tabular-nums; font-family:var(--mono); }
.kbraw .tx { white-space:pre-wrap; word-break:break-word; flex:1; min-width:0;
             font-family:var(--mono); }
.kbraw .cut { flex-basis:100%; font-size:var(--f-xs); color:var(--accent);
              font-weight:600; border-top:1px dashed var(--line-strong);
              margin:var(--s1) 0 2px; padding-top:var(--s1); }

@media (max-width:900px),
       (hover:none) and (pointer:coarse) and (max-width:1280px) {
  /* 下部のタブバーに隠れないよう、その上へ逃がす */
  .kbmsg { right:var(--s2); left:var(--s2); max-width:none;
           bottom:calc(var(--bar-h) + var(--s2) + env(safe-area-inset-bottom)); }
  .kbchunk, .kbform { padding:var(--s3); }
  .kbraw .no { min-width:26px; }
}