/*
  components.css — Design System のコンポーネント実装

  ① これは何か: design-system/components/*.md に記載された Figma 実データを、
     素の CSS へ翻訳したもの（Button / icon-button / information-panel / toast / tooltip /
     chip / status-tag / checkbox / radio / card / breadcrumbs / step 番号 / 入力欄）。
  ② なぜここにあるか: 学習サイトの UI を「既存 DS の部品だけで組む」ことで、サイト自身を
     教材（M4 / M5）の実例にするため。
  ③ 前提: 値は全て tokens.css の変数経由。変更時は該当する components/*.md の Figma
     ノード ID をコメントで残す。
  ④ 詳細: design-system/components/、design-system/reviews/checklists.md
*/

/* ================= Button（Figma 55051:5075） ================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--xs);
  height: var(--btn-h);
  min-width: 120px;
  max-width: 240px;
  padding: 0 var(--m);
  border: 1px solid transparent;
  border-radius: var(--radius-default);
  font-size: var(--fs-14);
  font-weight: var(--fw-regular);
  line-height: var(--lh-label);
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn--sm { height: var(--control-h); }

.btn--primary { background: var(--brand-primary); color: var(--text-inverse); }
.btn--primary:hover { background: var(--brand-secondary); }
.btn--primary:disabled,
.btn--primary[aria-disabled="true"] { background: var(--brand-tertiary); color: var(--neutral-gray-1); cursor: not-allowed; }

.btn--secondary { background: var(--ink-000); border-color: var(--neutral-gray-6); color: var(--neutral-gray-6); }
.btn--secondary:hover { background: var(--brand-background); }
.btn--secondary:disabled,
.btn--secondary[aria-disabled="true"] { border-color: var(--neutral-gray-3); color: var(--neutral-gray-4); background: var(--ink-000); cursor: not-allowed; }

.btn--danger { background: var(--error-primary); color: var(--text-inverse); }
.btn--danger:hover { background: var(--error-secondary); }
.btn--danger:disabled { background: var(--error-tertiary); color: var(--neutral-gray-1); cursor: not-allowed; }

.btn--danger-secondary { background: var(--ink-000); border-color: var(--error-primary); color: var(--error-primary); }
.btn--danger-secondary:hover { background: var(--error-background); }
.btn--danger-secondary:disabled { border-color: var(--error-tertiary); color: var(--error-tertiary); cursor: not-allowed; }

.btn--block { max-width: none; width: 100%; }

/* ================= icon-button（Figma 32260:76122 / type=ghost-black size=s） ================= */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-h);
  height: var(--control-h);
  padding: var(--xs);
  border-radius: var(--radius-default);
  color: var(--neutral-gray-6);
}

.icon-btn:hover,
.icon-btn:active { background: var(--bg-icon-hover); }
.icon-btn:disabled { color: var(--neutral-gray-4); background: none; cursor: not-allowed; }
.icon-btn svg { width: 16px; height: 16px; }

/* ================= information-panel（Figma 32259:6346） ================= */
.info-panel {
  display: flex;
  gap: var(--s);
  padding: var(--m);
  border: 1px solid var(--neutral-gray-6);
  border-radius: var(--radius-default);
  background: var(--brand-background);
  color: var(--neutral-gray-6);
  font-size: var(--fs-14);
  line-height: var(--lh-body);
}

.info-panel__icon { flex: 0 0 24px; width: 24px; height: 24px; color: var(--neutral-gray-6); }
.info-panel__body { min-width: 0; flex: 1; }
.info-panel__title { font-weight: var(--fw-bold); }
.info-panel__title + .info-panel__text { margin-top: var(--xs); }
.info-panel__text code { font-size: var(--fs-12); }

.info-panel--warning { background: var(--warning-background); border-color: var(--warning-primary); }
.info-panel--warning .info-panel__icon { color: var(--warning-primary); }
.info-panel--error { background: var(--error-background); border-color: var(--error-primary); }
.info-panel--error .info-panel__icon { color: var(--error-primary); }
.info-panel--success { background: var(--success-background); border-color: var(--success-primary); }
.info-panel--success .info-panel__icon { color: var(--success-primary); }

