/* 画面3「ふりかえり」— 記録を眺めるだけの画面。

   長さの決まり：
     ・数を長さで表さない。数字だけで出す。
       以前は最大値で正規化した帯（.rv-track / .rv-bar / .rv-rest）があったが、
       複数の行が同じ目盛りを共有すると、数字を書かない達成率の絵になる。廃止した。
       残っている「長さ」は直近7日の帯だけで、あちらは1日1マスの固定寸法。
       濃さだけが段階で変わる（分母を持たない）

   色の決まり：
     ・0件の日は無彩色（--rv-zero）。空白を色で名指ししない
     ・赤やオレンジの警告色は使わない。濃淡は1つの色の濃さだけで作る
     ・きっかけ（アンカー）の色は base.css の :root にある
       --slot-morning / --slot-noon / --slot-night をそのまま使う。
       ここでは定義し直さない（値を変えるときは base.css だけ直す）
     ・色が付くのは hue を持つ3つまで。4つ目以降と「アンカー無し」は
       無彩色（--rv-plain）。色は巡回させない
   ライト・ダークとも、すべてのトークンをこの2ブロックで定義している。 */

.review {
  /* 直近7日の帯。1色の濃さだけで段階を作る */
  --rv-ink:   #2b87a6;
  --rv-zero:  rgba(128,128,128,.10);          /* 0件の日。無彩色 */
  --rv-l1:    color-mix(in srgb, var(--rv-ink) 18%, transparent);
  --rv-l2:    color-mix(in srgb, var(--rv-ink) 34%, transparent);
  --rv-l3:    color-mix(in srgb, var(--rv-ink) 55%, transparent);
  --rv-l4:    color-mix(in srgb, var(--rv-ink) 78%, transparent);
  /* 色を持たないきっかけ（4つ目以降・アンカー無し）。無彩色 */
  --rv-plain: color-mix(in srgb, var(--text-2) 62%, transparent);

  flex: 1; min-height: 0; overflow-y: auto;
  /* 上は 20 ではなく 62。右上の歯車（10..54px）の下から始めるため */
  padding: 62px 16px calc(20px + var(--safe-b));
  display: flex; flex-direction: column; gap: 20px;
}

@media (prefers-color-scheme: dark) {
  .review {
    --rv-ink:   #69bcdd;
    --rv-zero:  rgba(128,128,128,.10);
    --rv-l1:    color-mix(in srgb, var(--rv-ink) 20%, transparent);
    --rv-l2:    color-mix(in srgb, var(--rv-ink) 36%, transparent);
    --rv-l3:    color-mix(in srgb, var(--rv-ink) 56%, transparent);
    --rv-l4:    color-mix(in srgb, var(--rv-ink) 80%, transparent);
    --rv-plain: color-mix(in srgb, var(--text-2) 62%, transparent);
  }
}

/* ---------- 1. 主役の数 ---------- */
.review .rv-hero {
  flex: none; text-align: center;
  padding: 16px 12px 18px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
}
.review .rv-hero .n {
  font-size: 54px; line-height: 1.05; font-weight: 300;
  letter-spacing: .01em; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.review .rv-hero .lb {
  margin-top: 4px; font-size: 13px; font-weight: 600;
  letter-spacing: .1em; color: var(--text-2);
}
.review .rv-hero .sub {
  margin: 8px 0 0; font-size: 12px; color: var(--text-2); line-height: 1.7;
}

/* ---------- ブロックの共通 ---------- */
.review .rv-block { flex: none; }
.review .rv-block h2 {
  margin: 0 0 10px;
  font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--text-2);
}
.review .rv-note {
  margin: 9px 0 0; font-size: 11.5px; color: var(--text-2); line-height: 1.7;
}
/* 添え書きではなく、そのブロックの中身そのものになる一言。
   読ませる文なので --text-3（下地との差が小さい）ではなく --text-2 にする */
.review .rv-note.is-only {
  margin-top: 0; font-size: 12.5px; color: var(--text-2);
}

