/* アーカイブ一覧・購入の器・ギャラリー・レポート・再生頁の版面（2026-10-05 PLAN-v3 / DESIGN-v1 §7-2）。
   ★値はすべて MEET の tokens.css（var(--…)）。独自の hex を置かない。純黒を置かない。角丸は操作だけ。
   ★頁内 <style> と style 属性は CSP（style-src 'self'）が止める。必ずこの外部ファイルに置く。
   ★index.html から読む（SHELL に載せる）。変えたら sw.js の CACHE を上げる。 */

/* ── ホームの薄い見出し（R1: 1 枚目の札を初期表示に入れる。1440×900 で上端 ≈ 300px・390×844 で ≤ 280px） ── */
.hero.compact.slim { text-align:left; padding:var(--space-2) 0 0; }
.hero.compact.slim p { margin-inline:0; margin-block:0 var(--space-1); }
.hero.compact.slim .home-title { margin:0 0 var(--space-1); font-size:var(--fs-h2); }
@media(max-width:600px) { .hero.compact.slim .edition, .hero.compact.slim .caption { display:none; } .hero.compact.slim { padding-top:0; } }

/* ── 資格の帯 ─────────────────────────────────────────────── */
.entitle-host { margin-block:var(--space-2); }
.entitle-bar { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); min-height:var(--app-touch); padding:var(--space-1) var(--space-2); border-top:var(--hair); border-bottom:var(--hair); background:var(--surface); font-size:var(--fs-caption); line-height:var(--lh-caption); }
.entitle-bar > span:not(.entitle-dot) { flex:1 1 auto; min-width:0; }
.entitle-dot { width:8px; height:8px; border-radius:50%; background:var(--ink-mute); flex:none; }
.entitle-dot.good { background:var(--state-good); }
.entitle-dot.wait { background:var(--state-info); animation:entitle-pulse calc(var(--dur-normal) * 5) ease-in-out infinite; }
@keyframes entitle-pulse { 50% { opacity:.35; } }
.entitle-bar .entitle-buy { width:auto; flex:none; padding-inline:var(--space-3); }

/* ── ホームの案内（販売 ＋ レポート）。箱でなく罫で組む。広幅は 2 列、狭幅は縦に積む（2026-10-07） ── */
.home-notices { display:grid; gap:0 var(--space-4); border-top:var(--hair); border-bottom:var(--hair); margin-block:var(--space-2); }
.home-notice { padding:var(--space-2) 0; min-width:0; }
.home-notice + .home-notice { border-top:var(--hair); }
.home-notice-title { display:flex; align-items:center; gap:var(--space-2); margin:0 0 var(--space-1); font-size:var(--fs-body); line-height:var(--ap-lh-head); }
.home-notice .caption { margin:0 0 var(--space-1); }
.home-notice .caption.muted { margin:var(--space-1) 0 0; }
.home-notice-actions { display:flex; flex-wrap:wrap; gap:var(--space-1); }
.home-notice-actions a, .home-notice-actions button { width:auto; min-height:var(--app-touch); padding-inline:var(--space-3); }
@media(min-width:1024px) {
  .home-notices { grid-template-columns:1fr 1fr; }
  .home-notice + .home-notice { border-top:0; border-left:var(--hair); padding-left:var(--space-4); }
}
/* 未購入のホーム（2026-10-07 決裁）: 一覧の代わりに、写真とレポートの実物で見せる 2 つの主役。
   写真の上に文字を載せない（文字は常に地の上・AA）。箱でなく罫。角は写真だけ --radius-sm。 */
.home-lead { margin-block:var(--space-3) var(--space-4); display:grid; gap:var(--space-5); }
.home-visual { display:grid; gap:var(--space-3); padding-top:var(--space-3); border-top:var(--hair); min-width:0; }
.home-visual:first-child { border-top:var(--border-w-strong) solid var(--rule-strong); }
.home-visual-text { min-width:0; max-width:var(--ap-measure); }
.home-visual-text > p { margin:0 0 var(--space-2); }
.home-eyebrow { color:var(--brass-soft); letter-spacing:var(--tracking-label); text-transform:uppercase; margin-bottom:var(--space-1); }
.home-visual-title { margin:0 0 var(--space-2); font-size:var(--fs-h2); line-height:var(--ap-lh-head); line-break:strict; word-break:auto-phrase; text-wrap:pretty; }
.home-mark { display:inline-flex; align-items:center; gap:var(--space-1); margin:0 0 var(--space-2); padding:2px var(--space-2) 2px 0; font-size:var(--fs-caption); color:var(--ink-soft); }
.home-visual-text .caption.muted { font-size:var(--fs-caption); line-height:var(--lh-caption); color:var(--ink-soft); }
.home-inline-link { display:inline-block; margin-top:var(--space-1); color:var(--ink-soft); text-decoration:underline; text-underline-offset:.2em; font-size:var(--fs-caption); }
.home-inline-link:hover { color:var(--ink-strong); }
/* 場面写真 3×2。LQIP を敷く。 */
.home-mosaic { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-1); }
.home-mosaic-item { display:block; min-width:0; background:var(--lqip); border-radius:var(--radius-sm); overflow:hidden; }
.home-mosaic-item img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; }
.home-mosaic-item:focus-visible, .home-thumb:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
/* レポートの実物: 横に流す帯。高さを揃え、縦長の表紙も同じ高さに。 */
.home-thumbs { display:flex; flex-wrap:wrap; gap:var(--space-2); }   /* 折り返して 5 枚とも見せる（横スクロールは切れて見える） */
.home-thumb { flex:0 0 auto; height:150px; background:var(--surface-warm); border:var(--hair); border-radius:var(--radius-sm); overflow:hidden; }
.home-thumb img { display:block; height:100%; width:auto; }
@media(min-width:1024px) {
  .home-visual { grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--space-5); align-items:start; }
  .home-visual--reports { grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
  .home-thumb { height:170px; }
}
@media(max-width:600px) {
  .home-lead { gap:var(--space-4); }
  .home-thumb { height:118px; }
  .home-visual-title { font-size:var(--fs-h3, 20px); }
  .home-notice-actions a, .home-notice-actions button { min-height:40px; }
  .home-reports .caption { display:none; }           /* 狭幅: レポートは見出しと導線だけ（1 枚目の札を初期表示に残す） */
}
.entitle-bar button.secondary, .entitle-bar a.secondary { min-height:var(--app-touch); }