/* ================= toast（Figma 32259:6037） ================= */
.toast-stack {
  position: fixed;
  right: var(--l);
  bottom: var(--l);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: var(--s);
  width: 480px;
  max-width: calc(100vw - var(--l) * 2);
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--m);
  min-height: 72px;
  padding: var(--m);
  border: 1px solid var(--neutral-gray-5);
  border-radius: var(--radius-default);
  background: var(--brand-background);
  box-shadow: var(--shadow-toast);
  color: var(--neutral-gray-6);
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  line-height: var(--lh-body);
  animation: toast-in 0.2s ease;
}

.toast__main { display: flex; gap: var(--s); flex: 1; min-width: 0; }
.toast__icon { flex: 0 0 24px; width: 24px; height: 24px; }
.toast__body { flex: 1; }
.toast__close { flex: 0 0 24px; width: 24px; height: 24px; padding: 0; color: var(--neutral-gray-6); }
.toast__close svg { width: 16px; height: 16px; }

.toast--success { background: var(--success-background); border-color: var(--success-primary); }
.toast--success .toast__icon { color: var(--success-primary); }
.toast--warning { background: var(--warning-background); border-color: var(--warning-primary); }
.toast--warning .toast__icon { color: var(--warning-primary); }
.toast--error { background: var(--error-background); border-color: var(--error-primary); }
.toast--error .toast__icon { color: var(--error-primary); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(var(--s)); }
  to { opacity: 1; transform: none; }
}

/* ================= tooltip（Figma 32259:6271）— ラップして使う ================= */
.tip { position: relative; display: inline-flex; }

.tip::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 5px);
  transform: translateX(-50%);
  display: none;
  max-width: 200px;
  width: max-content;
  padding: var(--s);
  border-radius: var(--radius-default);
  background: var(--neutral-black-80);
  color: var(--ink-000);
  font-size: var(--fs-12);
  line-height: var(--lh-note);
  text-align: center;
  z-index: 20;
}

.tip::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  display: none;
  border: 4px solid transparent;
  border-top: 5px solid var(--neutral-black-80);
  border-bottom: 0;
  z-index: 20;
}

.tip:hover::after, .tip:hover::before,
.tip:focus-visible::after, .tip:focus-visible::before,
.tip:has(:focus-visible)::after, .tip:has(:focus-visible)::before { display: block; animation: tip-in 0.15s ease; }

@keyframes tip-in { from { opacity: 0; } to { opacity: 1; } }

/* ================= chip（Figma 54901:5630） ================= */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--xs);
  height: 24px;
  padding: var(--xs) var(--s);
  border: 1px solid transparent;
  border-radius: var(--radius-chip);
  background: var(--neutral-gray-1);
  color: var(--neutral-gray-6);
  font-size: var(--fs-14);
  font-weight: var(--fw-regular);
  line-height: var(--lh-label);
  white-space: nowrap;
}

.chip--meta { background: var(--neutral-gray-2); }
.chip--selected { background: var(--brand-background); border-color: var(--brand-primary); color: var(--brand-primary); }

/* ================= status-tag（Figma 54911:4871） ================= */
.status-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: var(--xs) var(--s);
  border: 1px solid var(--success-primary);
  border-radius: var(--radius-status-tag);
  background: var(--success-background);
  color: var(--success-primary);
  font-size: var(--fs-12);
  font-weight: var(--fw-regular);
  line-height: var(--lh-label);
  white-space: nowrap;
}

.status-tag--stand-by { background: var(--warning-background); border-color: var(--warning-primary); color: var(--warning-primary); }
.status-tag--rejected { background: var(--error-primary); border-color: var(--error-primary); color: var(--ink-000); }
.status-tag--completion { background: var(--neutral-gray-1); border-color: var(--neutral-gray-5); color: var(--neutral-gray-5); }

/* ================= kicker（Figma 対応なし・DS 記載の独自パーツ） ================= */
.kicker {
  display: inline-flex;
  align-items: center;
  padding: var(--xs) var(--s);
  border-radius: var(--radius-default);
  background: var(--brand-background);
  color: var(--brand-primary);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-title);
}

/* ================= checkbox（Figma 32260:75757） / radio（32259:6091） ================= */
.choice-item {
  display: flex;
  align-items: flex-start;
  gap: var(--xs);
  padding: var(--s) 0;
  cursor: pointer;
  color: var(--neutral-gray-7);
  font-size: var(--fs-14);
  line-height: var(--lh-body);
}

.choice-item input {
  appearance: none;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 3px 0 0;
  border: 1px solid var(--neutral-gray-4);
  background: var(--ink-000);
  cursor: pointer;
}

.choice-item input[type="checkbox"] { border-radius: var(--radius-checkbox); }
.choice-item input[type="radio"] { border-radius: var(--radius-full); }

