/* reset — Artifact ホスト側が提供していたぶんを自前で持つ */
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; padding: 0; }
  ul, ol { list-style: none; }
  img, svg { display: block; max-width: 100%; }
  a { color: inherit; }
  table { border-collapse: collapse; }
  body { min-height: 100dvh; }

  :root {
    --ground:        #EBEDF0;
    --ground-raised: #FFFFFF;
    --ground-sunk:   #E0E3E8;
    --ink:           #171B21;
    --ink-soft:      #4A525E;
    --ink-faint:     #7C8593;
    --rule:          #CBD1DA;
    --accent:        #A8701A;
    --accent-bg:     #F5E7CE;
    --danger:        #B03E28;
    --danger-bg:     #F7E0DB;
    --done:          #3D7A64;
    --done-bg:       #DDEDE6;

    --f-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
    --f-body: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic",
              "Noto Sans JP", "Segoe UI", sans-serif;

    --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem;
    --s5: 1.5rem; --s6: 2rem; --s7: 3rem;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --ground:        #101419;
      --ground-raised: #171C23;
      --ground-sunk:   #0B0E12;
      --ink:           #E4E8EE;
      --ink-soft:      #A3ACBA;
      --ink-faint:     #6E7885;
      --rule:          #262D37;
      --accent:        #E8A33D;
      --accent-bg:     #2A2113;
      --danger:        #E5715A;
      --danger-bg:     #2E1815;
      --done:          #5A9E86;
      --done-bg:       #142320;
    }
  }

  :root[data-theme="dark"] {
    --ground:        #101419;
    --ground-raised: #171C23;
    --ground-sunk:   #0B0E12;
    --ink:           #E4E8EE;
    --ink-soft:      #A3ACBA;
    --ink-faint:     #6E7885;
    --rule:          #262D37;
    --accent:        #E8A33D;
    --accent-bg:     #2A2113;
    --danger:        #E5715A;
    --danger-bg:     #2E1815;
    --done:          #5A9E86;
    --done-bg:       #142320;
  }

  :root[data-theme="light"] {
    --ground:        #EBEDF0;
    --ground-raised: #FFFFFF;
    --ground-sunk:   #E0E3E8;
    --ink:           #171B21;
    --ink-soft:      #4A525E;
    --ink-faint:     #7C8593;
    --rule:          #CBD1DA;
    --accent:        #A8701A;
    --accent-bg:     #F5E7CE;
    --danger:        #B03E28;
    --danger-bg:     #F7E0DB;
    --done:          #3D7A64;
    --done-bg:       #DDEDE6;
  }

  body {
    background: var(--ground);
    color: var(--ink);
    font-family: var(--f-body);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
  }

  .wrap {
    max-width: 46rem;
    margin: 0 auto;
    padding: var(--s5) var(--s4) var(--s7);
    display: flex;
    flex-direction: column;
    gap: var(--s5);
  }

  /* ---------- masthead ---------- */

  .masthead { display: flex; flex-direction: column; gap: var(--s2); }

  .eyebrow {
    font-family: var(--f-mono);
    font-size: .7rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--accent);
  }

  h1 {
    font-family: var(--f-mono);
    font-size: clamp(1.5rem, 5vw, 2rem);
    font-weight: 700;
    letter-spacing: -.01em;
    text-wrap: balance;
    line-height: 1.25;
  }

  .stamp {
    font-family: var(--f-mono);
    font-size: .75rem;
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
  }

  /* ---------- vitals strip ---------- */

  /* grid だと最終行に空きセルが残るので flex-wrap にして詰める */
  .vitals {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
    border-radius: 3px;
    overflow: hidden;
  }

  .vital {
    flex: 1 1 6.5rem;
    background: var(--ground-raised);
    padding: var(--s3);
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .vital dt {
    font-family: var(--f-mono);
    font-size: .65rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }

  .vital dd {
    font-family: var(--f-mono);
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .vital dd small {
    font-size: .7rem;
    font-weight: 400;
    color: var(--ink-soft);
    margin-left: .2em;
    white-space: nowrap;   /* 「被ダメ2倍」が途中で割れないように */
  }

  /* ---------- sections ---------- */

  section { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }

  /* flex/grid の子は既定で min-width:auto のため、中身の min-content が
     ページ全体を横に押し広げてしまう。収縮を許可して横スクロールを封じる */
  .scroll, .kv > div, .kv dd, .vital, .vital dd,
  ol.tasks > li, ol.tasks > li > div, details, .body { min-width: 0; }

  h2 {
    font-family: var(--f-mono);
    font-size: .8rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-soft);
    padding-bottom: var(--s2);
    border-bottom: 1px solid var(--rule);
    display: flex;
    align-items: baseline;
    gap: var(--s2);
  }

  h2::before {
    content: "";
    width: .5rem; height: .5rem;
    background: var(--accent);
    flex: none;
  }

  h3 {
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .01em;
  }

  p { color: var(--ink-soft); font-size: .9rem; }
  strong { color: var(--ink); font-weight: 700; }
  em { font-style: normal; color: var(--accent); font-weight: 700; }

  /* ---------- alert blocks ---------- */

  .alert {
    background: var(--danger-bg);
    border-left: 3px solid var(--danger);
    border-radius: 0 3px 3px 0;
    padding: var(--s3) var(--s4);
    display: flex;
    flex-direction: column;
    gap: var(--s2);
  }

  .alert h3 { color: var(--danger); font-family: var(--f-mono); font-size: .85rem; letter-spacing: .05em; }
  .alert p { color: var(--ink); }
  .alert ul { display: flex; flex-direction: column; gap: var(--s2); }

  /* ---------- task list ---------- */

  ol.tasks {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
    border-radius: 3px;
    overflow: hidden;
    counter-reset: t;
    list-style: none;
  }

  ol.tasks > li {
    background: var(--ground-raised);
    padding: var(--s3) var(--s4);
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    gap: var(--s3);
    align-items: baseline;
    counter-increment: t;
    font-size: .9rem;
  }

  ol.tasks > li::before {
    content: counter(t, decimal-leading-zero);
    font-family: var(--f-mono);
    font-size: .75rem;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
  }

  /* li 直下の要素はすべてグリッドアイテムになるため、
     本文はラッパー1つにまとめて2列目に置く */
  ol.tasks > li > div { grid-column: 2; }
  ol.tasks .why { display: block; color: var(--ink-faint); font-size: .8rem; margin-top: 2px; }

  /* ---------- pills ---------- */

  .pill {
    display: inline-block;
    font-family: var(--f-mono);
    font-size: .65rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .1em .5em;
    border-radius: 2px;
    vertical-align: .1em;
    white-space: nowrap;
  }
  .pill.now  { background: var(--accent-bg); color: var(--accent); }
  .pill.stop { background: var(--danger-bg); color: var(--danger); }
  .pill.ok   { background: var(--done-bg);   color: var(--done); }

  /* ---------- tables ---------- */

  .scroll { overflow-x: auto; border: 1px solid var(--rule); border-radius: 3px; }

  table {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
    background: var(--ground-raised);
    min-width: 22rem;   /* スマホ幅に収める。超える表だけ .scroll 内で横に流れる */
  }

  th, td {
    text-align: left;
    padding: var(--s2) var(--s3);
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
  }

  thead th {
    font-family: var(--f-mono);
    font-size: .65rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-faint);
    background: var(--ground-sunk);
    white-space: nowrap;
  }

  tbody tr:last-child td { border-bottom: none; }
  td.num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
  td.role { color: var(--ink-soft); }

  /* ---------- details ---------- */

  details {
    background: var(--ground-raised);
    border: 1px solid var(--rule);
    border-radius: 3px;
    overflow: hidden;
  }

  summary {
    padding: var(--s3) var(--s4);
    cursor: pointer;
    font-family: var(--f-mono);
    font-size: .8rem;
    letter-spacing: .06em;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: var(--s3);
    align-items: center;
  }

  summary::-webkit-details-marker { display: none; }
  summary::after { content: "+"; color: var(--accent); font-weight: 700; flex: none; }
  details[open] summary::after { content: "−"; }
  details[open] summary { border-bottom: 1px solid var(--rule); }
  summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

  .body {
    padding: var(--s4);
    display: flex;
    flex-direction: column;
    gap: var(--s3);
    font-size: .88rem;
  }

  .body ul { display: flex; flex-direction: column; gap: var(--s2); padding-left: 1.1em; }
  .body ul li { color: var(--ink-soft); }
  .body ul li::marker { color: var(--accent); }

  /* ---------- key/value rows ---------- */

  .kv { display: flex; flex-direction: column; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; }
  .kv > div { background: var(--ground-raised); padding: var(--s2) var(--s3); display: grid; grid-template-columns: minmax(6rem, auto) 1fr; gap: var(--s3); font-size: .85rem; }
  .kv dt { font-family: var(--f-mono); font-size: .72rem; color: var(--ink-faint); letter-spacing: .06em; }
  .kv dd { color: var(--ink); }

  /* ---------- special stats ---------- */

  .special { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; }
  .special > div { background: var(--ground-raised); padding: var(--s2) var(--s1); text-align: center; }
  .special dt { font-family: var(--f-mono); font-size: .7rem; color: var(--ink-faint); }
  .special dd { font-family: var(--f-mono); font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
  .special dd small { display: block; font-size: .65rem; font-weight: 400; color: var(--accent); }

  footer {
    border-top: 1px solid var(--rule);
    padding-top: var(--s4);
    font-family: var(--f-mono);
    font-size: .7rem;
    color: var(--ink-faint);
    line-height: 1.8;
  }

  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
  }

  /* リセットで消したマーカーを、本文リスト側だけ戻す */
  .body ul { list-style: disc; }
  /* ホーム画面から起動したときにノッチ/ホームバーを避ける */
  .wrap {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-bottom: max(3rem, env(safe-area-inset-bottom));
  }

