/*
 * 「ごきげん占い」は、あなたに一番いい結果を持ってくるサービス。
 *
 * 見立てはおみくじ。引いて、授かって、その場で読む。だから紙と墨と朱で組み、
 * 角丸も影も使わない。結果の順位は「大吉」の位置に縦組みで置く。
 * 明るい色数を増やして賑やかにすると、13サイトから選び抜いた1件という
 * 中身の強さが逆に薄まる。画面で声を張るのは順位の1か所だけにする。
 */
:root {
  --paper: #e7dcc6;
  --slip: #f8f4e9;
  --fg: #241f1a;
  --muted: #665d53;
  --rule: #cdbfa2;
  --rule-inner: #e3d8c0;
  /*
   * 押せるもの・入れられるものの輪郭専用。`--rule` は罫の色で、紙に対して
   * 1.34:1 しかない。角丸も影も無いこの組み方では「そこに操作できるものがある」
   * ことを示す手がかりが 1px の罫1本だけになるので、枠は別の濃さで持つ。
   *
   * 12星座の升目は紙の上に直接置き、入力欄と血液型のチップは紙面（--slip）の上に
   * 乗るので、**どちらの地に対しても 3:1 が要る**（紙 3.12 / 紙面 3.86）。
   * 帳面の罫（表・区切り・短冊の枠）は `--rule` のまま薄く置く
   */
  --rule-strong: #8d7854;
  /*
   * 紙の地（--paper）の上に 0.8rem 前後で置く色なので、AA の 4.5:1 を
   * 紙に対して満たす値にしてある。パネル（--slip）の上ではさらに開く。
   *   --shu    紙 4.91 / 紙面 6.07
   *   --kincha 紙 4.78 / 紙面 5.92
   *   --muted  紙 4.75 / 紙面 5.87
   * 朱は favicon.svg と scripts/build-images.mjs の絵柄にも使っている。
   * 動かすときは3か所を揃えること
   */
  --shu: #a83226;
  --shu-pale: #e2b6ae;
  --kincha: #755a15;
}

* {
  box-sizing: border-box;
}

/*
 * body の下地を html にも敷く。ページがビューポートより短いとき、
 * はみ出した部分にキャンバスの既定色（白）が出てしまう
 */
html {
  background: var(--paper);
}

body {
  margin: 0;
  padding: 0 1rem 4rem;
  background: var(--paper);
  color: var(--fg);
  /*
   * 明朝1本で通す。見出し用に別の書体を足さない。
   * 日本語の明朝は字面が小さいので、本文は 0.95rem ではなく 1rem のまま置く
   */
  font-family: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", serif;
  line-height: 1.9;
}

/*
 * 行送りは本文の 1.9 を既定にしているが、見出しには効かせない。
 * 22px の見出しに 1.9 を当てると行ボックスが 42px になり、文字の上下に
 * 10px ずつの空きが乗って、見出しが見出しとして立ち上がらない。
 */
h1,
h2,
h3 {
  line-height: 1.4;
}

/* キーボードの現在地。朱は本文に使っていないので、どの面の上でも見分けが付く */
:focus-visible {
  outline: 2px solid var(--shu);
  outline-offset: 2px;
}

main,
.site-header,
.site-footer {
  max-width: 40rem;
  margin: 0 auto;
}

.site-header {
  padding: 1.75rem 0 1rem;
  border-bottom: 1px solid var(--rule);
  text-align: center;
}

/* 見出しではないので h1〜h3 の指定が効かない。ロゴにも本文の行送りは要らない */
.site-title {
  display: inline-flex;
  gap: 0.34em;
  align-items: center;
  color: var(--fg);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  line-height: 1.4;
  text-decoration: none;
}

/*
 * タイトルの日輪。favicon と同じファイル（/favicon.svg）をそのまま置いて、
 * タブと画面で絵柄がずれないようにしている。差し替えるときは1ファイルで済む。
 * 読み上げでは名前の前に「太陽」と入るだけで情報が増えないので alt="" にしてある。
 */
.site-title-mark {
  flex: none;
  /* letter-spacing は画像の右にも効く。字間は gap で取るのでここで切る */
  letter-spacing: normal;
}

.site-tagline {
  margin: 0.45rem 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
}

/*
 * 保存済みの人にフォームを描かせないための先読み（index.html の head を参照）。
 * main.js が走るまでの数十msだけ効き、以降は `hidden` が唯一の状態になる。
 */
.is-returning #form-section {
  display: none;
}

/*
 * 保存済みの人は、JS がランキングを取ってくるまで中身が空になる。何も置かないと
 * フッタが画面の上のほうに描かれ、結果が入った瞬間に下へ飛ぶ。
 * 先に1画面ぶんの高さを取れば、フッタは最初から画面外にいるので飛びが見えない。
 * `is-returning` と分けてあるのは外す時点が違うため（あちらは init() の冒頭、
 * こちらは中身が実際に入ったとき）。取り残しても余白が増えるだけで操作は塞がらない。
 */
