/* 入力状況グラフ */
.content.compact-overview #process-bar{flex:0 0 auto}
#process-bar[hidden]{display:none}
.process-bar{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;background:#fff;border:1px solid var(--border,#e8dfe2);border-radius:10px;padding:6px 12px;margin:0 0 6px;font-size:.85rem}
.process-bar strong{white-space:nowrap}
.process-bar .process-text{flex:1 1 220px;min-width:0;color:var(--muted,#756b75)}
.process-bar .process-buttons{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.process-bar.running{border-color:#d8b7c2;background:#fcf6f8}
.process-bar.paused{border-color:#e3b36f;background:#fff6e8}
.process-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#c0392b;margin-right:6px;vertical-align:baseline}
.process-bar button,.process-head .button,.process-history-row .button{min-height:34px}
a.button{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border,#e8dfe2);border-radius:8px;background:#fff;color:inherit;text-decoration:none;padding:5px 12px;font-size:.85rem}
.process-check{display:flex;align-items:center;gap:8px;margin:6px 0}
#dialog:has(.process-wide){width:min(1040px,96vw);max-width:96vw}
.process-wide{display:flex;flex-direction:column;gap:12px}
.process-wide .process-bar{margin:0}
.process-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.process-head h3{margin:0 0 2px;font-size:1.05rem}
.process-card{background:#fff;border:1px solid var(--border,#e8dfe2);border-radius:12px;padding:12px 14px}
.process-card h4{margin:0 0 2px;font-size:.98rem}
.process-picked{margin:8px 0 2px;font-size:.88rem}
.process-chart{width:100%;height:auto;display:block}
.process-legend{display:flex;gap:6px 16px;flex-wrap:wrap;font-size:.78rem;color:var(--muted,#756b75);margin-top:4px}
.process-legend i{display:inline-block;vertical-align:middle;margin-right:5px}
.process-legend .l-blue{width:18px;height:3px;background:#2a78d6}
.process-legend .l-gray{width:18px;height:2px;background:#cdc5c9}
.process-legend .l-dash{width:18px;height:0;border-top:3px dashed #2a78d6}
.process-legend .l-dot{width:10px;height:10px;border-radius:50%;background:#eb6834}
.process-legend .l-hatch{width:18px;height:10px;background:repeating-linear-gradient(45deg,#b9aeb4 0 2px,transparent 2px 6px)}
.process-lanes{margin-top:8px;display:flex;flex-direction:column;gap:2px;max-height:360px;overflow:auto}
.process-lane{display:grid;grid-template-columns:minmax(72px,120px) 1fr;align-items:center;gap:8px;border-radius:6px;padding:1px 4px}
.process-lane.picked{background:#f6e9ed}
.process-lane button{border:0;background:none;text-align:left;padding:3px 2px;min-height:28px;font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit;cursor:pointer}
.process-lane.picked button{font-weight:700}
.process-track{position:relative;height:14px;background:#f4eff1;border-radius:3px;overflow:hidden}
.process-track i{position:absolute;top:0;bottom:0}
.process-track .away{background:#8f8489}
.process-track .pause{background:repeating-linear-gradient(45deg,#cfc5ca 0 2px,transparent 2px 6px)}
.process-log{max-height:280px;overflow:auto;margin-top:8px}
.process-log td.num,.process-log th:nth-child(n+4){text-align:right;font-variant-numeric:tabular-nums}
.process-history-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--border,#e8dfe2)}
.process-history-row>div{flex:1;min-width:0}
@media(max-width:650px){.process-bar{padding:6px 8px}.process-bar .process-buttons{margin-left:0;width:100%}.process-lane{grid-template-columns:64px 1fr}}
/* グラフを1枚にまとめた後の追加 */
.process-chart [data-action]{cursor:pointer}
.process-legend .l-away{width:18px;height:10px;background:#eb6834;border-radius:2px}
.process-legend .l-dash{border-top-color:#8f8489}
#dialog:has(.process-wide){padding:16px 20px;max-height:94dvh}
.process-card{padding:10px 12px}
@media(max-width:650px){#dialog:has(.process-wide){padding:10px 8px}}
.process-legend .l-active{width:18px;height:10px;background:#eb6834;border-radius:2px}
.process-zoom{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:6px 0 2px;font-size:.85rem}
.process-zoom-range{font-weight:700;margin-right:4px}
.process-zoom-hint{font-size:.76rem}
.process-chart-wrap{position:relative;user-select:none;-webkit-user-select:none}
.process-chart{touch-action:pan-y}
.process-select{position:absolute;top:0;bottom:0;background:#2a78d633;border-left:2px solid #2a78d6;border-right:2px solid #2a78d6;pointer-events:none}
.process-legend .l-dot{background:#fff;border:2px solid #42373d;width:8px;height:8px}
.process-csv,.process-history-row{display:flex;gap:6px;flex-wrap:wrap}
.process-history-row{align-items:center}
.process-filter{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;margin:8px 0 2px;font-size:.86rem}
.process-filter select{width:auto;min-width:160px}
.process-sum{color:var(--muted,#756b75)}
.process-mode{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:6px 0}
.process-mode-label{font-weight:700;font-size:.88rem}
.process-mode button.selected{background:#f6e9ed;border-color:#a45f72;color:#854658;font-weight:700}
.process-legend .l-density{width:30px;height:10px;border-radius:2px;background:linear-gradient(90deg,#eb683420,#eb6834)}
.process-mode{gap:0}
.process-mode button{min-height:36px;padding:6px 18px;border:1px solid #d8c6cd;background:#fff;color:#52474d;border-radius:0;margin:0}
.process-mode button:first-child{border-radius:9px 0 0 9px}
.process-mode button:last-child{border-radius:0 9px 9px 0;border-left:0}
.process-legend .l-switch{width:0;height:12px;border-left:2px dashed #854658}
.process-chart rect[data-action="process-period"]{cursor:pointer}
/* 学生一覧の上の帯は、すぐ上のボタン類と同じくらいの高さに抑える */
.process-bar{padding:2px 10px;min-height:0;line-height:1.35;font-size:.82rem}
.process-bar button{min-height:26px;padding:2px 10px;font-size:.78rem;line-height:1.3}
/* 入力状況グラフの画面: 下の「閉じる」の帯が、表の固定見出し（学籍番号など）より前に来るようにする。
   この画面は余白が16pxなので、帯の止まる位置も合わせる（帯の下にすき間や、表の一部がはみ出さないように） */
#dialog:has(.process-wide)>.dialogfooter{z-index:5;bottom:-16px;margin-top:12px;padding:10px 0}
@media(max-width:650px){#dialog:has(.process-wide)>.dialogfooter{bottom:-10px}}
/* グループの学生の表・保存ごとの表: 1行を低くして、多くの行を一度に見られるようにする */
.process-log{max-height:min(60dvh,560px)}
.process-log th,.process-log td{padding:3px 10px;font-size:.82rem;line-height:1.35}
.process-log thead th{position:sticky;top:0;z-index:1}
.process-log button{min-height:0;padding:0 2px;font-size:inherit;line-height:1.35}
.process-log tbody tr:nth-child(even) td{background:#fcfafb}
.process-log td button{text-align:left;justify-content:flex-start}

.process-legend .l-share{width:18px;height:10px;background:#3fae6a;border-radius:2px}   /* 共有されたノートを見ていた時間（緑） */
/* デモモード */
.process-demolink{background:none;border:0;padding:0;min-height:0;color:#854658;text-decoration:underline;font-size:.82rem;cursor:pointer}
.process-demo-note{border-color:#d9a9b6;background:#fbf4f6}
.process-demo-list{margin:6px 0 8px 1.2em;padding:0;display:grid;gap:4px;font-size:.9rem}
.process-modes{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px}
.process-sortbox{display:flex;align-items:center;gap:6px}.process-sortbox .muted{font-size:.78rem}
.process-sort{margin:0}.process-sort button{min-height:30px;padding:3px 12px;font-size:.8rem}
/* 表示する時間の範囲: ＋/− の丸いボタン・最新に連動・スクロールバー */
.process-zoom-round{width:32px;height:32px;min-height:32px;padding:0;border-radius:50%;font-size:1.15rem;font-weight:700;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.process-zoom .selected{background:#f6e9ed;border-color:#a45f72;color:#854658;font-weight:700}
.process-scroll{overflow-x:auto;overflow-y:hidden;height:16px;margin:2px 0 6px;scrollbar-width:auto}
.process-scroll>div{height:1px}
.process-chart-wrap{cursor:default}
.process-select{border-radius:2px}
/* 「表示：…（全体）／（拡大中）／（最新を追っています）」の長さが変わっても、右のボタンの位置を動かさない */
.process-zoom-range{display:inline-block;min-width:21.5em;white-space:nowrap}
@media (max-width:700px){.process-zoom-range{min-width:0;flex:1 1 100%}}
.process-bar.process-ended{border-color:#cfc6ca;background:#f4f1f2}