/* home — 書斎のホームの部品（docs/CONCEPT.md）。brand.css の後、room.css の前に読み込む。
   机の本（見出し・今の章・目次）は css/path.css、部屋・机・本の装丁は css/room.css。ここはそれ以外のホーム部品:
   数字1行、出題の要約行と設定パネル、ログイン案内、詳細（覚えた単語・Daily Dash）。
   すべて html[data-theme] を頭に付け、(0,3,1) の詳細度で後勝ちにする（theme.css は Batch 40 で廃止）。色は tokens.css の変数だけ。 */

html[data-theme] .app--home {
  max-width: 820px;
}

@media (max-width: 560px) {
  html[data-theme] .app--home {
    padding-top: 20px;
  }
}

/* ---- ヒーロー: 要素は残すが中身は無い（キャッチコピーはトップページ）。認証メッセージは道の上に1行 ---- */
html[data-theme] .hero--compact {
  display: none;
  margin: 0;
}

html[data-theme] .auth-message--home {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--ink-3);
}

/* ---- 数字1行: 連続日数。左頁の末尾に、チップではなく 1 行の文字（金の小さな炎） ---- */
html[data-theme] .today__strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 4px 12px;
  min-height: 38px;
  margin: -38px 0 0; /* 「コースを変える」（左）と同じ行の右側に */
  pointer-events: none;
}

html[data-theme] .today__strip:empty {
  display: none;
}

html[data-theme] .strip__chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink-page-2);
  font: 500 var(--fs-small) / 1.5 var(--font-display);
  letter-spacing: 0.06em;
  box-shadow: none;
}

html[data-theme] .strip__chip .icon {
  margin: 0;
  align-self: center;
  color: var(--gold-dk);
}

html[data-theme] .strip__chip--on,
html[data-theme] .strip__chip--streak.strip__chip--on {
  background: transparent;
  border: 0;
  color: var(--ink-page);
}

html[data-theme] .strip__chip--on .icon {
  color: var(--signal);
}

html[data-theme] .strip__chip small {
  margin-left: 2px;
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--ink-page-3);
}

/* .strip__chip--pop は index.html・js/ のどこにも付かない（homeStrip.js は --streak／--on だけ）ので animation: none の規則は消した */

/* プレイ中: 数字1行・はちゃん・「出題: …」・ほかの遊び方・ログイン案内・詳細（覚えた単語・Daily）は畳む
   （残るのは見出し1行＝タイトル・道に戻る・設定。css/path.css）。全幅で同じ。要素は残す（id 不変） */
html[data-theme] body.home--playing .today__strip,
html[data-theme] body.home--playing #hasumiHome,
html[data-theme] body.home--playing .setup-toggle__label,
html[data-theme] body.home--playing .setup-toggle__summary,
html[data-theme] body.home--playing .setup-toggle__sep,
html[data-theme] body.home--playing #playModes,
html[data-theme] body.home--playing #loginNudge,
html[data-theme] body.home--playing #homeMore {
  display: none;
}

/* Study のセット中: 「思い出せた 0 ・ 思い出せず 0 ・ 今日 0」の帯は出さない（数字は結果パネルが 1 行で出す。要素は残す） */
/* 腕試し中は「今日のセット 0 / 15」と残りの丸を出さない（10 語の腕試しと数が食い違う） */
html[data-theme] body.home--playing.placement :is(#setProgress, #studyQueue) {
  display: none;
}

html[data-theme] body.home--playing .stats--strip {
  display: none;
}

/* 出題名が道の見出し（コース名）と同じとき: ラベル・名前・区切りを畳んで「設定」だけ残す（js/main.js の renderSetupSummary が付ける） */
html[data-theme] .setup-toggle--same :is(.setup-toggle__label, .setup-toggle__summary, .setup-toggle__sep) {
  display: none;
}

/* はちゃんの一言（ホーム）は窓の脇の紙片（css/room.css の .hasumi--home .slip） */

/* ---- 出題: 「出題: 中学英語 1年 ・ 設定」の1行。設定パネルは畳む ---- */
html[data-theme] .play__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin: 4px 0 0;
}

html[data-theme] .setup-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  min-height: 40px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: none;
}

html[data-theme] .setup-toggle:hover {
  background: transparent;
  color: var(--ink);
}

html[data-theme] .setup-toggle__label {
  font-size: 13px;
  color: var(--ink-3);
}

html[data-theme] .setup-toggle__summary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500; /* 明朝は 500 と 700 だけ（600 だと 700 の漢字のサブセットを読みに行く） */
  color: var(--ink);
}

html[data-theme] .setup-toggle__sep {
  color: var(--ink-4);
}

/* 「設定」の当たり判定は 40×40（文字は 13px のまま） */
html[data-theme] .setup-toggle__more {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 8px;
  margin: 0 -8px 0 0;
  border-radius: var(--radius);
  color: var(--ink-3);
  text-decoration: underline;
  text-underline-offset: 2px;
}

