/* AI使用状況のサイトだけの CSS（v1.0.78）。共通の部分は kz-*.css（kazuapps/design/kz.css の写し）、色は kz-theme-ai-usage-*.css。
   ここには、共通の CSS に無い部品だけを置く：計器盤とリング、同期の流れ、困りごと、更新履歴の折りたたみの三角、画面の番号の位置、
   画面付きの手順。色の値は書かず、共通の変数（--night、--accent、--ok、--warn、--error など）を使う。
   前の版の site-v1.0.77.css から、これらの部品をそのまま移した（--arc は共通の --accent の役目）。 */

.phrase { display: inline-block; }

/* ---- 計器盤とリング（トップと 404） ---- */
.instrument {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2.25rem) 1.25rem;
  border-radius: 28px; background: var(--night); color: var(--night-ink); border: 1px solid var(--night-edge);
}
.instrument :focus-visible { outline-color: var(--accent); }
.instrument-groups { display: grid; gap: 1.5rem; }
.instrument-group + .instrument-group { padding-top: 1.5rem; border-top: 1px solid var(--night-line); }
.instrument-service { margin-bottom: 1rem; font-size: 1.125rem; font-weight: 700; }
.instrument-service span:not([class]) { margin-left: 0.5rem; color: var(--night-muted); font-size: 0.9375rem; font-weight: 400; }
.instrument-dials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.instrument-note {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem;
  margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--night-line); color: var(--night-muted); font-size: 0.875rem;
}
@media (min-width: 60rem) {
  .instrument-groups { grid-template-columns: 1fr 1fr; gap: 0; }
  .instrument-group + .instrument-group { padding-top: 0; padding-left: 2rem; border-top: 0; border-left: 1px solid var(--night-line); }
  .instrument-group:first-child { padding-right: 2rem; }
}

