/* 疑似WEBインバスケット演習環境
   本家のメーラー画面に近い、業務システム然とした見た目にする */

:root {
  --bg: #eef1f5;
  --panel: #ffffff;
  --line: #d5dbe3;
  --line-soft: #e8ecf1;
  --ink: #1f2933;
  --ink-mid: #52616f;
  --ink-soft: #7b8794;
  --blue: #16548c;
  --blue-dark: #0f3d68;
  --blue-soft: #e7f0f9;
  --danger: #b3261e;
  --ok: #1d7a4c;
  --warn: #b26a00;
  --radius: 4px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: "Segoe UI", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.7;
}

.hidden { display: none !important; }
.muted { color: var(--ink-soft); font-size: 13px; }

.screen { min-height: 100%; }
.screen.center {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

/* 画面幅が足りないときは警告のみ表示 */
#screen-toosmall { display: none; }
@media (max-width: 1099px) {
  #screen-toosmall { display: flex !important; align-items: center; justify-content: center; padding: 40px 20px; }
  #screen-start, #screen-exam, #screen-priority, #screen-result, .modal { display: none !important; }
}

/* ---------------------------------------------------------- カード */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 36px 40px;
  max-width: 660px;
  width: 100%;
  box-shadow: 0 1px 3px rgba(20, 40, 60, .08);
}
.card.wide { max-width: 900px; }

.eyebrow {
  color: var(--blue);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
}

h1 { font-size: 24px; margin: 4px 0 20px; letter-spacing: .01em; }
h2 { font-size: 18px; margin: 0 0 10px; }
h3 { font-size: 15px; margin: 0 0 8px; }

.spec {
  display: flex;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 24px;
}
.spec > div {
  flex: 1;
  padding: 12px 16px;
  border-right: 1px solid var(--line);
}
.spec > div:last-child { border-right: 0; }
.spec span { display: block; font-size: 12px; color: var(--ink-soft); }
.spec strong { font-size: 17px; }

.field { display: block; margin-bottom: 22px; }
.field > span { display: block; font-size: 13px; margin-bottom: 6px; color: var(--ink-mid); }
.field input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 15px;
  font-family: inherit;
}
.field input:focus { outline: 2px solid var(--blue); outline-offset: -1px; }

.notice {
  background: #f7f9fb;
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 24px;
}
.notice ul { margin: 0; padding-left: 20px; }
.notice li { margin-bottom: 6px; font-size: 13px; }

.resume-box {
  background: #fff8e8;
  border: 1px solid #e6d3a8;
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 18px;
}
.resume-box p { margin: 0 0 10px; font-size: 13px; }

.fineprint { font-size: 12px; color: var(--ink-soft); margin: 14px 0 0; text-align: center; }

/* ---------------------------------------------------------- ボタン */