.is-loading main {
  min-height: 100vh;
}

/* 入力フォーム */
.form-heading {
  margin: 1.6rem 0 0.4rem;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-align: center;
}

.picker-lead,
.shortcut-lead {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-align: center;
}

/* 星座がわからない人のための代替。主導線より下に置き、区切りで段を落とす */
.fallback {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

/* 畳んである側なので、開く前は主導線より弱く見せる */
.fallback-summary {
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
  cursor: pointer;
}

.fallback > :not(summary) {
  margin-top: 1.25rem;
}

/*
 * 12個を1画面に収めるため、チップの折り返しではなく等幅の格子に並べる。
 *
 * 罫は枡ごとに持たせ、隣り合う1本ぶんを負のマージンで重ねて共有する。
 * 交点で線が二重にならず、升目の帳面に近い見え方になる。
 *
 * **下地を罫の色で塗って隙間から覗かせる方式にしないこと。**
 * 日の格子は月末で最終行が埋まりきらないので（7月なら 23〜31 の9枡で
 * 6列×2行の3枡が余る）、空の枡が罫色のベタ塗りとして出てしまう。
 */
.zodiac-grid,
.month-grid,
.day-grid {
  display: grid;
  gap: 0;
}

.zodiac-grid {
  grid-template-columns: repeat(3, 1fr);
}

/* 月は4列×3行。星座の3列と段数を揃えると横に間延びする */
.month-grid {
  grid-template-columns: repeat(4, 1fr);
}

/*
 * 日は数字1〜2桁なので、星座や月より詰めて6列に置ける。
 * 結果画面で星座の範囲（30日前後）を出すときも同じ格子を使う。
 */
.day-grid {
  grid-template-columns: repeat(6, 1fr);
}

/* 日の塊の上に出す月。チップから月を抜けるので、ここが唯一の手がかりになる */
.day-group {
  margin: 1.1rem 0 0.4rem;
  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
}

/* 結果 */

/*
 * 短冊。外枠の内側にもう1本細い罫を回して、おみくじの紙の体裁にする。
 * 枠を二重に引くと要素が増えるので、内側は擬似要素で重ねている。
 */
.hero {
  position: relative;
  border: 1px solid var(--rule);
  background: var(--slip);
  text-align: center;
}

.hero::before {
  position: absolute;
  border: 1px solid var(--rule-inner);
  content: "";
  inset: 5px;
  pointer-events: none;
}

.hero-badge {
  margin: 0;
  padding: 0.65rem 0 0.5rem;
  border-bottom: 1px solid var(--rule);
  color: var(--shu);
  /* 本文の 1.9 のままだと 12.5px の文字に 24px の行ボックスが付いて帯が太る */
  font-size: 0.78rem;
  letter-spacing: 0.42em;
  line-height: 1.2;
  /* 字間は文字の右側に入るので、中央に置くと右に寄る。1文字ぶん戻す */
  text-indent: 0.42em;
}

/*
 * 1位のときだけ、内側の罫も朱にする。
 * `.hero-badge` は render.ts が1位のときしか出さないので、帯の有無と合わせて
 * 「朱が2本入っている短冊 = 1位」になる。地色は変えない
 */
.hero--top::before {
  border-color: var(--shu-pale);
}

.hero-body {
  padding: 1.4rem 1.25rem 1.5rem;
}

.hero-lead {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
}

/*
 * 順位はおみくじの「大吉」の位置に縦で置く。画面でここだけが大きい。
 *
 * 数字は `text-combine-upright` で縦中横にする（「12位」が1文字ぶんの幅に収まり、
 * 桁数が変わっても組みが崩れない）。未対応のブラウザでは数字が横倒しになるが、
 * 読めなくなるわけではないので代替は置かない。
 * 親は `text-align: center` なので、中央に置くために inline-block にしてある。
 */
.hero-rank {
  display: inline-block;
  margin: 0.7rem 0 0.2rem;
  color: var(--shu);
  line-height: 1.05;
  writing-mode: vertical-rl;
}

.hero-rank strong {
  font-size: 4rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-combine-upright: all;
}

.hero-rank-unit {
  font-size: 2rem;
  font-weight: 500;
}

.hero-sub {
  margin: 0.6rem 0 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  /* 字間の1文字ぶんを戻して中央に置く */
  text-indent: 0.2em;
}

.hero-source {
  margin: 1rem 0 0;
  font-size: 0.8rem;
}

.hero-empty {
  padding: 2rem 1rem;
  color: var(--muted);
  text-align: center;
}

/* いつの順位かを示す1行。短冊の直上に置く */
.date-line {
  margin: 1.25rem 0 0.6rem;
  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-align: center;
}

/* 前日ぶんを見せているときは、通りすがりに読み飛ばされない強さにする */
.date-line--stale {
  padding: 0.6rem 1rem;
  border: 1px solid var(--shu);
  color: var(--shu);
  letter-spacing: 0.06em;
}

/* 引用 */
.quote {
  margin: 1.15rem 0 0;
  padding: 1.1rem 1.15rem;
  border: 1px solid var(--rule);
  background: var(--slip);
}

.quote blockquote {
  margin: 0;
  font-size: 0.95rem;
  /* 明朝の本文なので、段落の頭は1字下げる */
  text-indent: 1em;
}

.quote figcaption {
  margin-top: 0.8rem;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.75;
}

/* 探した軸と、範囲を広げる導線 */
.axes {
  margin-top: 1.15rem;
  padding: 1.1rem 1.15rem;
  border: 1px solid var(--rule);
  background: var(--slip);
  text-align: center;
}

/* 選んだ誕生日の控え。算出された軸チップの上に置く */
.axes-birthdate {
  margin: 0 0 0.6rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.axis-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
}

.axis-chip {
  padding: 0.15rem 0.9rem;
  border: 1px solid var(--shu);
  color: var(--shu);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  /* 字間の1文字ぶんを戻す */
  text-indent: 0.12em;
}

.axes-add {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

.axes-add-lead {
  margin: 0 0 0.7rem;
  color: var(--muted);
  font-size: 0.8rem;
}

/* 年を足す欄。画面を戻さずその場で入れてもらう */
.year-add {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-end;
  justify-content: center;
}

/* 320px では横に並びきらないので折り返す。ボタンの文字は割らない */
.year-add [data-action="year"] {
  white-space: nowrap;
}

.year-field {
  display: block;
}

.year-label {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.year-input {
  width: 7rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--rule-strong);
  background: var(--slip);
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  text-align: center;
}

/*
 * 枠の色だけで現在地を示す。`outline: none` は置かない。
 * 置くと `:focus-visible` の朱の囲みまで消えて、キーボードで現在地を見失う
 */
.year-input:focus {
  border-color: var(--shu);
}

.year-error {
  margin: 0.5rem 0 0;
  color: var(--shu);
  font-size: 0.78rem;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}

.chip {
  padding: 0.45rem 1.15rem;
  border: 1px solid var(--rule-strong);
  background: var(--slip);
  color: inherit;
  font: inherit;
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  cursor: pointer;
}

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

/*
 * 格子に敷き詰めるチップ（12星座・12か月・日）。
 *
 * 右と下のマージンを 1px 削って、隣の枡と罫を1本ずつ共有させる。
 * 削らないと接する辺が 2px になり、外周だけ 1px の不揃いな格子になる。
 * 星座だけ button ではなく a なので、下線と文字色も打ち消して高さを揃える
 */
.zodiac-grid .chip,
.month-grid .chip,
.day-grid .chip {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 -1px -1px 0;
  padding: 0.85rem 0.2rem;
  /*
   * `.chip` 側の `--rule-strong` はここで上書きされる（詳細度 (0,2,0) > (0,1,0)）。
   * 薄い `--rule` を書くと、主導線である12星座の枡だけが 1.34:1 に戻る
   */
  border: 1px solid var(--rule-strong);
  color: inherit;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-align: center;
  text-decoration: none;
}

.zodiac-grid .chip:hover,
.month-grid .chip:hover,
.day-grid .chip:hover {
  background: #fff;
  color: var(--shu);
}

/*
 * フォーカスの枠だけ重なり順を上げる。
 *
 * 枡は負のマージンで 1px ぶん隣に食い込んでいるので、`outline-offset` の
 * 2px は隣の枡の領域に入る。兄弟は後から描かれるぶん手前に来て、
 * 右辺と下辺の朱を地の色で塗り潰す（キーボードの現在地が左上だけの L 字になる）。
 */
.zodiac-grid .chip:focus-visible,
.month-grid .chip:focus-visible,
.day-grid .chip:focus-visible {
  position: relative;
  z-index: 1;
}

/* ほかの順位 */
#others-details {
  margin-top: 1.15rem;
  padding: 0.8rem 1.15rem;
  border: 1px solid var(--rule);
  background: var(--slip);
}

#others-details summary {
  font-size: 0.9rem;
  cursor: pointer;
}

