/* 図そのものは SVG が自分の地の色を持っているので、ページ側は枠だけを用意する。 */
:root {
  color-scheme: light dark;
  --ink: #1f2328;
  --dim: #59636e;
  --line: #d1d9e0;
  --paper: #ffffff;
  --ground: #f6f8fa;
  --bad: #b3261e;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e6edf3;
    --dim: #9198a1;
    --line: #3d444d;
    --paper: #151b23;
    --ground: #0d1117;
    --bad: #ff8080;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 16px clamp(12px, 3vw, 32px) 32px;
  background: var(--ground);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, "Hiragino Sans", "Noto Sans JP", sans-serif;
  line-height: 1.6;
}

.head { position: relative; }

h1 { font-size: 1.5rem; margin: 0 0 4px; }
h1 span { color: var(--dim); font-weight: 400; }
/* 版は名前のすぐ後ろ。**名前より控えめに** (見出しは名前が主)。 */
h1 .ver { font-family: var(--mono); font-size: 0.75em; }

/* この頁の QR を出す釦。**右上の隅**に置く — 本文の並びを押しのけない。 */
.qr {
  position: absolute; top: 0; right: 0;
  font: inherit; font-family: var(--mono); font-size: 0.85rem;
  padding: 4px 12px; cursor: pointer;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 6px;
}

.qr-box {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 16px; color: var(--ink); background: var(--paper);
  max-width: min(92vw, 420px);
}
.qr-box::backdrop { background: rgb(0 0 0 / 40%); }
.qr-url {
  margin: 0 0 12px; font-family: var(--mono); font-size: 11px; color: var(--dim);
  /* 共有リンクは長い。**折り返して全部見せる** (縮めると読み合わせできない)。 */
  overflow-wrap: anywhere;
}
.qr-code svg { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.qr-box form { margin-top: 12px; text-align: right; }
.qr-box button {
  font: inherit; font-size: 0.9rem; padding: 4px 12px; cursor: pointer;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 6px;
}
h2 { font-size: 0.8rem; margin: 0 0 6px; color: var(--dim); font-weight: 600; }

.lead { margin: 0 0 8px; }
.lead span { display: block; color: var(--dim); font-size: 0.85rem; }

.links { display: flex; flex-wrap: wrap; gap: 12px; font-size: 0.9rem; }
.links a { color: inherit; }

.bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: 16px 0 12px;
}

.kinds { display: flex; gap: 4px; }
.kinds button {
  font: inherit; font-family: var(--mono); font-size: 0.85rem;
  padding: 4px 12px; cursor: pointer;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 6px;
}
.kinds button[aria-pressed="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }

.pick { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; color: var(--dim); }
select, .bar button {
  font: inherit; font-size: 0.9rem; padding: 4px 8px;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 6px;
}
.bar button { cursor: pointer; }
.said { font-size: 0.85rem; color: var(--dim); }

.panes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 860px) { .panes { grid-template-columns: minmax(0, 1fr); } }


textarea {
  width: 100%; height: min(60svh, 560px); resize: vertical;
  padding: 12px; tab-size: 2;
  font-family: var(--mono); font-size: 13px; line-height: 1.55;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 8px;
}

.out { display: flex; flex-direction: column; gap: 12px; }
.figure { overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
.figure:empty { display: none; }
.figure svg { display: block; max-width: 100%; height: auto; }

/* マップは webview の代わり。中は別の頁 (fence-kit の殻) が動く。
   **開いたら頁の幅いっぱいに置く。** 中の図はキャンバスの幅に合わせて
   描かれるので、半分の幅に押し込めると図もその半分にしかならない
   (属性の欄と道具の列が両端を取るぶん、さらに細くなる)。 */
.map {
  width: 100%; height: min(72svh, 680px); margin-bottom: 16px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--paper);
}

.note {
  margin: 0; padding: 10px 12px; font-size: 0.9rem;
  color: var(--dim); background: var(--paper);
  border: 1px solid var(--line); border-radius: 8px;
}
.note a { color: inherit; }

details { border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
summary { cursor: pointer; padding: 8px 12px; font-size: 0.9rem; color: var(--dim); }
details pre { margin: 0; padding: 0 12px 12px; overflow: auto; font-family: var(--mono); font-size: 12px; }

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; background: var(--paper); }
caption { text-align: left; padding: 8px 12px; font-size: 0.8rem; color: var(--dim); }
th, td { text-align: left; padding: 4px 12px; border-top: 1px solid var(--line); }
th { font-weight: 600; width: 8rem; }
td { font-family: var(--mono); font-size: 12px; }
#netlist table { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }

