/* AdReview — shared theme tokens & base.
   全ページの :root と最低限の reset / 共通 utility をここに集約。
   ページ固有のレイアウトは引き続き各 HTML の <style> に書く。 */

:root{
  /* Surfaces */
  --bg:#FFFFFF;
  --bg-subtle:#FAFAFA;
  --bg-hover:#F5F5F5;

  /* Text */
  --ink:#0F172A;
  --ink-soft:#475569;
  --ink-mute:#5B6776;

  /* Borders */
  --border:#CBD5E1;
  --border-strong:#94A3B8;
  --border-soft:#F1F5F9;

  /* Accent (Deep Teal) */
  --accent:#115E59;
  --accent-hover:#0F4F4A;
  --accent-soft:#F0FDFA;
  --accent-border:#99F6E4;

  /* Status */
  --danger:#DC2626;
  --danger-soft:#FEF2F2;
  --danger-border:#FECACA;
  --warn:#D97706;
  --warn-soft:#FFFBEB;
  --warn-border:#FDE68A;
  --ok:#059669;
  --ok-soft:#F0FDF4;
  --ok-border:#BBF7D0;

  /* レイアウト幅 — .container max-width をページ種別ごとに集約 */
  --container-wide:   1200px;  /* ダッシュボード系: index, workspace, audit, image, document */
  --container-mid:     880px;  /* 編集/閲覧系: guideline */
  --container-narrow:  720px;  /* 入力フォーム系: register */

  /* タイポ type-scale — 2026-05 に全体 1px 底上げ。
     旧 11/12/13/14/15px → 12/13/14/15/16px に。重要情報の可読性向上。
     来週 1px さらに上げたい場合はここを書き換えるだけで全ページに反映される。 */
  --fs-micro:    12px;   /* 旧 11px。バッジ / マイクロラベル */
  --fs-caption:  13px;   /* 旧 12px。ヒント文 / 補助説明 / メタ情報 */
  --fs-small:    14px;   /* 旧 13px。項目名 / セクション見出し / ボタン */
  --fs-body:     15px;   /* 旧 14px。入力欄 / 段落 / 通常テキスト */
  --fs-lead:     16px;   /* 旧 15px。topnav / 強調本文 */
}

/* .container の共通プロパティ (max-width は各ページの CSS でセット) */
.container{
  margin:0 auto;
  padding:24px 32px 80px;
}

*{ box-sizing:border-box; margin:0; padding:0 }

html, body{
  background:var(--bg); color:var(--ink);
  font-family:'Space Grotesk','Noto Sans JP',sans-serif;
  font-feature-settings:"palt";
  -webkit-font-smoothing:antialiased;
  font-size: var(--fs-body); line-height:1.5;
  min-height:100vh;
  /* ネイティブフォーム部品 (checkbox / radio / range / progress) のテーマ色を
     プロジェクトの accent (teal) に統一。ブラウザ既定の青と衝突しないように。 */
  accent-color: var(--accent);
}

/* Typographic utilities */
.tnum{ font-variant-numeric:tabular-nums }
.mono{ font-family:'JetBrains Mono', monospace; font-feature-settings:"tnum" }

/* 汎用ローディングスピナー — 審査中など「処理が止まっていない」ことを示す回転アイコン。
   全ページ共通 (旧: guideline.css / audit.css に個別定義し、image/document では
   未定義で非表示になっていた)。サイズは em 基準で文字に追従。 */
@keyframes spin{ to { transform:rotate(360deg); } }
.spinner{
  display:inline-block;
  width:1em; height:1em;
  border:2px solid var(--border-strong);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin .7s linear infinite;
  vertical-align:-0.15em;   /* テキストのベースラインに揃える */
  flex-shrink:0;
}
@media (prefers-reduced-motion: reduce){
  .spinner{ animation-duration: 1.5s; }  /* 完全停止せず減速 (処理中の手掛かりは残す) */
}

