/* Potato Please — 第5補給所の機密ファイル
   noir（焦茶×羊皮紙×琥珀）＋ dossier（耳タブ見出し・二重枠）を、
   ゲーム内の掲示板（生成り紙・省の赤・黒鉄）に寄せる。 */

body.potato-please-site {
  --pi-bg: #141110;
  --pi-panel: #1e1915;
  --pi-input: #0b0908;
  --pi-hover: #2a231d;
  --pi-card: #191411;
  --pi-paper: #eee3ca;
  --pi-muted: #b6a88f;
  --pi-line: #5a4f40;
  --pi-green: #d3a055;
  --pi-red: #b04a3c;
  --pi-red-ink: #e88a77;
  --pi-accent-sub: #d3a055;
  --pi-accent-text: #f0c986;
  --pi-accent-border: #8f6f3c;
  --pi-shadow: #070605;
  --pi-font: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  --pi-radius: 2px;
  --c-tint: #181310;
  /* 明色前提の共通変数を暗色へ寄せる（用語集の語名・順位表の文字が沈むため） */
  --fg: var(--pi-paper);
  --strong: var(--pi-paper);
  --muted: var(--pi-muted);
  --bg: var(--pi-bg);
  --line: var(--pi-line);
  --th: var(--pi-panel);
  --link: var(--pi-green);
  --hover: var(--pi-hover);
  --red: var(--pi-red-ink);
}

/* 紙の繊維のような、ごく薄い横罫 */
body.potato-please-site {
  background-image:
    repeating-linear-gradient(0deg,
      color-mix(in srgb, var(--pi-paper) 2.5%, transparent) 0 1px,
      transparent 1px 5px);
}

/* サイドバーを出さない型なので、本文の段を中央に置いて右の余白を作らない */
body.potato-please-site .wrap.layout > .article {
  margin-left: auto;
  margin-right: auto;
}

/* 見出しは「省の書類」の耳タブ。FILE 番号を振る */
body.potato-please-site .article { counter-reset: file-tab; }
body.potato-please-site .article h2 { counter-increment: file-tab; }
body.potato-please-site.layout-dossier .article h2::before {
  content: "FILE " counter(file-tab, decimal-leading-zero);
  letter-spacing: .14em;
  font-family: var(--pi-font);
  font-size: 9.5px;
}
body.potato-please-site .article h2 {
  padding-left: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--pi-accent-border) 55%, transparent);
}

/* 二重罫の小さな見出し */
body.potato-please-site .prose h3 {
  margin-top: 26px;
  padding: 3px 0 3px 10px;
  border-left: 3px solid var(--pi-red);
  letter-spacing: .04em;
}

/* 本文のリンクは点線下線（書類の参照番号のよう） */
body.potato-please-site .prose a {
  text-decoration: underline dotted color-mix(in srgb, var(--pi-green) 70%, transparent);
  text-underline-offset: 3px;
}
body.potato-please-site .prose a:hover { text-decoration-style: solid; }

/* 表は「様式第◯号」の罫線表 */
body.potato-please-site .prose table {
  border: 1px solid var(--pi-line);
  border-top: 2px solid var(--pi-accent-border);
}
body.potato-please-site .prose th {
  background: color-mix(in srgb, var(--pi-panel) 82%, #000);
  color: var(--pi-accent-text);
  font-weight: 700;
  letter-spacing: .03em;
  border-bottom: 1px solid var(--pi-accent-border);
}
body.potato-please-site .prose td { border-color: color-mix(in srgb, var(--pi-line) 70%, transparent); }
body.potato-please-site .prose tbody tr:nth-child(even) { background: color-mix(in srgb, var(--pi-paper) 3%, transparent); }
body.potato-please-site .prose td:not(:first-child) { font-variant-numeric: tabular-nums; }

/* 引用は「貼られたメモ」 */
body.potato-please-site .prose blockquote {
  margin: 18px 0;
  padding: 12px 16px 12px 18px;
  background: color-mix(in srgb, var(--pi-panel) 88%, #000);
  border-left: 4px solid var(--pi-red);
  border-top: 1px solid var(--pi-line);
  border-bottom: 1px solid var(--pi-line);
  color: var(--pi-paper);
}
body.potato-please-site .prose blockquote p { margin: 6px 0; }

/* スタンプは少し強く傾け、二重枠にする */
body.potato-please-site .c-stamp > span {
  border: 2px solid var(--pi-red);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pi-red) 45%, transparent);
  transform: rotate(-2.4deg);
  letter-spacing: .22em;
}

/* カードは「台帳の見出しカード」。左に赤の縦罫 */
body.potato-please-site .p-card {
  position: relative;
  padding-left: 14px;
  border-left: 3px solid color-mix(in srgb, var(--pi-red) 75%, transparent);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--pi-red) 7%, transparent), transparent 42%),
    var(--pi-card);
}
body.potato-please-site .p-card.is-primary {
  border-left-color: var(--pi-accent-sub);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--pi-accent-sub) 12%, transparent), transparent 46%),
    var(--pi-card);
}

/* 一覧の見出し行は書類の柱書き */
body.potato-please-site .c-answer {
  border: 3px double var(--pi-accent-border);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--pi-paper) 4%, transparent), transparent 60%),
    var(--pi-panel);
}
body.potato-please-site .c-answer b {
  letter-spacing: .16em;
  color: var(--pi-accent-text);
}

/* 盤面（検品盤）は方眼の台紙に載せる */
body.potato-please-site .c-board {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--pi-paper) 5%, transparent), transparent),
    var(--pi-input);
  border: 1px solid var(--pi-line);
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--pi-panel) 90%, transparent);
}
body.potato-please-site .c-cell.is-on { background: var(--pi-accent-text); }
body.potato-please-site .c-cell.is-off { background: color-mix(in srgb, var(--pi-input) 88%, #000); }

/* ヒーローは書類の台紙に貼った写真 */
body.potato-please-site .hero-img.hero-wide {
  border: 1px solid var(--pi-line);
  outline: 3px double var(--pi-accent-border);
  outline-offset: 5px;
}

/* 目次は「参照事項」の番号付きリスト */
body.potato-please-site .c-toc td a::before {
  content: "§ ";
  color: var(--pi-red-ink);
}

/* 記事末の関連カードの見出し */
body.potato-please-site .p-related h2::before,
body.potato-please-site .section-head h2::before { content: none; }

/* 比較表の増減と「この項目」バッジ（暗い地で沈むため明度を上げる） */
body.potato-please-site .c-compare .is-up { color: #86d99a; }
body.potato-please-site .c-compare .is-down { color: #f2a86b; }
body.potato-please-site .c-compare-badge {
  color: #1a1511;
  background: var(--pi-accent-sub);
  font-weight: 700;
}

/* スマホでは余白を詰める */
@media (max-width: 640px) {
  body.potato-please-site .p-card { padding-left: 12px; }
  body.potato-please-site .prose table { font-size: 13px; }
}