.btn {
  appearance: none;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  padding: 9px 18px;
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: #f3f6f9; }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
.btn.primary:hover { background: var(--blue-dark); }
.btn.danger { background: #fff; border-color: var(--danger); color: var(--danger); }
.btn.danger:hover { background: #fdf2f1; }
.btn.ghost { background: transparent; }
.btn.small { padding: 6px 12px; font-size: 13px; }
.btn.big { width: 100%; padding: 14px; font-size: 16px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ---------------------------------------------------------- 上部バー */

#screen-exam { display: flex; flex-direction: column; height: 100vh; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--blue);
  color: #fff;
  padding: 0 18px;
  height: 54px;
  flex: 0 0 auto;
}
.tb-left { display: flex; align-items: baseline; gap: 12px; min-width: 260px; }
.tb-logo { font-weight: 700; letter-spacing: .02em; }
.tb-sub { font-size: 13px; opacity: .85; }

.tb-center { display: flex; align-items: center; gap: 20px; }
.timer {
  font-size: 26px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  min-width: 96px;
  text-align: center;
}
.timer.warn { color: #ffd66b; }
.timer.critical { color: #ff9d94; animation: blink 1s steps(2, start) infinite; }
@keyframes blink { to { opacity: .45; } }
.tb-progress { font-size: 13px; opacity: .9; }
.tb-progress strong { font-size: 16px; }

.tb-right { display: flex; gap: 8px; min-width: 260px; justify-content: flex-end; }
.topbar .btn { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.1); color: #fff; }
.topbar .btn:hover { background: rgba(255,255,255,.22); }
.topbar .btn.danger { border-color: #ffb4ae; color: #ffd9d6; }

/* ---------------------------------------------------------- メーラー */

.mailer { display: flex; flex: 1 1 auto; min-height: 0; }

.listpane {
  flex: 0 0 336px;
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.maillist { flex: 1 1 auto; overflow-y: auto; }

/* 優先順位の申告（一覧の上に固定表示。制限時間内に入力する） */
.pinneditem {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 22px 1fr auto;
  grid-template-rows: auto auto;
  gap: 0 8px;
  align-items: center;
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 2px solid var(--line);
  background: #fff8e8;
  padding: 11px 14px;
  cursor: pointer;
  font-family: inherit;
}
.pinneditem:hover { background: #fdf1d5; }
.pinneditem.active { background: var(--blue-soft); box-shadow: inset 3px 0 0 var(--blue); }
.pinneditem.filled { background: #eef8f1; }
.pinneditem.filled:hover { background: #e2f2e8; }
.pi-star { grid-row: 1 / 3; font-size: 16px; color: #d9a02b; }
.pinneditem.filled .pi-star { color: var(--ok); }
.pi-title { font-size: 13.5px; font-weight: 600; }
.pi-sub { grid-column: 2; font-size: 11.5px; color: var(--ink-soft); }
.pi-count {
  grid-row: 1 / 3;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-mid);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 2px 9px;
}
.pinneditem.filled .pi-count { color: var(--ok); border-color: #b9dcc7; }

/* 優先順位の入力フォーム（読み取りペイン内） */
.priority-body { padding-bottom: 40px; }
.priority-form { padding: 22px 32px 0; max-width: 900px; }
.prio-foot { margin-top: 18px; }

.mailitem {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  padding: 11px 14px 11px 30px;
  cursor: pointer;
  position: relative;
  font-family: inherit;
}
.mailitem:hover { background: #f5f8fb; }
.mailitem.active { background: var(--blue-soft); box-shadow: inset 3px 0 0 var(--blue); }
.mailitem .mi-no {
  position: absolute;
  left: 8px; top: 12px;
  font-size: 11px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.mailitem .mi-from { font-size: 12px; color: var(--ink-mid); display: block; }
.mailitem .mi-subject { font-size: 13.5px; font-weight: 600; display: block; margin: 1px 0; }
.mailitem.unread .mi-subject { color: var(--blue-dark); }
.mailitem.read .mi-subject { font-weight: 400; }
.mailitem .mi-date { font-size: 11px; color: var(--ink-soft); }
.mailitem .mi-flag {
  position: absolute;
  right: 10px; top: 12px;
  font-size: 11px;
  color: var(--ok);
  font-weight: 700;
}

.reader { flex: 1 1 auto; overflow-y: auto; background: var(--panel); }
.reader-empty { padding: 80px 40px; text-align: center; color: var(--ink-soft); }

.mailhead { padding: 22px 32px 16px; border-bottom: 1px solid var(--line-soft); }
.mailhead h2 { font-size: 20px; margin: 0 0 12px; }
.mailhead dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 2px 16px; }
.mailhead dl > div { display: contents; }
.mailhead dt { color: var(--ink-soft); font-size: 12.5px; }
.mailhead dd { margin: 0; font-size: 13px; }

.mailbody { padding: 24px 32px 28px; max-width: 860px; }
.mailbody p { margin: 0 0 14px; }
.mailbody ul, .mailbody ol { margin: 0 0 14px; padding-left: 22px; }
.mailbody table { border-collapse: collapse; margin: 8px 0 16px; font-size: 13px; }
.mailbody th, .mailbody td { border: 1px solid var(--line); padding: 5px 10px; text-align: left; }
.mailbody th { background: #f2f5f8; }
.mailbody blockquote {
  margin: 0 0 14px; padding: 10px 16px;
  background: #f7f9fb; border-left: 3px solid var(--line);
}
.mailbody hr { border: 0; border-top: 1px solid var(--line-soft); margin: 18px 0; }
.mailbody pre.mono {
  background: #f5f7fa; border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 12px 14px; overflow-x: auto; font-size: 12.5px; line-height: 1.6;
  font-family: "Consolas", "Yu Gothic", monospace;
}

/* ---------------------------------------------------------- 返信 */

.replies { padding: 0 32px; max-width: 860px; }

.reply {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 14px;
  background: #fcfdfe;
}
.reply-head {
  display: flex; align-items: center; justify-content: space-between;
  background: #f2f5f8; border-bottom: 1px solid var(--line);
  padding: 7px 12px; font-size: 12.5px; font-weight: 600; color: var(--ink-mid);
}
.reply-del {
  border: 0; background: transparent; color: var(--ink-soft);
  cursor: pointer; font-size: 12px; font-family: inherit;
}
.reply-del:hover { color: var(--danger); }

.reply-field { display: flex; align-items: center; border-bottom: 1px solid var(--line-soft); }
.reply-field label {
  flex: 0 0 68px; padding: 0 12px; font-size: 12.5px; color: var(--ink-soft);
}
.reply-field input {
  flex: 1 1 auto; border: 0; padding: 9px 12px 9px 0;
  font-size: 13.5px; font-family: inherit; background: transparent;
}
.reply-field input:focus { outline: none; background: #fffdf3; }

.reply textarea {
  display: block; width: 100%; border: 0; padding: 14px;
  min-height: 190px; resize: vertical;
  font-size: 14px; line-height: 1.8; font-family: inherit; background: transparent;
}
.reply textarea:focus { outline: none; background: #fffdf3; }

.reply-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 12px; border-top: 1px solid var(--line-soft);
  font-size: 12px; color: var(--ink-soft);
}
.saved-mark { color: var(--ok); }

.reply-actions { padding: 0 32px 40px; max-width: 860px; }

/* ---------------------------------------------------------- モーダル */

.modal {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(16, 28, 40, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 30px;
}
.modal-inner {
  background: var(--panel); border-radius: 6px;
  width: 100%; max-width: 960px; max-height: 88vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.modal-inner.narrow { max-width: 460px; padding: 28px 32px; }
.modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 24px; border-bottom: 1px solid var(--line);
}
.modal-tabs { display: flex; gap: 2px; padding: 10px 24px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.mat-tab {
  border: 1px solid var(--line); border-bottom: 0; background: #f2f5f8;
  padding: 7px 14px; border-radius: 4px 4px 0 0; cursor: pointer;
  font-size: 13px; font-family: inherit; position: relative; top: 1px;
}
.mat-tab.active { background: #fff; font-weight: 600; }
.modal-body { padding: 22px 28px; overflow-y: auto; }
.modal-body table { border-collapse: collapse; margin: 6px 0 16px; font-size: 13px; }
.modal-body th, .modal-body td { border: 1px solid var(--line); padding: 5px 10px; text-align: left; }
.modal-body th { background: #f2f5f8; }
.modal-body pre.mono {
  background: #f5f7fa; border: 1px solid var(--line-soft); padding: 12px;
  overflow-x: auto; font-size: 12.5px; line-height: 1.55;
  font-family: "Consolas", "Yu Gothic", monospace;
}
.modal-body ul { padding-left: 20px; }

/* ---------------------------------------------------------- 優先順位 */

.prio-row {
  display: grid; grid-template-columns: 54px 1fr 1.4fr; gap: 12px;
  align-items: center; margin-bottom: 10px;
}
.prio-rank { font-weight: 700; color: var(--blue); font-size: 15px; }
.prio-row select, .prio-row input {
  width: 100%; padding: 9px 10px; border: 1px solid var(--line);
  border-radius: var(--radius); font-size: 13.5px; font-family: inherit;
}
.prio-head {
  display: grid; grid-template-columns: 54px 1fr 1.4fr; gap: 12px;
  font-size: 12px; color: var(--ink-soft); margin-bottom: 6px;
}
.prio-row select:focus, .prio-row input:focus { outline: 2px solid var(--blue); outline-offset: -1px; }
.prio-row option[disabled] { color: #aab3bd; }

.prio-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.prio-table th, .prio-table td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; }
.prio-table th { background: #f2f5f8; }
.prio-table td:first-child { white-space: nowrap; font-weight: 600; color: var(--blue); width: 52px; }

.warnbox {
  background: #fff8e8; border: 1px solid #e6d3a8;
  border-radius: var(--radius); padding: 10px 14px; font-size: 13px;
}

/* ---------------------------------------------------------- 結果 */

.result-wrap { max-width: 960px; margin: 0 auto; padding: 40px 24px 80px; }
.result-wrap h1 { margin-bottom: 4px; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 24px 0 32px; }
.stat {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px;
}
.stat .s-label { font-size: 12px; color: var(--ink-soft); }
.stat .s-value { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat .s-note { font-size: 12px; color: var(--ink-soft); }
.stat.alert .s-value { color: var(--warn); }

.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 26px; margin-bottom: 20px;
}
.panel h2 { margin-bottom: 2px; }
.panel > .muted { margin-top: 0; margin-bottom: 16px; }

.chart { width: 100%; display: block; }
.chart text { font-size: 11px; fill: var(--ink-mid); font-family: inherit; }
.chart .lbl { font-size: 11px; }
.chart .axis { stroke: var(--line); stroke-width: 1; }
.chart .grid { stroke: var(--line-soft); stroke-width: 1; }
.bar { fill: var(--blue); }
.bar.long { fill: var(--warn); }
.bar.none { fill: #dfe4ea; }

.tl-track { fill: #f2f5f8; }
.tl-mark { fill: var(--blue); }
.tl-mark.late { fill: var(--warn); }

.unproc-list { display: flex; flex-wrap: wrap; gap: 8px; }
.unproc {
  border: 1px solid #e6d3a8; background: #fff8e8;
  border-radius: var(--radius); padding: 6px 12px; font-size: 13px;
}
.allproc { color: var(--ok); font-weight: 600; }

.panel.submit { border-color: var(--blue); border-width: 2px; }
.copied { color: var(--ok); font-weight: 600; font-size: 13px; }
.preview { margin-top: 16px; }
.preview summary { cursor: pointer; font-size: 13px; color: var(--ink-mid); }
.preview pre {
  background: #f5f7fa; border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 14px; max-height: 420px; overflow: auto;
  font-size: 12px; line-height: 1.6; white-space: pre-wrap;
  font-family: "Consolas", "Yu Gothic", monospace;
}