/* 共通の見た目。ライトとダークの両方(端末の設定に従う)。
   見た目の決まり(色・文字の段・余白の段・角・押せる高さ・行の長さ・図の色)は、:root の変数の1か所で決める。
   道具で共通の部品(道具の箱・ファイルを選ぶ枠・設定の枠・チェック・入力・ボタン・注意・状態・結果の数字)も、ここの1か所。
   道具ごとの app.css には、その道具だけの物を書く(docs/tool-pattern.md)。 */
:root {
  color-scheme: light dark;
  /* 色 */
  --bg: #faf9f6;
  --surface: #ffffff;
  --text: #22262b;
  --muted: #5b636d;
  --line: #d9d6cf;
  --accent: #1f5f8b;
  --accent-text: #ffffff;
  --warn-bg: #fff4d6;
  --warn-text: #5c4300;
  --error-bg: #fde8e6;
  --error-text: #8a1c12;
  --focus: #b3531b;
  /* 文字の段(6段+答えの大きな数字) */
  --fs-xs: 0.85rem;
  --fs-s: 0.92rem;
  --fs-m: 1rem;
  --fs-l: 1.1rem;
  --fs-h2: 1.25rem;
  --fs-h1: 1.7rem;
  --fs-num: 3rem;
  /* 余白の段 */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2.25rem;
  /* 角: 入力・注意 / ボタン・枠 / 道具の箱・カード */
  --r-s: 0.375rem;
  --r-m: 0.5rem;
  --r-l: 0.75rem;
  /* 押せる高さ(44px。指で押しやすい大きさ)/ 文章の行の長さ */
  --tap: 2.75rem;
  --measure: 44rem;
  /* 図の色(2つの向き・線・地) */
  --fig-a: #9ec5e4;
  --fig-b: #f0c987;
  --fig-line: #22262b;
  --fig-bg: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16191d;
    --surface: #1f2328;
    --text: #e6e8eb;
    --muted: #a3abb5;
    --line: #3a4048;
    --accent: #8cc4ea;
    --accent-text: #10202c;
    --warn-bg: #3d3210;
    --warn-text: #f3dc9a;
    --error-bg: #46201c;
    --error-text: #ffc9c2;
    --focus: #ffb37a;
    --fig-a: #3f7aa6;
    --fig-b: #a77a2c;
    --fig-line: #e6e8eb;
    --fig-bg: #1b1f24;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", sans-serif;
  font-size: var(--fs-m);
  line-height: 1.75;
  overflow-wrap: anywhere;
}
.wrap { max-width: 60rem; margin: 0 auto; padding: 0 var(--sp-4); }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
input, select, textarea, progress { accent-color: var(--accent); }
.skip { position: absolute; left: -999rem; }
/* 見えないが、読み上げには出す文(記号の印の言葉など) */
.nb { white-space: nowrap; } /* 行をまたいで折れない語(例: A 系(ISO)) */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { left: 1rem; top: 0.5rem; background: var(--surface); padding: 0.4rem 0.8rem; z-index: 10; }

/* ---------- 枠(ヘッダー・本文・フッター) ---------- */
header.site { background: var(--surface); border-bottom: 1px solid var(--line); }
header.site .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.2rem; padding-top: 0.7rem; padding-bottom: 0.7rem; }
.brand { font-weight: 700; color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: var(--sp-2); }
.brand img { width: 1.5rem; height: 1.5rem; }
nav.main { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; margin-left: auto; }
nav.main a { padding: 0.3rem 0; }
/* ナビとフッターのリンクは、下線なし(重ねたときだけ)。本文の中のリンクは、下線つきのまま */
nav.main a, footer.site nav a { text-decoration: none; }
nav.main a:hover, footer.site nav a:hover { text-decoration: underline; }
/* 狭い画面: 「道具の一覧」はロゴと同じ行き先なので隠し、ヘッダーを1段にする */
@media (max-width: 30rem) {
  nav.main a:first-child { display: none; }
}

main { flex: 1; width: 100%; padding: var(--sp-5) 0 3rem; }
h1 { font-size: var(--fs-h1); line-height: 1.35; margin: var(--sp-2) 0 0.8rem; }
h2 { font-size: var(--fs-h2); line-height: 1.4; margin: var(--sp-6) 0 0.6rem; }
h3 { font-size: var(--fs-l); margin: 0 0 0.4rem; }
/* 日本語の見出しと短い文は、文節で折る(使えるブラウザだけ。使えないブラウザは、今までどおり) */
h1, .lead, .note, legend, dl.faq dt { word-break: auto-phrase; }
p { margin: 0.6rem 0; }
.lead { font-size: var(--fs-l); }
.note { color: var(--muted); font-size: var(--fs-s); }
.hint { color: var(--muted); font-weight: 400; font-size: var(--fs-s); }
ol, ul { padding-left: 1.4rem; }
li { margin: 0.3rem 0; }
/* 文章の行の長さ(道具の箱・カード・表は、幅いっぱいのまま) */
main .wrap > p, main .wrap > ol, main .wrap > ul:not(.tools), dl.faq { max-width: var(--measure); }
dl.faq dt { font-weight: 700; margin-top: var(--sp-4); }
dl.faq dd { margin: 0.2rem 0 0; }

