/* shumoku-livedemo control — konoe-akitoshi/design-rules 準拠
   ライトテーマ / slate ニュートラル + 単色アクセント(青) / 影でなく hairline border /
   golden-ratio radius / 4-8pt spacing / 低彩度セマンティック */
:root {
  /* neutrals */
  --c-canvas: #f3f5f8;
  --c-surface: #ffffff;
  --c-line: #dde3e9;
  --c-line-strong: #c4ccd5;
  /* text */
  --c-ink: #14181f;
  --c-ink-soft: #2a313c;
  --c-muted: #586170;
  --c-quiet: #8a93a0;
  /* accent (blue only) */
  --c-accent: #2348c6;
  --c-accent-ink: #1b3aa8;
  --c-accent-sunk: #eaeefb;
  --c-on-accent: #ffffff;
  /* semantic */
  --c-ok: #197a4b;       --c-ok-bg: #e7f4ec;   --c-ok-line: #b7dcc6;
  --c-warn: #9a6300;     --c-warn-bg: #fbf1de; --c-warn-line: #ecd3a3;
  --c-danger: #b5302a;   --c-danger-bg: #fbeae8; --c-danger-line: #ecc2be;
  /* spacing (4/8pt) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px;
  /* radius (golden) */
  --r-0: 16px; --r-1: 10px; --r-2: 6px; --r-3: 4px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--c-canvas);
  color: var(--c-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---- header ---- */
header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-8);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
}
.brand { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; color: var(--c-ink); }
.brand span { color: var(--c-quiet); font-weight: 400; }
.toolbar { display: flex; align-items: center; gap: var(--s-2); }
.status { font-size: 13px; color: var(--c-muted); display: inline-flex; align-items: center; gap: var(--s-2); }
.status::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-quiet);
}
.status.ok::before { background: var(--c-ok); }

/* ---- layout ---- */
main { max-width: 1200px; margin: 0 auto; padding: var(--s-4) var(--s-8) var(--s-16, 64px); }
.block { margin-top: var(--s-8); }
.block-head { margin-bottom: var(--s-4); }
.block-head h2 { font-size: 16px; font-weight: 650; margin: 0 0 var(--s-1); color: var(--c-ink); letter-spacing: -0.01em; }
.block-head p { margin: 0; color: var(--c-muted); font-size: 13px; }
.block-head code {
  background: var(--c-canvas); border: 1px solid var(--c-line);
  padding: 1px 6px; border-radius: var(--r-3); font-size: 12px; color: var(--c-ink-soft);
}

/* ---- setup ---- */
.setup {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--s-3);
}
.field-group {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-1);
  padding: var(--s-5) var(--s-5);
}
.group-label {
  display: block; font-size: 11px; font-weight: 650; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--c-quiet); margin-bottom: var(--s-3);
}
.field-group label { display: block; font-size: 12px; color: var(--c-muted); margin-bottom: var(--s-3); }
.field-group input {
  display: block; width: 100%; margin-top: var(--s-1);
  padding: var(--s-2) var(--s-3); min-height: 40px;
  background: var(--c-surface); border: 1px solid var(--c-line-strong);
  border-radius: var(--r-2); color: var(--c-ink); font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.field-group input:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-sunk); }

.seedlog {
  margin-top: var(--s-4); padding: var(--s-3) var(--s-4);
  background: var(--c-canvas); border: 1px solid var(--c-line); border-radius: var(--r-1);
  max-height: 280px; overflow: auto; font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap; color: var(--c-ink-soft);
}

/* ---- scenarios ---- */
.scenarios { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s-3); }
.scenario {
  display: flex; flex-direction: column; gap: var(--s-1); text-align: left;
  cursor: pointer; padding: var(--s-4); min-height: 64px;
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-quiet); border-radius: var(--r-1);
  transition: border-color .12s, background .12s;
}
.scenario:hover { background: var(--c-canvas); }
.scenario:active { background: var(--c-accent-sunk); }
.scenario:disabled { opacity: .5; cursor: default; }
.scenario.sev-danger { border-left-color: var(--c-danger); }
.scenario.sev-warn { border-left-color: var(--c-warn); }
.scenario .sc-title { font-weight: 600; font-size: 14px; color: var(--c-ink); }
.scenario .sc-desc { font-size: 12px; color: var(--c-muted); line-height: 1.45; }

/* ---- node groups & cards ---- */
.group { margin-bottom: var(--s-6); }
.group h3 {
  font-size: 11px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--c-quiet); margin: 0 0 var(--s-3);
}
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(264px, 1fr)); gap: var(--s-3); }
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-1);
  padding: var(--s-4);
}
.card.faulted { border-color: var(--c-danger-line); background: var(--c-danger-bg); }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.card .name { font-weight: 600; font-size: 14px; color: var(--c-ink); }
.state { font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; gap: var(--s-1); }
.state .dot { width: 7px; height: 7px; border-radius: 50%; }
.state.up { color: var(--c-ok); } .state.up .dot { background: var(--c-ok); }
.state.down { color: var(--c-danger); } .state.down .dot { background: var(--c-danger); }
.card .meta { color: var(--c-quiet); font-size: 12px; margin: var(--s-1) 0 var(--s-3); }
.fault-tags { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-bottom: var(--s-3); }
.tag {
  font-size: 11px; color: var(--c-danger); background: var(--c-danger-bg);
  border: 1px solid var(--c-danger-line); border-radius: var(--r-3); padding: 0 6px;
}

select {
  width: 100%; margin-bottom: var(--s-3); padding: var(--s-2) var(--s-3); min-height: 40px;
  background: var(--c-surface); border: 1px solid var(--c-line-strong);
  border-radius: var(--r-2); color: var(--c-ink); font-size: 12px;
}
select:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-sunk); }

/* ---- buttons ---- */
.btn {
  cursor: pointer; min-height: 36px; padding: var(--s-2) var(--s-3);
  border: 1px solid var(--c-line-strong); background: var(--c-surface);
  color: var(--c-ink-soft); border-radius: var(--r-2); font-size: 12.5px; font-weight: 500;
}
.btn:hover { border-color: var(--c-accent); color: var(--c-accent); }
.btn:active { background: var(--c-accent-sunk); }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn.primary {
  background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent);
  min-height: 44px; font-weight: 600;
}
.btn.primary:hover { background: var(--c-accent-ink); border-color: var(--c-accent-ink); color: var(--c-on-accent); }
.btns { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.btns .danger { color: var(--c-danger); border-color: var(--c-danger-line); }
.btns .danger:hover { background: var(--c-danger-bg); border-color: var(--c-danger); }
.btns .warn { color: var(--c-warn); border-color: var(--c-warn-line); }
.btns .warn:hover { background: var(--c-warn-bg); border-color: var(--c-warn); }
.btns .clear { color: var(--c-ok); border-color: var(--c-ok-line); }
.btns .clear:hover { background: var(--c-ok-bg); border-color: var(--c-ok); }

/* ---- toast ---- */
.toast {
  position: fixed; bottom: var(--s-6); left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--c-ink); color: var(--c-surface);
  padding: var(--s-3) var(--s-5); border-radius: var(--r-1); font-size: 13px;
  opacity: 0; transition: opacity 0.18s, transform 0.18s; pointer-events: none; max-width: 80vw;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { background: var(--c-danger); }