/*
 * base.css — 全画面に効く土台。
 * 値の正本は tokens.css。ここに生の px や色コードを書かないこと。
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.wrap {
  max-width: 34rem;
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-4) var(--sp-6);
}

h1 {
  font-size: var(--fs-title);
  line-height: 1.4;
  margin: 0 0 var(--sp-4);
}

h2 {
  font-size: var(--fs-head);
  line-height: 1.4;
  margin: 0 0 var(--sp-3);
}

.lead {
  margin: 0 0 var(--sp-5);
}

.hint {
  color: var(--c-ink-weak);
  font-size: var(--fs-caption);
  margin: var(--sp-3) 0 0;
}

/* --- カード ------------------------------------------------------------ */
.card {
  background: var(--c-surface);
  border: var(--border) solid var(--c-line);
  border-radius: var(--radius);
  padding: var(--sp-4);
  margin: 0 0 var(--sp-4);
}

.card--urgent {
  border-color: var(--c-urgent);
  border-width: 3px;
}

.card--urgent h2 {
  color: var(--c-urgent);
}

/* --- 定義リスト -------------------------------------------------------- */
.detail {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-2) var(--sp-4);
}

.detail dt {
  color: var(--c-ink-weak);
  font-size: var(--fs-caption);
}

.detail dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.steps {
  margin: 0;
  padding-left: 1.4em;
}

.steps li + li {
  margin-top: var(--sp-3);
}

/* --- 状態表示 ---------------------------------------------------------- */
/* ★ 色だけで状態を表さない。先頭に記号を付けて、文字だけでも読み取れるようにする。 */
.state {
  margin: 0 0 var(--sp-3);
  font-weight: 700;
}

.state::before {
  margin-right: 0.4em;
}

.state--wait {
  color: var(--c-ink-weak);
}
.state--wait::before {
  content: '…';
}

.state--ok {
  color: var(--c-ok);
}
.state--ok::before {
  content: '✓';
}

.state--ng {
  color: var(--c-ng);
}
.state--ng::before {
  content: '！';
}

/* --- ボタン ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  padding: 0 var(--sp-5);
  margin-top: var(--sp-4);
  border: none;
  border-radius: var(--radius);
  background: var(--c-accent);
  color: var(--c-accent-ink);
  /* ★ 1rem 未満にしないこと。iOS はフォーム要素が 16px 未満だと
       タップ時に画面を自動でズームし、以後レイアウトが崩れて見える。 */
  font-size: var(--fs-body);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
}

.btn:focus-visible {
  outline: 3px solid var(--c-ink);
  outline-offset: 2px;
}

/* --- ○ △ × -----------------------------------------------------------
   ★ 色・記号・模様の3重で区別する (AGENTS.md ルール19)。
     色覚特性のある人にも、屋外で画面が見えにくい状況にも効く。
     tests/ の検査が「background-color 以外の区別があること」を見張る。 */
.mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  border-radius: var(--radius);
  border: var(--border) solid currentColor;
  font-size: var(--fs-head);
  font-weight: 700;
  background-color: var(--c-surface);
}

.mark--o {
  color: var(--c-ok);
  border-style: solid;
  background-image: none;
}

.mark--t {
  color: var(--c-maybe);
  /* 斜線 */
  border-style: dashed;
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 6px,
    rgba(138, 91, 0, 0.16) 6px 12px
  );
}

.mark--x {
  color: var(--c-ng);
  /* 点 */
  border-style: dotted;
  background-image: radial-gradient(rgba(140, 29, 29, 0.22) 1.5px, transparent 1.6px);
  background-size: 8px 8px;
}

.mark--unknown {
  color: var(--c-unknown);
  border-style: dashed;
  background-image: none;
}

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