/*
 * 画面の共通のスタイル。外部のフォントや CDN を使わない（REQ-EXT-10）。
 * 判定の表示は、色だけに頼らず文字でも区別する（docs/features/INDEX.md の「画面の共通」）。
 */

:root {
  --color-text: #1b1f24;
  --color-muted: #57606a;
  --color-border: #d0d7de;
  --color-surface: #ffffff;
  --color-nav: #f3f5f7;
  --color-accent: #1f4e8c;
  --color-focus: #ffbf47;
  --color-notice: #fff8c5;
  --color-error: #b42318;
  --color-success: #1e7b34;
  /* 判定（AI 審査の画面で使う） */
  --color-verdict-nonconformity: #b42318;
  --color-verdict-check: #8a6d00;
  --color-verdict-conforming: #1e7b34;
  --color-verdict-na: #6b7280;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--color-text);
  background: var(--color-surface);
  font-family: system-ui, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

a { color: var(--color-accent); }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus { left: 8px; top: 8px; background: var(--color-surface); padding: 4px 8px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- 枠 --- */
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  border-bottom: 1px solid var(--color-border);
  min-height: 44px;
}
.app-header__instance { font-weight: bold; }
.app-header__user { display: flex; gap: 12px; align-items: center; }
.app-header__user form { margin: 0; }

.disclaimer {
  padding: 6px 16px;
  background: var(--color-notice);
  border-bottom: 1px solid var(--color-border);
}

.app-body { display: flex; min-height: calc(100vh - 90px); }

.app-nav {
  width: 200px;
  flex-shrink: 0;
  background: var(--color-nav);
  border-right: 1px solid var(--color-border);
}
.app-nav ul { list-style: none; margin: 0; padding: 8px 0; }
.app-nav a { display: block; padding: 8px 16px; text-decoration: none; color: var(--color-text); }
.app-nav a[aria-current="page"] { font-weight: bold; background: var(--color-surface); border-left: 4px solid var(--color-accent); }

.app-main { flex: 1; padding: 16px 24px; max-width: 1400px; }

/* --- 部品 --- */
.page-header { display: flex; justify-content: space-between; align-items: center; }
.narrow { max-width: 560px; }

.button {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}
.button--primary { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

.link-button {
  border: none;
  background: none;
  padding: 0;
  color: var(--color-accent);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.form > div { margin-bottom: 12px; }
.form label { display: block; font-weight: bold; }
.form input[type="text"],
.form input[type="password"] {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font: inherit;
}
.form ul { list-style: none; padding-left: 0; }
.errorlist { color: var(--color-error); padding-left: 0; list-style: none; }
.helptext { color: var(--color-muted); font-size: 0.9em; }

.notice { padding: 8px 12px; background: var(--color-notice); border: 1px solid var(--color-border); }

.messages { list-style: none; padding: 0; }
.messages__item { padding: 8px 12px; border: 1px solid var(--color-border); margin-bottom: 8px; }
.messages__item--success { border-color: var(--color-success); }
.messages__item--error { border-color: var(--color-error); }

.table { border-collapse: collapse; width: 100%; }
.table th, .table td { border-bottom: 1px solid var(--color-border); padding: 6px 8px; text-align: left; }

.credential { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; }
.credential dd { margin: 0; }
.credential code { font-size: 1.3em; letter-spacing: 0.05em; }

/* --- 案件 --- */
.filter { display: flex; gap: 8px; align-items: center; margin: 8px 0 16px; }
.filter select { font: inherit; padding: 4px; }

.badge {
  display: inline-block;
  margin-left: 8px;
  padding: 0 6px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.85em;
}
.badge--warn { border-color: var(--color-verdict-nonconformity); color: var(--color-verdict-nonconformity); font-weight: bold; }
.badge--action { border-color: var(--color-accent); color: var(--color-accent); font-weight: bold; }
.badge--status { font-size: 1em; }
.row--due-soon td { background: #fdf2f1; }

.facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; }
.facts dd { margin: 0; }

.upload-fields { margin: 12px 0; }
.dropzone {
  border: 2px dashed var(--color-border);
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 8px;
}
.dropzone input[type="file"] { width: 100%; padding: 16px 0; }

.step-status { font-weight: bold; }
.step-status--failed { color: var(--color-verdict-nonconformity); }
.step-status--succeeded { color: var(--color-verdict-conforming); }
.step-status--running, .step-status--queued { color: var(--color-verdict-check); }
.step-message { font-size: 0.9em; }

.danger-zone { border: 1px solid var(--color-verdict-nonconformity); padding: 12px; margin-top: 12px; }
.button--danger { background: var(--color-verdict-nonconformity); border-color: var(--color-verdict-nonconformity); color: #fff; }

/* --- 知らせ（費用の上限など）--- */
.notice-bar {
  padding: 6px 16px;
  background: #fdecea;
  border-bottom: 1px solid var(--color-verdict-nonconformity);
  color: var(--color-verdict-nonconformity);
  font-weight: bold;
}
pre.content-log { white-space: pre-wrap; word-break: break-word; background: var(--color-nav); padding: 8px; border: 1px solid var(--color-border); }

/* --- マスキングの確認（apps/masking）---
 * 判断は、色だけでなく線と塗りでも区別する（塗りつぶし＝マスクする、破線＝しない、点線＝未判断）。一覧にも文字で出す。
 */
.app-main--wide { max-width: none; }
.page-header__sub { margin-left: 12px; font-size: 0.6em; font-weight: normal; color: var(--color-muted); }
.button--disabled { color: var(--color-muted); cursor: default; }
.notice--error { border-color: var(--color-error); color: var(--color-error); }
.mask-progress { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; justify-content: flex-end; margin: 0; }
.mask-progress p, .mask-progress form { margin: 0; }
.mask-progress .helptext { flex-basis: 100%; text-align: right; }

.mask-review { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 16px; align-items: start; }
.mask-pages { max-height: calc(100vh - 180px); overflow: auto; border: 1px solid var(--color-border); padding: 4px 8px; }
.mask-pages__file { font-size: 1em; margin: 8px 0 4px; word-break: break-all; }
.mask-pages__file .badge { margin-left: 0; }
.mask-pages__list { list-style: none; margin: 0; padding: 0; }
.mask-pages__list a {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  padding: 6px;
  border-left: 4px solid transparent;
  color: var(--color-text);
  text-decoration: none;
}
.mask-pages__list a[aria-current="page"] { border-left-color: var(--color-accent); background: var(--color-nav); font-weight: bold; }
.mask-pages__list .badge { margin-left: 0; }
.mask-pages__no { min-width: 4.5em; }
.mask-state { font-weight: bold; }
.mask-state--checked { color: var(--color-success); }
.mask-state--unchecked { color: var(--color-muted); }

.mask-workspace { min-width: 0; }
.mask-toolbar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 8px; }
.mask-toolbar__group { display: inline-flex; gap: 4px; align-items: center; }
.mask-toolbar__group select { font: inherit; padding: 4px; }
.mask-toolbar__zoom { min-width: 3.5em; text-align: center; }
.mask-stage { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; align-items: start; }

/* 図面ビューア。拡大の段は data-zoom（static/js/drawing-viewer.js） */
.drawing-viewer__viewport { overflow: auto; max-height: calc(100vh - 220px); border: 1px solid var(--color-border); background: #e5e7eb; }
.drawing-viewer__canvas { position: relative; width: 100%; }
.drawing-viewer__canvas[data-zoom="50"] { width: 50%; }
.drawing-viewer__canvas[data-zoom="75"] { width: 75%; }
.drawing-viewer__canvas[data-zoom="150"] { width: 150%; }
.drawing-viewer__canvas[data-zoom="200"] { width: 200%; }
.drawing-viewer__canvas[data-zoom="300"] { width: 300%; }
.drawing-viewer__canvas[data-zoom="400"] { width: 400%; }
.drawing-viewer__image { display: block; width: 100%; height: auto; user-select: none; }

.mask-overlay { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
.mask-region { stroke: var(--mask-color); stroke-width: 2px; fill: var(--mask-color); fill-opacity: 0; cursor: pointer; }
.mask-region--mask { fill-opacity: 0.4; }
.mask-region--keep { stroke-dasharray: 8 5; }
.mask-region--pending { stroke-dasharray: 2 3; stroke-width: 3px; }
.mask-region.is-selected { stroke: var(--color-focus); stroke-width: 4px; }
.mask-draft { fill: var(--color-accent); fill-opacity: 0.15; stroke: var(--color-accent); stroke-width: 2px; stroke-dasharray: 4 2; }

/* 区分の色（凡例、一覧、重ねた領域で共通） */
.mask-color--person_name { --mask-color: #b42318; }
.mask-color--address { --mask-color: #c2410c; }
.mask-color--lot_number { --mask-color: #a16207; }
.mask-color--phone { --mask-color: #15803d; }
.mask-color--email { --mask-color: #0e7490; }
.mask-color--seal { --mask-color: #be185d; }
.mask-color--designer_name { --mask-color: #7e22ce; }
.mask-color--qualification_no { --mask-color: #1d4ed8; }
.mask-color--case_identifier { --mask-color: #374151; }
.mask-color--other { --mask-color: #4d7c0f; }
.mask-swatch { display: inline-block; width: 12px; height: 12px; margin-right: 6px; background: var(--mask-color); vertical-align: middle; }

.mask-panel { max-height: calc(100vh - 180px); overflow: auto; }
.mask-panel__heading { font-size: 1em; margin: 16px 0 4px; }
.mask-check { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.mask-check p, .mask-check form { margin: 0; }
.mask-regions select { font: inherit; padding: 2px; max-width: 12em; }
.mask-regions th, .mask-regions td { vertical-align: top; }
.mask-regions thead th { white-space: nowrap; }
.mask-row__source { display: block; margin-top: 2px; font-size: 0.85em; color: var(--color-muted); }
.mask-row.is-selected th, .mask-row.is-selected td { background: var(--color-notice); }
.mask-row--pending th { border-left: 4px dotted var(--color-verdict-check); }
.mask-decision { display: flex; gap: 4px; }
.mask-decision__button { padding: 2px 8px; white-space: nowrap; }
.mask-regions .link-button { white-space: nowrap; }
.mask-decision__button[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.mask-decision__state { font-size: 0.85em; color: var(--color-muted); }
.mask-legend { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; }
.mask-add { margin-top: 8px; }
.mask-add__form { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin: 8px 0; }
.mask-add__form input { width: 6em; font: inherit; padding: 4px; }

/* プレビューと承認 */
.mask-residual { margin: 0; padding-left: 1.2em; }
.mask-approve { margin-top: 16px; padding: 12px; border: 2px solid var(--color-accent); }
.mask-approve__statement { padding: 8px; background: var(--color-nav); }
.mask-approve__confirm { display: block; margin: 8px 0; font-weight: bold; }

@media (max-width: 1100px) {
  .mask-review, .mask-stage { grid-template-columns: minmax(0, 1fr); }
  .mask-pages, .mask-panel { max-height: none; }
}

/* --- 資料（knowledge）--- */
.source-status { font-weight: bold; }
.source-status--failed { color: var(--color-error); }
.source-status--ready { color: var(--color-success); }
.source-status--superseded { color: var(--color-muted); }
.outline { list-style: none; padding-left: 0; }
.outline__item { padding: 2px 0; }
.outline__item--2 { padding-left: 1.5em; }
.outline__item--3 { padding-left: 3em; }
.outline__item--4 { padding-left: 4.5em; }
.outline__item--5 { padding-left: 6em; }
.outline__item--6 { padding-left: 7.5em; }
.form select,
.form input[type="date"] { font: inherit; padding: 4px; }
/* 表の中の小さなフォーム（図書の内容のページ種別の直し） */
.form--inline { display: flex; gap: 4px; align-items: center; margin-top: 4px; }
.search-results { padding-left: 1.5em; }
.search-results__item { margin-bottom: 16px; border-bottom: 1px solid var(--color-border); }
.search-results__item p { margin: 4px 0; }
.search-results__text { padding: 8px 12px; background: var(--color-nav); }

/* --- 事実シート（apps/review）---
 * 状態は、色だけでなく文字と線でも区別する（AI の案＝点線の枠、再確認が必要＝太い枠、確定と人が修正＝実線）。
 */
.fact-review { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 16px; align-items: start; }
.fact-sheet { min-width: 0; max-height: calc(100vh - 160px); overflow: auto; }
.fact-sheet__group { font-size: 1.05em; margin: 16px 0 4px; }
.fact-sheet__floor { margin: 16px 0 8px; }
.fact-counts { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0 8px; font-size: 0.9em; }
.fact-table th, .fact-table td { vertical-align: top; }
.fact-table thead th { white-space: nowrap; }
.fact-table tbody th { width: 10em; font-weight: normal; }
.fact-row__state { width: 13em; }
.fact-row__actions { width: 11em; }
.fact-row.is-selected th, .fact-row.is-selected td { background: var(--color-notice); }
.fact-row__formula { font-size: 0.85em; color: var(--color-muted); }
.fact-row__warning { font-size: 0.9em; color: var(--color-verdict-nonconformity); }
.fact-row__origin { display: block; font-size: 0.85em; color: var(--color-muted); }
.fact-row__sources { display: block; font-size: 0.9em; }
.fact-row__source { white-space: nowrap; }
.fact-row__history { font-size: 0.85em; }
.fact-row__history ol { margin: 4px 0; padding-left: 1.4em; }
.fact-row__actions form { margin: 0 0 4px; }
.fact-status { display: inline-block; padding: 0 6px; border: 1px solid var(--color-border); border-radius: 4px; white-space: nowrap; }
.fact-status--proposed { border-style: dotted; border-width: 2px; border-color: var(--color-verdict-check); }
.fact-status--stale { border-width: 3px; border-color: var(--color-verdict-nonconformity); font-weight: bold; }
.fact-status--confirmed, .fact-status--edited { border-color: var(--color-verdict-conforming); }
.fact-status--undeterminable { border-style: dashed; border-color: var(--color-verdict-na); }
.fact-edit summary { cursor: pointer; color: var(--color-accent); }
.fact-edit__form { display: flex; flex-direction: column; gap: 4px; margin: 4px 0; }
.fact-edit__form input, .fact-edit__form textarea, .fact-edit__form select { font: inherit; padding: 4px; width: 100%; }
.fact-edit__floor { display: flex; gap: 8px; align-items: center; }
.fact-edit__floor select { width: auto; }
.fact-confirm { margin: 16px 0; padding: 12px; border: 2px solid var(--color-accent); }
.fact-reread { margin: 16px 0; }
.fact-viewer { min-width: 0; position: sticky; top: 8px; }
.fact-viewer__fact { margin: 0 0 8px; }
.fact-overlay { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.fact-overlay--draw { cursor: crosshair; }
.fact-source { fill: var(--color-focus); fill-opacity: 0.25; stroke: var(--color-verdict-nonconformity); stroke-width: 2px; }
.fact-draft { fill: var(--color-accent); fill-opacity: 0.15; stroke: var(--color-accent); stroke-width: 2px; stroke-dasharray: 4 2; }

/* 指摘と採否（review/findings.html）。判定は、色に加えて文字と枠の形でも示す（AC-FIND-10） */
.finding-review { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 16px; align-items: start; }
.finding-facts { font-size: 0.9em; max-height: 80vh; overflow: auto; }
.finding-facts dt { font-weight: bold; margin-top: 4px; }
.finding-facts dd { margin: 0 0 0 1em; }
.verdict { display: inline-block; padding: 0 6px; border: 2px solid var(--color-border); border-radius: 4px; white-space: nowrap; }
.verdict--suspected_nonconformity { border-color: var(--color-verdict-nonconformity); color: var(--color-verdict-nonconformity); font-weight: bold; }
.verdict--needs_check { border-color: var(--color-verdict-check); border-style: dashed; }
.verdict--undeterminable { border-color: var(--color-verdict-na); border-style: dotted; }
.verdict--conforming { border-color: var(--color-verdict-conforming); }
.verdict--not_applicable { border-color: var(--color-verdict-na); }
.finding-row.is-selected { outline: 2px solid var(--color-focus); }
.finding-row--explain th::after { content: "（AI が説明できない）"; color: var(--color-verdict-nonconformity); font-weight: normal; font-size: 0.85em; }
.finding-panel { border: 1px solid var(--color-border); border-radius: 6px; padding: 8px 12px; margin-top: 12px; }
.finding-panel h3 { font-size: 1em; margin: 12px 0 4px; }
.finding-check__mark { display: inline-block; width: 1.4em; font-weight: bold; }
.finding-evidence { border-left: 3px solid var(--color-border); padding-left: 8px; margin: 8px 0; }
.finding-evidence__text { white-space: pre-wrap; font-size: 0.9em; }
.finding-form { margin-top: 8px; }

@media (max-width: 1100px) {
  .finding-review { grid-template-columns: minmax(0, 1fr); }
  .fact-review { grid-template-columns: minmax(0, 1fr); }
  .fact-sheet { max-height: none; }
  .fact-viewer { position: static; }
}

/* 照会文の下書き */
.draft-form textarea { width: 100%; font: inherit; }
.draft-form input[type="text"] { width: 100%; }
.draft-item { margin: 8px 0; padding: 8px 12px; border: 1px solid var(--color-border); }
.draft-letter { white-space: pre-wrap; padding: 12px; border: 1px solid var(--color-border); font: inherit; line-height: 1.8; }

/* 実際の審査結果との比較 */
.form label.checkbox { font-weight: normal; }

/* 知見インタビュー */
.chat-turn { margin: 8px 0; padding: 8px 12px; border: 1px solid var(--color-border); max-width: 48em; }
.chat-turn--staff { margin-left: auto; background: var(--color-notice); }
.chat-options { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.chat-stop { display: flex; gap: 8px; margin-top: 16px; }