/* 色：深緑×若葉。草（ヒートマップ）と同じ系統でそろえる */
:root {
  --md-primary-fg-color: #1f5f4a;
  --md-primary-fg-color--light: #2f7a61;
  --md-primary-fg-color--dark: #164536;
  --md-accent-fg-color: #2fa36b;
  --heat-0: #e7ece9;
  --heat-1: #a6dcb8;
  --heat-2: #4cb67a;
  --heat-3: #1f7a4c;
  --card-bg: #ffffff;
  --card-line: #dfe6e2;
}
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #173d31;
  --md-primary-fg-color--light: #1f5f4a;
  --md-primary-fg-color--dark: #0f2a21;
  --md-accent-fg-color: #5fd39a;
  --md-typeset-a-color: #6fd6a3;
  --heat-0: #24302b;
  --heat-1: #1f5a3e;
  --heat-2: #2f9a62;
  --heat-3: #5fd39a;
  --card-bg: #1c2421;
  --card-line: #2e3a35;
}

.md-typeset { font-size: 0.82rem; line-height: 1.85; }
.md-typeset h1 { font-weight: 700; color: var(--md-default-fg-color); }

/* ヘッダーの「書く」ボタン */
.write-button {
  display: inline-flex; align-items: center; gap: 0.3rem;
  margin-left: 0.6rem; padding: 0.3rem 0.8rem;
  border-radius: 999px; background: var(--md-accent-fg-color); color: #fff !important;
  font-size: 0.7rem; font-weight: 700; white-space: nowrap;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.write-button:hover { transform: translateY(-1px); filter: brightness(1.08); }
[data-md-color-scheme="slate"] .write-button { color: #0f2a21 !important; }

/* トップのヒーロー */
.hero { padding: 1.6rem 0 0.8rem; }
.hero h1 { font-size: clamp(1.7rem, 4.5vw, 2.5rem); line-height: 1.35; margin: 0.2rem 0 0.6rem; letter-spacing: 0.01em; }
.hero__eyebrow { font-family: var(--md-code-font-family); font-size: 0.65rem; letter-spacing: 0.18em; color: var(--md-accent-fg-color); margin: 0; }
.hero__lead { color: var(--md-default-fg-color--light); margin: 0 0 1.2rem; }
.hero .md-button { margin: 0 0.4rem 0.5rem 0; border-radius: 999px; }

/* 積み上げダッシュボード */
.dashboard { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem; margin: 1.2rem 0 2rem; }
@media (max-width: 760px) { .dashboard { grid-template-columns: 1fr; } }
.dashboard > div { background: var(--card-bg); border: 1px solid var(--card-line); border-radius: 0.8rem; padding: 1rem 1.1rem; }
.md-typeset .dashboard h2 { margin: 0 0 0.6rem; font-size: 0.9rem; font-weight: 700; }
.nudge { margin: 0 0 0.8rem; font-size: 0.75rem; color: var(--md-default-fg-color--light); }
.nudge--done { color: var(--md-accent-fg-color); font-weight: 700; }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 1rem; }
@media (max-width: 480px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat__value { font-size: 1.5rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat__value small { font-size: 0.65rem; margin-left: 0.1rem; color: var(--md-default-fg-color--light); }
.stat__label { font-size: 0.62rem; color: var(--md-default-fg-color--light); }

.heatmap { display: grid; grid-template-rows: repeat(7, 1fr); grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; }
.heat { display: block; aspect-ratio: 1; border-radius: 2px; background: var(--heat-0); }
.heat--1 { background: var(--heat-1); }
.heat--2 { background: var(--heat-2); }
.heat--3 { background: var(--heat-3); }
.heatmap__legend { display: flex; align-items: center; justify-content: flex-end; gap: 3px; margin-top: 0.5rem; font-size: 0.6rem; color: var(--md-default-fg-color--light); }
.heatmap__legend .heat { width: 10px; }

.md-typeset .dashboard__recent ul { list-style: none; margin: 0; padding: 0; }
.md-typeset .dashboard__recent li { margin: 0; padding: 0.45rem 0; border-bottom: 1px dashed var(--card-line); font-size: 0.75rem; line-height: 1.5; }
.md-typeset .dashboard__recent li:last-child { border-bottom: 0; }
.recent__date { display: inline-block; min-width: 2.8rem; font-family: var(--md-code-font-family); font-size: 0.65rem; color: var(--md-default-fg-color--light); }

/* カード */
.md-typeset .grid.cards > ul > li { border-radius: 0.8rem; background: var(--card-bg); }
.md-typeset .grid.cards > ul > li:hover { border-color: var(--md-accent-fg-color); }
.footnote-muted { font-size: 0.65rem; color: var(--md-default-fg-color--lighter); margin-top: 2rem; }

/* 備忘録の一覧 */
.md-post--excerpt { padding: 0.9rem 1.1rem; border: 1px solid var(--card-line); border-radius: 0.8rem; background: var(--card-bg); margin-bottom: 1rem; }
.md-post--excerpt .md-post__header { margin-bottom: 0.2rem; }
.recent__more { display: inline-block; margin-top: 0.6rem; font-size: 0.7rem; font-weight: 700; }

/* ダークモードのボタン */
[data-md-color-scheme="slate"] .md-typeset .md-button { color: var(--md-accent-fg-color); border-color: var(--md-accent-fg-color); }
[data-md-color-scheme="slate"] .md-typeset .md-button--primary { background: var(--md-accent-fg-color); color: #0f2a21; }

/* 図解（インラインSVG）：テーマの色に合わせる */
.md-typeset .diagram {
  margin: 1.2rem 0; padding: 0.8rem;
  border: 1px solid var(--card-line); border-radius: 12px;
  background: var(--card-bg); overflow-x: auto;
}
.diagram svg { display: block; width: 100%; min-width: 560px; height: auto; }
.diagram text { fill: var(--md-default-fg-color); font-size: 14px; font-family: inherit; }
.diagram text.sub { font-size: 12px; fill: var(--md-default-fg-color--light); }
.diagram text.strong { font-weight: 700; }
.diagram text.icon { font-size: 30px; }
.diagram .box { fill: var(--heat-0); stroke: var(--card-line); stroke-width: 1.5; }
.diagram .box.key { stroke: var(--md-accent-fg-color); stroke-width: 2; }
.diagram .line { stroke: var(--md-default-fg-color--light); stroke-width: 2; fill: none; }
.diagram .line.dash { stroke-dasharray: 5 5; stroke-width: 1.5; }
.diagram .head { fill: var(--md-default-fg-color--light); }