.dial { --track: var(--line); --reading: var(--ink); --caption: var(--muted); position: relative; display: grid; justify-items: center; gap: 0.5rem; text-align: center; }
.instrument .dial { --track: var(--night-raised); --reading: var(--night-ink); --caption: var(--night-muted); }
.dial-ring { width: 7.5rem; height: 7.5rem; }
.dial-track { fill: none; stroke: var(--track); stroke-width: 11; }
.dial-value { fill: none; stroke-width: 11; stroke-linecap: round; stroke: var(--ok); }
.dial.is-warning .dial-value { stroke: var(--warn); }
.dial.is-error .dial-value { stroke: var(--error); }
.dial-reading {
  position: absolute; top: 0; left: 50%; display: flex; align-items: center; justify-content: center;
  width: 7.5rem; height: 7.5rem; margin-left: -3.75rem;
  color: var(--reading); font-family: var(--font-num); font-size: 2rem; font-weight: 700; line-height: 1;
}
.dial-reading small { margin-left: 0.1em; font-size: 0.875rem; }
.dial.is-warning .dial-reading::after { content: "!"; margin-left: 0.15em; color: var(--warn); font-size: 1.25rem; }
.dial figcaption { color: var(--caption); font-size: 0.875rem; line-height: 1.55; }
.dial figcaption strong { display: block; color: var(--reading); font-size: 1rem; }
.dial.is-unknown .dial-track { stroke-dasharray: 3 5; }
/* 開いたときに 1 回だけ、リングが満ちる */
@media (prefers-reduced-motion: no-preference) {
  .dial-value { animation: dial-fill 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
}
@media (prefers-reduced-motion: reduce) { .dial-value { animation: none; } }
@keyframes dial-fill { from { stroke-dasharray: 0 100; } }
.lost .dial { justify-items: start; }
.lost .dial-reading { left: 0; margin-left: 0; }

/* ---- 同期の流れ（路線図のように。最初の駅（Mac）を塗る） ---- */
.flow { margin-top: 1.5rem; }
.flow-stages { list-style: none; padding: 0; display: grid; gap: 0; }
.flow-stages > li { position: relative; padding: 0 0 1.5rem 1.75rem; border-left: 3px solid var(--ink); }
.flow-stages > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.flow-stages > li::before {
  content: ""; position: absolute; left: -0.6rem; top: 0.2rem; width: 0.85rem; height: 0.85rem;
  border: 3px solid var(--ink); border-radius: 50%; background: var(--paper);
}
.flow-stages > li:first-child::before { background: var(--ink); }
.flow-stages strong { display: block; font-size: 1.0625rem; line-height: 1.4; }
.flow-stages span:not([class]) { display: block; margin-top: 0.25rem; color: var(--muted); font-size: 0.9375rem; line-height: 1.65; }
.flow figcaption { margin-top: 1rem; color: var(--muted); font-size: 0.875rem; }
@media (min-width: 48rem) {
  .flow-stages { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .flow-stages > li { padding: 1.5rem 1.25rem 0 0; border-left: 0; border-top: 3px solid var(--ink); }
  .flow-stages > li:last-child { border-top-color: var(--ink); }
  .flow-stages > li::before { left: 0; top: -0.6rem; }
}

/* ---- 困りごと（/faq/ と各ガイド） ---- */
.trouble-group { padding-top: 2.5rem; }
.trouble { padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.trouble h3 { margin-bottom: 0.5rem; }
.trouble p, .trouble li { max-width: var(--measure); }
.trouble p + p, .trouble p + ul, .trouble ul + p { margin-top: 0.6rem; }
.trouble :where(ul, ol):not([class]) { padding-left: 1.4em; }
.trouble .more { margin-top: 0.75rem; }

/* ---- 更新履歴の折りたたみ（それ以前の版、作業版） ---- */
.release-older, .release-drafts { margin-top: 1.5rem; }
/* 題は flex にしない（改行の印 <wbr> やかっこの囲みごとに別の列になり、「それ以前の　版（33件）」と文の途中にすき間が出た。
   2026-10-12 の 6 つのサイトのブラウザの確かめ）。押せる高さは min-height と上下の余白で保つ */
.release-older > summary, .release-drafts > summary {
  display: inline-block; min-height: 2.75rem; padding-block: 0.625rem; line-height: 1.5; cursor: pointer; color: var(--link); font-weight: 600; list-style: none;
}
.release-older > summary::-webkit-details-marker, .release-drafts > summary::-webkit-details-marker { display: none; }
.release-older > summary::before, .release-drafts > summary::before {
  content: ""; display: inline-block; vertical-align: 0.08em; width: 0; height: 0; margin-right: 0.55em;
  border-style: solid; border-width: 0.32em 0 0.32em 0.5em; border-color: transparent transparent transparent currentColor;
}
.release-older[open] > summary::before, .release-drafts[open] > summary::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: no-preference) {
  .release-older > summary::before, .release-drafts > summary::before { transition: transform 0.15s ease; }
}

/* ---- 画面の番号の位置と、画面付きの手順 ---- */
.marker.y-17 { top: 17%; }
.marker.y-36 { top: 36%; }
.marker.y-46 { top: 46%; }
.marker.y-80 { top: 80%; }
.marker.y-15 { top: 15%; }
.marker.y-41 { top: 41%; }
.marker.y-54 { top: 54%; }
.marker.y-98 { top: 98%; }
.procedure.with-screens .shot { margin-top: 1rem; max-width: 22rem; }
@media (min-width: 72rem) {
  .procedure.with-screens > li { grid-template-columns: 2.5rem minmax(0, 1fr) 16rem; column-gap: 1.5rem; }
  .procedure.with-screens > li > .shot { grid-column: 3; grid-row: 1 / span 5; margin-top: 0; }
}
.guide-index p + ol { margin-bottom: 0; }
.release-log > li { max-width: none; }

/* 4 列の同期の表（同期のページの表示の一覧）は、64rem 以下で 1 行ずつ縦に積む。表のセルは文節で折るので、列が 4 つだと
   見出しの列が細くなり、768px で「概／要」と折れた（2026-10-12 の Codex の点検 AI-018）。kz.css の 40rem 以下の決まりと同じ形 */
@media (max-width: 64rem) {
  .spec-table.wide-table thead { display: none; }
  .spec-table.wide-table tr { display: block; padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
  .spec-table.wide-table th, .spec-table.wide-table td { display: block; padding: 0.15rem 0; border: 0; }
  .spec-table.wide-table tbody th { width: auto; }
  .spec-table.wide-table td[data-label]::before { content: attr(data-label) "："; color: var(--muted); font-weight: 600; }
}

/* ---- iPhone 1.0.8 の残量の形・パネルだけ表示・Duo の置き方（v1.0.101） ---- */
.style-gallery { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-width: 40rem; }
.style-gallery figure { margin: 0; }
.style-gallery img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 0.75rem; background: var(--surface); }
.style-gallery figcaption { margin-top: 0.4rem; font-weight: 700; font-size: 0.9375rem; }
@media (min-width: 48rem) { .style-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.figure-note { margin-top: 0.5rem; color: var(--muted); font-size: 0.875rem; }
/* 写真の上の印。写真はいつも明るい画面なので、ダークモードでも変わらない濃い色（--night）にする */
.tap-frame, .fold-frame { position: relative; }
.tap-frame img, .fold-frame img { display: block; width: 100%; height: auto; }
.guide-body .shot.tap-shot { max-width: 22rem; }
.tap-ring { position: absolute; left: 10%; top: 46%; width: 2.6rem; height: 2.6rem; transform: translate(-50%, -50%); border: 3px solid var(--night); border-radius: 50%; }
.fold-line { position: absolute; left: 0; right: 0; top: 50%; border-top: 3px dashed var(--night); }
.guide-body .shot.is-tablet { max-width: 24rem; }
.posture-diagrams { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 1.25rem; max-width: 44rem; }
.posture-diagrams figure { margin: 0; }
.posture-diagrams svg { display: block; width: 100%; max-width: 14rem; height: auto; }
.posture-diagrams figcaption { margin-top: 0.5rem; font-size: 0.9375rem; line-height: 1.6; }
.posture-diagrams figcaption strong { display: block; }
@media (min-width: 48rem) { .posture-diagrams { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pd-device { fill: var(--surface); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.pd-gauge { fill: none; stroke: var(--ok); stroke-width: 5; }
.pd-row { fill: var(--line); }
.pd-fold { stroke: var(--marker-fill); stroke-width: 2.5; stroke-dasharray: 6 5; }
.pd-clock { fill: var(--ink); font: 700 24px var(--font-num); text-anchor: middle; }
.pd-clock.is-small { font-size: 17px; }