/* Umeboshi Granumo P3H1 — LP surface. Tokens are quoted from DESIGN.md.
   Light only. Blue-free. Ume point (--ume) stays on ELI5 / send / CTA / Thread spine only. */

:root {
  /* colors (DESIGN.md ## Colors) */
  --ume: #93233F;
  --on-ume: #FFFFFF;
  --ao: #5A6472;
  --on-ao: #FFFFFF;
  --ink: #1B1E24;
  --on-ink: #FFFFFF;
  --clay: #EBE9E7;
  --mist: #EDF1F4;
  --on-mist: #1B1E24;
  --surface: #FFFFFF;
  --on-surface: #1B1E24;

  /* typography (DESIGN.md ## Typography) */
  --face-head: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Noto Sans JP", "Yu Gothic", Meiryo, system-ui, sans-serif;
  --face-body: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP",
    "Yu Gothic", Meiryo, system-ui, sans-serif;
  --t-h1-size: 30px;
  --t-h1-weight: 700;
  --t-h1-line: 1.7;
  --t-body-size: 16px;
  --t-body-weight: 400;
  --t-body-line: 1.8;
  --t-label-size: 12px;
  --t-label-weight: 700;
  --t-label-line: 1.4;

  /* shapes (DESIGN.md ## Shapes) */
  --pill: 9999px;
  --card: 20px;
  --thread: 14px;
  --row: 10px;
  --input: 16px;
  --banner: 12px;

  /* spacing (DESIGN.md spacing) */
  --sm: 8px;
  --md: 16px;
  --lg: 24px;
  --section: 32px;

  /* one shadow family only, S1 shallow (DESIGN.md ## Elevation & Depth) */
  --s1: 0 1px 2px rgba(27, 30, 36, 0.06), 0 4px 12px rgba(27, 30, 36, 0.06);
  --s1-deep: 0 1px 3px rgba(27, 30, 36, 0.10), 0 8px 18px rgba(27, 30, 36, 0.10);
  --press: inset 0 1px 2px rgba(27, 30, 36, 0.12);
}

* { box-sizing: border-box; }

html { background: var(--mist); }

body {
  margin: 0;
  background: var(--mist);
  color: var(--on-mist);
  font-family: var(--face-body);
  font-size: var(--t-body-size);
  font-weight: var(--t-body-weight);
  line-height: var(--t-body-line);
  -webkit-text-size-adjust: 100%;
}

a { color: var(--ink); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

.wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--lg) var(--section);
  text-align: left;
}

h1, h2, h3 {
  font-family: var(--face-head);
  line-height: var(--t-h1-line);
  margin: 0;
}
h1 { font-size: var(--t-h1-size); font-weight: var(--t-h1-weight); }
h2 { font-size: 22px; font-weight: var(--t-h1-weight); }
h3 { font-size: 18px; font-weight: var(--t-h1-weight); }
p { margin: 0 0 var(--md); max-width: 80ch; }

/* --- draft stamp: neutral ink, never ume (ume is reserved), never error red (CardID band only) --- */
.draft-stamp {
  margin: 0;
  max-width: none;
  background: var(--ink);
  color: var(--on-ink);
  font-size: var(--t-label-size);
  font-weight: var(--t-label-weight);
  line-height: var(--t-label-line);
  padding: var(--sm) var(--md);
  text-align: center;
}
.draft-stamp a { color: var(--on-ink); }

/* --- header (brand | CTA) --- */
.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md);
  padding: var(--md) 0;
}
.brand {
  font-family: var(--face-head);
  font-weight: var(--t-h1-weight);
  font-size: 18px;
  color: var(--ink);
  text-decoration: none;
}

/* --- glass sheets (LP) --- */
.glass {
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: var(--s1);
  border-radius: var(--card);
  padding: var(--lg);
}

/* hero sub-lines (lp-copy サブ, 3 lines) */
.hero-subs { list-style: none; margin: var(--lg) 0; padding: 0; }
.hero-subs li { margin-bottom: var(--sm); max-width: 80ch; }

/* section rhythm */
.section { margin-top: var(--section); }
.section > h2 { margin-bottom: var(--md); }

/* --- CTA: same ume pill as send. Price note sits directly beneath, every time --- */
.cta {
  display: inline-flex;
  align-items: center;
  background: var(--ume);
  color: var(--on-ume);
  font-family: var(--face-body);
  font-size: var(--t-label-size);
  font-weight: var(--t-label-weight);
  line-height: var(--t-label-line);
  height: 48px;
  padding: var(--lg);
  border: 0;
  border-radius: var(--pill);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(27, 30, 36, 0.14), 0 6px 16px rgba(147, 35, 63, 0.22);
}
.cta:hover, .cta:active { box-shadow: var(--s1-deep); }
/* disabled CTA: still the ume pill, but inert until the AnkiWeb shared code is published */
.cta[disabled] { opacity: 0.55; cursor: not-allowed; box-shadow: none; }