.others-list {
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
}

/*
 * 順位・サイト名・軸の3列。サイト名だけを伸縮させ、軸のラベルが
 * 画面外に押し出されないようにする（以前は名前が長いと右端で切れていた）
 */
.others-list li {
  display: grid;
  gap: 0.2rem 0.6rem;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  align-items: baseline;
  padding: 0.5rem 0;
  border-top: 1px solid var(--rule);
  font-size: 0.88rem;
}

.others-rank {
  color: var(--shu);
  font-variant-numeric: tabular-nums;
}

.others-total {
  color: var(--muted);
  font-size: 0.76rem;
}

.others-name {
  min-width: 0;
}

.others-key {
  color: var(--muted);
  font-size: 0.8rem;
  white-space: nowrap;
}

.coverage,
.status,
.others-empty {
  color: var(--muted);
  font-size: 0.8rem;
}

.coverage {
  margin: 1.25rem 0 0;
  text-align: center;
}

.link-button {
  display: block;
  margin: 1.5rem auto 0;
  padding: 0.4rem 1.2rem;
  border: none;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  text-decoration: underline;
  cursor: pointer;
}

/* 星座ごとの個別ページ */
.hs-panel {
  margin-top: 1.15rem;
  padding: 1.1rem 1.15rem;
  border: 1px solid var(--rule);
  background: var(--slip);
}

