/* 学習者の画面にしか出ない部品（#184）。`base.css` の**あと**に読む。

   問題セットの開閉（`details.unit`）、課題の日付の並び、課題見出しの下の
   一行（`.crumb`）。教員コンソールに同じ画面は無い ── コンソールは同じ
   役割を `.subtitle` という別の名前で持っている（#165）。

   **`.inline-field .body input` がここに居る理由。** コンソール側は同じ
   セレクタを `:not([type=checkbox])` 付きで持っている。共有分にまとめて
   両方へ配ると、除外していないこちらの規則がコンソールのチェックボックスに
   `width:100%` を効かせてしまう。**分けるのは配信量のためではない。**

   **`base.css` と同じセレクタは持たない**（切り出した時点で 0 件）。
   同じセレクタをここに書くと、共有分より後に読まれるぶんだけ黙って勝つ ──
   共有分を直したのに効かない、という追いにくい壊れ方になる。 */

.crumb{font-size:.8rem;color:var(--muted);margin-bottom:24px}
.crumb .sep{margin:0 2px}
.inline-field .body input,.inline-field .body select{width:100%;font:inherit;font-size:.9rem;
  padding:9px 12px;border-radius:3px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink)}
/* 問題セット。段階（提出できる／公開済／締切済）の見出しの下に並ぶ。 */
.unit{margin-bottom:22px}
/* 学生に見えていない問題セット（教員・TA の画面だけ・2026-09-25）。**枠で囲って目立たせる**
   ── 小さな印だけでは、公開済みのセットと並んだときに見落とす。 */
.unit.staff-only{border:2px dashed var(--shu);border-radius:4px;padding:4px 10px 8px;
  background:var(--surface-2)}
.staff-only-sample{border:2px dashed var(--shu);border-radius:3px;padding:0 4px}
.staff-view-note{margin:0 0 14px}
/* 問題セットの開閉（#93）。**畳んだ見出しが押せることを示す。** 三角は
   ブラウザ既定を消して自前で出す ── 既定の位置だと見出しの折り返しに
   合わせて動き、日付の並びと重なる。 */
details.unit > summary{cursor:pointer;list-style:none;padding:6px 0;border-radius:3px}
details.unit > summary::-webkit-details-marker{display:none}
details.unit > summary::before{content:"▸";color:var(--muted);margin-right:6px}
details.unit[open] > summary::before{content:"▾"}
details.unit > summary:hover{background:var(--surface-2)}
details.unit > summary h3{display:inline-flex;vertical-align:middle}
.unit h3{font-size:.98rem;margin:0 0 6px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.unit h3 .dates{font-weight:400;display:flex;flex-wrap:wrap;gap:2px 14px}
.unit h3 .dates em{font-style:normal;opacity:.65}

/* ブラウザ IDE（`ide.html`・設計書 §5.2）。2026-09-24 に決めた配置:

   - **見出し（問題セット名・残り時間）とタブは上に固定する。** 試験の間ずっと
     残り時間が見え、どの課題を書いているかを見失わない
   - その下に問題文（高さを抑えて中で送る）
   - 問題文の下は**左がエディタ、右が試す道具**（公開サンプル・入力・出力・実行と
     提出）。書きながら目を移す先なので隣に置く。狭い画面では縦に積む
   **エディタの画面だけ本文の幅の上限を外す** ── 読み物の幅（`main` の上限）では
   コードの 1 行が収まらない。 */
main:has(.ide-head){max-width:none}
/* 固定する見出しとタブ。サイトの帯（`.topbar`、これも固定）の直下に貼る。帯の
   高さは画面の幅で変わる（狭いと 2 段）ので、画面側が測って `--ide-sticky-top` に
   入れる（`ide.js`）。下の内容が透けないよう地の色を敷く。 */
.ide-sticky{position:sticky;top:var(--ide-sticky-top,0);z-index:5;background:var(--paper);
  padding-top:10px}
.ide-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.ide-head h1{margin:0}
.ide-head .spacer,.ide-toolbar .spacer,.ide-actions .spacer{flex:1}
.ide-clock{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.ide-remaining{font-family:var(--font-mono);font-weight:700;font-size:1.1rem}
.ide-remaining[data-soon]{color:var(--shu)}
.ide-remaining[data-over]{color:var(--muted)}
.ide-tabs{display:flex;flex-wrap:wrap;gap:4px;margin:10px 0 0;border-bottom:1px solid var(--line)}
.ide-tab{background:var(--surface-2);color:var(--ink);font-weight:400;
  border:1px solid var(--line);border-bottom:0;border-radius:3px 3px 0 0;
  padding:6px 12px;display:inline-flex;gap:8px;align-items:center}
.ide-tab[aria-selected="true"]{background:var(--surface);font-weight:700;
  box-shadow:inset 0 3px 0 var(--ai)}
.ide-panel{display:flex;flex-direction:column;gap:14px;padding:14px 0}
.ide-panel[hidden]{display:none}
/* 問題文は高さを抑え、長ければ中で送る（エディタを画面の外へ押し出さない）。 */
.ide-statement{overflow:auto;max-height:34vh;padding:4px 12px;
  border:1px solid var(--line-soft);border-radius:3px;background:var(--surface)}
/* 左がエディタ、右が試す道具（公開サンプル・入力・出力・実行と提出）。 */
.ide-work{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:14px;
  align-items:start}
.ide-main{display:flex;flex-direction:column;gap:8px;min-width:0}
.ide-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.ide-toolbar select{font:inherit;padding:4px 8px;border:1px solid var(--line);border-radius:3px;
  background:var(--surface);color:var(--ink)}
.ide-toolbar .button-like{cursor:pointer;border:1px solid var(--line);border-radius:3px;
  background:var(--surface);font-size:.85rem;padding:6px 12px}
.ide-editor{height:min(66vh,780px);border:1px solid var(--line);border-radius:3px}
.ide-side{display:flex;flex-direction:column;gap:10px;min-width:0}
/* 画像・PDF を選んで出す欄（2026-09-25）。エディタの無い課題では、これが作業の場所になる。 */
.ide-work-attach{grid-template-columns:minmax(0,640px)}
.ide-attach{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line-soft);
  border-radius:3px;padding:10px 12px;background:var(--surface)}
.ide-attach h3{margin:0;font-size:.95rem}
.ide-attach .button-like{cursor:pointer;border:1px solid var(--line);border-radius:3px;
  background:var(--surface);font-size:.85rem;padding:6px 12px;align-self:flex-start}
.ide-attach-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;
  font-size:.85rem}