.price-note {
  font-size: var(--t-body-size);
  line-height: var(--t-body-line);
  color: var(--ink);
  margin: var(--sm) 0 0;
  max-width: 80ch;
}
.honesty-note {
  font-size: var(--t-label-size);
  font-weight: var(--t-label-weight);
  line-height: var(--t-label-line);
  color: var(--ao);
  margin: var(--sm) 0 0;
}

/* --- claim badges: quiet ink-gray on clay. Never plum (Do's and Don'ts) --- */
.badge {
  display: inline-block;
  background: var(--clay);
  color: var(--ao);
  font-size: var(--t-label-size);
  font-weight: var(--t-label-weight);
  line-height: var(--t-label-line);
  border-radius: var(--pill);
  padding: 2px var(--sm);
  margin-right: var(--sm);
  vertical-align: middle;
}
.badge-pending {
  background: var(--clay);
  color: var(--ink);
  border-radius: var(--banner);
  padding: 2px var(--sm);
  display: inline-block;
  font-size: var(--t-label-size);
  font-weight: var(--t-label-weight);
  line-height: var(--t-label-line);
  margin: 0;
}

/* --- card-back mock (lp-mock-shell) --- */
.mock {
  background: var(--surface);
  color: var(--on-surface);
  border-radius: var(--card);
  padding: var(--md);
  box-shadow: var(--s1);
  max-width: 460px;
}
.mock-caption {
  font-size: var(--t-label-size);
  font-weight: var(--t-label-weight);
  line-height: var(--t-label-line);
  color: var(--ao);
  margin: var(--sm) 0 0;
}

/* saved Thread tile: bound flat, spine rail on the left (ume = the one bold place) */
.thread-tile {
  background: var(--surface);
  border: 1px solid var(--clay);
  border-left: 4px solid var(--ume);
  border-radius: var(--thread);
  padding: var(--md);
  margin-bottom: var(--card-gap, 12px);
}
.thread-tile h3 {
  font-family: var(--face-body);
  font-size: var(--t-label-size);
  font-weight: var(--t-label-weight);
  line-height: var(--t-label-line);
  color: var(--ao);
  margin-bottom: var(--sm);
}
.thread-row {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--clay);
  border-radius: var(--row);
  padding: var(--sm) var(--md);
  margin-bottom: var(--sm);
  font-family: var(--face-body);
  font-size: var(--t-body-size);
  color: var(--ink);
  cursor: pointer;
}
.thread-row:last-child { margin-bottom: 0; }
.thread-row[aria-expanded="true"] { background: var(--clay); }
/* 開いた行（実物は .umeboshi-ask-thread-body）: 回答だけが出て、行に 編集/削除 が出る */
.thread-body {
  border: 1px solid var(--clay);
  border-top: 0;
  border-radius: 0 0 var(--row) var(--row);
  margin: calc(-1 * var(--sm)) 0 var(--sm);
  padding: var(--sm) var(--md);
}
.thread-answer { margin: 0; font-size: var(--t-body-size); }
.thread-actions { margin: var(--sm) 0 0; }
.row-btn {
  background: var(--clay);
  color: var(--ink);
  font-family: var(--face-body);
  font-size: var(--t-label-size);
  border: 0;
  border-radius: var(--pill);
  padding: 6px var(--md);
  cursor: pointer;
}

