/* 更新履歴（/changelog）だけの見た目。共通は style.css
   動きは html.cl-motion のときだけ（JS が動いて、動きを減らす設定でないとき）。それ以外はぜんぶ最初から見える */

.cl-num, .st-v, .ver, .rel-n, .chip-n { font-family: "Inter", "Noto Sans JP", sans-serif; font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* ---------- 上の数字 ---------- */
.cl-stats { display: flex; margin: 0 0 4px; padding: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cl-stats > div { flex: 1 1 0; min-width: 0; padding: 14px 0 14px 16px; border-left: 1px solid var(--line); }
.cl-stats > div:first-child { padding-left: 0; border-left: 0; }
.cl-stats dt { font-size: 12px; color: var(--sub); line-height: 1.5; white-space: nowrap; }
.cl-stats dd { margin: 4px 0 0; }
.st-v { font-size: 26px; font-weight: 600; line-height: 1.15; color: var(--ink); white-space: nowrap; }
.st-v small { font-family: "Noto Sans JP", sans-serif; font-size: 13px; font-weight: 700; color: var(--sub); margin-left: 3px; }
@media (max-width: 420px) {
  .cl-stats > div { padding-left: 12px; }
  .st-v { font-size: 22px; }
  .cl-stats dt { font-size: 11px; }
}

/* 数字が転がる */
.rl { display: inline-block; height: 1.15em; line-height: 1.15; overflow: hidden; vertical-align: bottom; }
.rl-c { display: flex; flex-direction: column; transition: transform .9s cubic-bezier(.2, .9, .25, 1.04); }
.rl-c > span { display: block; height: 1.15em; text-align: center; }
.rl-s { display: inline-block; }

/* 最後の日のあと、フッターまでを詰める */
main { padding-bottom: 48px; }

/* ---------- 絞り込み（よくある質問のチップと同じ形） ---------- */
.cl-tools { position: sticky; top: 0; z-index: 5; background: var(--paper); padding: 2px 0 12px; border-bottom: 1px solid var(--line); }
.cl-tools .chips { margin-top: 12px; }
.cl-tools .chip { font: inherit; font-size: 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color .2s, box-shadow .2s, transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.cl-tools .chip:active { transform: scale(.96); }
.chip-n { margin-left: 7px; font-size: 12.5px; font-weight: 500; color: var(--sub); line-height: 1.15; }
.chip.on .chip-n { color: var(--ink); }
/* 読んだところまで：下の細い線の上に、2px の橙 */
.cl-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; }
.cl-progress > span { display: block; height: 100%; background: var(--accent); transform-origin: left center; transform: scaleX(0); }

/* ---------- タイムライン ---------- */
/* --x：線の中心（左から）。--g：日付の列の幅 */
.tl { --x: 12px; --g: 44px; position: relative; margin-top: 28px; padding-bottom: 4px; }
.tl-rail { position: absolute; left: calc(var(--x) - 1px); top: var(--rail-top, 16px); bottom: 24px; width: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.tl-fill { position: absolute; inset: 0; background: var(--ink); transform-origin: top center; transform: scaleY(1); }
.cl-motion .tl-fill { transform: scaleY(0); }
.tl::after { content: ""; position: absolute; left: calc(var(--x) - 4px); bottom: 18px; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }

.rel { position: relative; padding-left: var(--g); margin: 0 0 40px; }
.rel:last-child { margin-bottom: 0; }
.rel[hidden], .it[hidden] { display: none; }

/* 日付の点：線が届くと橙になってチェックが描かれる */
.node { --n: 24px; position: absolute; left: calc(var(--x) - var(--n) / 2); top: 4px; width: var(--n); height: var(--n); border-radius: 50%; background: var(--paper); border: 2px solid var(--line-strong); display: grid; place-items: center; z-index: 1; }
.node svg { width: 11px; height: 11px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.rel.on .node { background: var(--accent); border-color: var(--accent); }
.cl-motion .rel[data-rel] .node { opacity: 0; transform: scale(.3); transition: transform .55s cubic-bezier(.3, 1.8, .5, 1), opacity .2s, background-color .25s, border-color .25s; }
.cl-motion .rel[data-rel].in .node { opacity: 1; transform: scale(1); }
.cl-motion .rel[data-rel].on .node { animation: cl-bump .5s cubic-bezier(.3, 1.6, .5, 1); }
.cl-motion .node svg path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .3s ease-out .1s; }
.cl-motion .rel.on .node svg path { stroke-dashoffset: 0; }
@keyframes cl-bump { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }

/* これから：点は破線、線も破線 */
.rel-next { margin-bottom: 36px; }
.rel-next .node { border-style: dashed; }
.rel-next::before { content: ""; position: absolute; left: calc(var(--x) - 1px); top: 32px; bottom: -36px; border-left: 2px dashed var(--line-strong); }
.next { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.next li { margin: 0; padding: 4px 12px; border: 1px dashed var(--line-strong); border-radius: 10px; font-size: 14px; color: var(--sub); line-height: 1.6; }
.next a { color: inherit; }

/* 日付の見出し */
.rel-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 32px; margin: 0 0 10px; }
.rel-d { margin: 0; font-size: 20px; line-height: 1.45; letter-spacing: .01em; }
.rel-wd { font-size: 14px; font-weight: 400; color: var(--sub); margin-left: 1px; }
.ver { font-size: 12px; font-weight: 600; line-height: 1; padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--card); color: var(--ink); }
.rel-note { font-size: 13px; font-weight: 700; color: var(--link); }
.rel-next .rel-note { color: var(--sub); font-weight: 400; }
.rel-n { margin-left: auto; line-height: 1.15; font-size: 13px; color: var(--sub); white-space: nowrap; }
.rel-n [data-n] { margin-right: 1px; }

/* ---------- 項目：日ごとに1枚のカード、行は細い線で区切る（よくある質問の一覧と同じ） ---------- */
.items { list-style: none; margin: 0; padding: 0 18px; background: var(--card); border: 1px solid var(--line-strong); border-radius: 16px; }
.it { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: start; padding: 14px 0; }
.it:not([hidden]) ~ .it { border-top: 1px solid var(--line); }
.it:focus { outline: none; }
.it-b { min-width: 0; }
.it-t { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.6; letter-spacing: .02em; }
.it.big .it-t { font-size: 16px; }
.it-d { margin: 2px 0 0; font-size: 14px; line-height: 1.75; color: var(--sub); }

/* 画面のサムネイル */
.it-img { display: block; width: 148px; margin-top: 2px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--paper); cursor: zoom-in; -webkit-tap-highlight-color: transparent; transition: border-color .2s, transform .3s cubic-bezier(.2, .8, .2, 1); }
.it-img img { display: block; width: 100%; height: auto; }
.it-img:hover { border-color: var(--line-strong); }
.it-img:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.it-img:active { transform: scale(.98); }

/* 種類のラベル：題名の前に小さく、枠と薄い色だけ */
.tag { display: inline-block; margin: 0 8px 0 0; padding: 2px 5px 1px; border: 1px solid; border-radius: 5px; font-size: 10.5px; font-weight: 700; line-height: 1.35; letter-spacing: .06em; vertical-align: .14em; white-space: nowrap; }
.tag-new { color: #B8430E; border-color: rgba(242, 102, 31, .32); background: #FFF7F1; }
.tag-better { color: #2F5FC2; border-color: rgba(59, 111, 214, .28); background: #F4F7FD; }
.tag-fix { color: #23794F; border-color: rgba(46, 158, 107, .3); background: #F2F8F5; }

/* 記録の種類の小さな点（アプリの色） */
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin: 0 6px 0 0; vertical-align: .16em; }
.dot-food { background: #F2661F; }
.dot-pee { background: #C99A1E; }
.dot-poo { background: #8A5A3C; }
.dot-med { background: #7C5CFF; }
.dot-hosp { background: #3B6FD6; }
.dot-money { background: #2E9E6B; }

/* 入ってくる動き：順に浮かぶ（html.cl-motion のときだけ。JS が無ければ最初から見える） */
.cl-motion .it { transition: opacity .45s ease var(--d, 0ms), transform .6s cubic-bezier(.2, .9, .25, 1.08) var(--d, 0ms); }
.cl-motion .it.pending { opacity: 0; transform: translateY(12px); }
.cl-motion .it .it-img { transition: opacity .5s ease calc(var(--d, 0ms) + 160ms), transform .6s cubic-bezier(.2, .9, .25, 1.08) calc(var(--d, 0ms) + 160ms), border-color .2s; }
.cl-motion .it.pending .it-img { opacity: 0; transform: scale(.94); }

/* ---------- 上から見た柴犬：線の先を、頭を下にして歩く（形は changelog.js） ---------- */
/* 縦の長さ --s。幅は 26:44。足・首・しっぽの動きは JS が SVG の transform で。
   紙の色のふちがあるので、線は犬のところで途切れて見える */
.walker { --s: 56px; position: absolute; left: 0; top: 0; width: calc(var(--s) * 26 / 44); height: var(--s); z-index: 2; pointer-events: none; will-change: transform; }
.w-body { width: 100%; height: 100%; transform-origin: 50% 50%; }
.walker svg { display: block; width: 100%; height: 100%; overflow: visible; }
.paw { position: absolute; left: 0; top: 0; width: 7px; height: 7px; z-index: 1; pointer-events: none; fill: var(--ink); opacity: 0; animation: cl-paw 1.8s ease-out forwards; }
.paw svg { display: block; width: 100%; height: 100%; }
@keyframes cl-paw { 0% { opacity: 0; } 10% { opacity: .3; } 100% { opacity: 0; } }

/* ---------- 拡大 ---------- */
.cl-zoom { padding: 0; border: 0; background: transparent; max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); overflow: visible; cursor: zoom-out; }
.cl-zoom::backdrop { background: rgba(26, 22, 19, .62); }
.cl-zoom img { display: block; width: auto; height: auto; max-width: min(calc(100vw - 32px), 420px); max-height: calc(100dvh - 48px); border-radius: 18px; border: 1px solid rgba(255, 255, 255, .5); background: var(--paper); }
.cl-zoom-x { position: absolute; top: -12px; right: -12px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--card); display: grid; place-items: center; cursor: pointer; }
.cl-zoom-x svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.cl-zoom[open] { animation: cl-zoom-in .22s cubic-bezier(.2, .8, .2, 1); }
@keyframes cl-zoom-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* ---------- スマホ ---------- */
@media (max-width: 560px) {
  .it { grid-template-columns: minmax(0, 1fr); }
  .it-img { grid-column: 1; width: 132px; margin-top: 10px; border-radius: 12px; }
}
@media (max-width: 480px) {
  .tl { --x: 11px; --g: 36px; }
  .node { --n: 20px; }
  .node svg { width: 10px; height: 10px; }
  .rel-next::before { top: 28px; }
  .rel-d { font-size: 19px; }
  .items { padding: 0 14px; border-radius: 14px; }
  .it { padding: 13px 0 14px; }
  .it.big .it-t { font-size: 15.5px; }
  .it-t { font-size: 15px; }
  .it-d { font-size: 14px; line-height: 1.7; }
  .walker { --s: 44px; }
}

/* スマホ：チップ4つを横いっぱいに並べる（はみ出して切れないように） */
@media (max-width: 520px) {
  .cl-tools .chips { margin: 12px 0 0; padding: 0; gap: 6px; overflow: visible; }
  .cl-tools .chip { flex: 1 1 auto; justify-content: center; padding: 0 8px; font-size: 13.5px; }
  .chip-n { margin-left: 5px; font-size: 12px; }
  .next li { padding: 3px 10px; font-size: 13px; }
  .next { gap: 6px; }
}

/* 動きを減らす：入ってくる動き・犬の動きはなし（犬は線のはじめで座っている） */
@media (prefers-reduced-motion: reduce) {
  .it-img { transition: none; }
  .cl-zoom[open] { animation: none; }
  .paw { display: none; }
}