/* ------------------------------------------------------------ */
/*  App topnav (shared across all pages that mount the header)   */
/* ------------------------------------------------------------ */
.app-topnav{
  background:#fff;
  border-bottom:1px solid var(--border);
  padding:0 24px;
  height:56px;
  display:flex; align-items:center; gap:16px;
}
/* アカウント表示（topnav 右端）。app-chrome.js が auth 状態に応じて描画 */
.app-account{ margin-left:auto; display:inline-flex; align-items:center; gap:10px; }
.app-account .acct-email{
  font-size: var(--fs-caption); color:var(--ink-soft);
  max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.app-account .acct-logout{
  background:transparent; border:1px solid var(--border); color:var(--ink-soft);
  padding:5px 10px; border-radius:6px; font-size: var(--fs-caption);
  cursor:pointer; font-family:inherit;
}
.app-account .acct-logout:hover{ background:var(--bg-subtle); color:var(--ink); }
.app-account .acct-login{
  color:var(--accent); font-weight:600; font-size: var(--fs-caption);
  text-decoration:none; border:1px solid var(--accent-border);
  padding:5px 12px; border-radius:6px;
}
.app-account .acct-login:hover{ background:var(--accent-soft); }
.app-logo{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:600; text-decoration:none;
  color:var(--ink); font-size: var(--fs-lead);
}
/* ロゴマーク: GuidelineChecker のブランドアイコン（書類×チェック、透過PNG）。
   旧・動画専用時代の「フィルムフレーム＋ティール角丸＋白抜き」は撤去。 */
.app-logo .mark{
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.app-logo .mark img{
  width:26px; height:26px;
  object-fit:contain; display:block;
}
.app-topnav-sep{ color:var(--ink-mute); font-size: var(--fs-small) }

/* ============================================================
   アニメーション（控えめ、reduced-motion 対応）
   ============================================================ */
@keyframes adReveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@keyframes adThumbReveal {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes adVerdictReveal {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes adStepDone {
  0%   { transform: scale(0.6); }
  60%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ============================================================
   タイポグラフィ階層（複数ページで共通化）
   page-title (h1) は hero 風に大きく、ボディとの差を 2.5x 以上に
   ============================================================ */
.page-title{
  font-family:'Space Grotesk', system-ui, sans-serif;
  font-size:34px;
  font-weight:600;
  line-height:1.15;
  letter-spacing:-0.02em;
  color:var(--ink);
  margin-bottom:12px;
}
.page-sub{
  font-size: var(--fs-body);
  line-height:1.6;
  color:var(--ink-soft);
}
/* hero 領域はさらに余白でゆとり */
.hero .page-title{ font-size:38px; margin-bottom:12px; }
.hero .page-sub  { font-size: var(--fs-lead); }

@media (max-width:680px){
  .page-title{ font-size:28px; }
  .hero .page-title{ font-size:30px; }
}

/* ------------------------------------------------------------ */
/*  審査媒体タイプ切替 (動画 / 画像 / 資料) — page-header.js が注入  */
/*  page-title 直下に出るセグメンテッドコントロール。同じ           */
/*  workspace+project を引き継いで他の審査ページへ遷移できる。       */
/* ------------------------------------------------------------ */
.audit-type-tabs{
  display:inline-flex; gap:3px;
  margin-left:auto;   /* page-meta 行内で右端に寄せる (パンくずの最下層として) */
  padding:3px;
  background:var(--bg-subtle);
  border:1px solid var(--border);
  border-radius:9px;
}
.audit-type-tab{
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 12px;
  border-radius:6px;
  font-size: var(--fs-caption); font-weight:500;
  color:var(--ink-soft);
  text-decoration:none;
  transition:background .12s, color .12s, box-shadow .12s;
}
.audit-type-tab:hover{ color:var(--ink); background:var(--bg-hover); }
.audit-type-tab.active{
  background:var(--bg);
  color:var(--accent);
  font-weight:600;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.audit-type-tab [data-lucide]{ opacity:.8; flex-shrink:0; }
.audit-type-tab.active [data-lucide]{ opacity:1; }

/* キーボード操作時のフォーカスリング統一
   :focus-visible はキーボードフォーカス時のみ適用される（マウスクリックでは出ない）。
   既存の :focus 系（box-shadow など）はそのまま残し、追加で外周にリングを描く */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:inherit;
}
/* マウスクリック後のフォーカスは出さない（:focus-visible に任せる）*/
:focus:not(:focus-visible){
  outline:none;
}

/* エラー / 警告 / 成功 の統一表示
   .alert-card  : 区切りカード型（既存 ProgressCard 等にはめ込む）
   .alert-inline: 1 行のインライン警告（フォーム下など）
   variant       : .alert-error / .alert-warn / .alert-info / .alert-success */
.alert-card{
  display:flex; gap:12px; align-items:flex-start;
  padding:16px 20px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  font-size: var(--fs-small); line-height:1.6;
}
.alert-card .alert-icon{
  flex-shrink:0;
  width:36px; height:36px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.alert-card .alert-body{ flex:1; min-width:0; }
.alert-card .alert-title{
  font-size: var(--fs-body); font-weight:600;
  margin-bottom:4px;
}
.alert-card .alert-message{ color:var(--ink-soft); word-wrap:break-word; }
.alert-card .alert-actions{ margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; }

.alert-error .alert-icon  { background:var(--danger-soft); color:var(--danger); }
.alert-error              { border-color:var(--danger-border); }
.alert-warn  .alert-icon  { background:var(--warn-soft, #FEF3C7); color:var(--warn, #B45309); }
.alert-warn               { border-color:var(--warn-border, #FCD34D); }
.alert-info  .alert-icon  { background:var(--accent-soft); color:var(--accent); }
.alert-info               { border-color:var(--accent-border, var(--border)); }
.alert-success .alert-icon{ background:var(--ok-soft, #DCFCE7); color:var(--ok, #16A34A); }
.alert-success            { border-color:var(--ok-border, #86EFAC); }

.alert-inline{
  display:inline-flex; align-items:center; gap:6px;
  font-size: var(--fs-caption); line-height:1.5;
}
.alert-inline.alert-error   { color:var(--danger); }
.alert-inline.alert-success { color:var(--ok, #16A34A); }
.alert-inline.alert-warn    { color:var(--warn, #B45309); }

/* 共通 dialog（ネイティブ confirm/alert の置換）*/
dialog.adreview-dialog{
  /* 明示的に viewport 中央に固定（margin:auto が一部環境で効かないため） */
  position:fixed;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  margin:0;
  border:0; border-radius:12px;
  padding:0;
  max-width:480px; width:92vw;
  max-height:88vh; overflow:auto;
  box-shadow:0 20px 50px rgba(0,0,0,.22);
  background:#fff; color:var(--ink);
  font-family:inherit;
}
dialog.adreview-dialog::backdrop{
  background:rgba(15,23,42,.55);
}
.adreview-dialog-content{ padding:20px 24px; }
.adreview-dialog-title{
  font-size: var(--fs-lead); font-weight:600;
  margin-bottom:8px;
}
.adreview-dialog-message{
  font-size: var(--fs-small); line-height:1.65; color:var(--ink-soft);
  white-space:pre-wrap; word-wrap:break-word;
}
.adreview-dialog-actions{
  display:flex; gap:8px; justify-content:flex-end;
  margin-top:20px;
}
.adreview-dialog-btn{
  padding:8px 16px; border-radius:6px; cursor:pointer;
  font-size: var(--fs-small); font-weight:500;
  border:1px solid var(--border);
  background:#fff; color:var(--ink);
  font-family:inherit;
  min-width:80px;
}
.adreview-dialog-btn:hover{ background:var(--bg-subtle); }
.adreview-dialog-btn-primary{
  background:var(--accent); color:#fff;
  border-color:var(--accent);
}
.adreview-dialog-btn-primary:hover{ filter:brightness(1.05); background:var(--accent); }
.adreview-dialog-btn-danger{
  background:var(--danger); color:#fff;
  border-color:var(--danger);
}
.adreview-dialog-btn-danger:hover{ filter:brightness(1.05); background:var(--danger); }
.adreview-dialog-btn-cancel{
  background:#fff; color:var(--ink-soft);
}

/* prompt 用テキスト入力 — message の直下に配置される */
.adreview-dialog-input{
  display:block;
  width:100%;
  margin-top:12px;
  padding:10px 12px;
  font-size: var(--fs-body);
  font-family:inherit;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--border-strong);
  border-radius:6px;
  transition:border-color .12s, box-shadow .12s;
  box-sizing:border-box;
}
.adreview-dialog-input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}

/* preview モード（サンプルプレビューなど、長文 HTML を表示する場合） */
dialog.adreview-dialog[data-size="large"]{
  max-width:720px;
  max-height:84vh;
}
dialog.adreview-dialog[data-size="large"] .adreview-dialog-message{
  white-space:normal;
  max-height:60vh;
  overflow-y:auto;
  font-size: var(--fs-small);
}
.adreview-dialog-preview-tabs{
  display:flex; gap:0;
  border-bottom:1px solid var(--border);
  margin-bottom:14px;
}
.adreview-dialog-preview-tab{
  padding:8px 14px;
  background:none; border:none;
  font-size: var(--fs-small); font-weight:500;
  color:var(--ink-soft); cursor:pointer;
  font-family:inherit;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
}
.adreview-dialog-preview-tab:hover{ color:var(--ink); }
.adreview-dialog-preview-tab.active{
  color:var(--accent);
  border-bottom-color:var(--accent);
}
.adreview-dialog-preview-pane{
  display:none;
  font-family:'Noto Sans JP', system-ui, sans-serif;
  font-size: var(--fs-small); line-height:1.75;
  white-space:pre-wrap; word-break:break-word;
  background:var(--bg-subtle);
  border:1px solid var(--border);
  border-radius:8px;
  padding:16px 18px;
  color:var(--ink);
}
.adreview-dialog-preview-pane.active{ display:block; }

/* ============================================================
   過去審査リスト (jobs-list.js 用、audit / index 両用)
   ============================================================ */
/* セクション間隔は親コンテナ任せ（.audit は gap:20px / workspace は inline で上書き）。
   独自の margin-top を持たせない（旧 8px は .audit gap と二重化していた）。 */
.past-jobs{ margin-top:0; }
.past-jobs-head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:10px;
}
.past-jobs-title{
  font-size: var(--fs-small); font-weight:600; color:var(--ink);
  display:inline-flex; align-items:center; gap:6px;
}
.past-jobs-title svg{ flex-shrink:0; color:var(--ink-mute); opacity:.85; }
.past-jobs-list{
  list-style:none;
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden;
  padding:0;
}
.past-jobs-list li{ border-bottom:1px solid var(--border-soft); }
.past-jobs-list li:last-child{ border-bottom:0; }
.past-jobs-li{ position:relative; }
/* 削除ボタンがある時だけ hover で余白を空ける（無い場合はシフトしない）*/
.past-jobs-li:has(.pjob-delete) .past-jobs-item{
  padding-right:14px;
  transition:padding-right .12s;
}
.past-jobs-li:has(.pjob-delete):hover .past-jobs-item,
.past-jobs-li:has(.pjob-delete):focus-within .past-jobs-item{
  padding-right:44px;
}
.past-jobs-item{
  display:flex; align-items:center; gap:14px;
  padding:12px 14px;
  text-decoration:none; color:inherit;
  transition:background .12s;
}
.past-jobs-item:hover{ background:var(--bg-subtle); }
.past-jobs-item .pjob-thumb{
  width:48px; height:48px;
  background:#fff;
  border-radius:5px;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-mute); font-size: var(--fs-micro);
  flex-shrink:0;
  overflow:hidden;
  position:relative;
}
.past-jobs-item .pjob-thumb img{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
  display:block;
}
.past-jobs-item .pjob-thumb .pjob-thumb-placeholder{ font-size:10px; }
.past-jobs-item .pjob-body{ flex:1; min-width:0; }
.past-jobs-item .pjob-context{
  font-size: var(--fs-micro); color:var(--ink-mute);
  margin-bottom:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.past-jobs-item .pjob-name{
  font-size: var(--fs-small); font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.past-jobs-item .pjob-meta{
  font-size: var(--fs-caption); color:var(--ink-mute);
  margin-top:2px;
}
.past-jobs-item .pjob-timeline{
  height:3px;
  background:var(--border);
  border-radius:2px;
  position:relative;
  margin-top:6px;
  min-width:80px;
}
.past-jobs-item .pjob-timeline:empty{ display:none; }
.pjob-marker{
  position:absolute;
  top:50%;
  width:6px; height:6px;
  border-radius:50%;
  border:1.5px solid #fff;
  transform:translate(-50%, -50%);
  box-shadow:0 0 0 0.5px rgba(0,0,0,.2);
}
.pjob-marker.sev-high   { background:var(--danger); }
.pjob-marker.sev-medium { background:var(--warn); }
.pjob-marker.sev-low    { background:var(--ink-mute); }
.past-jobs-item .pjob-time{
  font-family:'JetBrains Mono', monospace;
  font-size: var(--fs-caption);
  color:var(--ink-mute);
  flex-shrink:0; margin-left:6px;
  /* 文字数が "12m" / "1h" / "2026/05/18" 等で揺れるので最小幅 + 右寄せで固定列化。
     これによって前の .stamp（要修正 / 要差戻 等）の x 位置も揃う。 */
  min-width:56px;
  text-align:right;
}
/* 削除ボタン（hover 時に薄く現れるトラッシュ icon）*/
.pjob-delete{
  position:absolute;
  top:50%; right:8px;
  transform:translateY(-50%);
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:0;
  border-radius:6px;
  color:var(--ink-mute);
  cursor:pointer;
  opacity:0;
  transition:opacity .12s, background .12s, color .12s;
}
.past-jobs-li:hover .pjob-delete,
.pjob-delete:focus-visible{ opacity:1; }
.pjob-delete:hover{ background:var(--danger-soft); color:var(--danger); }
.pjob-delete:disabled{ opacity:.4; cursor:not-allowed; }

/* 入力モード切替タブ（複数の入力方法を選ぶ UI、register / audit で共用） */
.input-mode-tabs{
  display:flex; gap:2px;
  margin-bottom:12px;
  border-bottom:1px solid var(--border);
}
.input-mode-tab{
  display:inline-flex; align-items:center; gap:6px;
  background:transparent; border:0; padding:8px 14px;
  font-size: var(--fs-caption); color:var(--ink-mute); cursor:pointer;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  font-family:inherit;
  transition:color .12s, border-color .12s;
}
.input-mode-tab:hover{ color:var(--ink); }
.input-mode-tab.active{
  color:var(--accent);
  border-bottom-color:var(--accent);
}
.input-mode-panel.hidden{ display:none; }

/* Drive 取り込みパネル — URL 入力 + Picker ボタン共通 */
.drive-input-row{
  display:flex; gap:8px; align-items:stretch;
  margin-bottom:8px;
}
.drive-url-field{
  flex:1; min-width:0;
  padding:9px 12px;
  font-size: var(--fs-small);
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--bg);
  color:var(--ink);
  font-family:inherit;
}
.drive-url-field:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.drive-url-fetch-btn{
  flex-shrink:0; white-space:nowrap;
  padding:8px 14px;
}
.drive-pick-btn{
  margin-top:4px;
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px;
}
.drive-input-status{
  margin-top:8px; min-height:18px;
  font-size: var(--fs-caption); line-height:1.5;
  color:var(--ink-soft);
}
.drive-input-status.error   { color:var(--danger); }
.drive-input-status.success { color:var(--ok, #16A34A); }

/* ブランドロゴ画像 — ボタン / ラベル内のインライン使用想定 */
.brand-drive-logo{
  height:16px; width:auto;
  vertical-align:middle;
  display:inline-block;
}
.brand-drive-logo-sm{ height:13px; }
.brand-claude-icon{
  width:16px; height:16px;
  vertical-align:-3px;
  display:inline-block;
}
.brand-claude-wordmark{
  height:14px; width:auto;
  vertical-align:-2px;
  display:inline-block;
}
/* accent 背景のボタン内では Claude ロゴを白に反転（黒い SVG が緑背景で読めないため）*/
.btn-primary .brand-claude-wordmark,
.btn-primary .brand-claude-icon,
.btn-next .brand-claude-wordmark,
.btn-next .brand-claude-icon{
  filter:brightness(0) invert(1);
}
/* locked 状態（点線枠 + accent-soft 背景）の時は元の黒に戻す */
.btn-primary.btn-locked .brand-claude-wordmark,
.btn-primary.btn-locked .brand-claude-icon,
.btn-next.btn-locked .brand-claude-wordmark,
.btn-next.btn-locked .brand-claude-icon{
  filter:none;
}

/* API キー設定トリガー（topnav 右端） */
.settings-trigger{
  /* 右寄せは .app-account(margin-left:auto) が担う。ここで auto を付けると
     auto が2つになりアカウントが中央に寄ってしまうため付けない。 */
  background:transparent; border:0; padding:6px;
  border-radius:6px; cursor:pointer;
  color:var(--ink-mute);
  display:inline-flex; align-items:center; justify-content:center;
  position:relative;
  transition:background .12s, color .12s;
}
.settings-trigger:hover{ background:var(--bg-subtle); color:var(--ink); }
.settings-trigger.has-key::after{
  content:''; position:absolute;
  top:5px; right:5px;
  width:7px; height:7px; border-radius:50%;
  background:var(--ok, #16A34A);
  border:1.5px solid #fff;
}

/* 設定モーダル — <dialog> ベース。focus trap / ESC / backdrop はブラウザ標準。
   注: [open] セレクタで限定しないと、UA stylesheet の "display: none on close" を
       常時上書きしてしまい、close() しても画面に残るバグになる (2026-05 ハマり事例)。 */
dialog.adreview-settings-modal[open]{
  position:fixed;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  margin:0;
  padding:0;
  border:0; border-radius:12px;
  width:92vw; max-width:560px;
  max-height:88vh; overflow:auto;
  box-shadow:0 20px 50px rgba(0,0,0,.18);
  background:#fff; color:var(--ink);
  font-family:inherit;
  display:flex; flex-direction:column;
}
dialog.adreview-settings-modal::backdrop{
  background:rgba(15,23,42,.55);
}
.adreview-settings-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px; border-bottom:1px solid var(--border);
}
.adreview-settings-head h2{ margin:0; font-size:16px; font-weight:600; }
.adreview-settings-close{
  background:none; border:0; font-size:24px; line-height:1;
  cursor:pointer; color:var(--ink-mute);
  padding:0 4px;
}
.adreview-settings-close:hover{ color:var(--ink); }
.adreview-settings-body{ padding:20px 24px; }
/* 呼出元コンテキストの誘導バナー（"この機能には API キーが必要です" 等）*/
.adreview-settings-banner{
  background:var(--accent-soft);
  border:1px solid var(--accent-border, var(--accent));
  color:var(--ink);
  padding:12px 16px;
  border-radius:8px;
  font-size: var(--fs-small);
  line-height:1.55;
  margin-bottom:16px;
}
.adreview-settings-lead{
  font-size: var(--fs-small); color:var(--ink-soft); line-height:1.65;
  margin:0 0 20px;
}
.adreview-settings-label{
  display:block; font-size: var(--fs-caption); font-weight:500;
  color:var(--ink); margin-bottom:6px;
}
.adreview-settings-input-row{
  display:flex; gap:6px; align-items:stretch;
}
.adreview-settings-input{
  flex:1; min-width:0;
  padding:9px 12px;
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--fs-small);
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--bg);
  color:var(--ink);
}
.adreview-settings-input:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.adreview-settings-eye{
  background:var(--bg-subtle);
  border:1px solid var(--border);
  border-radius:6px;
  padding:0 10px; cursor:pointer;
  font-size: var(--fs-lead);
}
.adreview-settings-eye:hover{ background:var(--bg); }
.adreview-settings-status{
  margin-top:8px; min-height:18px;
  font-size: var(--fs-caption); line-height:1.5;
}
.adreview-settings-status.success{ color:var(--ok, #16A34A); }
.adreview-settings-status.error{ color:var(--danger); }
.adreview-settings-status.loading{ color:var(--ink-soft); }
.adreview-settings-actions{
  display:flex; gap:8px; margin-top:14px; flex-wrap:wrap;
}
.adreview-settings-actions button{
  padding:8px 14px; border-radius:6px; cursor:pointer;
  font-size: var(--fs-small); border:1px solid var(--border);
  background:#fff; color:var(--ink);
}
.adreview-settings-actions button:hover{ background:var(--bg-subtle); }
.adreview-settings-actions button:disabled{ opacity:.5; cursor:not-allowed; }
.adreview-settings-btn-save{
  background:var(--accent) !important;
  color:#fff !important;
  border-color:var(--accent) !important;
}
.adreview-settings-btn-save:hover{ filter:brightness(1.05); }
.adreview-settings-btn-delete{
  color:var(--danger) !important;
  border-color:var(--danger-border) !important;
  margin-left:auto;
}
.adreview-settings-btn-delete:hover{ background:var(--danger-soft) !important; }
.adreview-settings-notes{
  margin-top:24px; padding-top:20px; border-top:1px solid var(--border-soft, var(--border));
  font-size: var(--fs-caption); color:var(--ink-soft); line-height:1.7;
}
.adreview-settings-notes h3{
  font-size: var(--fs-caption); font-weight:600; color:var(--ink);
  margin:0 0 6px;
}
.adreview-settings-notes h3:not(:first-child){ margin-top:12px; }
.adreview-settings-notes ul{ margin:0; padding-left:18px; }
.adreview-settings-notes code{
  background:var(--bg-subtle); padding:1px 5px; border-radius:3px;
  font-size: var(--fs-caption);
}
.adreview-settings-notes a{
  color:var(--accent); text-decoration:none;
}
.adreview-settings-notes a:hover{ text-decoration:underline; }
.app-topnav-context{
  font-size: var(--fs-small); color:var(--ink-soft);
  display:flex; align-items:center; gap:2px; flex-wrap:wrap;
}
.app-topnav-context a{ color:inherit; text-decoration:none }
.app-topnav-context a:hover{ color:var(--ink) }
.app-topnav-context strong{ color:var(--ink); font-weight:600 }
.app-topnav-context .crumb-sep{ color:var(--ink-mute); margin:0 4px; opacity:.6 }
/* crumb-current は crumb-jump-btn と同じ layout box にしてテキストベースラインを揃える。
   旧: button は border:1px transparent + flex 中央寄せ、current は span 単体だったので
       テキストが上下に 1-2px ズレて見えていた。 */
.app-topnav-context .crumb-current{
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 600;
}

/* ------------------------------------------------------------ */
/*  Topnav breadcrumb quick-jump dropdown                        */
/* ------------------------------------------------------------ */
.crumb-jump{ position:relative; display:inline-flex; align-items:center }
.crumb-jump-btn{
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 8px;
  background:transparent;
  border:1px solid transparent;
  border-radius:6px;
  font-family:inherit;
  font-size: var(--fs-small);
  line-height:1.5;   /* button のブラウザ既定 line-height が周辺の span と異なりベースラインがズレるため明示 */
  color:var(--ink);
  cursor:pointer;
  transition:background .12s, border-color .12s, color .12s;
}
.crumb-jump-btn strong{ color:inherit; font-weight:600 }
.crumb-jump-btn svg{ opacity:.5; flex-shrink:0 }
.crumb-jump-btn:hover,
.crumb-jump.open .crumb-jump-btn{
  background:var(--accent-soft);
  border-color:var(--accent-border);
  color:var(--accent);
}
.crumb-jump-menu{
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  min-width:240px;
  max-width:340px;
  max-height:400px;
  overflow-y:auto;
  background:#fff;
  border:1px solid var(--border);
  border-radius:8px;
  box-shadow:0 8px 24px rgba(15,23,42,.08);
  padding:4px;
  z-index:100;
  display:none;
}
.crumb-jump.open .crumb-jump-menu{ display:block }
.crumb-jump-section{
  padding:8px 10px 4px;
  font-family:'JetBrains Mono', monospace;
  font-size: var(--fs-caption);
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.crumb-jump-item{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px;
  border-radius:6px;
  text-decoration:none;
  color:var(--ink);
  font-size: var(--fs-small);
  line-height:1.4;
}
.crumb-jump-item:hover{ background:var(--bg-subtle) }
.crumb-jump-item.current{
  background:var(--accent-soft);
  color:var(--accent);
  font-weight:600;
}
.crumb-jump-item .sub{
  font-size: var(--fs-caption);
  color:var(--ink-mute);
  margin-left:auto;
  flex-shrink:0;
}
.crumb-jump-item.current .sub{ color:var(--accent) }
.crumb-jump-divider{ height:1px; background:var(--border-soft); margin:4px 0 }
.crumb-jump-add{
  display:flex; align-items:center; gap:6px;
  padding:8px 10px;
  border-radius:6px;
  color:var(--ink-soft);
  font-size: var(--fs-caption);
  text-decoration:none;
}
.crumb-jump-add:hover{ background:var(--bg-subtle); color:var(--ink) }
.crumb-jump-empty{ padding:12px 10px; font-size: var(--fs-caption); color:var(--ink-mute); text-align:center }

/* ============================================================ */
/*  共通コンポーネント — ページごとに padding/font-size を上書き可 */
/* ============================================================ */

/* JetBrains Mono の大文字小ラベル — セクション見出し上などで使う */
.eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size: var(--fs-caption); letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-mute); font-weight:500;
}

/* 戻るリンク（ページ左上）。pages がページ固有 margin-bottom を上書き */
.back{
  display:inline-flex; align-items:center; gap:6px;
  font-size: var(--fs-caption); color:var(--ink-soft); font-weight:500;
  text-decoration:none;
  margin-bottom:24px;
  transition:color .12s, background .12s;
}
.back:hover{ color:var(--ink) }

/* セクション見出し（左にアイコン） */
.section-title{
  font-size: var(--fs-small); font-weight:600;
  display:inline-flex; align-items:center; gap:6px;
}
.section-title svg{ flex-shrink:0; color:var(--ink-mute); opacity:.85 }

/* プライマリボタン（accent 背景） */
.btn-primary{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--accent); color:#fff;
  padding:8px 16px;
  border:1px solid var(--accent);
  border-radius:6px;
  font-size: var(--fs-small); font-weight:500;
  cursor:pointer;
  text-decoration:none;
  font-family:inherit;
  transition:background .12s, border-color .12s;
}
.btn-primary:hover:not(:disabled){
  background:var(--accent-hover);
  border-color:var(--accent-hover);
}
.btn-primary:disabled{
  background:var(--bg-subtle);
  color:var(--ink-soft);          /* ink-mute より濃く WCAG AA 確保 */
  border-color:var(--border-strong, var(--border));
  cursor:not-allowed;
  opacity:1;
}
/* API キー未登録時のロック表示（クリックで設定モーダルへ誘導） */
.btn-primary.btn-locked{
  background:var(--bg-subtle);
  color:var(--ink);                /* 押せると分かるよう本文色 */
  border:1px dashed var(--accent-border, var(--border-strong, var(--border)));
}
.btn-primary.btn-locked:hover:not(:disabled){
  background:var(--accent-soft);
  border-color:var(--accent);
}
.btn-primary.btn-locked [data-lucide]{ vertical-align:-2px; }

/* ゴーストボタン（白背景 + 細枠） */
.btn-ghost{
  display:inline-flex; align-items:center; gap:6px;
  background:#fff;
  border:1px solid var(--border-strong);
  padding:8px 14px;
  border-radius:6px;
  font-size: var(--fs-small); color:var(--ink); font-weight:500;
  cursor:pointer;
  font-family:inherit;
  transition:background .12s, color .12s, border-color .12s;
}
.btn-ghost svg{ flex-shrink:0; opacity:.7 }
.btn-ghost:hover:not(:disabled){ background:var(--bg-subtle) }
.btn-ghost:disabled{
  color:var(--ink-mute);
  border-color:var(--border);
  cursor:not-allowed;
}

/* 危険操作の控えめなリンク（フッタ右寄せ等で使う） */
.danger-link{
  display:inline-flex; align-items:center; gap:5px;
  background:none; border:none;
  padding:4px 8px;
  font-family:inherit;
  font-size: var(--fs-caption);
  color:var(--ink-mute);
  cursor:pointer;
  border-radius:4px;
  transition:color .12s, background .12s;
}
.danger-link:hover{
  color:var(--danger);
  background:var(--danger-soft);
}

/* 中立的な操作の控えめなリンク（rename / dismiss など、danger-link と並べて使う） */
.ghost-link{
  display:inline-flex; align-items:center; gap:5px;
  background:transparent; border:none;
  padding:4px 6px;
  font-family:inherit;
  font-size: var(--fs-caption); font-weight:500;
  color:var(--ink-soft);
  cursor:pointer;
  transition:color .12s;
}
.ghost-link:hover{ color:var(--accent); }
.ghost-link [data-lucide]{ vertical-align:-1px; }

/* ステータスバッジ — 合格/要修正/要差戻 など。BEM 風モディファイア */
.stamp{
  display:inline-flex; align-items:center;
  padding:2px 8px; border-radius:4px;
  font-size: var(--fs-caption); font-weight:500;
  white-space:nowrap;
  flex-shrink:0;
  border:1px solid;
}
.stamp-ok    { color:var(--ok);       background:var(--ok-soft);     border-color:var(--ok-border) }
.stamp-warn  { color:var(--warn);     background:var(--warn-soft);   border-color:var(--warn-border) }
.stamp-danger{ color:var(--danger);   background:var(--danger-soft); border-color:var(--danger-border) }
.stamp-mute  { color:var(--ink-mute); background:var(--bg-subtle);   border-color:var(--border) }

/* プリセット重要度バッジ — register / guideline / audit / image で共通。
   register.css / guideline.css にあった同名 class をここに集約。
   theme トークンと色相をずらすため固定色（severity 系の意味色）を使う。 */
.preset-sev-badge{
  /* 違反一覧では .tag (12px) と並んで表示されるので、
     プロジェクト規約の最小 11px に揃える。padding も .tag に近づけて視覚整列。 */
  display:inline-flex; align-items:center;
  padding:1px 8px;
  border-radius:10px;
  font-size: var(--fs-micro); font-weight:600;
  line-height:1.5;
  white-space:nowrap;
}
.preset-sev-criminal{
  color:#b42318;
  background:#fee4e2;
  border:1px solid #fda29b;
}
.preset-sev-industry{
  color:#854708;
  background:#fef0c7;
  border:1px solid #fec84b;
}
.preset-sev-required{
  /* 「業種必須」ラベル — register でしか出ないが preset-sev-badge ファミリで形を揃える */
  color:var(--ink-mute);
  background:var(--bg-subtle);
  border:1px solid var(--border);
}

/* ============================================================================
   Side drawer — 右端からスライドインする参照パネル。
   audit / image / workspace の「ガイドライン詳細を見る」と guideline の
   「プリセット詳細を見る」で共通利用。元は audit.css / workspace.css に
   重複定義していたものを集約。
   ============================================================================ */
.guideline-drawer{
  position:fixed;
  top:0; right:0; bottom:0;
  width:480px; max-width:100vw;
  background:var(--bg);
  border-left:1px solid var(--border);
  box-shadow:-8px 0 24px rgba(15,23,42,.06);
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.4,.0,.2,1);
  z-index:50;
  display:flex; flex-direction:column;
}
.guideline-drawer.open{ transform:translateX(0) }
.drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid var(--border);
  background:var(--bg-subtle);
  flex-shrink:0;
}
.drawer-head-text{ min-width:0 }
.drawer-head-title{
  font-size: var(--fs-caption); color:var(--ink-mute);
  font-family:'JetBrains Mono', monospace;
  letter-spacing:0.06em; text-transform:uppercase;
  margin-bottom:2px;
}
.drawer-head-name{
  font-size: var(--fs-body); font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.drawer-close{
  background:transparent; border:none;
  width:28px; height:28px;
  border-radius:6px;
  color:var(--ink-soft);
  cursor:pointer;
  font-size:18px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.drawer-close:hover{ background:var(--bg-hover); color:var(--ink) }