/* ============================================================
   歯式OCR（デモ）固有スタイル
   ------------------------------------------------------------
   共通部品（panel / btn / tbl / tag / notice / steps 等）は
   既存CSSを再利用し、ここには歯式チャート・サンプル帳票・
   疑似解析の進行表示など、この画面だけの部品を定義する。
   色は tokens.css の変数のみを参照する（実値のハードコードなし）。
   ============================================================ */

/* ステッパー：ボタンでない完了項目（自動実行の「読み取り」）はクリック不可を明示 */
span.steps__item--done { cursor: default; }
span.steps__item--done:hover { background: transparent; }

/* ---------- サンプル帳票カード ---------- */

.skcards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

.skcard {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  min-height: var(--tap);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  text-align: left;
  font: inherit;
  color: var(--c-text);
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.skcard:hover {
  background: var(--c-hover);
  border-color: var(--c-accent-line);
  box-shadow: var(--shadow-card);
}
.skcard:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}
.skcard__tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.skcard__name { font-weight: 600; font-size: var(--fs-base); }
.skcard__desc { font-size: var(--fs-sm); color: var(--c-text-2); }
.skcard__cta {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 2px 10px;
  border: 1px solid var(--c-accent-line);
  border-radius: var(--radius-sm);
  background: var(--c-accent-weak);
  color: var(--c-accent);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.skcard__paper { display: block; }

/* ---------- サンプル帳票のSVG（画像不使用） ---------- */

.skpaper {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
  font-family: var(--font-sans);
}
.skpaper__sheet  { fill: var(--c-surface-sub); stroke: var(--c-border-strong); stroke-width: 1; }
.skpaper__title  { font-size: 9px; font-weight: 600; fill: var(--c-text-2); }
.skpaper__rule   { stroke: var(--c-border-strong); stroke-width: 1; }
.skpaper__field  { fill: var(--c-border-soft); }
.skpaper__cell   { fill: var(--c-surface); stroke: var(--c-border-strong); stroke-width: .6; }
.skpaper__cell--mark { fill: var(--c-accent); stroke: var(--c-accent); }
.skpaper__mid    { stroke: var(--c-border-strong); stroke-width: .8; stroke-dasharray: 2 2; }
.skpaper__hand   { fill: none; stroke: var(--c-text-3); stroke-width: 1.1; stroke-linecap: round; }
.skpaper__stamp  { fill: none; stroke: var(--c-text-3); stroke-width: 1; }
.skpaper__stamptext { font-size: 8px; fill: var(--c-text-3); }

/* ---------- 疑似解析の進行表示 ---------- */

.skanalyze {
  display: flex;
  gap: var(--sp-5);
  align-items: flex-start;
  flex-wrap: wrap;
}
.skanalyze__paper { flex: 0 1 220px; min-width: 160px; }
.skanalyze__prog  { flex: 1 1 320px; min-width: 0; }

.skprog {
  list-style: none;
  margin: 0 0 var(--sp-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.skprog__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 28px;
  font-size: var(--fs-base);
  color: var(--c-text-3);
}
.skprog__mark {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--c-border-strong);
  background: var(--c-surface);
}
.skprog__state { font-size: var(--fs-xs); }

.skprog__item--current { color: var(--c-text); font-weight: 600; }
.skprog__item--current .skprog__mark {
  border-color: var(--c-accent);
  border-top-color: var(--c-accent-line);
  animation: sk-spin 0.9s linear infinite;
}
.skprog__item--current .skprog__state { color: var(--c-accent); }

.skprog__item--done { color: var(--c-text-2); }
.skprog__item--done .skprog__mark {
  border-color: var(--c-ok);
  background: var(--c-ok);
  position: relative;
}
.skprog__item--done .skprog__mark::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 5px;
  width: 6px;
  height: 3px;
  border-left: 2px solid var(--c-surface);
  border-bottom: 2px solid var(--c-surface);
  transform: rotate(-45deg);
}
/* 完了ラベルの文字はミュート（機能色の文字はチップ外では使わない） */
.skprog__item--done .skprog__state { color: var(--c-text-2); }