/* ---------- 2. 直近7日の帯 ---------- */
.review .rv-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.review .rv-day { display: grid; justify-items: center; gap: 4px; }
.review .rv-day .wd { font-size: 10.5px; color: var(--text-2); line-height: 1; }
.review .rv-day .n {
  font-size: 11px; color: var(--text-2); line-height: 1;
  font-variant-numeric: tabular-nums; min-height: 11px;
}
.review .rv-day .sq {
  width: 100%; aspect-ratio: 1 / 1; border-radius: 7px;
  background: var(--rv-zero);
}
.review .rv-day[data-lv="1"] .sq { background: var(--rv-l1); }
.review .rv-day[data-lv="2"] .sq { background: var(--rv-l2); }
.review .rv-day[data-lv="3"] .sq { background: var(--rv-l3); }
.review .rv-day[data-lv="4"] .sq { background: var(--rv-l4); }
/* 今日だけ、うっすら縁で位置がわかるようにする（強調も警告もしない） */
.review .rv-day.is-today .sq { box-shadow: 0 0 0 1.5px var(--line-strong); }
.review .rv-day.is-today .wd { color: var(--text-2); font-weight: 600; }

/* ---------- 3. きっかけ ---------- */
/* 棒は無い。行の高さも幅も件数に依らず、どの行も同じ寸法。
   数は数字だけが持つので、行どうしを見比べても比率の形が出てこない。
   0件の行は JS 側で描画しない（空の枠を名前の横に並べない）。
   --c は行ごとに JS が入れる。入るのは hue を持つ3つだけで、
   入らない行（.is-plain）は既定値の無彩色のまま。色は巡回させない。 */
.review .rv-anchors {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); overflow: hidden;
}
.review .rv-anchor {
  --c: var(--rv-plain);
  display: flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 9px 12px;
}
.review .rv-anchor + .rv-anchor { border-top: 1px solid var(--line); }
.review .rv-anchor .dot {
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--c);
}
/* 名前はユーザーの入力なので長さが読めない。色は付けず（4.5:1 を守るため
   --text のまま）、はみ出す分は畳む。色は点が持つ */
.review .rv-anchor .nm {
  flex: 1; min-width: 0;
  font-size: 13px; color: var(--text); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.review .rv-anchor .n {
  flex: none; margin-left: auto;
  font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums;
}

/* ---------- 4. 内訳 ---------- */
/* 枠は件数に関わらず同じ大きさ。数を長さに載せる要素が1つも無いので、
   4つを並べても共通の目盛り（＝分母）が生まれない。
   縦一列に積むと上から下へ減っていく列に見えるため、2列に置く。 */
/* minmax(0,1fr)：1fr の既定の下限は min-content なので、
   「今日するに入れた」のような長いラベルが列幅を押し広げて、
   枠の大きさが中身で変わってしまう。0 まで縮められるようにして列を必ず等分にする。
   grid-auto-rows: 1fr：行が折り返しても4枠の高さを揃える。 */
.review .rv-counts {
  display: flex; flex-direction: column; gap: 2px;
}
/* 1行を文として置く。数字はラベルのすぐ後ろ——**列を作らない**のが要点で、
   右へ揃えると数字だけの列ができて、そこで見比べが起きる（レビューの指摘）。
   枠も敷かない。同じ大きさの枠が並ぶこと自体が、比べる絵になる */
.review .rv-count {
  margin: 0; padding: 7px 2px;
  display: flex; align-items: baseline; gap: 6px;
  font-size: 14px; line-height: 1.5;
}
.review .rv-count .lb { color: var(--text-2); }
.review .rv-count .n {
  font-size: 20px; line-height: 1.2; font-weight: 300;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.review .rv-count .u { font-size: 12.5px; color: var(--text-2); }

/* ---------- 5. 空のとき ---------- */
.review .rv-empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 24px 22px; gap: 2px;
}
.review .rv-empty .mk { font-size: 30px; color: var(--text-2); line-height: 1; margin-bottom: 10px; }
.review .rv-empty .lead { margin: 0; font-size: 15px; color: var(--text-2); }
.review .rv-empty p { margin: 6px 0 0; font-size: 12.5px; color: var(--text-2); line-height: 1.8; }

/* 完了の海への道。数字の下に1つだけ置く控えめなボタン */
.rv-go { display: block; margin: 14px auto 0; }

/* ---------- 設定へもどる（ふりかえりは設定の中に入ったので）----------
   右上の歯車（✕）でも出られるが、あちらは「設定ごと閉じる」。
   こちらは「ひとつ上へもどる」＝設定へ。2つは行き先が違う。 */
.rv-back {
  appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 44px; padding: 0 12px 0 8px; margin: 0 0 6px -8px;
  border: 0; background: transparent;
  color: var(--text-2); font-size: 13px; font-weight: 600; letter-spacing: .03em;
  border-radius: 10px;
}
.rv-back:hover { color: var(--text); }
.rv-back:focus-visible { outline: 2px solid var(--bub-edge); outline-offset: 2px; }
.rv-back .ar { font-size: 17px; line-height: 1; }