/* RELEASE READY 固有の見た目（2026-08-27）。
   数値は tokens.css の変数だけを使う（標準の決まり）。 */

.brand { margin: 0; font-weight: 700; letter-spacing: .12em; }
.brand-note { margin: 0; color: var(--text-muted); font-size: var(--fs-small); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.scan-form { display: flex; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s4); }
.scan-form input {
  flex: 1 1 380px; padding: var(--s3) var(--s4); font-size: 1rem;
  border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--surface);
}
.status { min-height: 1.5em; color: var(--text-muted); font-size: var(--fs-small); }
.note-small { color: var(--text-muted); font-size: var(--fs-small); }

/* display を指定した要素は hidden 属性だけでは消えない（実測で入力欄が出たままだった）。
   合言葉より前に入力欄が見えると「素通りできるのでは」と誤解させるので、必ず消す */
[hidden] { display: none !important; }

.gate { border: 1px solid var(--border); border-radius: var(--radius-s); padding: var(--s4); margin-bottom: var(--s5); background: var(--surface-alt); }
.gate p { margin: 0 0 var(--s3); }

/* 数字のマスは4つ並べる。標準の .stat をそのまま使い、並べ方だけここで決める
   （template側は「1枚の面」の想定なので、報告書では横1列にしたい） */
.stats { display: grid; gap: var(--s3); grid-template-columns: repeat(4, 1fr); margin: var(--s5) 0; }
@media (max-width: 700px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ── 報告書の頭 ───────────────────────────────── */
.report-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s5);
  border-bottom: 2px solid var(--text); padding-bottom: var(--s4); margin-bottom: var(--s5);
}
.report-head h2 { margin: var(--s2) 0; word-break: break-all; font-size: 1.25rem; }
.verdict {
  flex: none; padding: var(--s3) var(--s5); border-radius: var(--radius-s);
  font-weight: 700; letter-spacing: .04em; text-align: center; min-width: 200px;
}
.verdict[data-v="ok"]   { background: #e7f6ec; color: #145c2e; border: 1px solid #9fd9b4; }
.verdict[data-v="warn"] { background: #fff5e2; color: #7a4c00; border: 1px solid #ecc37a; }
.verdict[data-v="ng"]   { background: #fdeaea; color: #8a1c1c; border: 1px solid #e9a3a3; }

.report-people { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: end; margin: var(--s5) 0; }
.report-people label { display: grid; gap: var(--s1); font-size: var(--fs-small); color: var(--text-muted); }
.report-people input { padding: var(--s2) var(--s3); border: 1px solid var(--border); border-radius: var(--radius-s); }

.block-title { margin: var(--s7) 0 var(--s2); padding-bottom: var(--s2); border-bottom: 1px solid var(--border); }

/* ── 調べた結果の一覧 ─────────────────────────── */
.checks { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-s); overflow: hidden; margin-top: var(--s4); }
.check {
  display: grid; grid-template-columns: 92px 1fr; gap: var(--s4);
  background: var(--surface); padding: var(--s4);
}
.check .mark { font-size: var(--fs-small); font-weight: 700; align-self: start; padding: var(--s1) var(--s2); border-radius: var(--radius-s); text-align: center; }
.check[data-level="ok"]   .mark { background: #e7f6ec; color: #145c2e; }
.check[data-level="warn"] .mark { background: #fff5e2; color: #7a4c00; }
.check[data-level="ng"]   .mark { background: #fdeaea; color: #8a1c1c; }
.check b { display: block; }
.check .found { color: var(--text-muted); font-size: var(--fs-small); word-break: break-all; }
.check .action { font-size: var(--fs-small); margin-top: var(--s2); }
.check .area { color: var(--text-muted); font-size: var(--fs-small); }

/* ── 人が見る項目 ─────────────────────────────── */
.manual { list-style: none; padding: 0; margin: var(--s4) 0 0; display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-s); overflow: hidden; }
.manual li { background: var(--surface); padding: var(--s3) var(--s4); display: flex; gap: var(--s3); align-items: baseline; }
.manual input { margin-top: var(--s1); }
.manual .who { margin-left: auto; color: var(--text-muted); font-size: var(--fs-small); }

.disclaimer { margin-top: var(--s7); padding: var(--s4); border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--surface-alt); }
.disclaimer p { margin: 0 0 var(--s2); font-size: var(--fs-small); }

/* ── 印刷（報告書はここが本番）──────────────────
   画面用の飾りを落とし、1枚の書類として読める形にする */
@media print {
  .no-print { display: none !important; }
  body { background: #fff; }
  .section { padding-block: 0; }
  .checks, .manual { break-inside: auto; }
  .check, .manual li { break-inside: avoid; }
  .verdict { border-width: 2px; }
  .stats { grid-template-columns: repeat(4, 1fr); }   /* 印刷でも横1列に保つ */
  a[href]::after { content: ""; }
}