.ide-attach-list li{display:flex;align-items:center;gap:8px;overflow-wrap:anywhere}
.ide-attach-thumb{width:56px;height:56px;object-fit:cover;border:1px solid var(--line-soft);
  border-radius:3px;flex:none}
.ide-video-note{margin:0 0 10px}
.ide-samples h3{margin:0 0 4px;font-size:.95rem}
.ide-sample{margin:0 0 6px}
.ide-sample summary{cursor:pointer}
.ide-sample .ide-io{margin:4px 0}
.ide-sample button{font-size:.8rem;padding:5px 10px}
.ide-runbox{display:flex;flex-direction:column;gap:8px}
.ide-runbox[hidden]{display:none}
.ide-stdin textarea{width:100%;box-sizing:border-box;font-size:.85rem;padding:6px;
  border:1px solid var(--line);border-radius:3px;background:var(--surface);color:var(--ink)}
.ide-io{margin:0;padding:8px;background:var(--surface-2);border:1px solid var(--line-soft);
  border-radius:3px;font-family:var(--font-mono);font-size:.82rem;white-space:pre-wrap;
  overflow:auto;max-height:260px}
.ide-output .ide-io{min-height:4.5em}
.ide-io[data-kind="error"]{border-color:var(--shu);color:var(--shu)}
.ide-run-note{margin:0}
/* 実行と提出は同じ大きさ。並び（左が実行・右が提出）と色で区別する。 */
.ide-actions{display:flex;gap:8px}
.ide-actions button{flex:1;padding:12px 0;font-size:1rem}
.ide-actions button[hidden]{display:none}
/* 実行は押しボタン用の地（`--go-bg`・夜でも文字が読める組）。提出はサイト既定の朱。 */
.ide-run,.ide-run-sample{background:var(--go-bg);color:var(--go-ink)}
.ide-submitted{margin:0}
@media (max-width:900px){
  .ide-work{grid-template-columns:1fr}
  .ide-statement{max-height:45vh}
}

/* 落ちたテストケースの入力（結果画面・2026-10-18）。期待出力は出さない。 */
.failed-inputs{margin-top:8px}
.failed-inputs pre{margin:4px 0 8px;padding:6px 8px;background:var(--surface-2);border:1px solid var(--line-soft);
  border-radius:3px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:16em;overflow-y:auto}
/* 結果画面の「もう一度提出する」（2026-10-18）。行き先は別の画面なのでリンクだが、
   次にとる行動なのでボタンと同じ見た目にする。 */
a.button{display:inline-block;font-weight:700;background:var(--shu);color:#fff;border-radius:3px;
  padding:10px 22px;text-decoration:none;white-space:nowrap}
a.button:hover{filter:brightness(1.08)}
.resubmit{gap:12px;align-items:center;margin:16px 0}