/* sandbox 共通の土台。等幅・角丸なし・影なし。hoverは反転させるだけ */

:root {
  --bg: #fcfcfc;
  --text: #111;
  --sub: #6b6b6b;
  --rule: #dcdcdc;
  --link: #0033cc;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Hiragino Sans", monospace;
  --wrap: 960px;
}

/* data-themeが無いページ(ハブ)はOS設定に従う */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101010;
    --text: #ededed;
    --sub: #8c8c8c;
    --rule: #2e2e2e;
    --link: #8ab4ff;
  }
}
:root[data-theme="dark"] {
  --bg: #101010;
  --text: #ededed;
  --sub: #8c8c8c;
  --rule: #2e2e2e;
  --link: #8ab4ff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.7 var(--mono);
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 32px 16px 80px; }

h1 { font-size: 16px; font-weight: 700; margin: 0; }
h2 { font-size: 13px; font-weight: 700; color: var(--sub); margin: 0 0 10px; }
a { color: var(--link); }

/* 下層ページからハブに戻る導線 */
.crumb { font-size: 13px; color: var(--sub); margin: 0 0 20px; }
.crumb a { color: var(--sub); text-decoration: none; }
.crumb a:hover { color: var(--text); text-decoration: underline; }

button {
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--text);
  border-radius: 0;
  padding: 7px 14px;
  cursor: pointer;
}
button:hover:not(:disabled) { background: var(--text); color: var(--bg); }
button:disabled { color: var(--sub); border-color: var(--rule); cursor: not-allowed; }
button.primary { background: var(--text); color: var(--bg); }
button.primary:hover:not(:disabled) { background: var(--bg); color: var(--text); }
button.ghost { border-color: var(--rule); color: var(--sub); padding: 6px 10px; }

input[type="text"], input[type="number"], select {
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 5px 8px;
}
input[type="checkbox"] { accent-color: var(--text); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }