/* podcast-clipper ポータルの見た目（暫定）。
   Designer の design_spec.md が届いたら、このファイルだけを差し替えれば済むよう
   HTML 側は pc- 接頭辞のクラスだけで組んである。外部フォント・CDN は使わない。 */

:root {
  /* サイドバーの幅（レイアウト値。色トークンではないのでブリッジ制約の対象外） */
  --pc-nav-w: 224px;
  --pc-nav-w-collapsed: 64px;
  --pc-bg: #f6f7f9;
  --pc-surface: #ffffff;
  --pc-line: #e2e5ea;
  --pc-text: #1c2027;
  --pc-muted: #667085;
  --pc-accent: #2f6df6;
  --pc-adopt: #17916b;
  --pc-hold: #b8811a;
  --pc-reject: #c0483f;
  --pc-radius: 12px;
  --pc-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .04);
}

/* ---- トークンブリッジ（2026-08-15）----
   timeline.css は design_spec 系の --color-* / --space-* を参照するが、顧客UIの地の色は
   上の --pc-* 系。これが未定義だと、それを使った宣言は CSS 仕様上 invalid at
   computed-value time になり、プロパティが初期値に落ちる。実際
   **帯・トラック・再生位置がすべて透明**になり、波形とラベル文字だけが浮いていた。

   ここで橋渡しする。web/styles.css の :root を丸ごと持ち込まないこと（顧客UIの配色が
   管理画面の紫系に変わってしまう）。--color-* を参照しているのは timeline.css だけなので、
   影響はタイムライン内部に閉じる。**app.css の他の箇所で --color-* を使わないこと。**
   使うと管理画面と値が食い違う。 */
:root {
  --color-primary: var(--pc-accent);
  --color-primary-dark: #2559d0;
  --color-primary-tint: #eef4ff;
  --color-accent: var(--pc-hold);
  --color-accent-tint: #FFFBEB;   /* design_spec §5 の正式値（Designer が 2026-08-15 に追加） */
  --color-bg: var(--pc-surface);
  --color-bg-secondary: #fafbfc;
  --color-bg-tertiary: #f0f2f5;
  --color-text-primary: var(--pc-text);
  --color-text-secondary: var(--pc-muted);
  --color-text-tertiary: #8b93a3;
  --color-border: var(--pc-line);
  --color-neutral: var(--pc-muted);      /* 削除予定の帯の枠線 */
  --font-size-caption: 12.5px;
  --font-weight-semibold: 600;
  --radius-sm: 8px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --shadow-card-hover: 0 4px 12px rgba(16, 24, 40, .12);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--pc-bg);
  color: var(--pc-text);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--pc-accent); }

/* ---- 骨格 ---- */

.pc-header {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 24px;
  background: var(--pc-surface);
  border-bottom: 1px solid var(--pc-line);
}
.pc-header__brand {
  font-weight: 700; font-size: 15px; letter-spacing: .02em;
  /* ブランドガイドライン（design_spec §8-1）どおり primary。以前は無彩色だった */
  color: var(--pc-accent); text-decoration: none;
}
.pc-nav { margin-left: auto; display: flex; align-items: center; gap: 18px; font-size: 13px; }
.pc-nav__user { color: var(--pc-muted); }
.pc-nav__link { color: var(--pc-muted); text-decoration: none; }
.pc-nav__link:hover { color: var(--pc-accent); }

.pc-main { max-width: 960px; margin: 0 auto; padding: 28px 20px 72px; }
.pc-footer {
  max-width: 960px; margin: 0 auto; padding: 0 20px 40px;
  display: flex; gap: 20px; color: var(--pc-muted); font-size: 12px;
}

.pc-card {
  background: var(--pc-surface);
  border: 1px solid var(--pc-line);
  border-radius: var(--pc-radius);
  box-shadow: var(--pc-shadow);
  padding: 28px 30px;
  margin-bottom: 20px;
}
.pc-card--narrow { max-width: 460px; margin-left: auto; margin-right: auto; }

.pc-title { font-size: 22px; margin: 0 0 10px; line-height: 1.5; }
.pc-lead { margin: 0 0 8px; font-size: 15px; }
.pc-body { margin: 0 0 12px; color: var(--pc-muted); font-size: 14px; }
.pc-note { margin: 14px 0 0; color: var(--pc-muted); font-size: 12.5px; }
.pc-eyebrow { margin: 0 0 10px; font-size: 12px; color: var(--pc-muted); letter-spacing: .08em; }
.pc-eyebrow a { text-decoration: none; }
.pc-empty { color: var(--pc-muted); font-size: 14px; }
.pc-list { margin: 8px 0 16px; padding-left: 20px; font-size: 14px; }
.pc-code, code {
  background: #f0f2f5; border-radius: 6px; padding: 3px 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
}