/* ── 絞り込み（広幅は 1 行に収める・狭幅は 2 段） ─────────────── */
.archive-filters { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); margin-block:var(--space-2); }
.archive-filters .chips { display:flex; flex-wrap:wrap; gap:var(--space-1); }
.chip { min-height:44px; padding:0 var(--space-3); border:1px solid var(--secondary-border); border-radius:var(--radius-sm); background:var(--secondary-background); color:var(--secondary-ink); font-size:var(--fs-caption); }   /* 角は他のボタン・札と同じ --radius-sm（丸・角・円の3種が1画面に並んでいた） */
.chip[aria-pressed="true"] { color:var(--ink-strong); border-color:var(--ink-strong); background:var(--accent-tint); }
.archive-search { min-height:40px; flex:1 1 220px; width:auto; padding-block:6px; }
.archive-count { margin:0; }
@media(max-width:600px) {
  /* 狭幅: 1 枚目の札の上端を 280px 以内に（R1・DESIGN-v1 §2-1）。会場の chips と件数は畳み、帯と検索を詰める */
  .archive-filters { gap:var(--space-1); margin-block:var(--space-1); }
  .archive-filters .chips:nth-child(2), .archive-count { display:none; }
  .archive-search { min-height:36px; flex-basis:100%; }
  .entitle-host { margin-block:var(--space-1); }
  .entitle-bar { min-height:44px; }                 /* 狭幅: R1（1 枚目の札 ≤ 280px）との折り合い。触り面は 44px（WCAG 2.5.5 AAA）*/
  /* 狭幅: 札の上端 ≤280px（R1）を保つため箱は 40px、触り面は疑似要素で 44px に広げる（raise 1 と R1 の両立） */
  .chip { min-height:40px; position:relative; }
  .chip::before { content:''; position:absolute; inset:-3px 0; }   /* 実測 44px（枠線の内側から測るため -2px では 42px）*/
  .archive-list > .archive-day:first-child { margin-top:var(--space-1); }
  .archive-list .archive-day { margin:var(--space-1) 0; }
  .archive-list .archive-card { margin-block:var(--space-2); }
  .entitle-bar { padding-block:0; }
  .hero.compact.slim .home-title { margin-bottom:0; }   /* 2026-10-10 UX: 16px に落とすと下位の h3（日付）より小さくなる。--fs-h2 の下限 20px のまま */
  .home-visual--reports .home-visual-text { order:-1; }   /* 2026-10-10 UX: 狭幅はサムネイル 5 枚より先に見出し「レポート」を出す */
  .archive-card .archive-summary { -webkit-line-clamp:3; }   /* 狭幅は 3 行（1 枚 ≈ 620px → 短く）。全文は「概要」で読める */
}

/* ── 札（段階 B の .archive-card を引き継ぐ） ──────────────── */
.archive-card { padding:var(--space-3) var(--space-4); }
.archive-card :is(h3,h4) { margin:var(--space-2) 0 var(--space-1); font-size:var(--fs-body); line-height:var(--ap-lh-head); }
.archive-card :is(h3,h4) a { text-decoration:none; color:var(--ink-strong); }
.archive-card :is(h3,h4) a:hover { color:var(--accent-mark); }
.archive-card .when { margin:0; }
.archive-people { display:flex; align-items:center; gap:var(--space-2); margin:0 0 var(--space-2); min-width:0; }
.archive-faces { display:inline-flex; flex:none; }
.archive-faces img { width:32px; height:36px; object-fit:cover; margin-right:-6px; border:1px solid var(--paper); filter:grayscale(1) contrast(1.04); background:var(--surface-warm); }
.archive-people .speakers { margin:0; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.archive-summary { margin:0 0 var(--space-2); color:var(--ink-soft); font-size:var(--fs-body); line-height:var(--lh-caption); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden; }   /* 2026-10-10 UX: 読ませる文なので本文サイズ。4 行で切る（全文は概要の器） */
.archive-card .actions { margin-block:var(--space-2) 0; }
.archive-card .actions > .primary { width:auto; flex:1 1 120px; background:var(--surface-2); color:var(--accent); border:1px solid var(--rule-2); box-shadow:none; }   /* 2026-10-10 UX: 33 個の赤塗りが面になっていた。赤は文字と罫に留める */
.archive-card .actions > .primary:hover, .archive-card .actions > .primary:focus-visible { border-color:var(--accent); color:var(--ink-strong); }   /* 地は --surface-2 のまま（文字を置ける面は 2 まで・preset 注記） */
.archive-card .actions > .primary:active { background:var(--accent-fill); color:var(--on-accent); }
.archive-card .actions > .secondary { flex:0 1 auto; }
.archive-day { margin-top:var(--space-4); margin-bottom:var(--space-2); }
.archive-list > .archive-day:first-child { margin-top:var(--space-2); }
@media(min-width:720px) {
  .archive-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:var(--space-3); align-items:start; }
  .archive-list .archive-day { grid-column:1 / -1; margin-bottom:0; }
  .archive-list .archive-card { margin-block:0; height:100%; display:flex; flex-direction:column; }
  .archive-list .archive-card .actions { margin-top:auto; }
  .archive-list > .empty, .archive-list > button { grid-column:1 / -1; }
}