html[data-theme] .setup-toggle:hover .setup-toggle__more,
html[data-theme] .setup-toggle--open .setup-toggle__more {
  color: var(--signal-ink);
}

html[data-theme] .setup {
  padding: 14px 16px 6px;
  margin: 0 0 12px;
  border-radius: var(--radius-lg);
  background: var(--paper-2);
  border: 1px solid var(--line);
  box-shadow: none;
}

html[data-theme] .setup__row {
  margin-bottom: 12px;
}

html[data-theme] .setup__label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--ink-3);
}

/* 今日のセットの長さ（#setLengthSelect）。select の見た目は pages.css にしか無い（index.html は読まない）ので、出題設定の中だけに置く。
   畳まれている（#setupPanel[hidden]）ので盤面の寸法は変わらない */
html[data-theme] .setup .setting-select {
  max-width: 100%;
  padding: 8px 32px 8px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-room);
  background: var(--paper-3);
  color: var(--ink);
  font-size: 14px;
}

html[data-theme] .setup .setting-select:focus,
html[data-theme] .setup .setting-select:focus-visible {
  outline: none;
  border-color: var(--signal);
  box-shadow: var(--focus);
}

/* カテゴリのチップ: 紙3の面、選択中は墨の塗り */
html[data-theme] .category-picker {
  gap: 6px;
  margin-bottom: 6px;
}

html[data-theme] .category-chip {
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--paper-3);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  box-shadow: none;
}

html[data-theme] .category-chip:hover {
  background: var(--line);
  color: var(--ink);
}

html[data-theme] .category-chip--active,
html[data-theme] .category-chip--active:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* 語数は選択中のチップだけ（12個の数字を並べない） */
html[data-theme] .category-chip__count {
  display: none;
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
}

html[data-theme] .category-chip--active .category-chip__count {
  display: inline;
  color: var(--paper);
  opacity: 0.7;
}

html[data-theme] .category-chip--add {
  background: transparent;
  border-color: var(--line-2);
  color: var(--ink-3);
}

html[data-theme] .category-chip--add:hover {
  background: var(--paper-3);
  color: var(--ink);
}

html[data-theme] .genre-bar {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--ink-3);
}

html[data-theme] .genre-bar__active b {
  color: var(--ink);
}

html[data-theme] .genre-bar__clear {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 6px;
  padding: 2px 8px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 500;
  box-shadow: none;
}

html[data-theme] .genre-bar__clear:hover {
  background: var(--paper-3);
  color: var(--ink);
}

html[data-theme] .genre-bar__clear .icon {
  margin: 0;
}

html[data-theme] .genre-bar__link {
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

html[data-theme] .genre-bar__link:hover {
  color: var(--signal-ink);
}

/* 苦手のみ復習 */
html[data-theme] .weak-toggle {
  gap: 12px;
  margin: 0;
}

html[data-theme] .weak-toggle__btn {
  padding: 6px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
}

html[data-theme] .weak-toggle__btn:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--paper-3);
  border-color: var(--line-2);
  color: var(--ink);
}

html[data-theme] .weak-toggle__btn--on,
html[data-theme] .weak-toggle__btn--on:hover:not(:disabled) {
  background: var(--warn-soft);
  border-color: var(--warn);
  color: var(--warn);
}

html[data-theme] .weak-toggle__count {
  opacity: 1;
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--ink-3);
}

html[data-theme] .weak-toggle__btn--on .weak-toggle__count {
  color: var(--warn);
}

html[data-theme] .weak-toggle__hint {
  font-size: 12px;
  color: var(--ink-3);
}

/* 出題比率（パネルの中。カードの中のカードにしない） */
html[data-theme] .mix-control {
  padding: 0;
  margin: 0 0 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

html[data-theme] .mix-control__head {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
}

/* スライダーは墨（朱はスタートだけ） */
html[data-theme] #mixSlider {
  accent-color: var(--ink);
}

html[data-theme] #mixLabel {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
}

html[data-theme] .mix-control__hint {
  font-size: 12px;
  color: var(--ink-3);
}

/* ---- ログインの案内: 1行の文とリンクだけ ---- */
html[data-theme] .login-nudge {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 4px 12px;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink-3);
  font-size: 13px;
  box-shadow: none;
}

html[data-theme] .login-nudge:empty {
  display: none;
}

html[data-theme] .login-nudge__text a {
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

html[data-theme] .login-nudge__text a:hover {
  color: var(--signal-ink);
}

html[data-theme] .login-nudge__later {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink-3);
  font: inherit;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  box-shadow: none;
}

html[data-theme] .login-nudge__later:hover {
  background: transparent;
  color: var(--ink);
}

