/* ==========================================================================
   WebMCP 予約デモ — 共有スタイル
   コンセプト: 「人間に見える面」と「エージェントに見える面」を並置する検証台。
   human-facing はサンセリフ、machine-facing はモノスペースで質感を分ける。
   ========================================================================== */

:root {
  --ground: #e9ecf1;
  --ground-edge: #dce0e7;
  --card: #ffffff;
  --ink: #181b22;
  --muted: #6b7180;
  --faint: #9aa0ad;
  --line: #dde1e8;
  --field-line: #cfd4dd;

  --wine: #6e2b54;        /* 主アクセント（ビストロ＝ワイン） */
  --wine-deep: #561f41;
  --wine-soft: #f3e8ef;
  --brass: #b9842c;       /* 稼働・登録済みの信号（真鍮） */
  --brass-soft: #f4e8cd;
  --ok: #1f8a5b;
  --absent: #9a3b3b;      /* ツール非登録の標識 */
  --absent-soft: #f3e2e2;

  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --sans: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background-color: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

a { color: var(--wine); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 1000px; margin: 0 auto; padding: 40px 24px 64px; }
.wrap-narrow { max-width: 880px; }

/* ---- header ---- */
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wine);
  font-weight: 600;
  margin: 0 0 10px;
}
h1.title {
  font-size: clamp(26px, 3.6vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  font-weight: 800;
  margin: 0 0 14px;
}
h1.title .sub { display: block; font-size: 0.5em; font-weight: 500; color: var(--muted); margin-top: 10px; letter-spacing: 0; }
.lead { font-size: 16px; color: #3c414c; max-width: 60ch; margin: 0 0 28px; }

/* ---- status strip (feature detection) ---- */
.status {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13.5px; font-weight: 600;
  border-radius: 999px; padding: 9px 16px;
  border: 1px solid var(--line); background: var(--card); color: var(--muted);
  margin: 0 0 28px;
}
.status .led { width: 10px; height: 10px; border-radius: 50%; background: var(--faint); flex: none; }
.status.on { color: var(--wine-deep); border-color: #e2cdd9; background: var(--wine-soft); }
.status.on .led { background: var(--brass); box-shadow: 0 0 0 3px var(--brass-soft); }

/* ---- how to try ---- */
.howto {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 20px 22px; margin: 0 0 30px;
}
.howto h2 { font-size: 14px; font-weight: 800; margin: 0 0 12px; letter-spacing: -0.01em; }
.howto ol { margin: 0; padding-left: 0; list-style: none; counter-reset: step; }
.howto li {
  position: relative; padding: 0 0 0 34px; margin: 0 0 10px;
  font-size: 14px; color: #3c414c; counter-increment: step;
}
.howto li:last-child { margin-bottom: 0; }
.howto li::before {
  content: counter(step); position: absolute; left: 0; top: 1px;
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--ink); color: #fff; font-family: var(--mono); font-size: 12px;
  display: grid; place-items: center;
}
.howto code, code.inl {
  font-family: var(--mono); font-size: 12.5px;
  background: var(--ground); border: 1px solid var(--ground-edge); border-radius: 6px; padding: 1px 6px;
}

/* ---- variant cards (index) ---- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 8px 0 0; }
@media (max-width: 760px) { .cards { grid-template-columns: 1fr; } }

.vcard {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 22px; position: relative; overflow: hidden;
}
.vcard .top-rule { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--wine); }
.vcard.baseline .top-rule { background: var(--absent); }
.vcard .kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 6px 0 6px; }
.vcard h3 { font-size: 19px; font-weight: 800; margin: 0 0 8px; letter-spacing: -0.01em; }
.vcard p { font-size: 13.5px; color: #4a4f5a; margin: 0 0 16px; flex: 1; }
.vcard .toolchip {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  font-family: var(--mono); font-size: 12px; color: var(--wine-deep);
  background: var(--wine-soft); border: 1px solid #e7d4df; border-radius: 8px; padding: 5px 9px; margin: 0 0 16px;
}
.vcard.baseline .toolchip { color: var(--absent); background: var(--absent-soft); border-color: #e9cccc; }
.vcard .toolchip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brass); }
.vcard.baseline .toolchip .dot { background: var(--absent); }
.vcard .open {
  align-self: flex-start; font-weight: 700; font-size: 14px; color: #fff;
  background: var(--wine); border-radius: 10px; padding: 10px 18px;
}
.vcard .open:hover { background: var(--wine-deep); text-decoration: none; }
.vcard.baseline .open { background: #5a6068; }
.vcard.baseline .open:hover { background: #474c54; }

/* ---- variant page: two faces ---- */
.backlink { display: inline-block; font-family: var(--mono); font-size: 12.5px; color: var(--muted); margin: 0 0 20px; }
.faces { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 820px) { .faces { grid-template-columns: 1fr; } }

.face {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px;
}
.face .face-tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 4px; }
.face.human .face-tag { color: var(--wine); }
.face.agent .face-tag { color: var(--brass); }
.face .face-title { font-size: 17px; font-weight: 800; margin: 0 0 18px; letter-spacing: -0.01em; }

/* form (human face) */
.field { margin: 0 0 14px; }
.field label { display: block; font-size: 12.5px; color: var(--muted); margin: 0 0 5px; }
.field input, .field select {
  width: 100%; height: 44px; border: 1px solid var(--field-line); border-radius: 10px;
  background: #fff; padding: 0 13px; font-family: var(--sans); font-size: 15px; color: var(--ink);
  transition: border-color .18s ease, box-shadow .18s ease, background .3s ease;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--wine); box-shadow: 0 0 0 3px var(--wine-soft); }