/* ── 購入の器（dialog.ses の中身） ─────────────────────────── */
.offer-panel { padding-block:calc(var(--space-6) + var(--space-4)) calc(var(--space-4) + env(safe-area-inset-bottom));   /* 左右は session-panel.css が持つ */ display:grid; gap:var(--space-3); }
.offer-head h2 { margin:var(--space-1) 0; }
.ses-meta-line { margin:0; color:var(--brass-soft); letter-spacing:var(--tracking-label); text-transform:uppercase; }
.offer { display:grid; gap:var(--space-1); padding:var(--space-4); border-top:var(--hair); border-bottom:var(--hair); background:var(--surface); }
.offer-amount { font:var(--weight-display) clamp(28px,4vw,40px)/1.1 var(--font-mono); color:var(--ink-strong); font-variant-numeric:tabular-nums; letter-spacing:var(--tracking-head); }
.offer-unit { margin:0; }
.offer-tier { margin-top:var(--space-1); }
.offer-skeleton { min-height:96px; background:linear-gradient(90deg,var(--surface) 25%,var(--surface-warm) 50%,var(--surface) 75%); background-size:200% 100%; animation:offer-shimmer calc(var(--dur-normal) * 6) linear infinite; }
@keyframes offer-shimmer { to { background-position:-200% 0; } }
.offer-closed { color:var(--ink-soft); }
.offer-consent, .offer-pay { margin:0; padding:var(--space-2) 0 0; border-top:0; }
.offer-consent legend, .offer-pay legend { color:var(--ink-strong); }
.check.consent { align-items:flex-start; padding:var(--space-2) 0; border-bottom:var(--hair); font-size:var(--fs-caption); line-height:var(--lh-caption); }
.check.consent input { margin-top:2px; }
.offer-actions .secondary { width:100%; }
@media(prefers-reduced-motion:reduce) { .offer-skeleton, .entitle-dot.wait { animation:none; } }

/* ── 再生頁 ───────────────────────────────────────────────── */
.play-head { position:relative; isolation:isolate; margin:0 calc(-1 * var(--app-side)) var(--space-3); padding:var(--space-4) var(--app-side) var(--space-3); overflow:hidden; }   /* 2026-10-10 polish: 帯は器の端まで伸ばす（側の余白を負のマージンで相殺） */
.play-head-kv { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:50% 38%; opacity:.22; filter:brightness(.6) saturate(.85); pointer-events:none; -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,#000 0,#000 55%,transparent); -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,#000 0,#000 55%,transparent); mask-composite:intersect; }   /* 左右と下を溶かす: 1920 で帯の矩形が箱に見えないように（LP の hero-veil と同じ扱い） */   /* 文字の無い元絵。不透明度 .22 × 明度 .6。veil は置かない（置くと --page-background の階調と食い違い 1920 で帯が箱に見えた）。白 255 の画素でも地は ≈ #373737: 本文 #F2EFE9 と約 10:1・真鍮 #C9AC79 と約 5:1 */
.play-head-inner { position:relative; max-width:none; }   /* 幅は題名（30em）とリード（--ap-measure）が各自で持つ。ここで 60ch に縛ると題名が 2 行に折れた（1280 で実測） */
.play-head-meta { margin:0; display:flex; align-items:center; gap:var(--space-2); font-size:var(--fs-caption); color:var(--brass-soft); letter-spacing:.06em; }   /* .06em は局所値: mono の数字と「・」の並びに --tracking-label(.2em) は広すぎ、0 では詰まる（auditor record） */
.play-head-meta::before { content:''; flex:none; width:24px; height:2px; background:var(--brass-deep); }   /* LP の spot-eyebrow と同じ文法（短い罫＋小さな行）。真鍮は装飾の罫のみ */
.play-title { margin:var(--space-2) 0 0; }
.play-title:focus { outline:none; }
.player-mount { min-height:180px; background:color-mix(in oklch,var(--paper) 82%,var(--lqip)); aspect-ratio:16/9; width:100%; display:grid; place-items:center; }
.player-mount.pl { aspect-ratio:auto; display:block; place-items:normal; }
.play-gate { display:grid; gap:var(--space-3); padding:var(--space-4); text-align:center; max-width:48ch; }
.play-gate p { margin:0; }
.player-status { margin:var(--space-2) 0; display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-1) var(--space-2); }
.player-status > button, .player-status > a { flex:none; }
/* 章バー（2026-10-10 polish・西村さん指示「目次のデザインを更新」）: 再生面の直下に全幅で置き、topbar の直下に sticky。現在地は aria-current="location"（文字を強く・赤の下罫）。
   狭幅は横に流して指で送る（折り返さない・scrollbar は隠す）。広幅は左に Contents の小さな行。副列の下の sticky 縦リストは廃止（1280×800 で最初の画面に入らなかった）。 */