@keyframes sk-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .skprog__item--current .skprog__mark { animation: none; border-top-color: var(--c-accent); }
}

.skbar {
  height: 8px;
  border-radius: 4px;
  background: var(--c-border-soft);
  overflow: hidden;
  margin-bottom: var(--sp-2);
}
.skbar__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 4px;
  background: var(--c-accent);
  transition: width .3s ease;
}

/* ---------- 補正前／補正後の並列表示 ---------- */

.skcompare {
  display: flex;
  gap: var(--sp-4);
  align-items: stretch;
  flex-wrap: wrap;
  margin: var(--sp-4) 0 var(--sp-3);
}
.skcompare__col { flex: 1 1 380px; min-width: 0; }
.skcompare__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.skcompare__t { font-size: var(--fs-sm); color: var(--c-text-2); font-weight: 600; }

.skarrow {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--c-accent);
  font-size: var(--fs-xs);
  font-weight: 600;
  flex: 0 0 auto;
}
.skarrow__glyph { font-size: var(--fs-xl); line-height: 1; }

/* 2カラムが縦積みになる幅では矢印を下向きにする */
@media (max-width: 899px) {
  .skcompare__col { flex-basis: 100%; }
  .skarrow { flex-basis: 100%; flex-direction: row; justify-content: center; gap: var(--sp-2); }
  .skarrow__glyph { transform: rotate(90deg); }
}

/* ---------- 歯式チャートSVG ---------- */

.skchart {
  overflow-x: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  padding: var(--sp-2);
}
.skchart--raw { background: var(--c-surface-sub); }

.skchart__svg {
  display: block;
  width: 100%;
  min-width: 620px;
  height: auto;
  font-family: var(--font-sans);
}

.sk-side { font-size: 11px; fill: var(--c-text-3); }
.sk-mid  { stroke: var(--c-border-strong); stroke-width: 1; stroke-dasharray: 4 4; }

.sk-tooth rect {
  fill: var(--c-surface);
  stroke: var(--c-border-strong);
  stroke-width: 1;
  transition: fill var(--transition), stroke var(--transition);
}
.sk-tooth .sk-no { font-size: 13px; font-weight: 600; fill: var(--c-text-2); }
.sk-tooth .sk-tx { font-size: 10.5px; font-weight: 700; fill: var(--c-accent); }

.sk-tooth--on rect {
  fill: var(--c-accent-weak);
  stroke: var(--c-accent);
  stroke-width: 2;
}
.sk-tooth--on .sk-no { fill: var(--c-accent); }
.sk-tooth--manual rect { stroke-dasharray: 5 3; }

.sk-tooth[role="button"] { cursor: pointer; }
.sk-tooth[role="button"]:hover rect { fill: var(--c-hover); }
.sk-tooth--on[role="button"]:hover rect { fill: var(--c-accent-weak); }
.sk-tooth[role="button"]:focus { outline: none; }
.sk-tooth[role="button"]:focus-visible rect {
  stroke: var(--c-focus);
  stroke-width: 2.5;
}

/* ---------- 凡例 ---------- */

.sklegend {
  list-style: none;
  margin: 0 0 var(--sp-4);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--c-text-2);
}
.sklegend li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.sklegend__sw {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid var(--c-border-strong);
  background: var(--c-surface);
}
.sklegend__sw--on {
  background: var(--c-accent-weak);
  border: 2px solid var(--c-accent);
}
.sklegend__sw--manual {
  background: var(--c-accent-weak);
  border: 2px dashed var(--c-accent);
}

/* ---------- 認識した歯のチップ一覧・受注連携 ---------- */

.skteeth { margin-bottom: var(--sp-4); }
.skteeth__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-top: var(--sp-1);
}

.skorder {
  display: flex;
  gap: var(--sp-5);
  align-items: flex-start;
  flex-wrap: wrap;
}
.skorder__cust { flex: 1 1 320px; min-width: 0; }
.skorder__cust select { width: 100%; max-width: 460px; }
.skorder__act { flex: 1 1 260px; min-width: 0; }
.skorder__act .btn { min-height: var(--tap); }