/* ---- 詳細（覚えた単語・Daily Dash）: 普段は畳む。中はカードの規則 ---- */
html[data-theme] .home-more {
  margin: 0 0 24px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html[data-theme] .home-more > summary {
  padding: 12px 0;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

html[data-theme] .home-more > summary:hover {
  color: var(--ink);
}

html[data-theme] .home-more > summary::after {
  color: var(--ink-4);
}

html[data-theme] .home-more__body {
  display: grid;
  gap: 12px;
  padding: 0 0 4px;
}

html[data-theme] .home-more__body .daily {
  margin: 0;
}

/* 未プレイの Daily Dash カードは畳む（入口は「ほかの遊び方」の 1 つ。プレイ済みはスコア・順位を出すので残す） */
html[data-theme] .home-more__body .daily:not(.daily--done) {
  display: none;
}

/* 覚えた単語 */
html[data-theme] .learned-card {
  gap: 6px 16px;
  padding: 16px;
  margin: 0;
  border-radius: var(--radius-lg);
  background: var(--paper-2);
  border: 1px solid var(--line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

html[data-theme] .learned-card__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
}

html[data-theme] .learned-card__num {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
}

html[data-theme] .learned-card__num small {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
}

html[data-theme] .learned-card__today {
  font-size: 12px;
  font-weight: 600;
  color: var(--ok);
}

html[data-theme] .learned-card__today-words {
  font-size: 13px;
  color: var(--ink-2);
}

html[data-theme] .learned-card__today-words b {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--ink);
}

html[data-theme] .learned-card__cat {
  font-size: 12px;
  color: var(--ink-3);
}

html[data-theme] .learned-card__week {
  font-size: 12px;
  color: var(--ink-3);
}

html[data-theme] .learned-card__week b {
  font-weight: 600;
  color: var(--ink);
}

/* 今週の点。<i class="today"> が旧「今日カード」の .today に当たるので、面と余白を打ち消す */
html[data-theme] .learned-card__week i {
  width: 10px;
  height: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

html[data-theme] .learned-card__week i.on {
  background: var(--ok);
}

html[data-theme] .learned-card__week i.today:not(.on) {
  padding: 0;
  border: 1px solid var(--ink-3);
  background: transparent;
}

html[data-theme] .learned-card__week i.future {
  background: var(--paper-3);
}

html[data-theme] .learned-card__link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

html[data-theme] .learned-card__link:hover {
  color: var(--signal-ink);
}

html[data-theme] .learned-card__link .icon {
  margin: 0;
}

/* Daily Dash とランキング */
/* レイアウト（旧 game.css から移動。色・枠・余白は下の規則が持つ） */
html[data-theme] .daily {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

html[data-theme] .daily:empty {
  display: none;
}

html[data-theme] .daily__head {
  flex-shrink: 0;
}

html[data-theme] .daily__result strong {
  font-variant-numeric: tabular-nums;
}

html[data-theme] .daily__button {
  flex-shrink: 0;
  cursor: pointer;
}

html[data-theme] .daily {
  gap: 10px 16px;
  padding: 16px;
  margin: 0;
  border-radius: var(--radius-lg);
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--ink);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

html[data-theme] .daily--done {
  border-color: var(--line);
}

html[data-theme] .daily__head,
html[data-theme] .daily--done .daily__head {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

html[data-theme] .daily__result {
  font-size: 13px;
  color: var(--ink-2);
}

html[data-theme] .daily__result strong {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}

html[data-theme] .daily__note {
  font-size: 12px;
  color: var(--ink-3);
}

html[data-theme] .daily__note strong {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--ink-2);
}

/* 副ボタン（主ボタンはホームにスタート1個だけ） */
html[data-theme] .daily__button {
  margin-left: auto;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: transparent;
  background-image: none;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
  transition: background var(--ease);
}

html[data-theme] .daily__button:hover {
  background: var(--paper-3);
  color: var(--ink);
  transform: none;
  box-shadow: none;
}

html[data-theme] .daily-rank {
  margin-top: 4px;
  padding-top: 12px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html[data-theme] .daily-rank__head {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-3);
}

html[data-theme] .daily-rank__hint {
  color: var(--ink-3);
}

html[data-theme] .daily-rank__item {
  padding: 5px 8px;
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--ink-2);
}

html[data-theme] .daily-rank__item--me {
  background: var(--paper-3);
  border: 1px solid var(--line);
  color: var(--ink);
}

html[data-theme] .daily-rank__pos,
html[data-theme] .daily-rank__score {
  font-family: var(--font-mono);
}

html[data-theme] .daily-rank__name {
  color: var(--ink);
}

html[data-theme] .daily-rank__score {
  font-weight: 600;
  color: var(--ink);
}

/* 完了画面では「ほかの遊び方」を畳む（結果パネルの Challenge と二重にしない） */
html[data-theme] body.set-done #playModes {
  display: none;
}