.play-jump { position:sticky; top:calc(var(--app-topbar-h) + env(safe-area-inset-top)); z-index:calc(var(--z-sticky) - 1); display:flex; align-items:stretch; gap:var(--space-3); margin:var(--space-2) calc(-1 * var(--app-side)) 0; padding:0 var(--app-side); background:var(--paper); border-top:var(--hair); border-bottom:var(--hair); }
.play-jump-label { display:none; align-self:center; flex:none; margin:0; color:var(--brass-soft); }
.play-jump-track { display:flex; flex:1 1 auto; min-width:0; gap:0 var(--space-1); overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.play-jump-track[data-overflow="1"] { -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent); }   /* R2: 横に流せるとき右端を溶かして続きがあることを見せる（JS が overflow を測って印を付ける） */
.play-jump-track::-webkit-scrollbar { display:none; }
.play-jump-btn { flex:none; width:auto; min-height:var(--app-touch); padding:var(--space-2) var(--space-2); margin:0; border:0; border-bottom:2px solid transparent; border-radius:0; background:none; color:var(--ink-soft); font-size:var(--fs-caption); line-height:var(--lh-caption); white-space:nowrap; scroll-snap-align:start; }
.play-jump-btn[hidden] { display:none; }
.play-jump-btn:hover, .play-jump-btn:focus-visible { color:var(--ink-strong); background:none; }
.play-jump-btn:focus-visible { outline:2px solid var(--focus); outline-offset:-2px; }
.play-jump-btn[aria-current="location"] { color:var(--ink-strong); font-weight:700; border-bottom-color:var(--accent); }
@media(min-width:1024px) { .play-jump-label { display:block; } .play-jump-btn { padding-inline:var(--space-3); font-size:var(--app-fs-input); }
  /* 再生面は縮めない（2026-10-10 西村さん指示。1280×800 で章バーが最初の画面に入らないことは許容） */
.play-pt-all { width:auto; min-height:36px; margin:0 0 var(--space-2); font-size:var(--fs-caption); }
.player-status:empty { display:none; }
.play-neighbours { display:grid; gap:var(--space-2); margin-block:var(--space-4); }

/* ── ギャラリー ────────────────────────────────────────────── */
.gallery-grid { list-style:none; margin:var(--space-2) 0 var(--space-4); padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:var(--space-2); }
.gallery-item { display:block; width:100%; padding:0; border:0; border-radius:0; background:var(--lqip); aspect-ratio:3/2; overflow:hidden; cursor:zoom-in; }
.gallery-item img { width:100%; height:100%; object-fit:cover; display:block; }
.gallery-session { margin:var(--space-5) 0 0; font-size:var(--fs-body); }
.gallery-session + p { margin-top:0; }

/* ライトボックス（確認サイト archive.css の .ar-lb を MEET のトークンで） */
dialog.ar-lb { position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:var(--paper); color:var(--ink); display:none; overflow:hidden; box-shadow:none; }
dialog.ar-lb[open] { display:grid; grid-template-rows:1fr; align-items:center; justify-items:center; }
dialog.ar-lb::backdrop { background:color-mix(in srgb,var(--paper) 72%,transparent); }
.ar-lb-fig { margin:0; display:grid; justify-items:center; gap:var(--space-2); width:100%; }
.ar-lb-img { display:block; max-width:100vw; max-height:calc(100dvh - 96px); width:auto; height:auto; object-fit:contain; background:var(--lqip); }
.ar-lb-foot { display:flex; align-items:baseline; justify-content:center; gap:var(--space-4); max-width:100%; padding:0 var(--space-8); }
.ar-lb-cap { margin:0; font-size:var(--fs-caption); color:var(--ink-soft); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ar-lb-num { margin:0; font-family:var(--font-mono); font-size:var(--fs-label); color:var(--ink-mute); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ar-lb-x, .ar-lb-nav { position:absolute; z-index:2; width:var(--app-touch); height:var(--app-touch); min-width:0; min-height:0; padding:0; margin:0; display:inline-flex; align-items:center; justify-content:center; color:var(--ink-strong); background:var(--paper); border:var(--hair); border-radius:var(--radius-sm); cursor:pointer; font-size:var(--fs-body); line-height:1; }
.ar-lb-x { top:calc(var(--space-3) + env(safe-area-inset-top)); right:var(--space-3); }
.ar-lb-nav { top:50%; transform:translateY(-50%); }
.ar-lb-nav:active { transform:translateY(-50%) scale(.96); }
.ar-lb-prev { left:var(--space-3); }
.ar-lb-next { right:var(--space-3); }
.ar-lb-nav::before { content:""; width:14px; height:14px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.ar-lb-prev::before { transform:rotate(180deg); }
@media(hover:hover) and (pointer:fine) { .ar-lb-x:hover, .ar-lb-nav:hover { border-color:var(--accent); } .gallery-item:hover img { filter:brightness(1.06); } }
@media(max-width:640px) { .ar-lb-foot { padding:0 var(--space-6); } }

/* ── レポート ─────────────────────────────────────────────── */
.report-row { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding:var(--space-3) 0; border-bottom:var(--hair); }
.report-row > div:first-child { min-width:0; flex:1 1 auto; }
.report-row p { margin:0; }
.report-links { display:flex; gap:var(--space-2); flex:none; }
.report-links .secondary, .report-row > .secondary { min-height:var(--app-touch); padding-inline:var(--space-3); }
.card .report-row:last-child { border-bottom:0; padding-bottom:0; }

/* ── サイドバーの外部印 ─────────────────────────────────────── */
.sidebar nav a .ext { color:var(--brass-soft); font-size:var(--fs-caption); }
/* ホーム: レポート節とアーカイブの間の区切り（2026-10-10 西村さん指示）。.home-visual:first-child の強い罫と同じ太さ */
.home-divider { border:0; border-top:var(--border-w-strong) solid var(--rule-strong); margin:var(--space-4) 0 var(--space-3); }

:root { --meet-css-v:21; --meet-fs-h3:clamp(20px,1.8vw,24px); }   /* --meet-fs-h3: 正本に --fs-h3 が無いので局所名（題名 30px に対し節見出しを一段下げる・UX 検証 2026-10-10） */   /* 版の印: archive-embed.js が「新しい CSS が読めているか」を見る（SHELL の CSS が古いまま ON_DEMAND の JS だけ新しい初回のため） */
/* ── ホームの KV と認識の帯（2026-10-10 西村さん指示）。公式 KV（題字入り）は拡大しない: 表示幅 ≤ 画像幅（srcset 960/1280/1920・元 2600）。
   写真の上に文字を載せない。帯は KV の下に地で持つ。箱でなく罫。 ── */
.home-kv { margin:var(--space-2) 0 var(--space-3); }   /* 下の罫は次の節（.home-visual:first-child の強い罫）が持つ。二重にしない */
.home-kv-pic { background:var(--surface); }
.home-kv-pic img { display:block; width:100%; height:auto; aspect-ratio:2600/1246; object-fit:contain; }
.home-kv-band { padding:var(--space-3) 0 0; max-width:var(--ap-measure); }
.home-kv-band .home-eyebrow { margin:0 0 var(--space-1); }
.home-kv-title { margin:0 0 var(--space-2); font-size:var(--fs-h2); line-height:var(--ap-lh-head); font-weight:var(--weight-display); line-break:strict; word-break:auto-phrase; text-wrap:pretty; }
.home-kv-text { margin:0 0 var(--space-3); color:var(--ink-soft); }
.home-kv-links { display:flex; flex-wrap:wrap; gap:var(--space-1); }
.home-kv-links a { width:auto; min-height:var(--app-touch); padding-inline:var(--space-3); }
.home-archive-head .home-eyebrow { margin-bottom:var(--space-1); }
.home-archive-head .home-title { font-size:var(--fs-h2); }
@media(max-width:600px) {
  .home-kv { margin-top:0; padding-bottom:var(--space-2); }
  .home-kv-band { padding-top:var(--space-2); }
  .home-kv-title { font-size:var(--fs-h3, clamp(20px,2.2vw,26px)); }
  .home-kv-text { font-size:var(--fs-caption); line-height:var(--lh-caption); }
  .home-kv-links { display:grid; grid-template-columns:repeat(3,1fr); }
  .home-kv-links a { min-height:40px; padding-inline:var(--space-2); justify-content:center; }
  .home-archive-head .home-eyebrow { display:block; }
}

/* ── 札の作り直し（2026-10-10）: 場面写真を上に・枠線を外し面だけ・題名を一段大きく。内容は不変。 ── */
.archive-card { border:0; background:var(--surface); padding:0 var(--space-4) var(--space-3); overflow:hidden; }
.archive-card > .archive-photo { display:block; margin:0 calc(-1 * var(--space-4)) var(--space-3); background:var(--lqip); }
.archive-card > .archive-photo img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; filter:saturate(.94); transition:filter var(--dur-normal) var(--ease); }
.archive-card > .when { padding-top:var(--space-3); }
.archive-card > .archive-photo + .when { padding-top:0; }
.archive-card :is(h3,h4) { font-size:clamp(17px,1.25vw,19px); font-weight:var(--weight-display); margin:var(--space-1) 0 var(--space-2); }
.archive-card .archive-summary { margin-bottom:var(--space-3); }
.archive-card .actions { margin-top:auto; }
@media(hover:hover) and (pointer:fine) { .archive-card:hover > .archive-photo img { filter:saturate(1) brightness(1.05); } .archive-card:hover :is(h3,h4) a { color:var(--accent-mark); } }
@media(min-width:720px) { .archive-list { grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr)); gap:var(--space-4) var(--space-3); } }
@media(max-width:600px) { .archive-card { padding-inline:var(--space-3); } .archive-card > .archive-photo { margin-inline:calc(-1 * var(--space-3)); } .archive-card > .archive-photo img { aspect-ratio:16/9; } .archive-list .archive-card { margin-block:var(--space-3); } }   /* 狭幅は 16:9 に切って札を短く（33 枚の縦積み） */

/* ── 再生頁のフル版（2026-10-10）: 頭 → 再生面 → 2 列（広幅 7:5・狭幅は主列が先）。節は eyebrow（mono・真鍮）＋h3。論点は罫で区切る。 ── */
.play-head .play-title { font-size:clamp(24px,2.8vw,34px); font-weight:var(--weight-display); line-height:var(--ap-lh-head); max-width:30em; }
.play-lead { margin:var(--space-2) 0 0; color:var(--ink-soft); max-width:46em; }
.play-speakers-line { margin:var(--space-1) 0 0; color:var(--ink-soft); }   /* R3: 帯の明るい側（L≈.034）でも 7.3:1（ink-mute だと 4.1:1 で AA を割りうる） */
.play-body { display:grid; gap:var(--space-5); margin-top:var(--space-5); align-items:start; }
.play-main, .play-side { min-width:0; }
.play-sec { padding-top:var(--space-4); border-top:var(--hair); margin-bottom:var(--space-6); }   /* 2026-10-10 polish: 節の間を一段広く（LP の縦のリズムに寄せる） */
.play-side .play-sec { padding-top:var(--space-3); margin-bottom:var(--space-5); }
/* 副列の先頭: 題字入り公式 KV の札（無加工・拡大しない）。押すと公式サイト（新しいタブ） */
.play-kv { display:block; margin:0 0 var(--space-4); color:var(--ink-soft); text-decoration:none; border-bottom:var(--hair); padding-bottom:var(--space-3); }
.play-kv img { display:block; width:100%; height:auto; aspect-ratio:2600/1246; background:var(--surface); }
.play-kv-cap { display:block; margin-top:var(--space-2); font-size:var(--fs-caption); line-height:var(--lh-caption); }
.play-kv-cap strong { color:var(--ink-strong); font-weight:700; }
.play-kv-post::after { content:' \2197'; font-family:var(--font-mono); color:var(--brass-soft); }
@media(hover:hover) and (pointer:fine) { .play-kv:hover { color:var(--ink-strong); } .play-kv:hover img { opacity:.9; } }
.play-kv:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.play-main > .play-sec:first-child { border-top:var(--border-w-strong) solid var(--rule-strong); }
.play-eyebrow { display:flex; gap:var(--space-2); align-items:center; margin:0 0 var(--space-2); color:var(--brass-soft); letter-spacing:var(--tracking-label); text-transform:uppercase; }
.play-eyebrow::before { content:''; flex:none; width:24px; height:2px; background:var(--brass-deep); }   /* 2026-10-10 polish: 短い罫＋小さな行（LP .spot-eyebrow の文法。真鍮は装飾の罫のみ） */
.play-side .play-eyebrow::before { width:16px; }
.play-eyebrow .mono { color:var(--ink-mute); letter-spacing:0; }
.play-sec h3 { margin:0 0 var(--space-2); font-size:var(--meet-fs-h3); font-weight:var(--weight-display); line-height:var(--ap-lh-head); }
.play-side .play-sec h3 { font-size:var(--app-fs-input); }
.play-lead-text { color:var(--ink); max-width:var(--ap-measure); }
.play-overview { color:var(--ink-mute); max-width:var(--ap-measure); }
.play-quote-label { margin:var(--space-3) 0 var(--space-1); color:var(--brass-soft); letter-spacing:var(--tracking-label); text-transform:uppercase; }
.play-quote { margin:0; padding:var(--space-1) 0 var(--space-1) var(--space-3); border-left:2px solid var(--accent); font-weight:700; color:var(--ink-strong); max-width:var(--ap-measure); }
.play-report-status { margin:var(--space-3) 0; }
.play-points { list-style:none; margin:0; padding:0; counter-reset:pt; }
.play-points > li { counter-increment:pt; display:grid; grid-template-columns:2.2em minmax(0,1fr); column-gap:var(--space-2); padding:var(--space-3) 0; border-bottom:var(--hair); }
.play-points > li::before { content:counter(pt,decimal-leading-zero); font:700 var(--fs-caption)/1.5 var(--font-mono); color:var(--brass-soft); padding-top:3px; }
.play-points > li > * { grid-column:2; }
.play-pt-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--space-1) var(--space-2); }
.play-pt-label { font-weight:700; color:var(--ink-strong); line-height:var(--ap-lh-head); flex:1 1 16em; min-width:0; text-wrap:pretty; word-break:auto-phrase; line-break:strict; }
.play-tag { font-size:var(--fs-label); color:var(--ink-mute); border:1px solid var(--rule-2); border-radius:var(--radius-sm); padding:0 6px; line-height:1.7; }
.play-time { display:inline-flex; align-items:center; min-height:32px; font-size:var(--fs-caption); color:var(--accent); text-decoration:none; border-bottom:1px solid var(--accent); padding:4px 2px; }   /* 触り面 32px（a11y 推奨 B） */
.play-time:hover { color:var(--ink-strong); border-bottom-color:var(--ink-strong); }
.play-pt-claim { margin:var(--space-1) 0 0; color:var(--ink-soft); font-size:var(--fs-body); line-height:var(--lh-body); max-width:var(--ap-measure); }   /* 主列の本文なので本文の大きさ（design-quality-auditor 1） */
.play-who { margin:0; color:var(--ink-mute); }
.play-src { margin:var(--space-1) 0 0; }
.play-src a { color:var(--ink-soft); overflow-wrap:anywhere; display:inline-block; padding:4px 0; }   /* 触り面 ≥24px（WCAG 2.5.8） */
.play-prose { color:var(--ink); max-width:var(--ap-measure); }
/* 「この回のまとめ」の折りたたみ（2026-10-10 西村さん指示: 初期は閉じ・見出しはそのまま・段落ごとの小見出し）。
   h3 の中の button が開閉（WAI-ARIA disclosure・aria-expanded）。見出しの文字は h3 の寸法を継承し、右端に「開く／閉じる」の印 */