.choice-item input:checked { border-color: var(--brand-primary); }
.choice-item input[type="checkbox"]:checked {
  background: var(--brand-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath d='M1 4.5 4.5 8 11 1' fill='none' stroke='%23FFFFFF' stroke-width='2'/%3E%3C/svg%3E") center / 12px 9px no-repeat;
}
.choice-item input[type="radio"]:checked {
  background: radial-gradient(circle, var(--brand-primary) 0 5px, var(--ink-000) 5px);
}

.choice-item input:disabled { background: var(--brand-background); border-color: var(--brand-tertiary); cursor: not-allowed; }
.choice-item.is-error input { border-color: var(--error-primary); }
.choice-item.is-correct { color: var(--success-primary); }
.choice-item.is-wrong { color: var(--error-primary); }

/* ================= 入力欄（Input/Normal 32313:85261） ================= */
.field__input {
  width: 100%;
  height: var(--btn-h);
  padding: var(--space-3) var(--s);
  border: 1px solid var(--neutral-gray-4);
  border-radius: var(--radius-default);
  background: var(--ink-000);
  color: var(--neutral-gray-6);
  font-size: var(--fs-14);
}

.field__input::placeholder { color: var(--text-placeholder); }
.field__input:focus { outline: none; border-color: var(--brand-primary); }
.field__input.is-error { border-color: var(--error-primary); background: var(--error-background); }

select.field__input {
  appearance: none;
  padding-right: var(--l);
  background: var(--ink-000) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23354869' stroke-width='1.5'/%3E%3C/svg%3E") right var(--s) center / 16px no-repeat;
}

/* ================= card（Figma 対応なし・foundations 準拠） ================= */
.card {
  display: block;
  padding: var(--m);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-default);
  background: var(--ink-000);
  color: inherit;
  text-decoration: none;
}

a.card:hover,
.card--link:hover {
  background: var(--bg-raised);
  border-color: var(--border-default);
  transform: translateY(-2px);
  box-shadow: var(--shadow-default);
}

a.card, .card--link { transition: transform 0.15s ease, box-shadow 0.15s ease; }

/* ================= breadcrumbs（Figma 32259:6073） ================= */
.crumbs {
  display: flex;
  align-items: center;
  gap: var(--xs);
  overflow-x: auto;
  white-space: nowrap;
  font-size: var(--fs-12);
  line-height: var(--lh-label);
  color: var(--text-secondary);
}

.crumbs a { color: var(--text-secondary); text-decoration: none; }
.crumbs a:hover { color: var(--text-primary); }
.crumbs__sep { color: var(--neutral-gray-3); }
.crumbs__current { color: var(--neutral-gray-7); }

/* ================= ステップ番号（Figma 対応なし） ================= */
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--control-h);
  height: var(--control-h);
  border-radius: var(--radius-full);
  background: var(--brand-primary);
  color: var(--ink-000);
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  line-height: var(--lh-label);
}

.step__num--pending { background: var(--ink-000); border: 1px solid var(--neutral-gray-4); color: var(--neutral-gray-5); }
.step__num--done { background: var(--success-primary); }

/* ================= Loader（Figma 32259:6001） ================= */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--brand-tertiary);
  border-top-color: var(--brand-primary);
  border-radius: var(--radius-full);
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ================= コード表示（Figma 対応なし・foundations 準拠） ================= */
.code {
  margin: 0;
  padding: var(--m);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-default);
  background: var(--neutral-gray-1);
  color: var(--neutral-gray-7);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  line-height: var(--lh-body);
  overflow-x: auto;
  white-space: pre;
}

.code--dark {
  background: var(--bg-dark);
  border-color: var(--bg-dark);
  color: var(--ink-000);
}

code.inline {
  padding: 0 var(--xs);
  border-radius: var(--radius-default);
  background: var(--neutral-gray-1);
  color: var(--neutral-gray-7);
  font-size: var(--fs-14);
}

/* ================= テーブル（Figma 対応なし・foundations 準拠） ================= */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-14);
  line-height: var(--lh-body);
}

.table th,
.table td {
  padding: var(--s) var(--m);
  border-bottom: 1px solid var(--neutral-gray-2);
  text-align: left;
  vertical-align: top;
}

.table th {
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  background: var(--neutral-gray-1);
}

.table code { font-size: var(--fs-12); }

.table-wrap { overflow-x: auto; }