.messages {
  margin: 0; padding: 12px; overflow: auto; white-space: pre-wrap;
  font-family: var(--mono); font-size: 12px;
  color: var(--bad); background: var(--paper);
  border: 1px solid var(--line); border-left: 3px solid var(--bad); border-radius: 8px;
}

.foot { margin-top: 24px; font-size: 0.85rem; color: var(--dim); }
.foot p { margin: 4px 0; }
.foot a { color: inherit; }

/*
 * スマホ (とくに iPhone) で触れるようにする。**直すのは 4 つ**:
 *
 * 1. **釦と欄を 44px 角より小さくしない** — Apple の指針の下限で、これより
 *    小さいと指で押せない (マウスの 4px の余白のままでは足りない)
 * 2. **欄の字を 16px 以上にする** — iOS Safari は 16px 未満の入力欄に
 *    焦点が移ると**頁ごと拡大する**。戻す手立てが無く、以後ずっと横に溢れる
 * 3. **高さを `vh` で決めない** — iOS の `100vh` はアドレス欄を含む高さで、
 *    実際に見えている分より大きい。図と欄が画面からはみ出す
 * 4. **右上の QR は見出しの下へ回す** — 狭い画面では見出しに重なる
 */
@media (max-width: 560px) {
  body { padding: 12px 12px 24px; }
  h1 { font-size: 1.25rem; }
  .head { padding-right: 0; }
  .qr { position: static; margin-top: 8px; min-height: 36px; padding: 6px 16px; }

  /* **釦は iOS の寸法に。** 44px 角は指の下限で、**枠の高さの決めではない**。
     3 段とも 44px にすると帯だけで 164px 取り、図より背が高くなる
     (実機で「全体的にボタンやフォントが大きい」)。iOS の小さい釦・検索欄と
     同じ 36px にして、字は 13px (註) に落とす。指で押す面は 36 x 115px
     あるので、44px 角の指針は面積として満たしている。 */
  .bar { gap: 8px; }
  .bar button, .kinds button, select { min-height: 36px; padding: 6px 12px; }
  /* 種類の釦は 3 つで 1 行に収める (綴りだけ出して、呼び名は畳む)。 */
  .kinds { width: 100%; }
  .kinds button { flex: 1; font-size: 13px; padding: 6px 4px; }
  /* 呼び名は畳む (綴りだけで 3 つが 1 行に収まる)。 */
  .kinds .reading { display: none; }
  .pick { width: 100%; }
  .pick select { flex: 1; min-width: 0; }

  /* iOS Safari が頁を拡大しない大きさ。 */
  textarea { font-size: 16px; height: 40svh; }
  .map { height: 70svh; }
  select { font-size: 16px; }
}

/* ホーム画面から開いたとき (PWA)。**編集する所だけを出す** —
   見出しもフェンスの字も出るものも畳んで、図と道具に画面をまるごと渡す
   (実機で「GUI で編集する部分をアプリ化する」。52 の docs/35)。

   **頁としては今までどおり。** 畳むのは `body.full` が付いたときだけで、
   ブラウザで開いた人には何も変わらない。 */
body.full {
  padding: 0; height: 100svh; display: flex; flex-direction: column; overflow: hidden;
  /* **ブラウザの拡大を止める。** 図の拡大は 2 本指でマップがやるので、頁ごと
     拡大されると道具の列まで一緒に大きくなる (実機で「メニューアイコンは
     拡大対象にしないで」)。**iframe の中では止められない** — ピンチを受け持つ
     のは最上位の頁のほうなので、こちら側で断る。スクロールは残す。 */
  touch-action: pan-x pan-y;
}
body.full .head,
body.full .panes,
body.full .foot { display: none; }
/* アプリでは図が出しっぱなしなので、開閉の釦は要らない。**頁のほうは残す** —
   狭いときの「編集する」は、そのまま「閉じる」になる。 */
body.app #map-toggle { display: none; }
body.full main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
body.full .bar { margin: 0; padding: 8px clamp(8px, 3vw, 16px); gap: 8px; }
/* **例の欄は 1 行を丸ごと使う。** 種類の札・例・釦を 1 行に詰めると、
   375px では例の名前が「図01 LED…」まで切れて、何を選んでいるか読めない
   (実機で「1 行にして」)。図の高さを 50px ほど譲る。
   狭いときの `width: 100%` は上の @media が持っているので、ここでは
   打ち消さない。 */
/* 高さは残り全部。**枠は取る** — 画面の端まで図に使う。 */
body.full .map {
  flex: 1; height: auto; min-height: 0; margin: 0;
  border: 0; border-top: 1px solid var(--line); border-radius: 0;
}