.field.flash input, .field.flash select { border-color: var(--brass); background: var(--brass-soft); }

button.submit {
  width: 100%; height: 50px; border: none; border-radius: 12px; background: var(--wine);
  color: #fff; font-family: var(--sans); font-size: 15.5px; font-weight: 800; cursor: pointer; margin-top: 8px;
  transition: background .2s ease, transform .12s ease;
}
button.submit:hover { background: var(--wine-deep); transform: translateY(-1px); }
button.submit.done { background: var(--ok); cursor: default; transform: none; }

/* agent face: machine-facing spec */
.spec { font-family: var(--mono); font-size: 12.5px; line-height: 1.7; }
.spec .row { display: flex; gap: 8px; padding: 3px 0; }
.spec .k { color: var(--muted); min-width: 96px; }
.spec .v { color: var(--ink); }
.spec .v.name { color: var(--wine-deep); font-weight: 700; }
.spec .params { margin: 12px 0 0; border-top: 1px dashed var(--line); padding-top: 12px; }
.spec .param { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 4px 0; }
.spec .param .pname { color: var(--ink); }
.spec .param .ptype { color: var(--brass); }
.spec .param .pdesc { grid-column: 1 / -1; color: var(--faint); font-size: 11.5px; }

.regbar {
  display: inline-flex; align-items: center; gap: 9px; margin: 16px 0 0;
  font-family: var(--mono); font-size: 12px; border-radius: 8px; padding: 7px 12px;
}
.regbar.ok { color: var(--wine-deep); background: var(--wine-soft); }
.regbar.absent { color: var(--absent); background: var(--absent-soft); }
.regbar .led { width: 8px; height: 8px; border-radius: 50%; }
.regbar.ok .led { background: var(--brass); }
.regbar.absent .led { background: var(--absent); }

/* empty state for baseline agent face */
.empty {
  font-family: var(--sans); color: var(--muted); font-size: 13.5px; line-height: 1.7;
  border: 1px dashed var(--line); border-radius: 12px; padding: 18px; background: #fbfcfd;
}
.empty strong { color: var(--absent); font-weight: 700; }

/* result log (shared, below faces) */
.result {
  margin: 18px 0 0; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px 24px;
}
.result h2 { font-size: 13px; font-weight: 800; margin: 0 0 12px; letter-spacing: 0.02em; color: var(--muted); text-transform: uppercase; font-family: var(--mono); }
.result .log { font-family: var(--mono); font-size: 12.5px; line-height: 1.7; min-height: 24px; color: var(--muted); }
.result .log .line { padding: 3px 0; color: var(--ink); }
.result .log .line .by { color: var(--brass); }
.result .log .line .by.human { color: var(--wine); }
.result .empty-log { color: var(--faint); }

/* ---- page footer note ---- */
.note { margin: 28px 0 0; font-size: 12.5px; color: var(--faint); line-height: 1.7; }
.note code { font-family: var(--mono); background: var(--card); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; }

/* a11y / motion */
:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }