/*
 * デザイントークンは管理画面の Console v4 と同じ値（packages/ui/src/styles/globals.css）。
 * 管理画面のサポートから開くページなので、同じ製品に見えるように色・書体・角丸をそろえる。
 * 文字サイズは読み物のページに合わせて、管理画面より一段大きいまま。
 */
:root {
  --background: #edf5f1;
  --background-gradient: linear-gradient(
    180deg,
    #e7f2ec 0%,
    #f0f7f3 40%,
    #edf5f1 100%
  );
  --surface: #ffffff;
  --surface-dim: #eef4f0;
  --foreground: #0e1512;
  --muted-foreground: #3e4944;
  --subtle-foreground: #8a948e;
  --border: #e0e9e3;
  --border-strong: #ccd8d0;
  /* 押すもの（塗りの緑）。バッジやチップには使わない */
  --primary: #0e874d;
  --primary-foreground: #ffffff;
  /* 文字と状態（深い緑）。選ばれている状態は淡い地 + この色の文字 */
  --accent: #0a6139;
  --accent-soft: #ddf3e6;
  --accent-edge: #b9e2c9;

  --radius-sm: 6px;
  --radius-m: 8px;
  --radius-l: 12px;
  --radius-pill: 9999px;

  --text-xs: 13px;
  --text-sm: 15px;
  --text-base: 17px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 36px;

  --page-max: 1000px;
  --date-column: 160px;
  --rail-gap: 40px;

  /*
   * 欧文は Inter、和文は Noto Sans JP（管理画面と同じ。Google Fonts から読み込む）。
   * 絵文字だけは OS 依存で豆腐になりうるため、カラー絵文字フォントを明示的に後ろに置く。
   */
  --font-sans: "Inter", "Noto Sans JP", "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* 管理画面と同じくライト固定 */
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--background);
  background-image: var(--background-gradient);
  background-attachment: fixed;
  color: var(--foreground);
  font-family: var(--font-sans);
  font-feature-settings: "palt" 1;
  font-size: var(--text-sm);
  line-height: 1.9;
  -webkit-text-size-adjust: 100%;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- TopBar */

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.topbar__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 14px 20px;
}

.topbar__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.topbar__mark {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}

.topbar__wordmark {
  font-size: var(--text-sm);
  font-weight: 600;
}

.topbar__divider {
  color: var(--subtle-foreground);
  font-size: var(--text-xs);
}

.topbar__page {
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 500;
}

/* ------------------------------------------------------------------ Hero */

.hero {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.hero__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 32px 20px 24px;
}

.hero__title {
  margin: 0 0 16px;
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.hero__title-brand {
  display: none;
}

.hero__lead {
  margin: 0;
  max-width: 38em;
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  line-height: 1.8;
}

/* --------------------------------------------------------------- Filters */

/*
 * ラジオ本体は見せないが、キーボード操作とスクリーンリーダーのために
 * display: none にはしない。
 */
.filter-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
}

.chip:hover {
  border-color: var(--border-strong);
}

/* 選択状態。ラジオが :checked のときに対応するラベルだけを塗る */
#cat-all:checked ~ .hero .chip[for="cat-all"],
#cat-new:checked ~ .hero .chip[for="cat-new"],
#cat-improve:checked ~ .hero .chip[for="cat-improve"],
#cat-fix:checked ~ .hero .chip[for="cat-fix"] {
  border-color: var(--accent-edge);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

/* キーボード操作でラジオにフォーカスしたことが分かるようにする */
.filter-input:focus-visible ~ .hero .chip[for="cat-all"],
#cat-all:focus-visible ~ .hero .chip[for="cat-all"] {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* --------------------------------------------------------------- Entries */

.entries {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 20px;
  list-style: none;
}

.entry {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  row-gap: 16px;
  align-items: start;
  padding: 28px 0 32px;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 24px;
}

.entry__date {
  grid-column: 1;
  grid-row: 1;
  color: var(--muted-foreground);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 2;
}

.entry__head {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.entry__title,
.entry__body,
.entry__notes {
  grid-column: 1 / -1;
}

.entry__title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* ----------------------------------------------------------------- Badge */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.5;
  white-space: nowrap;
}

.entry[data-category="new"] {
  --entry-accent: var(--accent);
}

.entry[data-category="new"] .badge {
  background: var(--accent-soft);
  color: var(--accent);
}

.entry[data-category="improve"] {
  --entry-accent: var(--border-strong);
}

.entry[data-category="improve"] .badge {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--foreground);
}

.entry[data-category="fix"] {
  --entry-accent: var(--border);
}

.entry[data-category="fix"] .badge {
  background: var(--surface-dim);
  color: var(--muted-foreground);
}

/* ----------------------------------------------------------------- Share */

.entry__share {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--subtle-foreground);
  font-size: var(--text-xs);
  text-decoration: none;
  white-space: nowrap;
}

.entry__share:hover {
  color: var(--muted-foreground);
}

.entry__share-icon {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.entry__share.is-copied {
  color: var(--accent);
}

/* ------------------------------------------------------------------ Body */

.entry__body p {
  margin: 0 0 16px;
  font-size: var(--text-sm);
  line-height: 1.9;
}

.entry__body p:last-child {
  margin-bottom: 0;
}

.entry__body img {
  display: block;
  width: 100%;
  margin: 20px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
}

.entry__body a {
  color: var(--accent);
  text-underline-offset: 2px;
}

.entry__body ul,
.entry__body ol {
  margin: 0 0 16px;
  padding-left: 1.4em;
}

.entry__body li {
  margin-bottom: 6px;
}

.entry__body code {
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--surface-dim);
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.entry__body video {
  display: block;
  width: 100%;
  margin: 20px 0;
  border-radius: var(--radius-m);
}

/* ----------------------------------------------------------------- Notes */

.entry__notes {
  padding: 18px;
  border-radius: var(--radius-m);
  background: var(--accent-soft);
  color: var(--muted-foreground);
  font-size: var(--text-xs);
}

.entry__notes-label {
  margin: 0 0 8px;
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
}

.entry__notes ul {
  margin: 0;
  padding-left: 1.2em;
}

.entry__notes li {
  margin-bottom: 6px;
  line-height: 1.9;
}

.entry__notes li:last-child {
  margin-bottom: 0;
}

.entry__notes p {
  margin: 0 0 8px;
}

/* ------------------------------------------------------------ Pagination */

.pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 32px 20px 40px;
}

.more {
  padding: 13px 24px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--foreground);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 500;
  cursor: pointer;
}

.more:hover {
  background: var(--surface-dim);
}

.archive {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: var(--text-xs);
}

.archive__label {
  color: var(--subtle-foreground);
}

.archive__link {
  color: var(--muted-foreground);
  font-weight: 500;
  text-underline-offset: 2px;
}

/* ---------------------------------------------------------------- Footer */

.footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 24px 20px;
}

.footer__copyright {
  margin: 0;
  color: var(--subtle-foreground);
  font-size: var(--text-xs);
}

/* ------------------------------------------------------------------- 404 */

.notfound {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 80px 20px;
  text-align: center;
}

.notfound__title {
  margin: 0 0 12px;
  font-size: var(--text-2xl);
}

.notfound__lead {
  margin: 0 0 24px;
  color: var(--muted-foreground);
}

.notfound__link {
  color: var(--accent);
}

/* ------------------------------------------------ カテゴリ絞り込み（CSS のみ） */

/*
 * JavaScript を使わずに絞り込む。選択されていないカテゴリのエントリだけを隠す。
 * 初期状態は「すべて」なので、何も隠れない。
 */
#cat-new:checked ~ .entries > .entry:not([data-category="new"]),
#cat-improve:checked ~ .entries > .entry:not([data-category="improve"]),
#cat-fix:checked ~ .entries > .entry:not([data-category="fix"]) {
  display: none;
}

/* ------------------------------------------------------------- 折りたたみ */

/*
 * `is-collapsed` は JavaScript が付ける。JS が無ければ全件見えたままになる。
 * 直リンクされたエントリだけは、折りたたまれていても開く。
 */
.entry.is-collapsed {
  display: none;
}

.entry.is-collapsed:target {
  display: grid;
}

/* --------------------------------------------------------------- PC 表示 */

@media (min-width: 900px) {
  body {
    font-size: var(--text-base);
  }

  .topbar__inner,
  .hero__inner,
  .entries,
  .pagination,
  .footer__inner,
  .notfound {
    padding-left: 40px;
    padding-right: 40px;
  }

  .topbar__inner {
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .topbar__wordmark {
    font-size: 19px;
  }

  .topbar__page {
    font-size: var(--text-sm);
  }

  .hero__inner {
    padding-top: 72px;
    padding-bottom: 40px;
  }

  .hero__title {
    font-size: var(--text-3xl);
    margin-bottom: 20px;
  }

  .hero__title-brand {
    display: inline;
  }

  .hero__lead {
    font-size: var(--text-base);
    line-height: 1.85;
  }

  .chip {
    padding: 10px 18px;
    font-size: var(--text-sm);
  }

  .entries {
    padding-top: 40px;
  }

  /*
   * 日付列とレール。エントリ間に余白を作らず、各エントリの ::before を縦いっぱいに
   * 伸ばすことで、レールが1本の線として繋がって見える。
   */
  .entry {
    position: relative;
    grid-template-columns: var(--date-column) 1fr;
    column-gap: var(--rail-gap);
    row-gap: 24px;
    padding: 0 0 72px;
    border-bottom: none;
    scroll-margin-top: 32px;
  }

  .entry::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--date-column);
    width: 1px;
    background: var(--border-strong);
  }

  .entry::after {
    content: "";
    position: absolute;
    top: 5px;
    left: calc(var(--date-column) - 5px);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--entry-accent, var(--border-strong));
    box-shadow: 0 0 0 3px var(--background);
  }

  .entry__date {
    font-size: var(--text-sm);
    line-height: 2.1;
  }

  .entry__title,
  .entry__body,
  .entry__notes {
    grid-column: 2;
  }

  .entry__title {
    font-size: var(--text-2xl);
    line-height: 1.55;
  }

  .entry__body p {
    font-size: var(--text-base);
    line-height: 1.95;
  }

  .entry__notes {
    padding: 24px;
    font-size: var(--text-sm);
  }

  .entry__body img {
    margin: 24px 0;
    border-radius: var(--radius-l);
  }

  .more {
    padding: 14px 28px;
    font-size: var(--text-sm);
  }

  .pagination {
    padding-bottom: 80px;
  }
}