.pc-alert {
  border-radius: 10px; padding: 12px 14px; font-size: 13.5px; margin: 0 0 16px;
  border: 1px solid;
}
.pc-alert--error { background: #fdf2f1; border-color: #f0cdc9; color: #96352d; }
.pc-alert--info { background: #eef4ff; border-color: #cfdefd; color: #23458f; }

/* ---- ボタン・入力 ---- */

.pc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: 10px; border: 1px solid var(--pc-line);
  background: var(--pc-surface); color: var(--pc-text);
  font: inherit; font-size: 14px; text-decoration: none; cursor: pointer;
}
.pc-btn:hover { border-color: #c9ced7; }
.pc-btn--primary {
  background: var(--pc-accent); border-color: var(--pc-accent); color: #fff;
}
.pc-btn--primary:hover { background: #2559d0; border-color: #2559d0; }
.pc-btn--google { width: 100%; margin-top: 6px; }
.pc-btn__g {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; color: #2f6df6; font-weight: 700; font-size: 13px;
}
.pc-inline { display: inline; }

.pc-form { margin-top: 18px; }
.pc-field { display: block; margin: 0 0 14px; }
.pc-field__label { display: block; font-size: 12.5px; color: var(--pc-muted); margin-bottom: 6px; }
.pc-input {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 14px;
  border: 1px solid var(--pc-line); border-radius: 10px; background: #fff;
  color: var(--pc-text);
}
.pc-input:focus { outline: 2px solid rgba(47, 109, 246, .25); border-color: var(--pc-accent); }
.pc-textarea { resize: vertical; min-height: 68px; line-height: 1.6; }

/* ---- チュートリアル ---- */

.pc-tutorial { max-width: 620px; margin-left: auto; margin-right: auto; text-align: center; }
.pc-tutorial__icon { color: var(--pc-accent); margin: 4px 0 14px; }
.pc-icon { width: 56px; height: 56px; }
.pc-tutorial .pc-body { text-align: left; }
.pc-tutorial__nav { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; }
.pc-dots { display: flex; gap: 8px; justify-content: center; margin: 22px 0 0; }
.pc-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--pc-line);
  display: block; transition: background .15s;
}
.pc-dot.is-done { background: #b9c6dd; }
.pc-dot.is-active { background: var(--pc-accent); }

/* ---- エピソード一覧 ---- */

.pc-episodes { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.pc-episode {
  display: flex; flex-direction: column; gap: 2px;
  padding: 16px 18px; border: 1px solid var(--pc-line); border-radius: 10px;
  text-decoration: none; color: inherit; background: #fcfcfd;
}
.pc-episode:hover { border-color: var(--pc-accent); background: #f7f9ff; }
.pc-episode__name { font-weight: 600; font-size: 15px; }
.pc-episode__meta { color: var(--pc-muted); font-size: 12.5px; }

/* 行の「別の番組へ移動」（2026-09-10）。
   **番組が 1 つのユーザーには HTML ごと出さない**ので、包む div から下は
   2 つ目を作った人にしか現れない（既存ベータ利用者の一覧は変わらない）。
   開閉は <details>、移動は form POST。JS は使わない。 */
.pc-episode-row { display: flex; align-items: stretch; gap: 8px; position: relative; }
.pc-episode-row > .pc-episode { flex: 1; min-width: 0; }
.pc-epmenu { position: relative; flex-shrink: 0; }
.pc-epmenu__btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 100%; min-height: 36px; border-radius: 10px;
  border: 1px solid transparent; cursor: pointer; list-style: none;
  color: var(--pc-muted); font-size: 18px; line-height: 1;
}
.pc-epmenu__btn::-webkit-details-marker { display: none; }
.pc-epmenu__btn:hover { background: var(--pc-bg); border-color: var(--pc-line); color: var(--pc-text); }
.pc-epmenu[open] .pc-epmenu__btn { background: var(--pc-bg); border-color: var(--pc-line); }
.pc-epmenu__menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 60; width: 240px;
  background: var(--pc-surface); border: 1px solid var(--pc-line);
  border-radius: 10px; box-shadow: var(--pc-shadow); padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
}
.pc-epmenu__head {
  margin: 2px 8px 4px; font-size: 11.5px; font-weight: 600; color: var(--pc-muted);
}
.pc-epmenu__item {
  display: flex; align-items: center; width: 100%; text-align: left;
  padding: 8px; border-radius: 8px; border: 1px solid transparent;
  background: none; cursor: pointer; font-size: 13px; color: var(--pc-text);
}
.pc-epmenu__item:hover { background: var(--pc-bg); }
.pc-epmenu__itemname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-epmenu__note {
  margin: 4px 8px 2px; padding-top: 6px; border-top: 1px solid var(--pc-line);
  font-size: 11px; line-height: 1.5; color: var(--pc-muted);
}
/* メニューの中の区画（移動・削除）。form をそのまま縦に積む */
.pc-epmenu__group { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.pc-epmenu__group + .pc-epmenu__group {
  margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--pc-line);
}
.pc-epmenu__item--danger { color: var(--pc-reject); }
.pc-epmenu__item--danger:hover { background: rgba(192, 72, 63, 0.08); }
/* 名前を変える。入力欄はメニューの幅に収める（はみ出すと押せない項目ができる） */
.pc-eptitle__text { width: 100%; margin: 0 0 4px; font-size: 13px; padding: 7px 8px; }
.pc-eptitle .pc-epmenu__item { justify-content: center; border-color: var(--pc-line); }

/* ---- 登録ユーザー一覧（/admin/users・運営専用） ---- */

.pc-admin-wrap { overflow-x: auto; }
.pc-admin-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 13px; }
.pc-admin-table th, .pc-admin-table td {
  padding: 8px 10px; border-bottom: 1px solid var(--pc-line);
  text-align: left; vertical-align: top; white-space: nowrap;
}
.pc-admin-table th { font-size: 11.5px; color: var(--pc-muted); font-weight: 600; }
.pc-admin__sub { display: block; font-size: 11.5px; color: var(--pc-muted); }
.pc-admin__num { font-variant-numeric: tabular-nums; }

/* 運営ページの行き来（登録ユーザー ⇄ 稼働状況） */
.pc-admtabs { margin: 0 0 12px; font-size: 13px; display: flex; gap: 14px; }
.pc-admtab { color: var(--pc-muted); text-decoration: none; }
.pc-admtab:hover { color: var(--pc-accent); }
.pc-admtab--on { color: var(--pc-text); }
.pc-subtitle { font-size: 14px; margin: 20px 0 8px; }
/* エラー本文だけは折り返す（nowrap のままだと表が横に破裂する） */
.pc-admin__err {
  display: block; white-space: normal; overflow-wrap: anywhere;
  max-width: 420px; font-size: 12px; color: var(--pc-danger, #b4232c);
}
.pc-admin__shows { margin: 0 0 14px; padding-left: 18px; font-size: 13px; }
.pc-admin__requeue { display: inline; }
.pc-admin__btn {
  font-size: 12px; padding: 4px 10px; border: 1px solid var(--pc-line);
  border-radius: 6px; background: none; color: var(--pc-text); cursor: pointer;
}
.pc-admin__btn:hover { border-color: var(--pc-accent); color: var(--pc-accent); }

/* ---- レビュー ---- */

.pc-clips {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.pc-clip {
  background: var(--pc-surface); border: 1px solid var(--pc-line);
  border-radius: var(--pc-radius); box-shadow: var(--pc-shadow);
  overflow: hidden; display: flex; flex-direction: column;
}
.pc-clip.is-adopt { border-color: var(--pc-adopt); }
.pc-clip.is-hold { border-color: var(--pc-hold); }
.pc-clip.is-reject { opacity: .6; }
/* 9:16 をそのまま並べるとカードが縦に伸びすぎ、採否ボタンが画面外に出てしまう。
   高さを画面に対して決め打ちし、動画は contain で中に収める。 */
.pc-clip__video {
  width: 100%; height: min(48vh, 420px); background: #000;
  object-fit: contain; display: block;
}
.pc-clip__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.pc-clip__title { font-size: 15px; margin: 0; line-height: 1.55; }
.pc-clip__meta { margin: 0; color: var(--pc-muted); font-size: 12px; }
.pc-clip__hook { margin: 0; font-size: 13.5px; }
.pc-clip__reason { margin: 0; color: var(--pc-muted); font-size: 13px; }
.pc-tag {
  display: inline-block; margin-right: 6px; padding: 1px 8px;
  border-radius: 999px; background: #eef4ff; color: #23458f; font-size: 11px;
}
/* 投稿文案・選定理由は畳んでおく（ベータの声⑧）。中身は消していない */
.pc-clip__detail { font-size: 12.5px; color: var(--pc-muted); }
.pc-clip__detail > summary { cursor: pointer; }
.pc-clip__detailbody { display: grid; gap: 6px; margin-top: 6px; }
/* ダウンロードは「⋮」の中ではなくカードの現物ボタンで（ベータの声⑨） */
.pc-clip__dl { width: 100%; margin-top: 2px; }
.pc-clip.is-adopt .pc-clip__dl { border-color: var(--pc-adopt); color: var(--pc-adopt); }
.pc-clip__dl.is-stale { border-style: dashed; color: var(--pc-muted); }

.pc-excerpt { font-size: 12.5px; color: var(--pc-muted); }
.pc-excerpt p { margin: 6px 0 0; }
.pc-excerpt summary { cursor: pointer; }

.pc-choices { display: flex; gap: 6px; margin-top: 2px; }
.pc-choice {
  flex: 1; padding: 8px 4px; font: inherit; font-size: 13px; cursor: pointer;
  border: 1px solid var(--pc-line); border-radius: 9px; background: #fff;
  color: var(--pc-muted);
}
.pc-choice:hover { border-color: #c9ced7; }
.pc-choice--adopt.is-on { background: var(--pc-adopt); border-color: var(--pc-adopt); color: #fff; }
.pc-choice--hold.is-on { background: var(--pc-hold); border-color: var(--pc-hold); color: #fff; }
.pc-choice--reject.is-on { background: var(--pc-reject); border-color: var(--pc-reject); color: #fff; }
.pc-clip__saved { margin: 0; min-height: 16px; font-size: 12px; color: var(--pc-adopt); }
.pc-clip__saved.is-error { color: var(--pc-reject); }

@media (max-width: 640px) {
  .pc-main { padding: 18px 14px 56px; }
  .pc-card { padding: 20px 18px; }
  .pc-clips { grid-template-columns: 1fr; }
}

/* ---- サービス版で追加した分（アップロード・進行状況） ---- */

.pc-badge {
  display: inline-block; margin-top: 4px; padding: 2px 10px; border-radius: 999px;
  font-size: 11px; border: 1px solid var(--pc-line); color: var(--pc-muted);
  align-self: flex-start;
}
.pc-badge--ready { color: var(--pc-adopt); border-color: var(--pc-adopt); }
.pc-badge--failed, .pc-badge--rejected {
  color: var(--pc-reject); border-color: var(--pc-reject);
}
.pc-badge--processing, .pc-badge--queued, .pc-badge--uploading {
  color: var(--pc-hold); border-color: var(--pc-hold);
}
.pc-episode.is-disabled { cursor: default; background: #fbfbfc; }
.pc-episode.is-disabled:hover { border-color: var(--pc-line); background: #fbfbfc; }

.pc-progress { margin-top: 18px; }
.pc-progress__bar {
  height: 8px; border-radius: 999px; background: var(--pc-line); overflow: hidden;
}
.pc-progress__bar span {
  display: block; height: 100%; width: 0; background: var(--pc-accent);
  transition: width .2s linear;
}
.pc-progress__text { margin: 8px 0 0; font-size: 12.5px; color: var(--pc-muted); }
.pc-upload input[type="file"] { padding: 8px; background: #fff; }

/* ---- ドロップゾーン（ベータの声①②） ----
   枠に入れた時点で送り始めるので、「ここに落とせる」ことが一目で分かる形にする。
   点線＝まだ空、実線＋淡い青＝いま受け取れる、の 2 状態だけ。 */
.pc-drop {
  border: 2px dashed var(--pc-line); border-radius: 12px;
  padding: 20px 16px; text-align: center; background: #fcfcfd;
  transition: border-color .15s, background .15s;
}
.pc-drop.is-dragover {
  border-style: solid; border-color: var(--pc-accent); background: #f2f6ff;
}
.pc-drop__lead { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.pc-drop__or { margin: 0 0 10px; font-size: 12.5px; color: var(--pc-muted); }
.pc-drop__file { text-align: left; }
.pc-drop__name {
  margin: 10px 0 0; font-size: 13px; word-break: break-all; color: var(--pc-text);
}
.pc-drop__name[hidden] { display: none; }
.pc-drop__note { margin-top: 8px; }
/* ドラッグ中は中の文字にイベントを取られない（dragleave が暴れるのを防ぐ） */
.pc-drop.is-dragover > * { pointer-events: none; }
/* 受け付けるのはカード全体。狙いを外してもいいことが分かるよう、枠ごと薄く光らせる */
.pc-upload.is-dragover { border-color: var(--pc-accent); }

/* ---- 編集モード：動画とタイムラインを中央に、常に見える形で置く ----
   旧: 動画を左サイド 260〜340px に寄せた 2 カラム。
   新: 動画を中央に大きく、その真下にタイムラインを横幅いっぱいで敷く（Designer 推奨）。
       秒数リストは「秒数で細かく直す」の折りたたみに格下げした。
   **ページ全体のレイアウトはこのファイルが正**（Lead 裁定 2026-08-15）。
   timeline.css はタイムライン内部の見た目だけを持つ。 */

/* 一覧では出さない（描画と結び付けは先に済ませてある。幅 0 からの復帰は
   timeline.js の ResizeObserver が面倒を見る） */
.pc-stage__tl,
.pc-stage__cap { display: none; }

.pc-clip.is-editing { grid-column: 1 / -1; }

/* ⚠ .pc-clip は overflow: hidden（角丸のため）。これがあると中の sticky は
   カードの内側に閉じ込められ、ページのスクロールに追従しない。編集中だけ解く。 */
.pc-clip.is-editing { overflow: visible; }

/* 編集中は他のカードとページ見出しを畳む（迷わないように・縦の余地を稼ぐ） */
.pc-clips.is-focused .pc-clip:not(.is-editing) { display: none; }
body.is-editing .pc-head { display: none; }

.pc-clip.is-editing .pc-stage {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--pc-surface);
  border-bottom: 1px solid var(--pc-line);
  padding: 10px 16px 12px;
}
.pc-clip.is-editing .pc-stage__tl { display: block; }
.pc-clip.is-editing .pc-clip__video {
  height: min(42vh, 380px);
  width: auto;
  max-width: 100%;
  margin: 0 auto 6px;
  border-radius: 8px;
}

/* 「いま出ているテロップ」。**動画の上ではなく下**に出す
   （プレビューの mp4 には旧テロップが焼き込まれていて、重ねると二重に見えるため）。 */
.pc-clip.is-editing .pc-stage__cap {
  display: block;
  margin: 0 auto 8px;
  max-width: 560px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--pc-text);
}
.pc-clip.is-editing .pc-stage__cap[hidden] { display: none; }

/* 帯を選ぶと出る編集欄。ダブルクリックに気づかない人向けの**見えている入口**
   （Canva/CapCut の「選ぶと設定欄が出る」形に合わせた）。
   自動でフォーカスは当てない。当てると Space の再生/停止が効かなくなるため。 */
.pc-stage__edit { display: none; }
.pc-clip.is-editing .pc-stage__edit {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 720px;
  margin: 0 auto 8px;
}
.pc-clip.is-editing .pc-stage__edit[hidden] { display: none; }
.pc-stage__editrow { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.pc-stage__editlabel { font-size: 12px; color: var(--pc-muted); white-space: nowrap; }
.pc-stage__input { flex: 1; min-width: 0; font-size: 14px; }
.pc-stage__time {
  font-size: 12px; color: var(--pc-muted); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .pc-clip.is-editing .pc-stage__edit { flex-wrap: wrap; }
  .pc-stage__editrow { flex-basis: 100%; }
}

/* 縦が狭い画面（13インチノートなど）では動画を小さくして、
   タイムラインと秒数リストの居場所を残す */
@media (max-height: 820px) {
  .pc-clip.is-editing .pc-clip__video { height: min(34vh, 300px); }
  .pc-clip.is-editing .pc-stage { padding: 8px 12px 10px; }
  .pc-clip.is-editing .pc-stage__cap { font-size: 14px; margin-bottom: 6px; }
}

/* 横に余裕があるときだけ、秒数リストの 1 行を横並びに収める */
@media (min-width: 900px) {
  .pc-clip.is-editing .pc-cue {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
  }
  .pc-clip.is-editing .pc-cue__times { margin-top: 0; white-space: nowrap; }
}

/* テロップ 1 行分 */
.pc-cue {
  border: 1px solid var(--pc-line); border-radius: 8px;
  padding: 7px 8px; margin-bottom: 7px; background: #fff;
}
.pc-cue.is-edited { border-color: var(--pc-hold); }
.pc-cue.is-current { border-color: var(--pc-accent); box-shadow: 0 0 0 2px rgba(47, 109, 246, .15); }
.pc-cue.is-cut { opacity: .5; }
.pc-cue__text { width: 100%; font-size: 13.5px; }
.pc-cue__times {
  display: flex; align-items: center; gap: 8px; margin-top: 6px;
  font-size: 11px; color: var(--pc-muted);
}
.pc-cue__times input { width: 84px; font-size: 12px; font-variant-numeric: tabular-nums; }
.pc-cue__cut {
  margin-left: auto; padding: 4px 9px; font-size: 11px; cursor: pointer;
  border: 1px solid var(--pc-line); border-radius: 6px; background: #fff; color: var(--pc-muted);
}
.pc-cue__cut:hover { border-color: var(--pc-reject); color: var(--pc-reject); }
/* 「テロップを直す」＝編集モードに入る主動線。押す場所だと分かる強さで出す */
.pc-editor__open {
  align-self: flex-start;
  border-color: var(--pc-accent);
  color: var(--pc-accent);
  font-weight: 600;
}
.pc-editor__open:hover { background: #f2f6ff; border-color: var(--pc-accent); }
/* 編集中はもう入口を出さない（「戻る」が出口になる） */
.pc-clip.is-editing .pc-editor__open { display: none; }
.pc-editor__open:disabled {
  opacity: .55; cursor: default;
  border-color: var(--pc-line); color: var(--pc-muted); background: #fff;
}

/* 秒数リストは補助動線。主役はタイムラインなので既定で畳んでおく */
.pc-cues > summary { cursor: pointer; font-size: 12.5px; color: var(--pc-muted); }
.pc-cues > summary:hover { color: var(--pc-accent); }
.pc-cues__body { margin-top: 8px; }

/* 「候補の一覧に戻る」は別ページ相当の移動なので、テキストリンクではなくボタンで出す */
.pc-editor__back { display: none; margin: 0 0 12px; }
.pc-clips.is-focused .pc-clip.is-editing .pc-editor__back { display: block; }
.pc-btn--back {
  padding: 9px 16px; font-size: 13px;
  background: var(--pc-bg); border-color: var(--pc-line); color: var(--pc-text);
}
.pc-btn--back:hover { border-color: var(--pc-accent); color: var(--pc-accent); }

/* ---- 反映バー：画面下部に固定 ----
   カードの中に埋もれていると、スクロールした先で「反映」を押し損ねる（Designer 指摘）。 */
.pc-commit {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  margin: 0;
  padding: 10px 20px;
  border-top: 1px solid var(--pc-hold);
  background: #fffaf0;
  box-shadow: 0 -4px 16px rgba(16, 24, 40, .10);
}
.pc-commit[hidden] { display: none; }
.pc-commit__inner {
  max-width: 960px; margin: 0 auto;
  display: flex; align-items: center; gap: 14px;
}
.pc-commit__main { flex: 1; min-width: 0; }
.pc-commit__text { margin: 0; font-size: 13px; }
.pc-commit .pc-btn { flex: none; }

/* 反映の進み具合。押したあと「何も起きていない」ように見えるのが一番困るので、
   順番待ち → 処理中（工程名と％）→ 完了 を必ず出す。 */
.pc-commit__progress { margin-top: 6px; }
.pc-commit__progress .pc-progress__bar { height: 6px; }
.pc-commit__step { margin: 4px 0 0; font-size: 12px; color: var(--pc-muted); }

/* 反映が終わったあとの知らせ。読み込み直した先で数秒だけ出す */
.pc-done {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 40;
  max-width: calc(100vw - 32px);
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid var(--pc-adopt);
  background: #eefaf5;
  color: #0f6b4f;
  font-size: 13.5px;
  box-shadow: var(--pc-shadow);
}
.pc-done[hidden] { display: none; }
/* バーが出ている間だけ本文の下に余白を足し、最後の要素がバーの裏に隠れないようにする */
body.has-commit .pc-main { padding-bottom: 104px; }

@media (max-width: 640px) {
  .pc-commit__inner { flex-direction: column; align-items: stretch; gap: 8px; }
  .pc-commit__text { text-align: center; }
  body.has-commit .pc-main { padding-bottom: 152px; }
}

/* ---- 冒頭タイトル（フック）の編集（Karen FB④ Phase A）----
   位置と色は候補から選ばせる。自由入力にすると背景に沈む配色を作れてしまい、
   焼き込んだ後でしか気づけない。 */
.pc-hook { margin-top: 12px; border: 1px solid var(--pc-line); border-radius: 10px; }
.pc-hook > summary {
  padding: 10px 14px; cursor: pointer; font-size: 13.5px; color: var(--pc-muted);
}
.pc-hook[open] > summary { border-bottom: 1px solid var(--pc-line); color: inherit; }
.pc-hook__body { padding: 12px 14px 14px; display: grid; gap: 12px; }
.pc-hook__row {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start;
}
.pc-hook__len { display: grid; gap: 4px; min-width: 190px; }
.pc-hook__len input[type="range"] { width: 100%; }
.pc-hook__secs { font-size: 12.5px; color: var(--pc-muted); }
.pc-hook__group { display: grid; gap: 4px; }
.pc-hook__choices { display: flex; gap: 6px; }
.pc-hook__pos {
  padding: 7px 13px; border-radius: 8px; border: 1px solid var(--pc-line);
  background: #fff; font-size: 13px; cursor: pointer;
}
.pc-hook__pos.is-on { border-color: var(--pc-accent); color: var(--pc-accent); font-weight: 600; }
.pc-hook__color {
  width: 30px; height: 30px; border-radius: 999px; cursor: pointer;
  border: 2px solid var(--pc-line);
}
.pc-hook__color.is-on { border-color: var(--pc-accent); box-shadow: 0 0 0 2px #dce8ff; }
.pc-hook__color--white { background: #ffffff; }
.pc-hook__color--yellow { background: #ffe55c; }
.pc-hook__color--pink { background: #ff8fb1; }
.pc-hook__color--cyan { background: #7fe3ff; }
.pc-hook__off { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.pc-hook__note { margin: 0; }
.pc-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- 番組情報（2026-08-21・design_spec §7 / §9-7）----
   トークンは --pc-* のみ参照する（--color-* は timeline.css 専用のブリッジ）。 */
/* .pc-card--narrow と同じく中央に置く。**auto マージンを付けないと
   960px のカラムの左端に寄る**（1442px 幅で約 190px 左にズレていた） */
.pc-card--show { max-width: 520px; margin-left: auto; margin-right: auto; }
.pc-show-setup__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.pc-show-url-row { display: grid; gap: 10px; }
.pc-show-center { text-align: center; margin: 0; }
.pc-show-fetching { display: inline-flex; align-items: center; gap: 8px; }
.pc-spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff;
  animation: pc-spin .7s linear infinite;
}
@keyframes pc-spin { to { transform: rotate(360deg); } }
.pc-show-toggle {
  background: none; border: none; padding: 0; font-size: 13px; color: var(--pc-muted);
  text-decoration: underline; cursor: pointer;
}
.pc-show-toggle:hover { color: var(--pc-accent); }
.pc-show-skip {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--pc-line); text-align: center;
}
.pc-show-skip .pc-note { margin: 0; }
/* 番組の追加・削除（設定画面）。削除は「消せるとき」だけボタンが出る */
.pc-show-manage__actions {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px;
}
.pc-show-manage__actions .pc-note { margin: 0; }
.pc-show-delete { color: var(--pc-reject); }

.pc-show-icon-row { display: flex; align-items: center; gap: 14px; margin: 4px 0 8px; }
.pc-show-icon-actions { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.pc-show-icon {
  width: 96px; height: 96px; border-radius: 20px; border: 1px solid var(--pc-line);
  object-fit: cover; display: block; background: #fff;
}
.pc-show-icon--sm { width: 72px; height: 72px; }
.pc-show-icon--placeholder {
  background: #f0f2f5; display: flex; align-items: center; justify-content: center;
  color: var(--pc-muted); font-size: 32px; font-weight: 600;
}
.pc-show-icon--placeholder .pc-icon { width: 40px; height: 40px; }
.pc-btn--block { width: 100%; }
.pc-login__divider {
  display: flex; align-items: center; gap: 10px; margin: 18px 0 4px;
  color: var(--pc-muted); font-size: 12.5px;
}
.pc-login__divider::before, .pc-login__divider::after {
  content: ""; flex: 1; height: 1px; background: var(--pc-line);
}
.pc-login__email { margin-top: 4px; }
.pc-login__google { display: grid; gap: 10px; }

/* 設定画面のテンプレート動画カード */
.pc-show-template__preview { display: flex; align-items: center; gap: 14px; }
.pc-show-template__thumb {
  width: 64px; height: 114px; border-radius: 8px; background: #000;
  object-fit: contain; border: 1px solid var(--pc-line);
}
.pc-show-template__meta { font-size: 13px; color: var(--pc-text); }
.pc-show-template__secs { color: var(--pc-muted); }
.pc-show-template__actions { display: flex; gap: 14px; margin-top: 10px; }

/* 設定画面の「切り抜きの見た目」カード（タイトル帯・ロゴ）。
   見た目の選択ボタンは冒頭タイトルの .pc-hook__pos をそのまま共用する（様式を増やさない） */
.pc-show-look { display: grid; gap: 14px; }
.pc-show-look .pc-lead, .pc-show-look .pc-note { margin: 0; }
.pc-look__switch { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.pc-look__presets { display: grid; gap: 6px; }
.pc-look__logo { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--pc-line); }
.pc-look__logo-row { display: flex; align-items: center; gap: 14px; }
.pc-look__logo-box {
  width: 96px; height: 96px; border-radius: 12px; border: 1px solid var(--pc-line);
  display: flex; align-items: center; justify-content: center;
  /* 透過 PNG が白背景に溶けないよう市松模様を敷く（登録した絵の輪郭が分かる） */
  background-color: #fff; background-size: 16px 16px; background-position: 0 0, 8px 8px;
  background-image:
    linear-gradient(45deg, #eef1f5 25%, transparent 25%, transparent 75%, #eef1f5 75%),
    linear-gradient(45deg, #eef1f5 25%, transparent 25%, transparent 75%, #eef1f5 75%);
}
.pc-look__logo-img { max-width: 84px; max-height: 84px; object-fit: contain; display: block; }
.pc-look__logo-none { font-size: 12.5px; color: var(--pc-muted); }

/* 書体・フチの見本から選ぶ。文字だけ並べても焼き上がりが想像できないので、
   本番と同じ描画で作った実物の画像（public/font-samples/）を出す */
.pc-look__type { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--pc-line); }
.pc-sample-grid {
  display: grid; gap: 8px; margin-bottom: 4px;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}
.pc-sample {
  display: grid; gap: 6px; padding: 8px; cursor: pointer; text-align: left;
  border: 1px solid var(--pc-line); border-radius: 10px; background: #fff;
  font-size: 12.5px; color: var(--pc-text);
}
.pc-sample:hover { border-color: var(--pc-accent); }
.pc-sample.is-on {
  border-color: var(--pc-accent); box-shadow: 0 0 0 2px #dce8ff; font-weight: 600;
}
.pc-sample__img {
  width: 100%; height: auto; display: block; border-radius: 6px; background: #2b2f36;
}
.pc-sample__label { color: var(--pc-muted); }
.pc-sample.is-on .pc-sample__label { color: var(--pc-accent); }
/* 「標準（いままでどおり）」は見本画像が無いので、高さだけ他とそろえる */
.pc-sample--plain {
  align-content: center; justify-items: center; text-align: center; min-height: 76px;
}

/* クリップ編集内の「テンプレート動画を付ける」（.pc-hook と同じ見た目を共有） */
.pc-template { margin-top: 12px; border: 1px solid var(--pc-line); border-radius: 10px; }
.pc-template > summary {
  padding: 10px 14px; cursor: pointer; font-size: 13.5px; color: var(--pc-muted);
}
.pc-template[open] > summary { border-bottom: 1px solid var(--pc-line); color: inherit; }
.pc-template__body { padding: 12px 14px 14px; display: grid; gap: 12px; }
.pc-template__preview {
  display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--pc-muted);
}
.pc-template__thumb {
  width: 48px; height: 85px; border-radius: 6px; background: #000; object-fit: contain;
}
.pc-template__choices { display: flex; gap: 6px; }

/* 「この機能が欲しい」の 1 クリック（いまは音声のみ対応の需要を数える） */
.pc-interest {
  margin: 10px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.pc-interest .pc-note { margin: 0; }

/* ================================================================
   左サイドバー＋トップバー（2026-08-22・design_spec §10 / §11-3）
   右上の横並びナビは廃止し、ナビはすべてここに集約する。
   ================================================================ */
.pc-shell { display: flex; min-height: 100vh; align-items: flex-start; }
.pc-content { flex: 1; min-width: 0; }

.pc-sidebar {
  width: var(--pc-nav-w);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--pc-surface);
  border-right: 1px solid var(--pc-line);
  display: flex;
  flex-direction: column;
  transition: width .2s ease;
}
.pc-sidebar__brand {
  height: 56px; display: flex; align-items: center; padding: 0 16px;
  border-bottom: 1px solid var(--pc-line);
  font-weight: 700; font-size: 15px; letter-spacing: .02em;
  /* ブランドガイドライン（design_spec §8-1）どおり primary で出す */
  color: var(--pc-accent); text-decoration: none;
}
.pc-sidebar__brand-short { display: none; }

/* 番組スイッチャー（2026-09-09・複数番組対応）。
   **番組が 1 つのユーザーには HTML ごと出さない**ので、ここの見た目は
   2 つ目を作った人にしか現れない（既存ベータ利用者の画面は変わらない）。
   開閉は <details>、切り替えは form POST。JS は使わない。 */
.pc-showswitch { border-bottom: 1px solid var(--pc-line); position: relative; }
.pc-showswitch__current {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  cursor: pointer; list-style: none; font-size: 13px; color: var(--pc-text);
}
.pc-showswitch__current::-webkit-details-marker { display: none; }
.pc-showswitch__current:hover { background: var(--pc-bg); }
.pc-showswitch .pc-show-icon {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; font-size: 13px;
}
.pc-showswitch .pc-show-icon--placeholder .pc-icon { width: 16px; height: 16px; }
.pc-showswitch__name {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600;
}
.pc-showswitch__chev { color: var(--pc-muted); font-size: 11px; }
.pc-showswitch__menu {
  position: absolute; top: calc(100% - 1px); left: 8px; right: 8px; z-index: 60;
  background: var(--pc-surface); border: 1px solid var(--pc-line);
  border-radius: 10px; box-shadow: var(--pc-shadow); padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
}
.pc-showswitch__item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 8px; border-radius: 8px; border: 1px solid transparent;
  background: none; cursor: pointer; font-size: 13px; color: var(--pc-text);
}
.pc-showswitch__item:hover { background: var(--pc-bg); }
.pc-showswitch__item.is-on { background: #eef4ff; border-color: var(--pc-accent); }
.pc-showswitch__itemname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-showswitch__add {
  display: block; padding: 8px 10px; margin-top: 2px; border-top: 1px solid var(--pc-line);
  font-size: 12.5px; color: var(--pc-accent); text-decoration: none;
}
.pc-showswitch__add:hover { background: var(--pc-bg); }

.pc-sidebar__nav { padding: 8px; display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.pc-sidebar__secondary {
  padding: 8px; margin-top: 4px; border-top: 1px solid var(--pc-line);
  display: flex; flex-direction: column; gap: 2px;
}
.pc-sidebar__link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  color: var(--pc-muted); text-decoration: none; font-size: 14px;
  border: 1px solid transparent;
}
.pc-sidebar__link:hover { background: var(--pc-bg); color: var(--pc-text); }
.pc-sidebar__link.is-active {
  background: #eef4ff; color: var(--pc-accent); border-color: var(--pc-accent);
}
.pc-sidebar__link-icon { width: 20px; height: 20px; flex-shrink: 0; }
.pc-sidebar__foot { margin-top: auto; position: relative; border-top: 1px solid var(--pc-line); }
.pc-sidebar__user {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 12px; background: none; border: none; cursor: pointer;
  font-size: 13px; color: var(--pc-text); text-align: left;
}
.pc-sidebar__user:hover { background: var(--pc-bg); }
.pc-sidebar__user-badge {
  width: 28px; height: 28px; border-radius: 50%; background: #f0f2f5; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 12px; color: var(--pc-muted);
}
.pc-sidebar__user-name {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pc-sidebar__user-chev { color: var(--pc-muted); font-size: 11px; }

/* ユーザーメニューは上に開く（サイドバー最下部にあるため下だと画面外に出る） */
.pc-user-menu {
  position: absolute; bottom: calc(100% + 4px); left: 8px; right: 8px;
  background: var(--pc-surface); border: 1px solid var(--pc-line);
  border-radius: 10px; box-shadow: var(--pc-shadow); padding: 6px; z-index: 50;
}
.pc-user-menu[hidden] { display: none; }
.pc-user-menu__name { padding: 8px 10px; font-size: 13px; font-weight: 600; color: var(--pc-text); margin: 0; }
.pc-user-menu__plan {
  padding: 8px 10px; font-size: 12.5px; color: var(--pc-muted); cursor: default; margin: 0;
  border-top: 1px solid var(--pc-line); border-bottom: 1px solid var(--pc-line);
}
/* 残り 0 本のときだけボタン化（design_spec §12-6-2）。誘導はここと
   おまかせの帯の 2 か所だけで、それ以外に増やさない */
.pc-user-menu__plan.is-empty {
  display: block; width: 100%; text-align: left; padding: 8px 10px;
  border-radius: 8px; border: none; background: #eef4ff;
  color: var(--pc-accent); font-weight: 600; font-size: 12.5px;
  cursor: pointer; text-decoration: none;
}
.pc-user-menu__plan.is-empty:hover { background: #e3ecff; }
.pc-user-menu__logout {
  display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px;
  border: none; background: none; font-size: 13px; color: var(--pc-text);
  cursor: pointer; text-decoration: none;
}
.pc-user-menu__logout:hover { background: #fdf2f1; color: var(--pc-reject); }

.pc-topbar {
  height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 20px;
  border-bottom: 1px solid var(--pc-line); background: var(--pc-surface);
}
.pc-topbar__toggle {
  padding: 6px; border-radius: 8px; border: none; background: none;
  color: var(--pc-muted); cursor: pointer; display: flex;
}
.pc-topbar__toggle:hover { background: var(--pc-bg); color: var(--pc-text); }
.pc-topbar__toggle .pc-sidebar__link-icon { width: 20px; height: 20px; }
.pc-topbar__brand {
  display: none; font-weight: 700; font-size: 15px;
  color: var(--pc-accent); text-decoration: none;
}
.pc-topbar__title {
  margin: 0; font-size: 14px; font-weight: 600; color: var(--pc-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 折りたたみ（ユーザー操作）と、編集中の自動レール化。
   編集中に細くするのは横幅を稼ぐためではなく、1 本のクリップに集中させるため */
.is-nav-collapsed .pc-sidebar,
body.is-editing .pc-sidebar { width: var(--pc-nav-w-collapsed); }
.is-nav-collapsed .pc-sidebar__link-label,
.is-nav-collapsed .pc-sidebar__user-name,
.is-nav-collapsed .pc-sidebar__user-chev,
.is-nav-collapsed .pc-sidebar__brand-full,
body.is-editing .pc-sidebar__link-label,
body.is-editing .pc-sidebar__user-name,
body.is-editing .pc-sidebar__user-chev,
body.is-editing .pc-sidebar__brand-full { display: none; }
.is-nav-collapsed .pc-sidebar__brand-short,
body.is-editing .pc-sidebar__brand-short { display: inline; }
.is-nav-collapsed .pc-sidebar__brand,
body.is-editing .pc-sidebar__brand { padding: 0; justify-content: center; }
.is-nav-collapsed .pc-sidebar__link,
body.is-editing .pc-sidebar__link { justify-content: center; padding: 10px 0; }
.is-nav-collapsed .pc-sidebar__user,
body.is-editing .pc-sidebar__user { justify-content: center; padding: 10px 0; }
.is-nav-collapsed .pc-user-menu,
body.is-editing .pc-user-menu { left: 4px; width: 220px; right: auto; }
/* 細くしたときはアイコンだけ残す（番組を見分けるのに一番効く情報） */
.is-nav-collapsed .pc-showswitch__name,
.is-nav-collapsed .pc-showswitch__chev,
body.is-editing .pc-showswitch__name,
body.is-editing .pc-showswitch__chev { display: none; }
.is-nav-collapsed .pc-showswitch__current,
body.is-editing .pc-showswitch__current { justify-content: center; padding: 10px 0; }
.is-nav-collapsed .pc-showswitch__menu,
body.is-editing .pc-showswitch__menu { left: 4px; width: 240px; right: auto; }

/* 画面下部に固定するものは、サイドバーの上に乗らないよう左を空ける */
body.pc-has-nav .pc-commit, body.pc-has-nav .pc-handoff { left: var(--pc-nav-w); }
.is-nav-collapsed body.pc-has-nav .pc-commit,
.is-nav-collapsed body.pc-has-nav .pc-handoff,
body.pc-has-nav.is-editing .pc-commit,
body.pc-has-nav.is-editing .pc-handoff { left: var(--pc-nav-w-collapsed); }

.pc-sidebar-backdrop { display: none; }

@media (max-width: 640px) {
  /* サイドバーは画面外に置き、トップバーのボタンでドロワーとして出す */
  .pc-sidebar {
    position: fixed; top: 0; left: 0; z-index: 40;
    width: var(--pc-nav-w); transform: translateX(-100%);
    transition: transform .2s ease;
  }
  .is-nav-collapsed .pc-sidebar, body.is-editing .pc-sidebar { width: var(--pc-nav-w); }
  .is-nav-collapsed .pc-sidebar__link-label,
  body.is-editing .pc-sidebar__link-label,
  .is-nav-collapsed .pc-sidebar__user-name,
  body.is-editing .pc-sidebar__user-name,
  .is-nav-collapsed .pc-sidebar__brand-full,
  body.is-editing .pc-sidebar__brand-full { display: inline; }
  .is-nav-collapsed .pc-sidebar__brand-short,
  body.is-editing .pc-sidebar__brand-short { display: none; }
  .is-nav-collapsed .pc-sidebar__link,
  body.is-editing .pc-sidebar__link { justify-content: flex-start; padding: 10px 12px; }
  body.is-drawer-open .pc-sidebar { transform: translateX(0); }
  body.is-drawer-open .pc-sidebar-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(26, 29, 41, .4); z-index: 39;
  }
  .pc-topbar { padding: 0 14px; height: 52px; }
  .pc-topbar__brand { display: block; }
  .pc-topbar__title { display: none; }
  body.pc-has-nav .pc-commit, body.pc-has-nav .pc-handoff,
  .is-nav-collapsed body.pc-has-nav .pc-commit,
  .is-nav-collapsed body.pc-has-nav .pc-handoff,
  body.pc-has-nav.is-editing .pc-commit,
  body.pc-has-nav.is-editing .pc-handoff { left: 0; }
}

/* ---- ダッシュボード（/episodes） ---- */
.pc-next { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pc-next__title { margin: 0; font-size: 16px; font-weight: 600; color: var(--pc-text); }
.pc-next__note { margin: 6px 0 0; font-size: 13px; color: var(--pc-muted); }
.pc-episodes__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px;
}
.pc-episodes__head .pc-title { margin: 0; }
.pc-dash-show {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 4px 0; margin-top: 18px; border-top: 1px solid var(--pc-line);
  font-size: 13px;
}
.pc-dash-show .pc-show-icon { width: 40px; height: 40px; border-radius: 10px; }
.pc-dash-show .pc-show-icon--placeholder { font-size: 16px; }
.pc-dash-show .pc-show-icon--placeholder .pc-icon { width: 20px; height: 20px; }
.pc-dash-show__text { flex: 1; min-width: 0; }
.pc-dash-show__name { margin: 0; font-weight: 600; color: var(--pc-text); }
.pc-dash-show__desc {
  margin: 2px 0 0; color: var(--pc-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pc-dash-show--empty .pc-note { margin: 0; flex: 1; }

/* ---- 候補カードの編集導線（1 つに畳む・P0-1） ---- */
.pc-tweak { margin-top: 12px; border: 1px solid var(--pc-line); border-radius: 10px; }
.pc-tweak > summary {
  padding: 10px 14px; cursor: pointer; font-size: 13.5px; color: var(--pc-muted);
}
.pc-tweak[open] > summary { border-bottom: 1px solid var(--pc-line); color: inherit; }
.pc-tweak__body { padding: 12px 14px 14px; display: grid; gap: 12px; }
.pc-tweak__body > .pc-hook, .pc-tweak__body > .pc-template { margin-top: 0; }
/* 秒数リストは一覧に出さない（編集モードでだけ使う） */
.pc-clip:not(.is-editing) .pc-cues { display: none; }

/* ---- 「この1本だけ書き出す（速い）」（ベータの声⑤） ----
   修正が 1 件でも出たら、その候補のカード下部に出しっぱなしにする。
   全体をまとめて反映するより速いので、ここが primary。 */
.pc-clip__reflectbox {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--pc-line);
  display: grid; gap: 6px;
}
.pc-clip__reflectbox[hidden] { display: none; }
.pc-clip__reflect { width: 100%; }
.pc-clip__reflectnote { margin: 0; text-align: center; }
/* 編集中のカードでは、下までスクロールしなくても押せるように貼り付ける。
   画面下に固定されている「まとめて反映」のバーと重ならせない（同じ高さを使う） */
.pc-clips.is-focused .pc-clip.is-editing .pc-clip__reflectbox {
  position: sticky; bottom: 0; z-index: 5;
  background: var(--pc-surface); padding-bottom: 12px;
}
body.has-commit .pc-clips.is-focused .pc-clip.is-editing .pc-clip__reflectbox { bottom: 78px; }
@media (max-width: 640px) {
  body.has-commit .pc-clips.is-focused .pc-clip.is-editing .pc-clip__reflectbox { bottom: 128px; }
}

/* 全体の反映は控えめに（.pc-btn の素の見た目と同じ＝役割を名前で残しておく） */
.pc-btn--secondary { background: var(--pc-surface); color: var(--pc-text); }
.pc-btn--secondary:hover { border-color: #c9ced7; }

/* ---- おまかせプランの案内（P0-4・無彩色） ---- */
.pc-handoff {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 29;
  max-width: 720px; margin: 0 auto 12px;
  background: #f0f2f5; border: 1px solid var(--pc-line); border-radius: 10px;
  padding: 12px 14px; display: flex; align-items: center; gap: 12px;
  font-size: 13.5px; color: var(--pc-text); box-shadow: var(--pc-shadow);
}
.pc-handoff[hidden] { display: none; }
.pc-handoff__text { line-height: 1.6; flex: 1; }
.pc-handoff__link { color: var(--pc-text); flex-shrink: 0; }
.pc-handoff__done { margin: 0; flex-shrink: 0; }
.pc-handoff__close {
  background: none; border: none; padding: 4px; color: var(--pc-muted);
  cursor: pointer; flex-shrink: 0; font-size: 16px; line-height: 1;
}
.pc-handoff__close:hover { color: var(--pc-text); }
body.has-commit .pc-handoff { bottom: 78px; }
@media (max-width: 640px) {
  .pc-handoff { margin: 0 10px 10px; flex-wrap: wrap; }
  body.has-commit .pc-handoff { bottom: 128px; }
}

/* ログイン画面: 既存ユーザーの入口と「はじめての方」の入口を分ける */
.pc-login__first {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--pc-line);
  display: grid; gap: 10px; justify-items: stretch;
}
.pc-login__first .pc-note { margin: 0; }

/* ---- アップデート履歴（/updates）----
   既存トークンだけで作る。左に日付、右に本文の 2 列（狭い画面では 1 列に落とす）。
   新しい色は足していない（線は --pc-line、文字は --pc-text / --pc-muted）。 */
.pc-updates { max-width: 720px; }
.pc-releases { margin-top: 20px; display: flex; flex-direction: column; }
.pc-release {
  display: grid; grid-template-columns: 132px 1fr; gap: 16px;
  padding: 18px 0; border-top: 1px solid var(--pc-line);
}
.pc-release:first-child { border-top: none; padding-top: 4px; }
.pc-release__date {
  margin: 0; font-size: 12.5px; color: var(--pc-muted);
  font-variant-numeric: tabular-nums; padding-top: 2px;
}
.pc-release__title { margin: 0 0 8px; font-size: 15.5px; line-height: 1.55; }
.pc-release__items { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.85; }
.pc-release__items li { margin: 0 0 2px; }
.pc-release__body .pc-note { margin-top: 8px; }
/* 準備中: まだ出していないので、履歴より一段控えめに置く */
.pc-release--upcoming .pc-release__date { color: var(--pc-accent); font-weight: 600; }
.pc-release--upcoming .pc-release__items { color: var(--pc-muted); }
@media (max-width: 640px) {
  .pc-release { grid-template-columns: 1fr; gap: 6px; }
}