/* ---------- ページ間ナビ ---------- */
.nav {
  display: flex;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
}
.nav a {
  flex: 1;
  text-align: center;
  padding: .55rem .4rem;
  background: var(--ground-raised);
  font-family: var(--f-mono);
  font-size: .78rem;
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--ink-soft);
}
.nav a[aria-current="page"] { background: var(--accent-bg); color: var(--accent); font-weight: 700; }
.nav a:hover { color: var(--ink); }
.nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ---------- チェックリスト ---------- */
.check {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
}
.check label {
  background: var(--ground-raised);
  padding: var(--s3) var(--s4);
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  gap: var(--s3);
  align-items: start;
  cursor: pointer;
  font-size: .9rem;
  min-width: 0;
}
.check input {
  width: 1.15rem; height: 1.15rem;
  margin-top: .3em;
  accent-color: var(--accent);
  cursor: pointer;
}
.check input:checked + span { opacity: .4; }
.check span { min-width: 0; }
.check .why { display: block; color: var(--ink-faint); font-size: .8rem; margin-top: 2px; }

.reset {
  align-self: flex-start;
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  padding: .4rem .9rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--ground-raised);
  color: var(--ink-soft);
  cursor: pointer;
}
.reset:hover { color: var(--accent); border-color: var(--accent); }
.reset:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- 巡回ルート ---------- */
ol.route {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
  counter-reset: r;
}
ol.route > li {
  background: var(--ground-raised);
  padding: var(--s3) var(--s4);
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: var(--s3);
  align-items: baseline;
  counter-increment: r;
  font-size: .9rem;
  min-width: 0;
}
ol.route > li::before {
  content: counter(r);
  font-family: var(--f-mono);
  font-size: .72rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
ol.route > li > div { grid-column: 2; min-width: 0; }
ol.route .why { display: block; color: var(--ink-faint); font-size: .8rem; margin-top: 2px; }