/* ---------- トップ: 分類ごとの見出しと、道具のカード ---------- */
h2.cat { margin: var(--sp-5) 0 var(--sp-3); }
ul.tools { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--sp-4); }
ul.tools li { position: relative; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--sp-4) 1.1rem; }
ul.tools li:hover { border-color: var(--accent); }
ul.tools li:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
ul.tools h3 { margin: 0 0 var(--sp-1); font-size: var(--fs-l); line-height: 1.5; }
ul.tools h3 a { text-decoration: none; outline: none; }
/* カード全体を押せるようにする(リンクの当たりを、カードいっぱいに広げる) */
ul.tools h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-l); }
ul.tools p { margin: 0; color: var(--muted); font-size: var(--fs-s); }

/* ---------- ボタン(3種類: 主 .button=1画面に1つ / .secondary / .small) ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; font: inherit; font-weight: 700; line-height: 1.4; cursor: pointer; text-decoration: none; text-align: center;
  background: var(--accent); color: var(--accent-text); border: 1px solid var(--accent); border-radius: var(--r-m); padding: var(--sp-2) 1.2rem; min-height: var(--tap);
}
.button.secondary { background: transparent; color: var(--accent); }
.button.small { padding: var(--sp-1) var(--sp-3); font-weight: 400; font-size: var(--fs-s); }
.button:disabled { opacity: 0.5; cursor: default; }

/* ---------- 注意(1種類)・エラー・状態 ---------- */
.warn { background: var(--warn-bg); color: var(--warn-text); border-left: 0.25rem solid var(--warn-text); border-radius: var(--r-s); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-s); }
.error { background: var(--error-bg); color: var(--error-text); border-radius: var(--r-m); padding: 0.7rem 1rem; white-space: pre-line; }
/* 状態の文(読み上げる所)。空のあいだは、場所を取らない(消すと読み上げが不安定になるので、高さと余白だけを 0 にする) */
.status { font-weight: 700; }
.status:empty { margin: 0; }
.mail { font-weight: 700; font-size: var(--fs-l); }

/* ---------- 道具の箱と、ファイルを選ぶ枠 ---------- */
.tool { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--sp-4); margin: 1.2rem 0 0; }
.tool.over { border-color: var(--accent); }
.drop { position: relative; border: 2px dashed var(--line); border-radius: var(--r-m); padding: 2rem 1rem; text-align: center; }
.tool.over .drop { border-color: var(--accent); background: var(--bg); }
/* ブラウザの素の「ファイルを選択」は見えなくして、<label class="button"> を主なボタンにする。
   入力そのものは残すので、キーボード(Tab → Enter・Space)と読み上げで、今までどおり使える。フォーカスの輪は、ボタンと枠に出す */
.drop input[type="file"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.drop input[type="file"]:focus-visible + .button { outline: 3px solid var(--focus); outline-offset: 2px; }
.drop:focus-within { border-color: var(--accent); }
.drop-hint { margin: var(--sp-2) 0 0; font-weight: 700; }
.drop .note { margin-bottom: 0; }
.source-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; margin-top: 0; }
.source-info { font-weight: 700; }

/* ---------- 設定の枠・チェック・入力 ---------- */
/* 枠は、隣の高さに合わせて伸ばさない。1列の最小の幅は、道具が --opt-min で決める */
.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--opt-min, 15rem), 1fr)); gap: 0.8rem; align-items: start; }
fieldset { border: 1px solid var(--line); border-radius: var(--r-m); padding: var(--sp-2) 0.9rem 0.8rem; margin: 0; min-width: 0; }
legend { font-weight: 700; padding: 0 0.4rem; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; }
.col { display: flex; flex-direction: column; gap: 0.2rem; }
.sub { margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px dashed var(--line); }
/* 文が2行に折れても、丸・四角は1行めにそろえる */
.check { display: inline-flex; align-items: flex-start; gap: 0.4rem; min-height: var(--tap); padding: 0.45rem 0; cursor: pointer; }
.check input { width: 1.25rem; height: 1.25rem; flex: none; margin: 0.25rem 0 0; }
.field { display: flex; flex-direction: column; gap: 0.2rem; margin: 0.4rem 0; }
.field label { font-weight: 700; }
.field .u { font-weight: 400; color: var(--muted); }
fieldset > .note { margin: 0.2rem 0; }
input[type="text"], input[type="time"], input[type="number"], select, textarea {
  font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-s);
  padding: 0.4rem 0.6rem; min-height: var(--tap); max-width: 100%;
}
.actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.2rem; }
.progress { display: block; width: 100%; margin-top: 0.8rem; }
/* 「中止」は、進み具合のすぐ下(初めの読み込み中にも出るように、保存のボタンの並びの外に置く) */
.cancel { margin-top: 0.6rem; }
/* 表は、縮めずに枠の中で横へ送る。「横に動かせます」の一言は、狭い画面でだけ出す */
.table-wrap { overflow-x: auto; }
.scroll-hint { display: none; margin: 0 0 0.3rem; }
@media (max-width: 40rem) {
  .scroll-hint { display: block; }
}