.play-summary-toggle { display:flex; align-items:baseline; gap:var(--space-2); width:100%; margin:0; padding:0; border:0; border-radius:0; background:none; text-align:left; font:inherit; color:inherit; letter-spacing:inherit; line-height:inherit; cursor:pointer; }
.play-summary-toggle::after { content:'開く'; content:'開く' / ''; margin-left:auto; flex:none; font:500 var(--fs-caption)/1.5 var(--font-mono); letter-spacing:0; color:var(--ink-soft); border-bottom:1px solid var(--rule-2); }
.play-summary-toggle[aria-expanded="true"]::after { content:'閉じる'; content:'閉じる' / ''; }
.play-summary-toggle:hover::after, .play-summary-toggle:focus-visible::after { color:var(--ink-strong); border-bottom-color:var(--ink-strong); }
.play-summary-toggle:hover, .play-summary-toggle:focus-visible { background:none; color:var(--ink-strong); }
.play-summary-toggle:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.play-summary-hint { margin:0; }
.play-summary-body { margin-top:var(--space-3); max-width:var(--ap-measure); }
.play-summary-h { margin:var(--space-4) 0 var(--space-1); padding-left:var(--space-3); border-left:2px solid var(--brass-deep); font-size:var(--fs-body); font-weight:700; line-height:var(--ap-lh-head); color:var(--ink-strong); letter-spacing:var(--tracking-head); }
.play-summary-h:first-child { margin-top:0; }
.play-summary-body > .play-prose { margin:0 0 var(--space-3); max-width:none; }
.play-summary-note { margin-top:var(--space-2); }
.play-people { display:grid; gap:0; }
.play-person { display:grid; grid-template-columns:48px minmax(0,1fr); gap:var(--space-2) var(--space-3); padding:var(--space-2) 0; border-bottom:var(--hair); }
.play-person-ph { width:48px; aspect-ratio:1/1.12; background:var(--surface-warm); overflow:hidden; }
.play-person-ph img { width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.04); display:block; }
.play-person-name { font-weight:700; color:var(--ink-strong); line-height:var(--ap-lh-head); display:flex; flex-wrap:wrap; gap:0 var(--space-2); align-items:baseline; }
.play-person-en { font-size:var(--fs-label); font-weight:400; color:var(--ink-mute); }
.play-person-org { margin:2px 0 0; }
.play-person-bio { margin-top:var(--space-1); }
.play-person-bio summary { cursor:pointer; font-size:var(--fs-caption); color:var(--ink-soft); min-height:32px; display:flex; align-items:center; list-style:none; }
.play-person-bio summary::after { content:'+' / ''; margin-left:var(--space-2); color:var(--ink-mute); font-family:var(--font-mono); }   /* 開閉の手がかり（a11y 推奨 A） */
.play-person-bio[open] summary::after { content:'\2212' / ''; }
.play-person-bio p { margin:var(--space-1) 0 0; }
.play-side .archive-strip { margin-block:var(--space-2); }
.play-side .actions { margin-block:var(--space-2) 0; }
.play-side .actions > .secondary { flex:1; }
.play-neighbours { margin-block:var(--space-2) 0; }
@media(min-width:1280px) {   /* 本文幅 ≈ 960px から 2 列（1024px ではサイドバーを引いて主列が約 400px になり窮屈） */
  /* 2026-10-10 版面の再設計（西村さん指示「右側の余白を活用」）: 実測 1280〜1920 で主列 504px＝和文約 30 字・副列 1,150px に対し主列 7,000px 超。
     (1) #play だけ器を 1,200px へ（他頁は 960 のまま。:has 非対応は 960 のまま崩れない）
     (2) 主列 1fr ＋ 副列 368px 固定 → 器 1,200 で主列 ≈ 736px ＝ 17px 本文で約 43 字（40〜45 の内側）
     (3) 副列は内容を増やさず、目次（.play-jump・高さ約 250px）を副列の下で sticky にして右列の空きに目次を置く（副列全体の sticky は前回外した: 1,574px が面より高い） */
  .shell:has(.play-body) { max-width:1200px; }
  /* 1280〜1439 は左の sidebar（--sidebar-width 288px）を引いた残りが 992px しかない。副列を 240px に絞って主列 ≈ 672px（16px 本文で約 42 字）。1440 以上で副列 368px */
  .play-body { grid-template-columns:minmax(0,1fr) 240px; gap:var(--space-5); }   /* 2026-10-10 polish: 目次は章バー（play-body の外・全幅）へ。grid-area は不要 */
  .play-main, .play-head { --ap-measure:46em; }   /* 60ch は和文で約 30 字に解決されるため、主列だけ em で上限を置き直す（46em・列幅 736px が先に効いて約 43 字）。グローバルの --ap-measure は触らない（fable 設計レビュー 発見①） */
}
@media(min-width:1440px) { .play-body { grid-template-columns:minmax(0,1fr) 368px; gap:var(--space-5) var(--space-6); } }
@media(max-width:600px) { .play-sec h3 { font-size:var(--meet-fs-h3); } .play-body { gap:var(--space-3); margin-top:var(--space-4); } .play-pt-label { flex-basis:100%; } }   /* --fs-h3 の fallback は正本 ds/tokens.css と同値（MEET の写しには未収録） */
h3.archive-day { font-size:var(--fs-h2); }   /* ホームでは日付を h3（アーカイブ h2 の下）に下げる。見た目は同じ */
@media(max-width:600px) { h3.archive-day { font-size:var(--app-fs-input); } }   /* 狭幅: H2（20px）より一段下げて同寸にしない（再採点 raise 2）。上の規則より後に置く */
/* 論点の「構成・詳細」（2026-10-10 西村さん指示）: 開閉で読む。summary は副ボタンの見た目に揃える */
.play-pt-more { margin:var(--space-2) 0 0; max-width:var(--ap-measure); }
.play-pt-more > summary { display:inline-flex; align-items:center; gap:var(--space-1); cursor:pointer; list-style:none; font-size:var(--fs-caption); line-height:1.5; color:var(--ink-soft); padding:6px 12px; border:var(--hair); border-radius:var(--radius-sm); background:var(--secondary-background); }
.play-pt-more > summary::-webkit-details-marker { display:none; }
.play-pt-more > summary::after { content:"＋" / ""; color:var(--brass-soft); }
.play-pt-more[open] > summary::after { content:"－" / ""; }
.play-pt-more > summary:hover, .play-pt-more > summary:focus-visible { color:var(--ink-strong); border-color:var(--rule-strong); }
.play-pt-beats { margin:var(--space-2) 0 0; padding-left:1.4em; color:var(--ink-strong); font-size:var(--fs-body); line-height:var(--lh-body); }
.play-pt-beats > li { margin:0 0 var(--space-1); }
.play-pt-detail { margin:var(--space-2) 0 0; color:var(--ink-soft); font-size:var(--fs-body); line-height:var(--lh-body); }
/* ── #play リッチ版（2026-10-10 西村さん指示: 確認サイトのアーカイブ個別頁〔トピック札・論点スライドイン・関連するセッション〕を組み込む）。
   移植元 esse-sense-forum-lp feat/review-site-auth participant/app/archive.css（.ar-topic / .ar-point / .ar-rel / .ar-pane-*）。
   ★値はすべて MEET の tokens.css。純黒を置かない。角丸は操作だけ。箱でなく左罫（真鍮は装飾の罫のみ・文字に使わない）。 ── */