/* compose tile: messages + templates + input + send + settings + model + auth, one tile */
.compose-tile {
  background: var(--surface);
  border: 1px solid var(--clay);
  border-radius: var(--card);
  padding: var(--md);
  box-shadow: var(--s1);
}
/* CurrentChat（実物は #umeboshi-ask-current）: 画面には文字のラベルが出ないため、図では注記で示す */
.annot {
  font-size: var(--t-label-size);
  line-height: var(--t-label-line);
  color: var(--ao);
  margin: 0 0 var(--sm);
}
.annot + .annot { margin-top: calc(-1 * var(--sm)); }
/* 保存前のMessage（実物は .umeboshi-ask-msg）: 質問は右寄せ、回答の左にumeの線、保存 ボタンが続く */
.msg { margin-bottom: var(--md); }
.msg-q {
  align-self: flex-end;
  background: var(--clay);
  color: var(--ink);
  border-radius: var(--thread);
  padding: var(--sm) var(--md);
  font-weight: var(--t-h1-weight);
  margin: 0 0 4px auto;
  max-width: 85%;
}
.msg-a {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--clay);
  border-left: 3px solid var(--ume);
  border-radius: var(--row);
  padding: var(--sm) var(--md);
  margin: 0;
}
.tpl-row { display: flex; flex-wrap: wrap; gap: var(--sm); margin-bottom: var(--md); }
.tpl {
  background: var(--clay);
  color: var(--ao);
  font-family: var(--face-body);
  font-size: var(--t-label-size);
  font-weight: var(--t-label-weight);
  line-height: var(--t-label-line);
  border: 0;
  border-radius: var(--pill);
  padding: 12px var(--md);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(27, 30, 36, 0.10), 0 3px 8px rgba(27, 30, 36, 0.10);
}
.tpl:hover { box-shadow: var(--s1-deep); }
.ask-row { display: flex; gap: var(--sm); align-items: flex-end; margin-bottom: var(--md); }
.hint { font-size: var(--t-label-size); line-height: var(--t-label-line); color: var(--ao); margin: calc(-1 * var(--sm)) 0 var(--md); }
.ask-input {
  flex: 1;
  background: var(--clay);
  color: var(--ink);
  border: 0;
  border-radius: var(--input);
  padding: 12px;
  font-family: var(--face-body);
  font-size: var(--t-body-size);
  box-shadow: var(--press);
  min-height: 48px;
}
.send {
  background: var(--ume);
  color: var(--on-ume);
  font-family: var(--face-body);
  font-size: var(--t-label-size);
  font-weight: var(--t-label-weight);
  line-height: var(--t-label-line);
  border: 0;
  border-radius: var(--pill);
  height: 48px;
  padding: var(--md);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(27, 30, 36, 0.14), 0 6px 16px rgba(147, 35, 63, 0.22);
}
/* 設定ボタン: auth 行の Sign in と同じ行。実物も 44px 角の粘土ピル */
.gear {
  background: var(--clay);
  color: var(--ink);
  font-family: var(--face-body);
  font-size: var(--t-body-size);
  line-height: 1;
  border: 0;
  border-radius: var(--pill);
  width: 44px;
  height: 44px;
  cursor: pointer;
  box-shadow: 2px 2px 6px rgba(163, 177, 198, 0.55), -2px -2px 6px rgba(255, 255, 255, 0.9);
}
.model-row, .auth-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sm);
  font-size: var(--t-label-size);
  font-weight: var(--t-label-weight);
  line-height: var(--t-label-line);
  color: var(--ao);
  margin-top: var(--sm);
}
/* 折り返すときは要素ごと折り返す（単語の途中で折れない） */
.auth-row > *, .model-row > * { flex: none; max-width: 100%; }
/* 送信はモデル行の右端（実物はモデルボタンが flex:1 で伸びて、その右に来る） */
.model-row .send { margin-left: auto; }
.model-pick {
  background: var(--clay);
  color: var(--ao);
  border-radius: var(--row);
  padding: 4px var(--sm);
}
.auth-status, .redeem-ph { font-size: var(--t-label-size); }
.redeem-ph { border: 1px solid var(--clay); border-radius: var(--row); padding: 4px var(--sm); }
.auth-btn {
  background: var(--clay);
  color: var(--ao);
  font-family: var(--face-body);
  font-size: var(--t-label-size);
  font-weight: var(--t-label-weight);
  line-height: var(--t-label-line);
  border: 0;
  border-radius: var(--pill);
  padding: 6px var(--md);
  cursor: pointer;
}

/* --- pillars --- */
.pillars { display: grid; gap: var(--md); }
@media (min-width: 720px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillar {
  background: var(--surface);
  color: var(--on-surface);
  border-radius: var(--thread);
  padding: var(--md);
  box-shadow: var(--s1);
}
.evidence { font-size: var(--t-label-size); line-height: var(--t-label-line); color: var(--ao); }
.evidence ul { margin: var(--sm) 0 0; padding-left: 1.2em; }
.evidence li { margin-bottom: 4px; overflow-wrap: anywhere; }

/* --- steps (CTA直線) --- */
.steps { margin: 0; padding-left: 1.4em; max-width: 80ch; }
.steps li { margin-bottom: var(--sm); }

/* --- FAQ (CTA下のみ) --- */
.faq { max-width: 80ch; }
.faq details { border-bottom: 1px solid var(--clay); padding: var(--md) 0; }
.faq summary { cursor: pointer; font-weight: var(--t-h1-weight); font-family: var(--face-head); }
.faq .a { margin-top: var(--md); }

/* --- tables (特商表・価格詳細) --- */
table { border-collapse: collapse; width: 100%; margin: 0 0 var(--md); background: var(--surface); }
th, td {
  border: 1px solid var(--clay);
  padding: var(--md);
  text-align: left;
  vertical-align: top;
  font-size: var(--t-body-size);
}
th { background: var(--clay); color: var(--ink); font-family: var(--face-head); }
td.key { width: 12em; font-weight: var(--t-h1-weight); }

/* --- footer cluster --- */
.site-foot {
  border-top: 1px solid var(--clay);
  margin-top: var(--section);
  padding-top: var(--md);
  font-size: var(--t-label-size);
  font-weight: var(--t-label-weight);
  line-height: var(--t-label-line);
  color: var(--ao);
}
.foot-nav { display: flex; flex-wrap: wrap; gap: var(--md); margin-bottom: var(--md); }
.foot-nav a { color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}