/* ---------- 結果(数を入れる道具): 答えの大きな数字と、見出しと値の組 ---------- */
.result { margin-top: 0.4rem; }
.result.old { opacity: 0.55; }
.result h2 { margin-top: var(--sp-4); }
.result h3 { margin: var(--sp-5) 0 0.4rem; }
dl.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--sp-2) var(--sp-4); margin: 0.6rem 0; }
dl.stats > div { border-left: 0.25rem solid var(--line); padding-left: 0.7rem; }
dl.stats dt { color: var(--muted); font-size: var(--fs-s); }
dl.stats dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
/* 答え: 1つ目を、横いっぱいの大きな欄にする(数字 + 単位) */
dl.stats.big > div:first-child { grid-column: 1 / -1; border-left: 0.5rem solid var(--accent); padding: 0.2rem 0 0.2rem 1rem; }
dl.stats.big > div:first-child dt { font-size: var(--fs-l); }
dl.stats.big > div:first-child dd { font-size: var(--fs-num); line-height: 1.2; }
dl.stats.big > div:first-child dd .unit { font-size: var(--fs-h2); margin-left: 0.3rem; }
/* 答えの直下の断り(灰色にしない。2文まで) */
.caveat { margin: 0.4rem 0 0; font-size: var(--fs-s); color: var(--text); }
/* 印刷のときだけ出す物(大会名など) */
.print-only { display: none; }

footer.site { border-top: 1px solid var(--line); background: var(--surface); padding: 1.2rem 0 2rem; font-size: var(--fs-s); }
footer.site nav { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; }
footer.site p { color: var(--muted); margin: 0.6rem 0 0; }
/* 道具のページの末尾: 同じ運営者のほかの物への1行 */
.refer { margin-top: var(--sp-5); }

/* ---------- 読み物(/guides/): パンくず・記事の末尾の案内・トップの小さな欄 ---------- */
.crumbs { font-size: var(--fs-s); color: var(--muted); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); padding: 0; margin: 0; }
.crumbs li { margin: 0; }
.crumbs li + li::before { content: "›"; margin-right: var(--sp-2); }
.guide-cta { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--sp-4); }
.guide-link { margin-top: var(--sp-4); font-size: var(--fs-s); }
ul.guide-list { margin: 0; }
/* 小さな画面でも押しやすい高さ(読み物のリンク) */
.crumbs a, .guide-link a { display: inline-block; padding: var(--sp-2) 0; }
/* トップの読み物の欄: 点は1行目に付く(折り返したリンクの最下行に落ちない)。押せる高さは block のリンクの余白で保つ */
ul.guide-list li { margin: 0; display: list-item; }
ul.guide-list a { display: block; padding: var(--sp-2) 0; }
.crumbs li[aria-current] { min-width: 0; padding: var(--sp-2) 0; }

/* 読み物の印刷: ヘッダー・フッター・パンくず・案内のボタンを出さず、本文だけを紙に出す。
   読み物のページ(パンくずが有るページ)だけに効かせる。道具のページの印刷(html.xx-print の指定)には当てない */
@media print {
  body:has(nav.crumbs) header.site, body:has(nav.crumbs) footer.site, body:has(nav.crumbs) .skip, body:has(nav.crumbs) .crumbs { display: none; }
  body:has(nav.crumbs) { background: #fff; color: #000; font-size: 11pt; }
  body:has(nav.crumbs) main { padding: 0; }
  body:has(nav.crumbs) main .wrap > p, body:has(nav.crumbs) main .wrap > ol, body:has(nav.crumbs) main .wrap > ul:not(.tools) { max-width: none; }
  body:has(nav.crumbs) h2 { break-after: avoid; margin-top: 1.2rem; }
  body:has(nav.crumbs) li, body:has(nav.crumbs) .guide-cta, body:has(nav.crumbs) .warn { break-inside: avoid; }
  body:has(nav.crumbs) a { color: #000; text-decoration: none; }
  body:has(nav.crumbs) .warn { background: none; color: #000; border-left-color: #000; }
}