.play-topics, .play-rels { list-style:none; margin:var(--space-2) 0 0; padding:0; display:grid; gap:var(--space-2); }
.play-topics > li, .play-rels > li { min-width:0; }
.play-topic, .play-rel { display:grid; gap:var(--space-1); width:100%; min-height:0; padding:var(--space-3); margin:0; text-align:left; font:inherit; color:var(--ink); background:var(--surface); border:var(--hair); border-left:var(--border-w-strong) solid var(--brass-deep); border-radius:0; cursor:pointer; text-decoration:none; -webkit-appearance:none; appearance:none; }
.play-rel[data-ready="0"] { border-left-color:var(--rule); }
.play-topic:focus-visible, .play-rel:focus-visible, .play-pt-open:focus-visible, .pane-at:focus-visible, .pane-jump:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.play-topic-head, .play-rel-head { display:flex; align-items:flex-start; gap:var(--space-2); }
.play-topic-label, .play-rel-title { margin:0; flex:1 1 auto; font-size:var(--fs-body); font-weight:700; line-height:var(--ap-lh-head); color:var(--ink-strong); letter-spacing:var(--tracking-head); }
.play-more { flex:none; width:14px; height:14px; margin-top:4px; background:var(--ink-mute); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.play-topic-def, .play-rel-meta, .play-rel-pending { margin:0; max-width:none; }
.play-topic-def { font-size:var(--fs-caption); line-height:var(--lh-caption); color:var(--ink-soft); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
.play-rel-why { display:flex; flex-wrap:wrap; gap:var(--space-1); }
.play-rel-meta { font-size:var(--fs-label); color:var(--ink-mute); font-variant-numeric:tabular-nums; }
.play-rel-pending { font-size:var(--fs-label); color:var(--brass-soft); letter-spacing:var(--tracking-label); }
@media(min-width:720px) { .play-topics, .play-rels { grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); } }
@media(hover:hover) and (pointer:fine) { .play-topic:hover, .play-rel:hover { background:var(--surface-warm); border-left-color:var(--accent); } .play-topic:hover .play-topic-label, .play-rel:hover .play-rel-title { color:var(--accent-mark); } }
.play-pt-open { width:auto; min-height:32px; padding:4px 10px; margin:0; font-size:var(--fs-caption); line-height:1.5; color:var(--ink-soft); background:var(--secondary-background); border:var(--hair); border-radius:var(--radius-sm); cursor:pointer; }
.play-pt-open::after { content:"→"; margin-left:var(--space-1); color:var(--brass-soft); }
.play-pt-open:hover { color:var(--ink-strong); border-color:var(--rule-strong); }
/* スライドインの中身（器は session-panel.css の dialog.ses） */
.pane { padding:var(--space-5) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom)); }
.pane-kicker { margin:0; color:var(--brass-soft); letter-spacing:var(--tracking-label); text-transform:uppercase; }
.pane-title { margin:var(--space-2) 0 0; font-size:var(--fs-h2); font-weight:var(--weight-display); line-height:var(--ap-lh-head); }
.pane-claim { margin:var(--space-3) 0 0; max-width:none; font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink-soft); }
.pane-role { margin:var(--space-1) 0 0; max-width:none; font-size:var(--fs-label); color:var(--brass-soft); }
.pane-tags { margin-top:var(--space-3); display:flex; flex-wrap:wrap; gap:var(--space-1); }
.pane-row { margin-top:var(--space-4); padding-top:var(--space-3); border-top:1px solid var(--rule-soft); display:flex; gap:var(--space-3); align-items:baseline; }
.pane-label { flex:none; font:700 var(--fs-micro)/1.6 var(--font-mono); letter-spacing:var(--tracking-label); color:var(--ink-mute); }
.pane-value { font-size:var(--fs-caption); line-height:var(--lh-caption); color:var(--ink-soft); }
.pane-jump { margin:var(--space-4) 0 0; width:100%; min-height:var(--app-touch); padding:var(--space-2) var(--space-4); font-family:var(--font-mono); font-size:var(--fs-caption); font-weight:700; color:var(--on-accent); background:var(--accent-fill); border:0; border-radius:var(--radius-sm); cursor:pointer; }
.pane-jump:hover { background:var(--accent-fill-hover); }
.pane-h { margin:var(--space-5) 0 0; padding-bottom:var(--space-2); border-bottom:var(--hair); font:700 var(--fs-label)/1.5 var(--font-mono); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--brass-soft); }
.pane-note { margin:var(--space-2) 0 0; max-width:none; font-size:var(--fs-label); line-height:var(--lh-caption); color:var(--ink-mute); }
.pane-at { flex:none; width:auto; min-width:4.2em; min-height:32px; margin:0; padding:0 var(--space-2); font:500 var(--fs-label)/1 var(--font-mono); font-variant-numeric:tabular-nums; color:var(--accent-mark); background:none; border:1px solid var(--rule); border-radius:var(--radius-pill); cursor:pointer; }
.pane-at:hover { background:var(--accent-tint); }
.pane-steps { list-style:none; margin:var(--space-3) 0 0; padding:0; display:grid; gap:var(--space-3); }
.pane-step { position:relative; padding-left:var(--space-5); }
.pane-step::before { content:""; position:absolute; left:11px; top:26px; bottom:-14px; width:1px; background:var(--rule); }
.pane-step:last-child::before { display:none; }
.pane-step-head { display:flex; align-items:center; gap:var(--space-2); }
.pane-step-n { position:absolute; left:0; top:0; width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:var(--accent-fill); color:var(--on-accent); font-size:var(--fs-micro); font-weight:700; }
.pane-step-label { margin:0; flex:1 1 auto; font-size:var(--fs-caption); font-weight:700; line-height:var(--ap-lh-head); color:var(--ink-strong); }
.pane-step-text { margin:var(--space-1) 0 0; max-width:none; font-size:var(--fs-caption); line-height:var(--lh-caption); color:var(--ink-soft); }
.pane-gl { margin:var(--space-3) 0 0; display:grid; gap:var(--space-1) 0; }
.pane-gl-term { display:flex; align-items:center; gap:var(--space-2); margin-top:var(--space-3); font-size:var(--fs-caption); font-weight:700; color:var(--ink-strong); }
.pane-gl-text { margin:0; font-size:var(--fs-caption); line-height:var(--lh-caption); color:var(--ink-soft); }
.pane-gl-src, .pane-gl-basis { margin-left:var(--space-2); font-size:var(--fs-micro); font-weight:700; letter-spacing:var(--tracking-label); }
.pane-gl-src { color:var(--brass-soft); }
.pane-gl-basis { color:var(--ink-mute); }
.pane-said { list-style:none; margin:var(--space-2) 0 0; padding:0; display:grid; gap:var(--space-1); }
.pane-said-item { display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--space-3); align-items:start; padding:var(--space-2) 0; border-top:1px solid var(--rule); }
.pane-said-text { margin:0; max-width:none; font-size:var(--fs-caption); line-height:var(--lh-caption); color:var(--ink-soft); }
/* #play の写真はその場でポップアップ（2026-10-10 西村さん指示）: 札の中の img をボタンで包む */
.archive-strip > .play-photo { display:block; padding:0; border:0; background:none; cursor:pointer; border-radius:var(--radius-sm); overflow:hidden; min-width:0; }
.archive-strip > .play-photo > img { display:block; width:100%; height:auto; }
.archive-strip > .play-photo:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
@media (hover: hover) and (pointer: fine) { .archive-strip > .play-photo:hover > img { opacity:.88; } }
/* 2026-10-10 西村さん指示: 右サイドは追従する。章バー（約 50px）の下に貼り付き、画面より高いときは副列の中だけを送る */
@media(min-width:1280px) {
  .play-side { position:sticky; top:calc(var(--app-topbar-h) + env(safe-area-inset-top) + 50px + var(--space-3)); max-height:calc(100vh - var(--app-topbar-h) - env(safe-area-inset-top) - 50px - var(--space-3)); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--rule-strong) transparent; padding-right:var(--space-1); }
}