/* §29・§30：承認のカード・差分・アクティビティの共通の見た目。PC は右の Drawer、スマホは全画面のレビューと Bottom Sheet。
   色は shell.css のトークンだけを使う（直書きしない・theme-tokens.test.js ⑦が見る）。釦は 44px 以上、320px で横にはみ出さない。 */
.fr-host { position: fixed; inset: 0; z-index: 60; background: color-mix(in srgb, var(--ink) 32%, transparent); }
.fr-panel { position: absolute; background: var(--surface); color: var(--ink); display: flex; flex-direction: column;
  box-sizing: border-box; max-width: 100vw; overflow-x: hidden; }
.fr-drawer { top: 0; right: 0; bottom: 0; width: 480px; box-shadow: -8px 0 24px color-mix(in srgb, var(--ink) 12%, transparent); }
.fr-fullscreen { inset: 0; width: 100vw; }
.fr-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px;
  border-bottom: 1px solid var(--rule); }
.fr-panel-head h2 { font-size: 18px; margin: 0; overflow-wrap: anywhere; }
.fr-panel-body { flex: 1; overflow-y: auto; padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
/* 全画面では、切り欠きの下に見出し・× を潜らせない（#434 独立レビュー・消した #apDrawer にはあった） */
.fr-fullscreen .fr-panel-head { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
.fr-sheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 80vh; overflow-y: auto; box-sizing: border-box;
  background: var(--surface); border-radius: 16px 16px 0 0; padding: 8px 16px 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
/* PC では理由の窓を Drawer の列の中に出す（画面の下いっぱいに広げない） */
.fr-sheet.fr-in-drawer { left: auto; right: 0; width: 480px; max-width: 100vw; background: var(--surface); }
.fr-sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--rule); margin: 4px auto 8px; }
.fr-card { border: 1px solid var(--rule); border-radius: 12px; padding: 16px; margin: 0 0 12px; box-sizing: border-box;
  max-width: 100%; overflow-wrap: anywhere; }
.fr-head { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.fr-risk[data-level="high"] { color: var(--bad); font-weight: 600; }
.fr-items, .fr-detail, .fr-preview { margin: 8px 0; }
.fr-row { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 4px 12px; padding: 4px 0; }
.fr-row dt { color: var(--muted); font-size: 13px; }
.fr-row dd { margin: 0; min-width: 0; }
.fr-unknown { color: var(--muted); font-style: italic; }
.fr-note, .fr-why-not { color: var(--bad); font-size: 13px; }
.fr-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.fr-btn, .fr-link { min-height: 44px; min-width: 44px; padding: 0 16px; border-radius: 22px; font: inherit; cursor: pointer;
  border: 1px solid var(--rule); background: var(--surface); color: inherit; }
.fr-primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.fr-quiet { background: transparent; }
.fr-btn[disabled], .fr-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.fr-btn:focus-visible, .fr-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.fr-more summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.fr-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.fr-more pre, .fr-detail pre { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; margin: 0; }
.fr-lines { list-style: none; padding: 0; margin: 0; }
.fr-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.fr-line .fr-what { flex: 1 1 12em; min-width: 0; overflow-wrap: anywhere; }
.fr-line time, .fr-actor, .fr-status { font-size: 13px; color: var(--muted); }
.fid-diff .fd-row { padding: 6px 0; border-bottom: 1px dashed var(--rule); }
.fid-diff .fd-label { font-size: 13px; color: var(--muted); }
.fid-diff .fd-ba { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.fid-diff .fd-before { text-decoration: line-through; color: var(--muted); }
.fid-diff ins { background: var(--ok-soft); text-decoration: none; }
.fid-diff del { background: var(--bad-soft); }
.fid-diff .fd-cond { list-style: none; padding: 0; margin: 4px 0; }
@media (max-width: 768px) {
  .fr-drawer { width: 100vw; }
  .fr-sheet.fr-in-drawer { left: 0; width: 100vw; }
  .fr-row { grid-template-columns: minmax(0, 1fr); }
  .fr-actions .fr-btn { flex: 1 1 100%; }
}