.hs-panel h2 {
  margin: 0 0 0.6rem;
  font-size: 1rem;
  letter-spacing: 0.1em;
}

.hs-lead,
.hs-spread,
.hs-empty {
  color: var(--muted);
  font-size: 0.88rem;
}

.hs-empty {
  padding: 1.5rem 0;
  text-align: center;
}

/* 出典一覧 */
.table-wrap {
  overflow-x: auto;
  padding: 0.25rem 1rem;
  border: 1px solid var(--rule);
  background: var(--slip);
}

.sources-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.sources-table th,
.sources-table td {
  padding: 0.6rem;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  white-space: nowrap;
}

.sources-table th {
  font-weight: 600;
}

.sources-table .num {
  text-align: right;
}

.sources-table .row-muted {
  color: var(--muted);
}

.sources-date {
  color: var(--muted);
  font-size: 0.82rem;
}

/*
 * 文書ページ。
 *
 * 子孫セレクタ（`.doc h2`）にしないこと。`.hs-panel h2` と詳細度が同点になり、
 * 後方に書いてあるこちらが勝って、パネル見出しの `margin: 0` が `margin-top: 2rem` に
 * 化けていた（パネル上端から見出しまで約50px空いていた）。直下に限れば競合しない。
 */
.doc > h1 {
  /* 既定の 0.67em に任せず、トップの `.form-heading` と同じ余白に揃える */
  margin: 1.6rem 0 0.75rem;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.doc > h2 {
  margin-top: 2rem;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}

/*
 * 本文の大きさは継承で渡す。`.doc p` と書くと詳細度が (0,1,1) になり、
 * 単一クラスの `.hero-lead` `.hero-sub` `.hero-badge` `.hero-rank` `.coverage` を
 * 全部上書きしてしまう。星座ページのヒーローだけ「位」が潰れて、
 * トップの結果画面と見た目がずれていた（render.ts で共通化した意味が無くなる）。
 * 継承は詳細度を持たないので、コンポーネント側の指定が必ず勝つ。
 */
.doc {
  font-size: 0.92rem;
}

a {
  color: var(--kincha);
}

.site-footer {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  text-align: center;
}

.site-footer nav {
  display: flex;
  /* 4リンクが 320px 幅でぎりぎり1行。フォールバックフォントで字幅が増えても溢れないよう折り返す */
  flex-wrap: wrap;
  gap: 0.5rem 1.2rem;
  justify-content: center;
  font-size: 0.82rem;
}

/*
 * 今いるページ。リンクは残したまま（消すとページごとに並びが変わる）現在地だけ分かるようにする。
 *
 * 色を本文と同じにして下線を外す。`--muted` に落とす案を採らないのは、
 * 紙の上では「本文より弱い灰色」にしか見えず、リンクでないのか現在地なのかを
 * 読み取れないため（このパレットの `--muted` は紙に対して 4.75:1 で、
 * コントラスト自体は足りている）。
 */
.site-footer nav a[aria-current="page"] {
  color: var(--fg);
  text-decoration: none;
}

/*
 * 夜は紙を墨に裏返す。朱はそのままだと沈むので、少し明るい朱に振る。
 * 短冊の内側の罫は、地と紙の差が小さくなるぶん1段だけ持ち上げる。
 */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1e1a17;
    --slip: #272019;
    --fg: #f2e9d8;
    --muted: #a99c8b;
    --rule: #453a2f;
    --rule-inner: #352c24;
    /* 墨地では 3:1 に届かせるのに、ライトより明るい側へ振る必要がある（紙面 3.11:1） */
    --rule-strong: #7a6b56;
    --shu: #dd6553;
    --shu-pale: #6d3b33;
    --kincha: #cfab55;
  }

  .zodiac-grid .chip:hover,
  .month-grid .chip:hover,
  .day-grid .chip:hover {
    background: #322a21;
  }
}