/* seo-os の新しい入口（ログイン、ワークスペース、ホーム、連携）の見た目。
   色と寸法は Figma「mame-seo」の「1 部品」「2 画面（PC・スマホ）」に合わせる */
@import url("/app/scroll-behavior.css");

@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&family=Noto+Sans+JP:wght@400;500;700&display=swap");

/* Figmaのchevron SVGを共通で使う。元の16pxを保ち、文字色だけを引き継ぐ。 */
.direction-icon { display: inline-block; flex: 0 0 16px; width: 16px; height: 16px; vertical-align: -3px; background: currentColor; mask: url("/app/icons/chevron-right.svg") center / 16px 16px no-repeat; }
.direction-icon[data-direction="down"], .direction-icon[data-direction="up"] { mask-image: url("/app/icons/chevron-down.svg"); }
.direction-icon[data-direction="left"] { mask-image: url("/app/icons/chevron-left.svg"); }
.back-link { display: inline-flex; align-self: flex-start; align-items: center; gap: 4px; margin-bottom: -16px; color: var(--text-muted); font-size: 13px; text-decoration: none; }
.back-link:hover { color: var(--primary); }
.direction-icon[data-direction="up"] { transform: rotate(180deg); }
.step-nav a, .row-toggle { display: inline-flex; align-items: center; gap: 6px; }
.chevron-disclosure > summary { list-style: none; }
.chevron-disclosure > summary::-webkit-details-marker { display: none; }
.chevron-disclosure > summary > .direction-icon { margin-right: 6px; }
.chevron-disclosure[open] > summary > .direction-icon { mask-image: url("/app/icons/chevron-down.svg"); }

.row-toggle[aria-expanded="true"] .direction-icon { mask-image: url("/app/icons/chevron-down.svg"); }
:root {
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-sub: #f8fafc;
  --border: #dbe3ef;
  --border-input: #cbd5e1;
  --text: #0f172a;
  --text-muted: #475569;
  --text-subtle: #64748b;
  --primary: #1e40af;
  --primary-hover: #1e3a8a;
  --danger: #b91c1c;
  --ok: #15803d;
  --warn: #b45309;
  --info: #1e40af;
  --none: #64748b;
  --sidebar: #0f172a;
  --sidebar-item: #1e293b;
  --sidebar-text: #cbd5e1;
  --sidebar-muted: #64748b;
  --radius: 8px;
  --workflow-label-padding-x: 8px;
  --workflow-label-padding-y: 2px;
  --workflow-label-radius: 4px;
  --font: "Noto Sans JP", system-ui, -apple-system, "Hiragino Sans", sans-serif;
  --mono: "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* 通常の要素はこの重なり順より下に置く。モーダルは showModal() の最前面層を使う。 */
  --z-workspace-menu: 110;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
}
h1, h2, h3, p { margin: 0; }
a { color: var(--primary); }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.mono { font-family: var(--mono); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---- ボタン ---- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 39px; padding: 8px 13px;
  border: 1px solid transparent; border-radius: var(--radius);
  font-size: 14px; font-weight: 500; line-height: 1.5; text-decoration: none; white-space: nowrap;
  cursor: pointer; background: none;
}
.button:disabled, .button[aria-disabled="true"] { cursor: not-allowed; opacity: 0.55; }
.button-primary { background: var(--primary); color: #fff; }
.button-primary:hover:not(:disabled) { background: var(--primary-hover); }
.button-secondary { background: var(--surface); border-color: var(--border-input); color: var(--text); }
.button-secondary:hover:not(:disabled) { border-color: var(--text-subtle); }
.button-danger { background: var(--surface); border-color: var(--danger); color: var(--danger); }
.button-small { min-height: 32px; padding: 4px 10px; font-size: 13px; }
.button-block { width: 100%; }
.link-button { border: 0; background: none; padding: 0; color: var(--primary); font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none; }
.link-button:hover { text-decoration: underline; }

/* ---- 状態の表示（点と文字） ---- */
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--none); flex: none; }
.status[data-tone="ok"]::before { background: var(--ok); }
.status[data-tone="warn"]::before { background: var(--warn); }
.status[data-tone="error"]::before { background: var(--danger); }
.status[data-tone="info"]::before { background: var(--info); }

.notice {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); font-size: 13px;
}
.notice::before { content: ""; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--info); flex: none; }
.notice[data-tone="info"] { border-color: rgba(30, 64, 175, 0.45); }
.notice[data-tone="warn"] { border-color: rgba(180, 83, 9, 0.45); }
.notice[data-tone="warn"]::before { background: var(--warn); }
.notice[data-tone="error"] { border-color: rgba(185, 28, 28, 0.45); }
.notice[data-tone="error"]::before { background: var(--danger); }
.notice[data-tone="ok"]::before { background: var(--ok); }

.role-tag {
  display: inline-block; padding: 1px 6px; border-radius: 4px;
  background: #e0e7ff; color: var(--primary); font-size: 11px; font-weight: 500; line-height: 1.6;
}

/* ---- 入力欄 ---- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .field > .field-label { color: var(--text-muted); font-size: 13px; font-weight: 500; }
.input, .select {
  width: 100%; min-height: 41px; padding: 9px 11px;
  border: 1px solid var(--border-input); border-radius: var(--radius); background: var(--surface);
  font-size: 14px;
}
.input[readonly] { color: var(--text-subtle); background: var(--surface); }
.input.mono { font-family: var(--mono); }
.field-hint { color: var(--text-subtle); font-size: 12px; }
.field-error { color: var(--danger); font-size: 13px; }

/* ---- ログインなど1枚の画面 ---- */
.plain-page { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.auth-card, .plain-main {
  width: 100%; max-width: 440px; padding: 36px 36px 32px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 23, 41, 0.08);
  display: flex; flex-direction: column; gap: 16px;
}
.auth-card > section, .auth-card > div:not(.auth-account):not(.invite-summary) { display: flex; flex-direction: column; gap: 16px; }
.auth-card > [hidden] { display: none !important; }
.auth-brand, .plain-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; font-size: 22px; font-weight: 700; }
.auth-card h1, .plain-main h1 { font-size: 20px; font-weight: 700; line-height: 1.4; }
.auth-card h1 { line-height: 1.5; }
.auth-card p, .plain-main p { color: var(--text-muted); font-size: 13px; }
.plain-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.plain-actions form { margin: 0; }
.auth-account { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-sub); }
.cli-code { padding: 14px 12px; border: 1px solid var(--border); border-radius: var(--radius); font-family: var(--mono); font-size: 28px; font-weight: 700; letter-spacing: 0.12em; text-align: center; }
.cli-code-input { font-family: var(--mono); font-size: 20px; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; }
.cli-request { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-sub); font-size: 13px; }
.cli-request dt { color: var(--text-subtle); font-size: 11px; }
.cli-request dd { margin: 0; overflow-wrap: anywhere; }
.auth-account span { display: block; color: var(--text-subtle); font-size: 11px; }
.auth-account strong { font-size: 14px; font-weight: 500; word-break: break-all; }
.auth-actions { display: flex; flex-direction: column; gap: 12px; }
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-card .auth-text { color: var(--text-muted); font-size: 13px; line-height: 20px; }
.auth-card .auth-note { color: var(--text-subtle); font-size: 12px; line-height: 18px; }
.auth-card .auth-note-subtle { color: #94a3b8; }
.button-tall { min-height: 44px; }
.auth-card .input[readonly] { color: #94a3b8; }
.auth-footer a { color: var(--primary); }
.auth-card .auth-footer { color: #94a3b8; font-size: 12px; line-height: 18px; }
.invite-summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-sub); }
.invite-summary-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.invite-summary-text span { color: var(--text-subtle); font-size: 11px; font-weight: 500; }
.invite-summary-text strong { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.auth-footer { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--text-subtle); }
.auth-footer a { text-decoration: none; }

/* ---- 上部の帯（ワークスペースの一覧） ---- */
.topbar {
  display: flex; align-items: center; gap: 16px; height: 56px; padding: 0 28px;
  background: var(--sidebar); color: #fff;
}
.topbar-brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 700; }
.topbar-account { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 12px; color: var(--sidebar-text); min-width: 0; }
.topbar-account .account-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-account .link-button { color: #fff; font-size: 13px; }
.page-narrow { max-width: 760px; margin: 0 auto; padding: 36px 24px 64px; display: flex; flex-direction: column; gap: 20px; }

/* ---- サイドバーのある画面 ---- */
.app-shell { display: grid; grid-template-columns: 224px minmax(0, 1fr); min-height: 100vh; }
/* サイドバーは画面の高さで止まる（sticky）。ページが縦に長いときも、左の列はページの下端まで紺色にする */
@media (min-width: 768px) {
  .app-shell { background: linear-gradient(90deg, var(--sidebar) 0 224px, var(--bg) 224px); }
  html.sidebar-collapsed .app-shell { background: linear-gradient(90deg, var(--sidebar) 0 72px, var(--bg) 72px); }
}
.sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px 14px; background: var(--sidebar); color: var(--sidebar-text);
}
.sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 0 6px; color: #fff; text-decoration: none; font-size: 15px; font-weight: 700; }
.workspace-switcher { position: relative; }
/* sticky・スマホの transform が作る親の重なり順も、メニューを開いている間だけ上げる。 */
.sidebar:has(.workspace-menu:not([hidden])) { z-index: var(--z-workspace-menu); }
.workspace-current {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 0; border-radius: var(--radius); background: var(--sidebar-item); color: var(--sidebar-text);
  text-align: left; cursor: pointer;
}
.workspace-current .names { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.workspace-current .name { font-size: 13px; font-weight: 500; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-current .domain { font-size: 11px; line-height: 15px; color: var(--sidebar-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-current svg { flex: none; width: 12px; height: 12px; color: var(--sidebar-muted); }
.workspace-menu {
  position: fixed; z-index: var(--z-workspace-menu); width: 300px; max-width: calc(100vw - 28px);
  padding: 8px 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  background: var(--surface); color: var(--text); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
}
.workspace-menu-label { padding: 6px 14px; color: var(--text-subtle); font-size: 11px; font-weight: 500; line-height: 1.5; }
.workspace-menu a {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  color: var(--text); text-decoration: none;
}
.workspace-menu a:hover { background: var(--surface-sub); }
.workspace-menu a[aria-current="true"] { background: #eef2ff; }
.workspace-menu a .names { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.workspace-menu a .name { font-size: 14px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-menu a[aria-current="true"] .name { font-weight: 500; }
.workspace-menu a .domain { font-size: 12px; line-height: 1.5; color: var(--text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-menu a .current { flex: none; color: var(--primary); font-size: 12px; font-weight: 500; }
.workspace-menu hr { margin: 0; border: 0; border-top: 1px solid var(--border); }
.workspace-menu .menu-action { display: block; width: 100%; padding: 10px 14px; text-align: left; font-size: 14px; line-height: 1.5; }
.workspace-menu .menu-action:hover { background: var(--surface-sub); }
.workspace-menu-foot { padding: 6px 14px 4px; color: #94a3b8; font-size: 11px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-group { padding: 10px 12px 6px; color: var(--sidebar-muted); font-size: 11px; font-weight: 500; line-height: 1; }
.nav a {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius);
  color: var(--sidebar-text); text-decoration: none; font-size: 14px;
}
.nav a:hover { background: var(--sidebar-item); }
.nav a[aria-current="page"] { background: var(--primary); color: #fff; font-weight: 500; }
.nav a svg { width: 16px; height: 16px; flex: none; }
/* 下の端: 設定と、本体のアドレス（Figma の Sidebar の下部） */
.nav-bottom { margin-top: auto; }
.sidebar-foot { margin-top: -14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; line-height: 1.5; white-space: nowrap; }
.sidebar-foot .foot-label { color: var(--sidebar-text); font-size: 12px; font-weight: 500; }
.sidebar-foot .host { color: var(--sidebar-muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
.workspace-menu-account { display: flex; align-items: center; gap: 12px; padding: 8px 14px 4px; font-size: 12px; }
.workspace-menu-account .account-email { flex: 1; min-width: 0; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-menu-account form { margin: 0; }
.workspace-menu-account .link-button { font-size: 12px; }

.main { min-width: 0; padding: 32px 40px; display: flex; flex-direction: column; gap: 28px; }
.main[data-page="clusters"], .main[data-page="reviews"] { gap: 12px; }
.main[data-page="clusters"]:has(> .cluster-head) { gap: 16px; }
.page-head { display: flex; align-items: center; gap: 16px; }
.page-head .actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.page-head h1 { flex: 1; min-width: 0; font-size: 24px; font-weight: 700; line-height: 1.3; }
.page-head .page-note { color: var(--text-subtle); font-size: 12px; }
.page-lead { color: var(--text-muted); font-size: 13px; margin-top: -12px; }

.mobile-bar { display: none; }

/* ---- サイドバーの開閉（PC幅） ---- */
.sidebar { overflow-x: hidden; }
.sidebar-head { display: flex; align-items: center; gap: 8px; padding: 0 6px; }
.sidebar-head .sidebar-brand { flex: 1; min-width: 0; padding: 0; }
.sidebar-toggle {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px;
  background: none; color: var(--sidebar-muted); cursor: pointer;
}
.sidebar-toggle:hover { background: var(--sidebar-item); color: var(--sidebar-text); }
.sidebar-toggle svg { width: 16px; height: 16px; }
.sidebar-toggle .chevron { transform-box: fill-box; transform-origin: center; }
.ws-favicon { flex: none; border-radius: 4px; object-fit: contain; }
.workspace-menu a .ws-favicon { border-radius: 5px; }
/* 畳んだサイドバーで、カーソルを当てた項目の名前を出す札。common.js が位置を決める */
.sidebar-tip {
  position: fixed; z-index: 50; padding: 4px 8px; border-radius: 6px; pointer-events: none;
  background: var(--sidebar); color: #fff; font-size: 12px; font-weight: 500; line-height: 1.5; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.2);
}

@media (min-width: 768px) {
  html.sidebar-collapsed .app-shell { grid-template-columns: 72px minmax(0, 1fr); }
  html.sidebar-collapsed .sidebar { padding: 18px 12px; }
  html.sidebar-collapsed .sidebar-head { flex-direction: column; gap: 10px; padding: 0; }
  html.sidebar-collapsed .sidebar-brand { gap: 0; padding: 0; }
  html.sidebar-collapsed .sidebar-brand span,
  html.sidebar-collapsed .nav-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  html.sidebar-collapsed .sidebar-toggle .chevron { transform: scaleX(-1); }
  html.sidebar-collapsed .workspace-current { justify-content: center; min-height: 40px; padding: 8px 0; }
  html.sidebar-collapsed .workspace-current .names,
  html.sidebar-collapsed .workspace-current > svg { display: none; }
  html.sidebar-collapsed .workspace-current .ws-favicon { width: 24px; height: 24px; }
  html.sidebar-collapsed .nav-group { height: 8px; padding: 0; overflow: hidden; font-size: 0; }
  html.sidebar-collapsed .nav a { justify-content: center; min-height: 40px; padding: 0; }
  html.sidebar-collapsed .sidebar-foot { display: none; }

  /* 押したときだけ、幅を縮め・広げながら中身を入れ替える */
  html.sidebar-animating .app-shell { transition: grid-template-columns 0.22s ease; }
  html.sidebar-animating .sidebar > * { animation: sidebar-content-in 0.22s ease; }
}
@keyframes sidebar-content-in { from { opacity: 0; } to { opacity: 1; } }

/* ---- 区画 ---- */
.panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; min-width: 0;
}
.panel-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.panel-head h2 { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; }
.panel-head .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.panel-text { color: var(--text-muted); font-size: 13px; }

.summary-box {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-sub);
}
.summary-box .text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.summary-box .title { font-size: 14px; font-weight: 500; }
.summary-box .detail { color: var(--text-muted); font-size: 13px; overflow-wrap: anywhere; }
.summary-box .meta { color: var(--text-subtle); font-size: 12px; overflow-wrap: anywhere; }

.row-list { display: flex; flex-direction: column; }
.row-list > .row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.row-list > .row:last-child { border-bottom: 0; }
.row .text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row .title { font-size: 14px; font-weight: 500; }
.row .detail { color: var(--text-muted); font-size: 12px; overflow-wrap: anywhere; }
.row .row-actions { display: flex; align-items: center; gap: 14px; flex: none; }

.form-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.form-row .field { flex: 1 1 200px; }
.form-row .field.narrow { flex: 0 1 150px; }

.stats { display: flex; gap: 32px; flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat .label { color: var(--text-muted); font-size: 12px; }
.stat .value { font-size: 20px; font-weight: 700; line-height: 1.4; white-space: nowrap; }
.stat .sub { color: var(--text-subtle); font-size: 12px; }
.crawl-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; align-items: end; }

.progress { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-sub); }
.progress-head { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 500; }
.progress-head span:last-child { color: var(--text-subtle); font-weight: 400; font-size: 12px; }
.progress-bar { width: 100%; height: 6px; border: 0; border-radius: 3px; background: var(--border); overflow: hidden; appearance: none; -webkit-appearance: none; }
.progress-bar::-webkit-progress-bar { background: var(--border); border-radius: 3px; }
.progress-bar::-webkit-progress-value { background: var(--primary); border-radius: 3px; }
.progress-bar::-moz-progress-bar { background: var(--primary); border-radius: 3px; }
.progress p { color: var(--text-muted); font-size: 12px; }

.link-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.link-chips a {
  padding: 4px 10px; border: 1px solid var(--border-input); border-radius: var(--radius);
  background: var(--surface); color: var(--text); font-size: 13px; font-weight: 500; text-decoration: none;
}
.link-chips a:hover { border-color: var(--text-subtle); }

/* ---- ワークスペースの一覧 ---- */
.workspace-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.workspace-item { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.workspace-item:last-child { border-bottom: 0; }
.workspace-item .text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.workspace-item .heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.workspace-item .name { font-size: 15px; font-weight: 700; }
.workspace-item .domain { color: var(--text-subtle); font-size: 13px; }
.workspace-item .states { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.empty-state { padding: 24px; text-align: center; color: var(--text-muted); font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* ---- ダイアログ ---- */
.dialog {
  width: min(460px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 12px;
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.24); color: var(--text);
}
.dialog::backdrop { background: rgba(15, 23, 42, 0.45); }
.dialog form { display: flex; flex-direction: column; gap: 16px; padding: 22px; }
.dialog h2 { font-size: 18px; font-weight: 700; }
.dialog .lead { color: var(--text-muted); font-size: 13px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }

.skeleton { color: var(--text-subtle); font-size: 13px; }

/* ---- スマホ ---- */
@media (max-width: 767px) {
  .app-shell { display: block; }
  .mobile-bar {
    position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px;
    height: 47px; padding: 0 16px; background: var(--sidebar); color: #fff;
  }
  .mobile-bar .menu-button { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 18px; height: 23px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }
  .mobile-bar .menu-button::before { content: ""; position: absolute; width: 44px; height: 44px; }
  .mobile-bar .menu-button svg { flex: none; width: 24px; height: 24px; }
  .sidebar-toggle { display: none; }
  .mobile-bar .title { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-bar img { width: 22px; height: 22px; }
  .sidebar {
    position: fixed; z-index: 40; top: 0; left: 0; width: min(280px, 85vw); height: 100vh;
    transform: translateX(-100%); transition: transform 0.2s ease;
  }
  /* 開いた後は、固定メニューをサイドバーのスクロール領域へ閉じ込めない。 */
  .app-shell.nav-open .sidebar { transform: none; }
  .nav-scrim { position: fixed; inset: 0; z-index: 35; background: rgba(15, 23, 42, 0.45); }
  .main { padding: 16px; gap: 20px; }
  .page-head { display: none; }
  .panel { padding: 16px; }
  .panel-head .actions { width: 100%; }
  .panel-head .actions .button { flex: 1; }
  .row-list > .row { flex-wrap: wrap; }
  .row .row-actions { width: 100%; justify-content: space-between; }
  .form-row .field, .form-row .field.narrow { flex: 1 1 100%; }
  .form-row .button { width: 100%; }
  .crawl-grid { grid-template-columns: minmax(0, 1fr); }
  .stats { gap: 20px; }
  .topbar { padding: 0 16px; }
  .page-narrow { padding: 20px 16px 48px; }
  .workspace-item { flex-direction: column; align-items: stretch; }
  .workspace-item .states { flex-direction: column; }
  .workspace-item .button { width: 100%; }
  .auth-card, .plain-main { padding: 24px; }
  .dialog { margin: auto 0 0; width: 100vw; max-width: 100vw; border-radius: 16px 16px 0 0; }
  .dialog-actions { flex-direction: column-reverse; }
  .dialog-actions .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
  html.sidebar-animating .app-shell { transition: none; }
  html.sidebar-animating .sidebar > * { animation: none; }
}

/* ワークスペースの一覧の見出し。スマホでも出す */
.list-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.list-head h1 { flex: 1; min-width: 0; font-size: 24px; font-weight: 700; line-height: 1.3; }
@media (max-width: 767px) {
  .list-head h1 { font-size: 20px; }
}
.notice-stack { display: flex; flex-direction: column; gap: 8px; }
.panel-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.panel-body:empty { display: none; }

/* ---- メンバーの招待（L9） ---- */
.panel-note { color: var(--text-subtle); font-size: 12px; line-height: 18px; }
.link-result { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-sub); }
.link-result-title { font-size: 13px; font-weight: 500; }
.copy-row { display: flex; gap: 8px; align-items: center; }
.copy-row .input { flex: 1; min-width: 0; font-family: var(--mono); font-size: 13px; }
.data-table { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.data-table[role="table"] { min-width: 0; max-width: 100%; overflow-x: auto; }
.data-row { display: flex; align-items: center; gap: 16px; min-width: 720px; padding: 10px 16px; border-bottom: 1px solid var(--border); font-size: 13px; }
.data-row:last-child { border-bottom: 0; }
.data-row > span { flex: none; width: 110px; min-width: 0; }
.data-row > .grow { flex: 1; min-width: 280px; overflow-wrap: anywhere; }
.data-row > .wide { width: 130px; }
.data-row > .wide-action { width: 200px; }
.data-row > .cell-action { display: flex; justify-content: center; }
.data-head { padding: 8px 16px; background: var(--surface-sub); color: var(--text-muted); font-size: 12px; font-weight: 700; }
.button-fill { width: 100%; }
.form-row .field .select { min-height: 41px; }

@media (max-width: 767px) {
  .plain-page { place-items: start center; padding: 72px 24px 24px; }
  .auth-card { padding: 0; border: 0; background: transparent; box-shadow: none; max-width: none; }
  .auth-card h1 { font-size: 22px; }
  .auth-card .invite-summary { align-items: flex-start; }
  .copy-row { flex-direction: column; align-items: stretch; }
}

/* 連携の画面の選択肢の「一覧の取得」と再読み込み */
.list-refresh {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.list-refresh .panel-note {
  margin: 0;
}

/* ---- 記事のレビュー（Figma「記事のレビュー（構成書・本文）」R1〜R4、D1 レビュー待ちの一覧） ---- */
.breadcrumb { color: var(--text-muted); font-size: 13px; }
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.muted { color: var(--text-subtle); }
.tab-row { display: flex; gap: 24px; border-bottom: 1px solid var(--border); overflow-x: auto; } /* 記事詳細・人への依頼などと同じ間隔。個別の指定がないタブ（設定など）が4pxで詰まっていた */
/* 外側で横スクロールし、内側の下線とタブを同じ位置に保つ。 */
.tab-scroll { min-width: 0; max-width: 100%; overflow-x: auto; }
.tab-scroll > .tab-row { width: max-content; min-width: 100%; overflow: visible; }
.tab-scroll[data-overflow] { padding-bottom: 20px; }
.tab { padding: 10px 4px; border-bottom: 2px solid transparent; color: var(--text-muted); font-size: 14px; text-decoration: none; white-space: nowrap; }
.list-view-tabs { gap: 20px; }
.article-detail-tabs { gap: 24px; }
.tab[aria-current="page"] { border-bottom-color: var(--primary); color: var(--primary); font-weight: 700; }
.list-meta { color: var(--text-subtle); font-size: 12px; min-height: 18px; }
/* 表の列幅を保ち、狭い画面では表の領域だけをスクロールする。長文の列は読める幅で折り返す。 */
.table-wrap { min-width: 0; max-width: 100%; overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
table.review-queue { width: 100%; min-width: 1000px; border: 0; border-collapse: collapse; font-size: 13px; }
table.review-queue th { padding: 10px 14px; background: var(--surface-sub); color: var(--text-muted); font-size: 11px; font-weight: 500; text-align: left; white-space: nowrap; }
table.review-queue td { padding: 12px 14px; border-top: 1px solid var(--border); vertical-align: top; }
table.review-queue td.strong { font-weight: 700; white-space: nowrap; }
table.review-queue td.muted, table.review-queue td.nowrap { white-space: nowrap; }
table.review-queue .col-title { min-width: 280px; max-width: 480px; overflow-wrap: anywhere; }
table.review-queue .col-target { min-width: 150px; max-width: 280px; overflow-wrap: anywhere; }
.workflow-label { display: inline-block; padding: var(--workflow-label-padding-y) var(--workflow-label-padding-x); border-radius: var(--workflow-label-radius); background: #f1f5f9; color: var(--text-muted); font-size: 12px; font-weight: 500; line-height: 18px; white-space: nowrap; }
.workflow-label[data-kind="flow"] { background: #eff6ff; color: var(--primary); }
.workflow-labels { display: inline-flex; align-items: center; gap: 6px; }
.row-link { color: var(--text); text-decoration: none; }
.row-link:hover { color: var(--primary); text-decoration: underline; }
.meta-row { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; }
.meta-row dt { color: var(--text-subtle); font-size: 11px; }
.meta-row dd { margin: 0; font-size: 13px; }

.review-layout { display: grid; grid-template-columns: minmax(0, 1fr) 352px; gap: 24px; align-items: start; }
.review-doc { padding: 0; gap: 0; }
.review-doc-bar strong { white-space: nowrap; }
.review-doc-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 13px; }
.review-blocks { padding: 8px 16px 16px 8px; }
.rv-block { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; padding: 6px 0; }
.rv-num { color: var(--text-subtle); font-size: 11px; line-height: 2.2; text-align: right; user-select: none; }
.rv-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rv-label { color: var(--text-muted); font-size: 11px; user-select: none; }
.rv-text { font-size: 14px; line-height: 1.85; white-space: pre-wrap; overflow-wrap: anywhere; }
.rv-block[data-kind="heading"] .rv-text { font-size: 16px; font-weight: 700; line-height: 1.5; }
.review-blocks[data-selectable] .rv-text { cursor: text; }
.rv-text::selection, .rv-text *::selection { background: var(--primary); color: #fff; }
::highlight(rv-pending) { background-color: var(--primary); color: #fff; }
.rv-mark { background: none; color: var(--warn); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rv-badges { display: flex; flex-direction: column; gap: 4px; }
.rv-badge { min-width: 20px; padding: 0 6px; border-radius: 3px; background: #fff7ed; color: var(--warn); font-size: 11px; font-weight: 500; line-height: 18px; text-align: center; text-decoration: none; }

.review-comments { padding: 0; gap: 0; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
.review-comments-head { display: flex; align-items: baseline; gap: 8px; padding: 14px 16px 12px; border-bottom: 1px solid var(--border); }
.review-comments-head h2 { font-size: 14px; font-weight: 700; }
.review-comments-head .muted { font-size: 12px; }
.version-switch { display: flex; align-items: baseline; gap: 10px; margin-left: auto; font-size: 13px; }
.version-switch a { color: var(--text-muted); text-decoration: none; }
.version-switch a:hover { color: var(--primary); text-decoration: underline; }
.version-switch a[aria-current="page"] { color: var(--text); font-weight: 700; }
.rv-block[data-changed="true"] { background: var(--surface-sub); border-radius: var(--radius); }
.rv-changed { color: var(--text-muted); font-size: 11px; white-space: nowrap; }
.review-history { display: flex; flex-direction: column; gap: 8px; }
.review-history h2 { font-size: 16px; font-weight: 700; }
/* レビューの上の段。左に版と状態、右に執筆との切り替えと「レビューを終える」（Figma 574:62860） */
.work-mode-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 16px; }
.work-mode-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.work-mode-title h3 { font-size: 18px; font-weight: 700; }
.work-mode-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; min-height: 39px; margin-left: auto; }
.work-mode-actions .mode-switch { align-self: auto; }
.write-mode { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.work-mode-title .body-draft-status { flex: none; font-size: 12px; }
.work-mode-meta { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: -4px 0 0; font-size: 12px; }
.review-comments-empty { margin: 0; padding: 12px 16px; font-size: 13px; }
.history-gap { font-size: 12px; }
.history-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.6; }
.history-list li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; }
.history-date { color: var(--text-subtle); font-size: 11px; line-height: 2.1; }
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.comment-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; }
.comment-number { min-width: 20px; padding: 0 6px; border-radius: 3px; background: #fff7ed; color: var(--warn); font-size: 11px; font-weight: 500; line-height: 18px; text-align: center; }
.comment-severity { font-weight: 500; color: var(--text-muted); }
.comment-severity[data-severity="required"] { color: var(--danger); }
.comment-head .status { font-size: 12px; }
.comment-lost { color: var(--danger); }
.comment-quote { color: var(--text-muted); font-size: 12px; }
.comment-text { font-size: 14px; line-height: 1.65; white-space: pre-wrap; }
.comment[data-compact] .comment-text { font-size: 13px; }
.comment-agent { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 6px; background: var(--surface-sub); font-size: 13px; }
.comment-agent .muted { font-size: 11px; }
.comment-actions { display: flex; align-items: center; gap: 12px; }
.comment-actions:empty { display: none; }
.comment-author { color: var(--text-subtle); font-size: 11px; }
.comment-rewrite { display: flex; flex-direction: column; gap: 8px; }
.comment-rewrite textarea, .comment-popover textarea, .dialog textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--border-input); border-radius: 6px; background: var(--surface); font: inherit; font-size: 14px; resize: vertical; }
.review-whole { padding: 12px 16px 14px; text-align: left; }

.comment-popover { position: absolute; z-index: 30; width: min(420px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14); }
.comment-popover-place { color: var(--text-muted); font-size: 12px; }
.comment-popover-options { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.comment-popover-options select { min-height: 30px; padding: 2px 8px; border: 1px solid var(--border-input); border-radius: 6px; background: var(--surface); font-size: 12px; }
.comment-popover-hint { color: var(--text-subtle); font-size: 11px; }
.spacer { flex: 1; }
.segmented { display: inline-flex; border: 1px solid var(--border-input); border-radius: 6px; overflow: hidden; }
.segmented label { padding: 4px 10px; font-size: 12px; color: var(--text-muted); cursor: pointer; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label:has(input:checked) { background: #eff6ff; color: var(--primary); font-weight: 500; }
.segmented label:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: -2px; }
.finish-summary { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--radius); background: var(--surface-sub); font-size: 13px; }
.finish-summary strong { font-size: 14px; }

@media (max-width: 1023px) {
  .review-layout { grid-template-columns: minmax(0, 1fr); }
  .review-comments { position: static; max-height: none; }
}
/* スマホ幅では共通の見出しを隠すが、レビューでは記事名と「レビューを終える」が要るので出す */
@media (max-width: 767px) {
  .page-head.review-head { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  .page-head.review-head h1 { font-size: 18px; }
}

/* ---- 設計フロー（Figma「5 設計フロー」: クラスタの一覧・ホーム・成果物の表・行のシート・レビューを終える・版の比較・活動履歴） ---- */
:root { --danger-soft: #fef2f2; --warn-soft: #fff7ed; --ok-soft: #f0fdf4; --info-soft: #eff6ff; --row-open: #f1f5fd; }
table.review-queue td[data-tone="danger"] { color: var(--danger); }
.main[data-page="clusters"] > .page-lead, .main[data-page="reviews"] > .page-lead { margin-top: 0; line-height: 1.6; }
.main[data-page="clusters"] > .page-head:not(.cluster-head):not(.step-head), .main[data-page="reviews"] > .page-head { gap: 10px; }
.main[data-page="clusters"] > .page-head:not(.cluster-head):not(.step-head) h1, .main[data-page="reviews"] > .page-head h1 { line-height: 1.6; }
.main[data-page="clusters"] .tab-row, .main[data-page="reviews"] .tab-row { gap: 8px; }
.tab-bar { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); }
.tab-bar .tab-row { flex: 1; min-width: 0; border-bottom: 0; }
.tab-bar > .tab-scroll { flex: 1; }
.tab-bar > .tab-scroll > .tab-row { min-width: 100%; }
.tab-bar:has(> .tab-scroll[data-overflow]) { align-items: flex-start; border-bottom: 0; }
.tab-bar > .tab-scroll[data-overflow] > .tab-row { border-bottom: 1px solid var(--border); }

.filter-row { display: flex; gap: 8px; flex-wrap: wrap; }
.button[aria-pressed="true"] { border-color: var(--primary); color: var(--primary); }
.empty-panel { align-items: center; text-align: center; padding: 40px 24px; }
.empty-title { font-size: 15px; font-weight: 700; }
.cell-sub { display: block; color: var(--text-subtle); font-size: 12px; }
.cell-sub-line { display: block; }
.row-link.strong { font-weight: 700; }
.req { color: var(--danger); font-size: 11px; font-weight: 500; margin-left: 4px; }
.opt { color: var(--text-subtle); font-size: 11px; font-weight: 400; margin-left: 4px; }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.plain-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.foot-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.icon-button { width: 32px; height: 32px; border: 0; border-radius: 6px; background: none; color: var(--text-muted); font-size: 18px; line-height: 1; cursor: pointer; }
.icon-button:hover { background: var(--surface-sub); color: var(--text); }
kbd { display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 4px; border: 1px solid currentColor; border-radius: 3px; font-family: var(--mono); font-size: 10px; line-height: 16px; opacity: 0.7; }
textarea.input { min-height: auto; resize: vertical; font: inherit; }
.input.compact { min-height: 32px; padding: 4px 8px; font-size: 13px; width: auto; }

table.design-table { width: max-content; min-width: 100%; border: 0; border-collapse: collapse; font-size: 13px; }
table.design-table th { padding: 10px 14px; background: var(--surface-sub); color: var(--text-muted); font-size: 11px; font-weight: 500; text-align: left; white-space: nowrap; }
table.design-table td { padding: 11px 14px; border-top: 1px solid var(--border); vertical-align: top; white-space: nowrap; }
table.design-table tr.group-row th { padding: 9px 14px; border-top: 1px solid var(--border); color: var(--text); font-size: 12px; font-weight: 700; }
table.design-table td.nowrap { white-space: nowrap; }
.cluster-table td:first-child { min-width: 260px; max-width: 360px; white-space: normal; overflow-wrap: anywhere; }
.progress-cell { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 12px; }
.mini-progress { display: inline-flex; gap: 1px; }
.mini-progress span { width: 5px; height: 8px; background: var(--border); border-radius: 1px; }
.mini-progress span[data-done] { background: var(--ok); }

/* クラスタのホーム */
.cluster-head { align-items: flex-start; }
.cluster-head .head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cluster-head h1, .step-head h1 { line-height: 1.5; }
.cluster-head .page-lead { margin-top: 0; }
.home-layout { display: grid; grid-template-columns: minmax(300px, 430px) minmax(0, 1fr); gap: 16px; align-items: start; }
.step-list-panel { padding: 0; gap: 0; }
.step-list-title { padding: 16px 20px 12px; font-size: 15px; font-weight: 700; border-bottom: 1px solid var(--border); }
.step-list { list-style: none; margin: 0; padding: 0; }
.step-list li + li { border-top: 1px solid var(--border); }
.step-list a { display: flex; align-items: center; gap: 12px; padding: 10px 20px; color: var(--text); text-decoration: none; }
.step-list a:hover { background: var(--surface-sub); }
.step-list a[aria-current="true"] { background: var(--row-open); }
.step-name { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; font-weight: 500; }
.step-gate { color: var(--text-subtle); font-size: 11px; font-weight: 400; }
/* 工程名は最低でも7文字ぶんの幅を残す。版の表示は1行に収め、はみ出す分は「…」で省く（全文は title） */
.step-list .step-name { min-width: 7em; }
.step-version { flex: 0 1 auto; min-width: 0; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-subtle); font-size: 12px; }
.step-detail { gap: 14px; }
.detail-title { font-size: 18px; font-weight: 700; }
.state-box { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-radius: var(--radius); background: var(--surface-sub); }
.state-box > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.state-box strong { font-size: 14px; }
.state-box[data-tone="warn"] { background: var(--warn-soft); }
.state-box[data-tone="warn"] strong { color: var(--warn); }
.state-box[data-tone="info"] { background: var(--info-soft); }
.state-box[data-tone="info"] strong { color: var(--primary); }
.state-box[data-tone="error"] { background: var(--danger-soft); }
.state-box[data-tone="error"] strong { color: var(--danger); }
.state-box[data-tone="ok"] { background: var(--ok-soft); }
.state-box a { font-size: 13px; }
.kv-table { margin: 0; display: flex; flex-direction: column; }
.kv-table > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 13px; }
.kv-table > div:last-child { border-bottom: 1px solid var(--border); }
.kv-table dt { color: var(--text-subtle); }
.kv-table dd { margin: 0; overflow-wrap: anywhere; }
.kv-block { display: flex; flex-direction: column; gap: 8px; }
.kv-block h3 { font-size: 14px; font-weight: 700; }
.event-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.event-list li { display: grid; grid-template-columns: 90px minmax(0, 170px) minmax(0, 1fr); gap: 10px; }
.actor-agent { color: var(--primary); }
/* 最近の動き（Figma 545:34584）。日付・操作した人・内容の3列を固定幅でそろえた表 */
table.event-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; }
.event-table th, .event-table td { padding: 8px 16px 8px 0; border-top: 1px solid var(--border); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.event-table th:last-child, .event-table td:last-child { padding-right: 0; }
.event-table th { color: var(--text-subtle); font-size: 12px; font-weight: 500; }
.event-table th:nth-child(1) { width: 128px; }
.event-table th:nth-child(2) { width: 160px; }
.event-table tbody tr:last-child td { border-bottom: 1px solid var(--border); }
.cancel-row { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.question-banner { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: var(--radius); background: var(--danger-soft); color: var(--danger); font-size: 13px; }
.question-banner span { color: var(--text); flex: 1; min-width: 0; }
.question-banner a, .question-banner .link-button { color: var(--danger); }

/* 成果物の表 */
.step-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.step-top .breadcrumb { flex: 1; }
.step-nav { display: flex; align-items: center; gap: 12px; font-size: 12px; }
.step-nav a { text-decoration: none; }
.design-step-menu { order: 99; margin-left: auto; } /* 見出しの行の右端に置く */
.design-step-menu .version-menu-list { left: auto; right: 0; max-height: min(70vh, 560px); overflow-y: auto; font-size: 13px; }
.step-progress { display: inline-flex; gap: 3px; }
.step-progress span { width: 18px; height: 3px; border-radius: 2px; background: var(--border); }
.step-progress span[data-state="done"] { background: var(--ok); }
.step-progress span[data-state="current"] { background: var(--primary); }
.step-head { flex-wrap: wrap; gap: 10px; }
.step-head h1 { flex: 0 1 auto; }
.version-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; }
.version-menu { position: relative; }
.version-menu summary { list-style: none; cursor: pointer; }
.version-menu summary::-webkit-details-marker { display: none; }
.chip { display: inline-block; padding: 4px 10px; border: 1px solid var(--border-input); border-radius: 6px; background: var(--surface); font-size: 12px; }
.version-menu-list { position: absolute; z-index: 25; top: calc(100% + 4px); left: 0; min-width: 320px; padding: 4px 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14); }
.version-menu-list a { display: flex; justify-content: space-between; gap: 16px; padding: 8px 14px; color: var(--text); text-decoration: none; font-size: 13px; }
.version-menu-list a:hover { background: var(--row-open); }
/* 選択メニューでは、今開いているもの（工程・版など）に色と印を付け、押せる他の行と見分けられるようにする（2026-09-28 ユーザー指摘） */
.version-menu-list a[aria-current="true"], .version-menu-list a[aria-current="page"] { background: var(--row-open); color: var(--primary); font-weight: 600; }
/* 名前と状態が並ぶ行では、印を付けると状態の文字の位置がずれるので、色と背景だけで示す */
.version-menu-list a[aria-current]:has(> :nth-child(2))::after { display: none; }
.version-menu-list a[aria-current="true"]::after, .version-menu-list a[aria-current="page"]::after { content: ""; flex: 0 0 16px; align-self: center; width: 16px; height: 16px; margin-left: auto; background: currentColor; mask: url("/app/icons/check.svg") center / 16px 16px no-repeat; }
.head-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.list-meta { color: var(--text-muted); }
.rows-table tbody tr.data-row-item { cursor: pointer; }
.rows-table tbody tr.data-row-item:hover { background: var(--surface-sub); }
.rows-table tbody tr.data-row-item[aria-current="true"] { background: var(--row-open); }
.rows-table .col-check { width: 36px; padding-right: 0; }
.rows-table .col-change { width: 52px; }
.rows-table .col-comments { width: 70px; text-align: right; }
.rows-table .col-title { min-width: 280px; max-width: 360px; white-space: normal; overflow-wrap: anywhere; }
.rows-table td.col-data { min-width: 200px; max-width: 260px; white-space: normal; overflow-wrap: anywhere; }
.change-mark { color: var(--primary); font-size: 11px; font-weight: 500; white-space: nowrap; }
.change-mark[data-kind="removed"] { color: var(--danger); }
.decision { white-space: nowrap; font-size: 12px; font-weight: 500; }
.decision[data-decision="undecided"] { color: var(--text-subtle); font-weight: 400; }
.decision[data-decision="adopt"], .decision[data-decision="adopt_with_edit"] { color: var(--ok); }
.decision[data-decision="hold"] { color: var(--warn); }
.decision[data-decision="exclude"] { color: var(--danger); }
.row-title[data-decision="exclude"] { text-decoration: line-through; color: var(--text-muted); }
.inline-decision { display: none; margin-left: 8px; font-size: 12px; font-weight: 500; }
.inline-decision[data-decision="adopt"], .inline-decision[data-decision="adopt_with_edit"] { color: var(--ok); }
.inline-decision[data-decision="hold"] { color: var(--warn); }
.inline-decision[data-decision="exclude"] { color: var(--danger); }
.table-more { padding: 10px 14px; border-top: 1px solid var(--border); font-size: 13px; }
/* 行の表のページ送り。何行目かの表示と、前へ・ページ番号・次へ */
.row-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--border); font-size: 13px; }
.row-pager-count { color: var(--text-muted); }
.row-pager-links { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.row-pager-links > a, .row-pager-links > span { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 6px; color: var(--text); text-decoration: none; }
.row-pager-links a:hover { background: var(--surface-sub); color: var(--primary); }
.row-pager-links a[aria-current="page"] { background: var(--primary); color: #fff; font-weight: 700; }
.row-pager-links [aria-disabled="true"] { color: var(--text-subtle); }
.row-pager-links .row-pager-gap { min-width: 20px; padding: 0; color: var(--text-subtle); }
.returns-box { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; border-radius: var(--radius); background: var(--warn-soft); font-size: 13px; }
.returns-box strong { color: var(--warn); }
.returns-box ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.returns-box li { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 10px; }
.return-target { font-weight: 500; }
.bulk-bar { position: sticky; bottom: 12px; z-index: 15; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12); font-size: 13px; }
.toast { position: fixed; z-index: 60; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; align-items: center; gap: 16px; padding: 10px 16px; border-radius: var(--radius); background: var(--sidebar); color: #fff; font-size: 13px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25); }
.toast .link-button { color: #93c5fd; }
.page-error { position: fixed; z-index: 60; left: 50%; top: 16px; transform: translateX(-50%); max-width: min(640px, calc(100vw - 32px)); }

/* 右から重なるシート（行の詳細・クラスタの登録）。背景は暗くしない */
.side-sheet { position: fixed; z-index: 40; top: 0; right: 0; bottom: 0; width: min(600px, 100vw); display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--border); box-shadow: -8px 0 24px rgba(15, 23, 42, 0.08); }
.side-sheet .sheet-form { display: flex; flex-direction: column; height: 100%; }
.sheet-head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 28px 8px; }
.sheet-head h2 { flex: 1; font-size: 20px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.sheet-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sheet-title .mono { font-size: 11px; overflow-wrap: anywhere; }
.sheet-title #sheet-key:not(.mono) { font-size: 12px; }
.sheet-nav { display: flex; gap: 2px; }
.sheet-tabs { padding: 0 28px; }
.sheet-tabs .tab { border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer; font: inherit; font-size: 14px; }
.sheet-tabs .tab[aria-current="page"] { color: var(--primary); font-weight: 700; }
/* クラスタの設定の履歴（C3）。版ごとに、変えた理由と、変えた項目の前後の値 */
.settings-history { display: flex; flex-direction: column; gap: 20px; list-style: none; margin: 0; padding: 0; }
.settings-history > li { display: flex; flex-direction: column; gap: 10px; }
.settings-history > li + li { padding-top: 20px; border-top: 1px solid var(--border); }
.settings-version { display: flex; align-items: baseline; gap: 10px; font-size: 14px; }
.settings-version .muted { font-size: 12px; }
.settings-change { display: flex; flex-direction: column; gap: 6px; }
.settings-change .field-label { color: var(--text-muted); font-size: 13px; font-weight: 500; }
.settings-diff { display: flex; flex-direction: column; gap: 6px; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 14px; overflow-wrap: anywhere; }
.settings-diff .muted { font-size: 13px; }
.sheet-body { flex: 1; overflow-y: auto; padding: 18px 28px 24px; display: flex; flex-direction: column; gap: 18px; }
.row-detail > div { display: flex; flex-direction: column; gap: 18px; }
.row-detail [hidden] { display: none !important; }
.summary-kv { padding: 6px 16px; border-radius: var(--radius); background: var(--surface-sub); }
.summary-kv > div { border-top: 0; }
.summary-kv > div:last-child { border-bottom: 0; }
.sheet-kv > div { grid-template-columns: 140px minmax(0, 1fr); }
.sheet-long > div { grid-template-columns: minmax(0, 1fr); }
.was { display: block; color: var(--text-subtle); font-size: 11px; }
dd[data-field] textarea { width: 100%; }
.sheet-foot { border-top: 1px solid var(--border); padding: 16px 28px 18px; display: flex; flex-direction: column; gap: 10px; background: var(--surface); }
.foot-line { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.foot-line strong { white-space: nowrap; }
.return-line { align-items: baseline; }
.decide-buttons { display: grid; grid-template-columns: 1.6fr 1.2fr 0.8fr 0.8fr; gap: 8px; }
.decide-buttons .button { padding-inline: 10px; }
.reason-box, .edit-box, .return-box { display: flex; flex-direction: column; gap: 10px; }
.comment-thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.comment-thread li { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--border); }
.comment-thread li[data-kind="agent"] { background: var(--surface-sub); border-color: transparent; }
.comment-thread .muted { font-size: 11px; }
.comment-form { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.option-list { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 8px; }
.option-list legend { margin-bottom: 8px; font-size: 14px; font-weight: 700; }
.option { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; }
.option:has(input:checked) { border-color: var(--primary); background: var(--info-soft); }
.option-text { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.option-text strong { font-size: 14px; font-weight: 500; }
.recommend { margin-left: 8px; color: var(--primary); font-size: 11px; font-weight: 700; }
.option kbd { color: var(--text-subtle); }

/* レビューを終える */
.dialog-wide { width: min(640px, calc(100vw - 32px)); }
.dialog .kv-table > div { grid-template-columns: 120px minmax(0, 1fr); }
.check-list { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.check-list h3 { font-size: 14px; font-weight: 700; }
.check-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.check-list li { display: flex; gap: 10px; }
.check-list li span { flex: none; width: 64px; font-size: 12px; font-weight: 500; color: var(--ok); }
.check-list li[data-ok="false"] span { color: var(--danger); }

/* 版の比較 */
.compare-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.compare-bar label { display: flex; align-items: center; gap: 10px; }
.diff-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.diff-card summary { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--surface-sub); cursor: pointer; font-size: 14px; }
.diff-card[open] summary { border-bottom: 1px solid var(--border); }
.diff-card .table-wrap { border: 0; border-radius: 0 0 var(--radius) var(--radius); }
.diff-table { width: 100%; min-width: 780px; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.diff-table th { padding: 8px 16px; color: var(--text-muted); font-size: 11px; font-weight: 500; text-align: left; vertical-align: top; width: 140px; }
.diff-table thead th { width: auto; }
.diff-table thead th:first-child { width: 140px; }
.diff-table td { padding: 6px 8px; vertical-align: top; }
.diff-table tbody tr + tr { border-top: 1px solid var(--border); }
.diff-table del, .diff-table ins { display: block; padding: 6px 8px; border-radius: 4px; text-decoration: none; white-space: pre-wrap; overflow-wrap: anywhere; }
.diff-table del { background: var(--danger-soft); color: var(--text-muted); text-decoration: line-through; }
.diff-table ins { background: var(--ok-soft); }
.history-table td:first-child { width: 70px; }
.history-table td:nth-child(2) { min-width: 220px; max-width: 300px; white-space: normal; overflow-wrap: anywhere; }
.history-table td:nth-child(3) { min-width: 360px; max-width: 560px; white-space: normal; overflow-wrap: anywhere; }
.history-table [data-tone="ok"] { color: var(--ok); }

/* Figma に合わせ直した部分（2026-09-26）: ホームの右側、表の列の幅、行のシートのまとまり */
.page-sub { color: var(--text-muted); font-size: 13px; }
.page-sub a { color: inherit; text-decoration: none; }
.page-sub a:hover { text-decoration: underline; }
.facts-table > div { grid-template-columns: minmax(120px, auto) minmax(0, 1fr); }
.facts-table dd { text-align: right; }
.detail-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.list-meta.design-meta { display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: 12px; }
.table-search { width: 200px; }
/* 成果物の表は列ごとに幅を決め、合計が画面より広いときは列を詰めずに表の中で横にスクロールする。
   固定の表組みでは、表の幅は指定の幅と列の幅の合計の大きいほうになる。画面が広いときは余りを列に配る */
table.rows-table { width: 100%; min-width: 880px; table-layout: fixed; }
table.rows-table td { white-space: normal; }
.rows-table .col-title { width: 320px; min-width: 0; max-width: none; }
.rows-table th.col-data, .rows-table td.col-data { width: 184px; }
/* 上位ページごとの確認（Figma 571:19140）。順位・サイト・ページタイトル・URL で、どのページかを見分ける */
.rows-table[data-artifact="page_evidence"] .col-lead { width: 72px; white-space: nowrap; }
.rows-table[data-artifact="page_evidence"] .col-title { width: 380px; }
.rows-table[data-artifact="page_evidence"] [data-col="domain"] { width: 220px; }
.rows-table[data-artifact="page_evidence"] [data-col="url"] { width: 330px; color: var(--text-muted); }
.rows-table .col-judge { width: 120px; }
.rows-table .col-decision { width: 100px; }
.rows-table .col-data { max-width: none; overflow-wrap: anywhere; }
.rows-table td.col-title { overflow-wrap: anywhere; }
.judge { font-size: 13px; }
.judge[data-tone="ok"] { color: var(--ok); }
.judge[data-tone="warn"] { color: var(--warn); }
.judge[data-tone="none"] { color: var(--text-muted); }
.inline-decision { white-space: nowrap; }
.version-menu-list .version-compare { justify-content: flex-start; border-top: 1px solid var(--border); color: var(--primary); }
.toast { left: calc(var(--sidebar-width, 224px) + 40px); transform: none; }
.sheet-summary { margin: 0; padding: 12px 16px; border-radius: var(--radius); background: var(--surface-sub); display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.sheet-summary > div { display: grid; grid-template-columns: 144px minmax(0, 1fr); gap: 12px; }
.sheet-summary dt { color: var(--text-subtle); font-size: 12px; }
.sheet-summary dd { margin: 0; }
.dot-label { display: inline-flex; align-items: center; gap: 6px; }
.dot-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--none); flex: none; }
.dot-label[data-tone="ok"]::before { background: var(--ok); }
.dot-label[data-tone="warn"]::before { background: var(--warn); }
.sheet-group { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid var(--border); }
.sheet-group h3 { font-size: 14px; font-weight: 700; }
dl.sheet-kv { margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
dl.sheet-kv > div { display: grid; grid-template-columns: 144px minmax(0, 1fr); gap: 12px; }
dl.sheet-kv dt { color: var(--text-subtle); font-size: 12px; padding-top: 2px; }
dl.sheet-kv dd { margin: 0; overflow-wrap: anywhere; }
dl.sheet-kv.nested { font-size: 13px; gap: 4px; }
dd[data-editing] { padding: 8px 10px; border: 1px solid var(--border-input); border-radius: 6px; }
dd[data-editing]:focus-within { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
dd[data-editing] textarea { border: 0; padding: 0; min-height: 0; box-shadow: none; outline: none; }
.decide-buttons kbd, .option kbd { border: 0; background: var(--surface-sub); color: var(--text-subtle); opacity: 1; border-radius: 3px; }
.button-primary kbd { background: rgba(255, 255, 255, 0.9); color: var(--primary); }

/* AI からの質問のシート（Figma 170:1846・170:2265・170:2690） */
.heading-note { margin-left: 10px; color: var(--text-subtle); font-size: 12px; font-weight: 400; }
.field-label.strong { font-size: 14px; font-weight: 700; color: var(--text); }
dl.sheet-kv > div.solo { grid-template-columns: minmax(0, 1fr); }
.option-list legend { display: flex; align-items: baseline; }
.option { position: relative; }
.option-no { color: var(--text-subtle); font-size: 11px; font-family: var(--mono); }
.option .muted { color: var(--text-subtle); font-size: 12px; }
.recommend { color: var(--ok); }
.consult-menu { position: relative; }
.consult-menu .caret { margin-left: 6px; font-size: 10px; }
.consult-list { position: absolute; z-index: 45; bottom: calc(100% + 8px); left: 0; width: 340px; padding: 6px 0 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16); display: flex; flex-direction: column; }
.consult-list button { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 0; background: none; text-align: left; cursor: pointer; }
.consult-list button:hover, .consult-list button:focus-visible { background: var(--surface-sub); }
.consult-list button strong { font-size: 14px; font-weight: 500; }
.consult-list button span { color: var(--text-subtle); font-size: 12px; }
.consult-list .consult-local { border-top: 1px solid var(--border); }
.consult-note { padding: 8px 14px 10px; border-top: 1px solid var(--border); color: var(--text-subtle); font-size: 11px; }
.notice-links { display: flex; gap: 16px; margin-top: 4px; }
#answer-actions .button-primary:disabled { background: #93a5d8; opacity: 1; }

/* AI からの質問の一覧とやり取り（Figma 173:2172・173:2576・175:2783） */
.question-table tbody tr[aria-current="true"] { background: var(--row-open); }
.question-table td:first-child { width: 48%; min-width: 360px; max-width: 560px; white-space: normal; overflow-wrap: anywhere; }
.sheet-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; font-size: 12px; }
.sheet-status .status { font-size: 13px; }
.q-tabs { padding: 0 28px; }
.q-tabs .tab { border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer; font: inherit; font-size: 14px; }
.q-tabs .tab[aria-current="page"] { border-bottom-color: var(--primary); color: var(--primary); font-weight: 700; }
.turns { display: flex; flex-direction: column; gap: 14px; }
.turn { display: flex; flex-direction: column; gap: 6px; }
.turn-head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.turn-head strong { font-weight: 500; }
.turn-head .mono { font-size: 11px; }
.turn-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 18px; padding: 0 4px; border-radius: 3px; background: var(--surface-sub); color: var(--text-muted); font-size: 11px; font-weight: 500; }
.turn[data-kind="human"] .turn-badge { background: var(--info-soft); color: var(--primary); }
.turn-box { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 14px; }
.turn-box.ai-box { border-color: transparent; background: var(--surface-sub); }
.turn-box[data-latest="true"] { border-color: var(--primary); background: var(--info-soft); }
.turn-question { font-weight: 500; }
.turn-choice { font-weight: 500; }
.turn-caption { color: var(--text-subtle); font-size: 11px; }
.turn-note { display: flex; align-items: baseline; gap: 8px; color: var(--text-muted); font-size: 12px; }
.turn-note::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--none); flex: none; transform: translateY(-1px); }
.turn-note[data-tone="ok"]::before { background: var(--ok); }
.turn-note[data-tone="warn"]::before { background: var(--warn); }
.option-list .option { background: var(--surface); }
.option-tag { color: var(--primary); font-size: 11px; font-weight: 700; white-space: nowrap; }
.option-tag.recommend { color: var(--primary); }
.option[data-chosen="true"] { border-color: var(--primary); background: var(--info-soft); }
.radio-mark { width: 14px; height: 14px; margin-top: 3px; border: 1px solid var(--border-input); border-radius: 50%; flex: none; }
.option[data-chosen="true"] .radio-mark { border: 4px solid var(--primary); }

/* レビューを終える確認（Figma 164:1871） */
.returns-box li { grid-template-columns: minmax(80px, 120px) minmax(0, 1fr) auto; }
.returns-box .return-target { font-weight: 700; overflow-wrap: anywhere; }
.return-agent { display: flex; gap: 10px; font-size: 13px; }
.return-agent span { color: var(--text-subtle); font-size: 12px; }
.returns-box .return-agent span { color: var(--warn); }
.return-line strong { flex: none; }
.check-list li span { width: auto; min-width: 44px; white-space: nowrap; }

/* 版の比較（Figma 208:215） */
.diff-card summary .row-key { font-size: 11px; }
.diff-card .toggle-word::before { content: " ・ 開く"; }
.diff-card[open] .toggle-word::before { content: " ・ 閉じる"; }
.compare-bar select { max-width: 100%; }

/* 活動履歴（Figma 219:2） */
.history-table .actor-ai-work { color: var(--text-muted); }
.history-table .cell-sub a { text-decoration: none; font-size: 12px; }
.history-table .cell-sub a:hover { text-decoration: underline; }

.past-box { background: var(--surface); border: 1px solid var(--border-input); }

/* パンくず（2026-09-26 の決まり）: 上の階層はリンク、末尾は今の画面名 */
nav.breadcrumb { font-size: 12px; min-width: 0; }
/* 長い名前は1行に収まる長さで切り、末尾を「…」にする（決まりの7） */
nav.breadcrumb ol { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 6px; margin: 0; padding: 0; list-style: none; min-width: 0; }
nav.breadcrumb li { min-width: 0; max-width: 32em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
nav.breadcrumb li:last-child { flex: 1 1 auto; }
nav.breadcrumb li + li::before { content: ""; display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; background: var(--text-subtle); mask: url("/app/icons/chevron-right.svg") center / 16px 16px no-repeat; }
.chip-caret { margin-left: 6px; font-size: 10px; color: var(--text-subtle); }
nav.breadcrumb li[aria-current="page"] { color: var(--text-muted); }

/* シートは表に重なって出る（表の幅は変えない）。判断の列がシートの下に隠れるので、名前の横に結果を出す */
body.sheet-open .rows-table .inline-decision { display: inline; }
.sheet-tabs .tab[aria-current="page"] { border-bottom-color: var(--primary); }
@media (max-width: 1100px) {
  .home-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  /* スマホではページ番号を今のページの前後1つまでにして、1行に収める */
  .row-pager-links [data-far] { display: none; }
  .row-pager-links .row-pager-label { display: none; }
  .row-pager-links > a, .row-pager-links > span { min-width: 28px; padding: 0 6px; }
  .page-head.step-head, .page-head.cluster-head { display: flex; }
  /* 上の帯に今の画面名が出るので、見出しの文字は重ねて出さない（版の札や登録元は残す） */
  .page-head.step-head h1, .page-head.cluster-head h1 { display: none; }
  .main > nav.breadcrumb + .page-head.cluster-head { margin-top: 0; }
  .step-head h1, .cluster-head h1 { font-size: 20px; }
  .head-actions { width: 100%; justify-content: space-between; }
  .step-nav .step-progress { display: none; }
  .tab-bar { flex-direction: column; align-items: stretch; border-bottom: 0; }
  .tab-bar .tab-row { border-bottom: 1px solid var(--border); }
  .kv-table > div, .sheet-kv > div, .dialog .kv-table > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .event-list li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .event-table thead { display: none; }
  .event-table tr { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); }
  .event-table tbody tr:last-child { border-bottom: 1px solid var(--border); }
  .event-table td, .event-table tbody tr:last-child td { padding: 0; border: 0; }
  .event-table td:nth-child(3) { grid-column: 1 / -1; }
  .side-sheet { width: 100vw; border-left: 0; }
  .sheet-head, .sheet-body, .sheet-foot { padding-left: 16px; padding-right: 16px; }
  .sheet-tabs, .q-tabs { padding: 0 16px; }
  .question-table thead, .question-table td:nth-child(4) { display: none; }
  .decide-buttons { grid-template-columns: 1fr 1fr; }
  .decide-buttons .button:first-child { grid-column: 1 / -1; }
  .decide-buttons kbd, .option kbd, .option-no, #decide-hint { display: none; }
  .consult-list { width: min(340px, calc(100vw - 32px)); }
  .returns-box li { grid-template-columns: minmax(0, 1fr); }
  /* スマホでは選んだ工程の詳しい表示を先に出し、工程の並びはその下にする */
  .home-layout .step-detail { order: -1; }
  .state-box { flex-direction: column; align-items: stretch; gap: 8px; }
  /* 1行目に見出しと「質問を開く」、2行目に本文を全幅で置く */
  .question-banner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .question-banner > strong { grid-column: 1; grid-row: 1; }
  .question-banner > a, .question-banner > .link-button { grid-column: 2; grid-row: 1; white-space: nowrap; }
  .question-banner > span { grid-column: 1 / -1; grid-row: 2; }
  .state-box .button { width: 100%; }
  .step-top { flex-direction: column; align-items: flex-start; gap: 6px; }
  .toast { left: 16px; right: 16px; transform: none; }
  .facts-table dd { text-align: left; }
  .sheet-summary > div, dl.sheet-kv > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .table-search { width: 100%; }
  /* スマホの成果物の表: 1行目に名前（広く）と判断、2行目に AI の判定。名前を2行以内で読めるようにする */
  table.rows-table, table.rows-table tbody { display: block; min-width: 0; }
  .rows-table thead, .rows-table .col-check, .rows-table .col-data, .rows-table .col-comments { display: none; }
  .rows-table tbody tr.group-row, .rows-table tbody tr.group-row th { display: block; }
  .rows-table tbody tr.data-row-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 14px; border-top: 1px solid var(--border); }
  .rows-table tr.data-row-item td { padding: 0; border-top: 0; width: auto; }
  .rows-table .col-change { display: none; }
  .rows-table tr.data-row-item .col-title { grid-column: 1; grid-row: 1; font-weight: 500; }
  .rows-table tr.data-row-item .col-decision { grid-column: 2; grid-row: 1; }
  .rows-table tr.data-row-item .col-judge { grid-column: 1 / -1; grid-row: 2; }
  .rows-table tr.data-row-item .col-judge .judge { font-size: 12px; }
  #question-foot .panel-note { display: none; }
  #answer-actions { gap: 8px 12px; }
  #answer-actions .button-primary { flex: 1 1 100%; }
}


/* 設計の設定（S1）: 区画ごとに見出しと説明、下に「名前 ・ 値」の行。切り替えは role="switch" のチェックボックス */
.settings-scope { color: var(--text-muted); font-size: 12px; }
.design-settings { display: flex; flex-direction: column; gap: 24px; }
.setting-panel { gap: 0; padding: 20px 20px 12px; }
.setting-head { padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.setting-head h2 { font-size: 15px; font-weight: 700; }
.setting-head .panel-text { font-size: 12px; }
.setting-row { display: grid; grid-template-columns: minmax(0, 316px) minmax(0, 1fr); align-items: center; gap: 4px 16px; min-height: 45px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.setting-rows > .setting-row:last-child { border-bottom: 0; }
.setting-value { display: flex; align-items: center; gap: 8px; min-width: 0; }
.setting-value .select-small { width: auto; max-width: 100%; }
.setting-fixed { color: var(--text-muted); }
.cost-input { width: 96px; text-align: right; }
.switch { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 36px; height: 20px; margin: 0; border-radius: 10px; background: var(--border-input); cursor: pointer; transition: background 0.15s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform 0.15s; }
.switch:checked { background: var(--primary); }
.switch:checked::after { transform: translateX(16px); }
.switch:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.switch-text { color: var(--text-muted); font-size: 12px; }
.setting-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 720px) {
  .setting-panel { padding: 16px 14px 8px; }
  .setting-row { grid-template-columns: minmax(0, 1fr) auto; }
  .setting-row-stack { grid-template-columns: minmax(0, 1fr); }
  .setting-row:not(.setting-row-stack) .setting-fixed { text-align: right; }
  .setting-foot .button-primary { flex: 1 1 100%; }
}
/* 市場準備より先の工程（Figma「5 設計フロー」の各工程のフレーム） */
.open-issues { padding: 12px 16px; border-radius: 6px; background: #fff7ed; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.open-issues ul { margin: 0; padding-left: 1.2em; color: var(--text-muted); }
.preflight-summary { margin-bottom: 0; }
.rows-table th.col-data.num, .rows-table td.col-data.num { text-align: right; min-width: 0; width: 88px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rows-table[data-artifact="serp_batches"] td.col-data { min-width: 0; }
.rows-table[data-artifact="serp_batches"] th.col-data:nth-of-type(4), .rows-table[data-artifact="serp_batches"] td.col-data:nth-of-type(4) { width: 170px; }
.rows-table[data-artifact="serp_batches"] .col-judge { width: 118px; }
.rows-table[data-artifact="serp_batches"] th.col-data:nth-of-type(8), .rows-table[data-artifact="serp_batches"] td.col-data:nth-of-type(8) { width: 96px; font-family: var(--mono); font-size: 12px; color: var(--text-muted); }
/* Keyword Market: クラスタは1行で読む（Figma 151:1374）。Page Master は対応方針の列を細くする */
.rows-table[data-artifact="keyword_market"] .col-judge { width: 160px; max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rows-table[data-artifact="keyword_market"] td.col-data.num { width: 88px; }
.rows-table[data-artifact="page_master"] .col-judge { width: 140px; white-space: nowrap; }
/* 主張と根拠: 根拠の種類と取得状況は細い列（Figma 151:2152） */
.rows-table[data-artifact="claim_evidence"] td.col-data, .rows-table[data-artifact="claim_evidence"] th.col-data { width: 120px; white-space: nowrap; }
.rows-table[data-artifact="claim_evidence"] .col-judge { width: 84px; white-space: nowrap; }
/* 基準予測: 順・数の列は細く右寄せ。行ごとの判断はしない（Figma 152:1157） */
.rows-table .col-lead { width: 40px; color: var(--text-muted); text-align: right; }
.rows-table[data-artifact="baseline_forecast"] td.col-data.num, .rows-table[data-artifact="baseline_forecast"] th.col-data.num { width: 80px; }
/* 計算に用いた順序（制作順の承認とは別）。見出しは折り返す */
.rows-table[data-artifact$="_forecast"] .col-lead { width: 72px; white-space: normal; line-height: 1.4; }
.rows-table[data-artifact="baseline_forecast"] td.col-data:not(.num), .rows-table[data-artifact="baseline_forecast"] th.col-data:not(.num) { width: 180px; }
/* 計算明細（基準予測・最終予測で共通）: 見出しは折り返し、需要のまとまりの列を細くして8列を1440の幅に収める。狭い画面は横に送る */
.rows-table[data-artifact$="_forecast_detail"] th { white-space: normal; line-height: 1.4; vertical-align: bottom; }
.rows-table[data-artifact$="_forecast_detail"] .col-title { width: 140px; }
.rows-table[data-artifact$="_forecast_detail"] th.col-data.num, .rows-table[data-artifact$="_forecast_detail"] td.col-data.num { width: 104px; }
.rows-table[data-artifact$="_forecast_detail"] td.col-data:not(.num), .rows-table[data-artifact$="_forecast_detail"] th.col-data:not(.num) { width: 96px; }
/* 目標との差・基準予測との差: 数の列の見出しは長いので折り返し、隣の見出しと重ねない */
.rows-table[data-artifact$="forecast_gap"] th, .rows-table[data-artifact="final_forecast_changes"] th { white-space: normal; line-height: 1.4; vertical-align: bottom; }
.rows-table[data-artifact$="forecast_gap"] th.col-data.num, .rows-table[data-artifact$="forecast_gap"] td.col-data.num,
.rows-table[data-artifact="final_forecast_changes"] th.col-data.num, .rows-table[data-artifact="final_forecast_changes"] td.col-data.num { width: 120px; }
.rows-table[data-artifact$="forecast_gap"] th.col-data.num, .rows-table[data-artifact="final_forecast_changes"] th.col-data.num { white-space: normal; }
.rows-table[data-artifact$="forecast_gap"] th.col-comments { white-space: nowrap; }
/* 最終構造: 内部リンクのリンク元とリンク先は同じ幅（Figma 152:1548）。関係は細い列 */
@media (min-width: 768px) {
  .rows-table[data-artifact="internal_links"] .col-title, .rows-table[data-artifact="internal_links"] .col-data:not(:last-of-type) { width: 32%; }
}
.architecture-band { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; margin: 0 0 12px; padding: 12px 16px; border-radius: var(--radius); background: var(--surface-sub); font-size: 13px; }
.architecture-band span { color: var(--text-muted); }
.architecture-band[data-state="fail"] strong, .architecture-band[data-state="unchecked"] strong { color: var(--warn); }
.check-field { display: flex; gap: 8px; align-items: center; margin: 12px 0; font-weight: 600; }
/* 行の値の絞り込み（束・ページなど）の選択肢は、狭い画面でも右端からはみ出さない幅にする */
.filter-menu .version-menu-list { min-width: 360px; max-width: calc(100vw - 32px); max-height: min(60vh, 480px); overflow-y: auto; overscroll-behavior: contain; }
.filter-menu .version-menu-list a > :last-child { flex: none; white-space: nowrap; }
/* 修正のときの要点の箱: 項目ごとの入力欄を縦に並べ、区切りの「・」は出さない */
.sheet-summary dd:has([data-editing]) .summary-sep { display: none; }
.sheet-summary dd [data-editing] { display: block; }
.sheet-summary dd [data-editing] + [data-editing], .sheet-summary dd .summary-sep + [data-editing] { margin-top: 8px; }
#sheet-title .input { width: 100%; font: inherit; }
.sheet-summary .edit-field-label { display: block; margin-bottom: 4px; color: var(--text-muted); font-size: 12px; }
.row-sheet .sub-path { display: block; margin-top: 4px; font-family: var(--mono); font-size: 12px; color: var(--text-muted); overflow-wrap: anywhere; }
.rows-table[data-artifact="page_roles"] .col-judge, .rows-table[data-artifact="category_url_rules"] .col-judge, .rows-table[data-artifact="page_master_diff"] .col-judge { width: 150px; }
@media (max-width: 767px) {
  /* 内部リンクは、幅の狭い画面でもリンク先を2行目に添える */
  .rows-table[data-artifact="internal_links"] tr.data-row-item td.col-data:nth-of-type(4) { display: block; grid-column: 1 / -1; grid-row: 2; font-size: 13px; color: var(--text-muted); }
  .rows-table[data-artifact="internal_links"] tr.data-row-item td.col-data:nth-of-type(4)::before { content: ""; display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; background: currentColor; mask: url("/app/icons/chevron-right.svg") center / 16px 16px no-repeat; }
  /* 予測の表（ページ別・目標との差・基準予測との差・計算明細）は、幅の狭い画面でも表のまま横に送り、保存した値の列を並べて読む */
  .table-wrap:has(> table.rows-table:is([data-artifact$="_forecast"], [data-artifact$="_forecast_gap"], [data-artifact$="_forecast_detail"], [data-artifact="final_forecast_changes"])) { overflow-x: auto; }
  table.rows-table:is([data-artifact$="_forecast"], [data-artifact$="_forecast_gap"], [data-artifact$="_forecast_detail"], [data-artifact="final_forecast_changes"]) { display: table; min-width: 640px; }
  table.rows-table:is([data-artifact$="_forecast"], [data-artifact$="_forecast_gap"], [data-artifact$="_forecast_detail"], [data-artifact="final_forecast_changes"]) thead { display: table-header-group; }
  table.rows-table:is([data-artifact$="_forecast"], [data-artifact$="_forecast_gap"], [data-artifact$="_forecast_detail"], [data-artifact="final_forecast_changes"]) tbody { display: table-row-group; }
  .rows-table:is([data-artifact$="_forecast"], [data-artifact$="_forecast_gap"], [data-artifact$="_forecast_detail"], [data-artifact="final_forecast_changes"]) tbody tr.data-row-item, .rows-table:is([data-artifact$="_forecast"], [data-artifact$="_forecast_gap"], [data-artifact$="_forecast_detail"], [data-artifact="final_forecast_changes"]) tbody tr.group-row { display: table-row; }
  .rows-table:is([data-artifact$="_forecast"], [data-artifact$="_forecast_gap"], [data-artifact$="_forecast_detail"], [data-artifact="final_forecast_changes"]) tbody tr.group-row th { display: table-cell; }
  .rows-table:is([data-artifact$="_forecast"], [data-artifact$="_forecast_gap"], [data-artifact$="_forecast_detail"], [data-artifact="final_forecast_changes"]) tr.data-row-item td, .rows-table:is([data-artifact$="_forecast"], [data-artifact$="_forecast_gap"], [data-artifact$="_forecast_detail"], [data-artifact="final_forecast_changes"]) .col-data { display: table-cell; padding: 10px 8px; }
  .rows-table:is([data-artifact$="_forecast"], [data-artifact$="_forecast_gap"], [data-artifact$="_forecast_detail"], [data-artifact="final_forecast_changes"]) .col-check, .rows-table:is([data-artifact$="_forecast"], [data-artifact$="_forecast_gap"], [data-artifact$="_forecast_detail"], [data-artifact="final_forecast_changes"]) .col-change, .rows-table:is([data-artifact$="_forecast"], [data-artifact$="_forecast_gap"], [data-artifact$="_forecast_detail"], [data-artifact="final_forecast_changes"]) .col-comments,
  .rows-table:is([data-artifact$="_forecast"], [data-artifact$="_forecast_gap"], [data-artifact$="_forecast_detail"], [data-artifact="final_forecast_changes"]) tr.data-row-item td:is(.col-check, .col-change, .col-comments) { display: none; }
  /* 行の名前の列は細くし、値の列は1行で並べる（横に送ると値が順に読める） */
  .rows-table:is([data-artifact$="_forecast"], [data-artifact$="_forecast_gap"], [data-artifact$="_forecast_detail"], [data-artifact="final_forecast_changes"]) .col-title { width: 112px; min-width: 96px; }
  .rows-table:is([data-artifact$="_forecast"], [data-artifact$="_forecast_gap"], [data-artifact$="_forecast_detail"], [data-artifact="final_forecast_changes"]) td.col-data, .rows-table:is([data-artifact$="_forecast"], [data-artifact$="_forecast_gap"], [data-artifact$="_forecast_detail"], [data-artifact="final_forecast_changes"]) td.col-judge { white-space: nowrap; }
  .rows-table:is([data-artifact$="_forecast"], [data-artifact$="_forecast_gap"], [data-artifact$="_forecast_detail"], [data-artifact="final_forecast_changes"]) th, .rows-table:is([data-artifact$="_forecast"], [data-artifact$="_forecast_gap"], [data-artifact$="_forecast_detail"], [data-artifact="final_forecast_changes"]) th.col-data.num { white-space: normal; min-width: 64px; }
}
.forecast-total strong { font-weight: 600; color: var(--text); }
#decide-foot[data-plain] #decide-buttons, #decide-foot[data-plain] #foot-state, #decide-foot[data-plain] #decide-line > strong { display: none; }
.gap-note { display: flex; gap: 12px; margin: 0; padding: 12px 14px; border-radius: 8px; background: var(--warn-soft); font-size: 13px; }
.gap-note strong { color: var(--warn); flex: none; }
/* 調査ツールの .row-detail（灰の背景・左の余白）が行のシートにも当たるので、シートの中では打ち消す */
.row-sheet .row-detail { padding: 0; border-top: 0; background: none; }
.shared-band { display: flex; flex-direction: column; gap: 2px; margin: 0 0 12px; padding: 12px 16px; border-radius: var(--radius); background: var(--surface-sub); font-size: 13px; }
.shared-band span { color: var(--text-muted); font-size: 12px; }
.related-notes span[data-state="unrecorded"], .related-notes span[data-state="ambiguous"], .related-notes span[data-state="missing"] { color: var(--warn); }
.related-notes a { margin-left: 6px; }
.related-notes a[aria-current="true"] { font-weight: 600; }
.forecast-detail { overflow-x: auto; }
.forecast-detail table { font-size: 12px; min-width: 520px; }
.forecast-detail th, .forecast-detail td { padding: 6px 8px; white-space: nowrap; }
.evidence-band { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 12px; padding: 12px 16px; border-radius: var(--radius); background: var(--surface-sub); font-size: 13px; }
.evidence-band .muted { flex-basis: 100%; font-size: 12px; }
/* 上位ページで確かめた項目の表。列は潰さず、シートの幅を超えたら横にスクロールする（Figma: 220 / 128 / 400 / 280） */
.criteria-table { overflow-x: auto; }
.criteria-table table { table-layout: fixed; width: 1028px; font-size: 13px; }
.criteria-table th, .criteria-table td { padding: 10px 12px; vertical-align: top; text-align: left; }
.criteria-table thead th:nth-child(1) { width: 220px; }
.criteria-table thead th:nth-child(2) { width: 128px; }
.criteria-table thead th:nth-child(3) { width: 400px; }
.criteria-table thead th:nth-child(4) { width: 280px; }
.criteria-table thead th { color: var(--text-subtle); font-size: 12px; font-weight: 500; }
.criteria-table tr.criteria-group th { background: var(--surface-sub); color: var(--text-muted); font-size: 12px; font-weight: 500; }
.criteria-table td:nth-child(4) { color: var(--text-muted); }
.criteria-status { white-space: nowrap; }
.criteria-status[data-tone="ok"] { color: var(--ok); }
.criteria-status[data-tone="warn"] { color: var(--warn); }
.criteria-status[data-tone="none"] { color: var(--text-subtle); }
.criteria-more-row td { padding: 8px 12px; }
.criteria-more-row .link-button { display: inline-flex; align-items: center; gap: 4px; }
.sheet-url { font-family: var(--mono); font-size: 11px; color: var(--primary); overflow-wrap: anywhere; }
.rows-table[data-artifact="serp_batch_state"] .col-title { width: 180px; }
.rows-table[data-artifact="serp_batch_state"] td.col-data:last-of-type { min-width: 360px; color: var(--text-muted); font-size: 12px; }
.batch-summary strong { color: var(--text); font-weight: 600; }
.batch-summary span[data-state="unrecorded"] { color: var(--warn); }
.sheet-note { margin: 16px 0 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 12px; color: var(--text-muted); }
.review-band { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 14px; border-radius: 6px; background: var(--surface-sub); border: 1px solid var(--border); font-size: 13px; }
.review-band .dot-label { font-weight: 700; }
.lane-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lane-card { padding: 10px 12px; border-radius: 6px; background: var(--surface-sub); font-size: 13px; display: flex; flex-direction: column; gap: 6px; }
.lane-card ol { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.lane-card li[data-only] { color: #b45309; }
@media (max-width: 720px) { .lane-cards { grid-template-columns: minmax(0, 1fr); } }
.fixed-rows { margin-top: 12px; font-size: 13px; }
.fixed-rows summary { cursor: pointer; color: var(--primary); display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.fixed-rows summary .muted { color: var(--text-subtle); font-size: 12px; }
.fixed-list { margin: 8px 0 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.fixed-list > div { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 4px 16px; padding: 9px 14px; }
.fixed-list > div + div { border-top: 1px solid var(--border); }
.fixed-list dd { margin: 0; color: var(--text-muted); }
@media (max-width: 720px) { .fixed-list > div { grid-template-columns: minmax(0, 1fr); } }
#rows-table[data-plain] .col-check, #rows-table[data-plain] .col-change, #rows-table[data-plain] .col-decision, #rows-table[data-plain] .col-comments { display: none; }

/* 設計フロー: 決めた値だけ色を付ける列（Keyword Market のクラスタ、Page Master の新規作成は青の太字） */
.judge[data-tone="plain"] { color: var(--text); }
.judge[data-tone="primary"], .dot-label[data-tone="primary"] { color: var(--primary); font-weight: 600; }
.dot-label[data-tone="plain"]::before { display: none; }
.dot-label[data-tone="primary"]::before { display: none; }

/* ---- 今日の判断・記事一覧・記事詳細（Figma 01・02・03・03b・03c・16、スマホ M01・M02・M03） ---- */
.main > .page-head + .notice-stack, .main > .page-head + .notice { margin-top: 0; }
.mobile-only, .show-small { display: none; }
.section-head { display: flex; align-items: flex-end; gap: 12px; }
.section-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.section-title h2 { font-size: 16px; font-weight: 700; line-height: 1.5; }
.section-title p { color: var(--text-muted); font-size: 13px; line-height: 1.5; }

/* 数値の表示（部品 Stat）: 見出し語 12px、値 Bold 28px、補足 12px。数値どうしの間は 56px */
.kv { display: flex; flex-wrap: wrap; gap: 16px 56px; }
.kv-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; white-space: nowrap; }
.kv-label { color: var(--text-muted); font-size: 12px; line-height: 18px; }
.kv-value { font-size: 28px; font-weight: 700; line-height: 34px; }
.kv-sub { color: var(--text-subtle); font-size: 12px; line-height: 18px; }

/* 表（Figma の table）。行ごとに列の幅を data-layout で決め、スマホでは1件ずつ縦に積む */
.grid-table { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.grid-row { display: grid; gap: 16px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text); font-size: 13px; line-height: 1.5; text-decoration: none; }
.grid-row:last-child { border-bottom: 0; }
.grid-head { padding: 8px 16px; color: var(--text-muted); font-size: 12px; font-weight: 700; }
a.grid-row:hover { background: var(--surface-sub); }
.grid-row .num { text-align: right; font-variant-numeric: tabular-nums; line-height: 20px; }
.grid-head .num { line-height: 18px; }
.grid-row .cell-title { min-width: 0; overflow-wrap: anywhere; }
.grid-row .cell-slug { color: var(--text); }
.grid-row .cell-date { color: var(--text-muted); line-height: 20px; }
.grid-row .cell-action { text-align: center; }
.grid-row .cell-sub { display: none; }
.grid-row [data-trend="up"] { color: var(--ok); }
.grid-row [data-trend="down"] { color: var(--danger); }
.grid-row .important { color: var(--warn); }
.grid-table[data-layout="priority"] .grid-row { grid-template-columns: minmax(0, 1fr) 360px 220px 90px; }
.grid-table[data-layout="reviews"] .grid-row { grid-template-columns: minmax(0, 1fr) 80px 140px 120px; }
.grid-table[data-layout="articles"] .grid-row { grid-template-columns: minmax(0, 1fr) 110px 64px 72px 52px 64px 110px; }
.grid-table[data-layout="keywords"] .grid-row { grid-template-columns: minmax(0, 1fr) 90px 90px 80px; }
.grid-table[data-layout="queries"] .grid-row { grid-template-columns: minmax(0, 1fr) repeat(4, 80px); }
.grid-table[data-layout="serp"] .grid-row { grid-template-columns: 48px minmax(0, 1fr); }
.grid-table[data-layout="tracked"] .grid-row { grid-template-columns: minmax(0, 1fr) 48px 70px 80px 90px 140px; }

/* 絞り込みの行 */
.filter-bar { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.filter-bar .search-field { width: 320px; }
.filter-bar .filter-field { width: 140px; }
.filter-bar .filter-count { margin-left: auto; color: var(--text-muted); font-size: 13px; line-height: 20px; padding-bottom: 11px; }
.search-box { position: relative; }
.search-box svg { position: absolute; left: 12px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); color: var(--text-subtle); pointer-events: none; }
.search-box .input { padding-left: 32px; }
.select { appearance: none; -webkit-appearance: none; width: 100%; min-height: 41px; padding: 9px 30px 9px 11px; border: 1px solid var(--border-input); border-radius: var(--radius); font-size: 14px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2364748b' stroke-width='1.5'%3E%3Cpath d='m3 4.5 3 3 3-3'/%3E%3C/svg%3E") no-repeat right 10px center / 12px; }
.more-row { display: flex; justify-content: center; }

/* 記事詳細 */
.detail-head .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.main > .breadcrumb + .page-head { margin-top: -16px; }
.main[data-page="clusters"] > .breadcrumb + .page-head { margin-top: 0; }
.detail-meta { gap: 8px 28px; }
.detail-meta > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.detail-meta dd { font-size: 14px; overflow-wrap: anywhere; }
.detail-meta .meta-url a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.detail-meta .meta-url a:hover { text-decoration-thickness: 2px; }
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 392px; gap: 24px; align-items: start; }
.detail-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.detail-side { gap: 20px; }
.side-block { display: flex; flex-direction: column; gap: 6px; }
.side-block h3, .side-label { color: var(--text-muted); font-size: 13px; font-weight: 400; }
.side-block p { font-size: 14px; line-height: 1.65; }
.judgment { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); }
.judgment-head { display: flex; align-items: center; gap: 8px; }
.judgment-head h3 { flex: 1; font-size: 15px; font-weight: 700; }
.side-field { display: flex; flex-direction: column; gap: 2px; }
.side-field span { color: var(--text-subtle); font-size: 11px; }
.side-field p { font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.body-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 24px; align-items: start; }
.versions { gap: 8px; padding: 16px; }
.version-list { list-style: none; margin: 0; padding: 0; }
.version-list li { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.version-list li:last-child { border-bottom: 0; }
.version-list li > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.version-list .muted { font-size: 11px; }
.body-doc { padding: 0; gap: 0; }
.body-doc-bar { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.body-doc-bar h2 { flex: 1; font-size: 13px; font-weight: 400; }
.body-doc-bar .muted { font-size: 11px; }
.markdown { margin: 0; padding: 16px; max-height: 640px; overflow: auto; font: 13px/1.9 var(--font); white-space: pre-wrap; overflow-wrap: anywhere; }
.stats-chart { flex-direction: row; align-items: center; gap: 32px; flex-wrap: wrap; }
.stats-chart .kv { flex: 1 1 auto; }
.stats-chart .line-chart { flex: 0 1 340px; }
.stats-chart:has(.kv-item:nth-child(5)) { flex-direction: column; align-items: stretch; }
.stats-chart:has(.kv-item:nth-child(5)) .line-chart { flex: none; }
.line-chart { margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.line-chart figcaption { display: flex; gap: 12px; color: var(--text-muted); font-size: 11px; }
.line-chart .legend::before { content: ""; display: inline-block; width: 10px; height: 2px; margin: 0 4px 3px 0; background: var(--primary); vertical-align: middle; }
.line-chart .legend-dashed::before { background: var(--text-subtle); }
.line-chart .legend-accent::before { background: var(--warn); }
.line-chart .accent-line { fill: none; stroke: var(--warn); stroke-width: 2; vector-effect: non-scaling-stroke; }
.line-chart svg { width: 100%; display: block; flex: none; overflow: hidden; }
.line-chart .grid { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.line-chart .main-line { fill: none; stroke: var(--primary); stroke-width: 2; vector-effect: non-scaling-stroke; }
.line-chart .compare { fill: none; stroke: var(--text-subtle); stroke-width: 1.5; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.line-chart .dot { fill: var(--primary); }
.line-chart .axis { display: flex; justify-content: space-between; color: var(--text-subtle); font-size: 11px; }
.event-list li { grid-template-columns: 100px minmax(0, 1fr); }
.event-list li > span:nth-child(3) { grid-column: 2; }
.mobile-bar .title-back { color: #fff; text-decoration: none; }

@media (max-width: 1100px) {
  .detail-layout, .body-layout { grid-template-columns: minmax(0, 1fr); }
  .grid-table[data-layout="priority"] .grid-row { grid-template-columns: minmax(0, 1fr) 260px 160px 80px; }
}
@media (max-width: 767px) {
  .mobile-only { display: flex; flex-direction: column; gap: 8px; }
  .mobile-only .button { width: 100%; }
  .hide-small { display: none !important; }
  .show-small { display: inline; }
  .kv { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
  .kv-value { font-size: 24px; line-height: 30px; }
  .panel:has(> .section-head) { padding: 0; border: 0; background: none; gap: 12px; }
  .grid-table .grid-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 12px 16px; }
  .grid-table .grid-row > [role="cell"] { display: none; }
  .grid-table .grid-row > .cell-title { display: block; flex: 1 1 0; font-size: 14px; font-weight: 700; }
  .grid-table .grid-row > .cell-status, .grid-table .grid-row > .cell-action { display: block; flex: none; }
  .grid-table .grid-row.grid-head, .grid-table .cell-status > .muted { display: none; }
  .grid-table .grid-row > .cell-sub { display: block; flex-basis: 100%; color: var(--text-muted); font-size: 12px; }
  .grid-table[data-layout="priority"] .grid-row > .cell-now { display: block; order: 3; flex-basis: 100%; color: var(--text-muted); font-size: 12px; }
  .grid-table[data-layout="priority"] .grid-row .cell-slug { display: none; }
  .grid-table[data-layout="reviews"] .grid-row > .cell-version, .grid-table[data-layout="reviews"] .grid-row > .cell-date { display: inline; order: 3; color: var(--text-muted); font-size: 12px; }
  .grid-table[data-layout="serp"] .grid-row > .num { display: block; }
  .filter-bar { gap: 12px 8px; }
  .filter-bar .search-field { width: 100%; }
  .filter-bar .filter-field { width: auto; flex: 1 1 0; }
  .filter-bar .filter-count { order: 10; width: 100%; margin: 0; padding: 0; font-size: 12px; }
  .more-row .button { width: 100%; }
  /* 上の情報は「PM-DS-007・主KW: …」の1行と、URL の1行にする */
  .detail-meta { flex-direction: row; flex-wrap: wrap; gap: 2px 0; color: var(--text-muted); }
  .detail-meta > div { flex-direction: row; }
  .detail-meta dt { display: none; }
  .detail-meta dd { font-size: 12px; }
  .detail-meta > div:nth-child(2) dd::before { content: "・主KW: "; }
  .detail-meta > .meta-url { flex-basis: 100%; order: 3; }
  .detail-meta > div:nth-child(4) { display: none; }
  .detail-side { order: -1; }
  .detail-layout { gap: 16px; }
  .stats-chart { flex-direction: column; align-items: stretch; }
  .stats-chart .line-chart { flex-basis: auto; }
}

/* ---- 順位・AI Overviews（Figma 05・08、スマホ M05・M08） ---- */
.button-cost { background: var(--warn); color: #fff; }
.button-cost:hover:not(:disabled) { background: #92400e; }
.filter-bar .filter-wide { width: 190px; }
.filter-bar .spacer { flex: 1; }
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); }
.grid-row .cell-url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.grid-row [data-cited] { color: var(--ok); }
.grid-row[data-paused] { color: var(--text-subtle); }
.grid-table[data-layout="rank"] .grid-row { grid-template-columns: minmax(0, 1.1fr) 48px minmax(0, 1.4fr) 60px 70px 80px 120px; }
.grid-table[data-layout="aio"] .grid-row { grid-template-columns: minmax(0, 1.2fr) 60px 100px 80px minmax(0, 1.2fr) 70px; }
@media (max-width: 767px) {
  .filter-bar .filter-wide, .filter-bar .spacer { display: none; }
  .filter-bar .button-cost { width: 100%; order: 9; }
  .section-head .actions .button-cost { font-size: 12px; min-height: 32px; padding: 4px 10px; }
}

/* ---- アクセス（Figma 06・M06） ---- */
.sync-line { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; font-size: 13px; }
.sync-line .period-form { margin-left: auto; }
.select-small { min-height: 32px; padding: 4px 28px 4px 10px; font-size: 13px; }
.two-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.grid-table[data-layout="metric4"] .grid-row { grid-template-columns: minmax(0, 1fr) 64px 72px 56px 48px; gap: 12px; }
.grid-table[data-layout="sources"] .grid-row { grid-template-columns: minmax(0, 1fr) 100px 80px 110px; }
@media (max-width: 1100px) { .two-columns { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
  .sync-line .period-form { margin-left: 0; }
}

/* ---- レポート（Figma 10・M10） ---- */
.head-search { width: 260px; }
.report-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: start; }
.grid-table[data-layout="reports"] .grid-row { grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1fr) 40px; }
.grid-table[data-layout="reports"] a.grid-row[aria-current="true"] { background: var(--info-soft, #eff6ff); }
.grid-table[data-layout="moves"] .grid-row { grid-template-columns: minmax(0, 1fr) 60px 60px; }
.report-detail { gap: 12px; }
.report-detail p { font-size: 13px; line-height: 1.7; }
.report-detail-head { display: flex; align-items: flex-start; gap: 12px; }
.report-detail-head h2 { flex: 1; font-size: 15px; font-weight: 700; line-height: 1.5; }
.report-nav { display: flex; gap: 12px; flex: none; font-size: 13px; }
@media (max-width: 1100px) { .report-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
  .page-head.report-head { display: flex; }
  .page-head.report-head h1 { display: none; }
  .report-head .head-search { width: 100%; }
  /* スマホでは直近の5日だけ並べ、それより前は検索か「前の日」でたどる */
  .grid-table[data-layout="reports"] a.grid-row:nth-of-type(n + 6) { display: none; }
  .grid-table[data-layout="reports"] .cell-action { display: none; }
  .grid-table[data-layout="reports"] a.grid-row[aria-current="true"] .cell-title { color: var(--accent, #1d4ed8); }
}

/* ---- サイト診断・表示速度（Figma 11・M11・07） ---- */
.filter-bar .filter-grow { flex: 1 1 240px; width: auto; max-width: 360px; }
.filter-bar .audit-provider-field { width: 180px; }
.filter-bar .filter-narrow { width: 96px; }
.speed-bar form.filter-field { margin: 0; }
.grid-table[data-layout="issues"] .grid-row { grid-template-columns: minmax(0, 1.2fr) 88px 72px minmax(0, 1.6fr) 48px; }
.grid-table[data-layout="issues"] .grid-row[aria-current="true"] { background: var(--info-soft, #eff6ff); }
.grid-table[data-layout="issue-pages"] .grid-row { grid-template-columns: minmax(0, 1fr) 64px; }
.grid-table[data-layout="issue-pages"] .cell-title { display: flex; flex-direction: column; gap: 2px; }
.grid-table[data-layout="audit-history"] .grid-row { grid-template-columns: 120px minmax(0, 1fr) 88px 120px 88px; }
.cell-note { font-size: 13px; line-height: 1.6; color: var(--text-muted); }
@media (max-width: 767px) {
  .filter-bar .filter-grow { flex: 1 1 100%; max-width: none; }
  .filter-bar .audit-provider-field { flex: 1 1 100%; }
  .audit-form .button-cost { width: 100%; }
}
@media (max-width: 767px) {
  /* スマホでは結果を先に見せ、診断の開始は下に置く（Figma M11） */
  .main > .audit-form { order: 10; }
  .main > .audit-form ~ #page-notice { order: 9; }
  .main:has(> .empty-panel) > .audit-form, .main:has(> .empty-panel) > .audit-form ~ #page-notice { order: 0; }
}

/* ---- アクセスの更新（Figma 06・06b） ---- */
.grid-table[data-layout="sources"] .grid-row { grid-template-columns: minmax(0, 1fr) 100px 90px 100px 72px; }
.grid-table[data-layout="metric3"] .grid-row { grid-template-columns: minmax(0, 1fr) 72px 64px 80px; gap: 12px; }
.tab-row.tab-row-small { border-bottom: 0; }

/* ---- 表示速度の更新（Figma 11b・11c） ---- */
.speed-bar .speed-view-field { width: 140px; }
.speed-bar .speed-measure { display: flex; align-items: flex-end; gap: 12px; flex: 1 1 520px; max-width: 720px; margin: 0; }
.speed-bar .speed-measure .filter-grow { max-width: none; }
.speed-bar .speed-strategy-field { width: 120px; }
.kv.kv-dense { column-gap: 40px; }
/* 表示速度の7つの数: 狭い画面では、計測とスコアの4つを2つずつ、Core Web Vitals の3つ（合格・不合格・実ユーザー値なし）を1行に並べる */
@media (max-width: 767px) {
  .kv.speed-kv { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 16px; }
  .kv.speed-kv > .kv-item { grid-column: span 3; }
  .kv.speed-kv > .kv-item:nth-child(n + 5) { grid-column: span 2; }
}
.progress-panel { gap: 12px; }
.progress-title { display: flex; align-items: baseline; gap: 12px; font-size: 15px; font-weight: 700; }
.progress-title .muted { font-size: 12px; font-weight: 400; }
.grid-table[data-layout="speed-shared"] .grid-row { grid-template-columns: minmax(0, 1fr) 88px 64px 140px; }
.grid-table[data-layout="speed-pages"] .grid-row { grid-template-columns: minmax(0, 1.3fr) 48px 64px 52px 64px minmax(0, 1.4fr) 56px 56px; align-items: start; }
.grid-table[data-layout="speed-pages"] .grid-row.grid-head { align-items: center; }
.speed-page { display: flex; flex-direction: column; gap: 2px; }
.speed-page .speed-toggle { align-self: flex-start; font-size: 12px; }
.speed-field { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.speed-detail { padding: 12px 16px 16px 32px; border-top: 1px solid var(--border); background: var(--surface, #fff); }
.speed-opportunity { margin-bottom: 12px; font-size: 13px; line-height: 1.6; }
.speed-opportunity p { margin: 0; }
.speed-opportunity .saving { margin-left: 12px; color: var(--danger, #b91c1c); }
.speed-opportunity .muted:not(.speed-target) { margin-left: 12px; }
.speed-target { font-size: 12px; overflow-wrap: anywhere; }
.speed-diagnostics { font-size: 12px; margin: 0; }
@media (max-width: 767px) {
  .speed-bar .speed-view-field { flex: 1 1 100%; }
  .speed-bar .speed-measure { flex-wrap: wrap; flex: 1 1 100%; }
  .speed-bar .speed-measure .filter-grow { flex: 1 1 100%; }
  .speed-bar .speed-strategy-field { flex: 1 1 0; }
  .speed-bar .speed-run { width: 100%; }
  .main > .speed-bar { order: 10; }
  .main:has(> .empty-panel) > .speed-bar { order: 0; }
  .speed-detail { padding: 12px 16px; }
  .grid-table[data-layout="speed-pages"] .speed-field, .grid-table[data-layout="speed-pages"] .speed-page .cell-url { display: none; }
}

/* ---- サイト診断の更新（Figma 11d・11e） ---- */
.progress-count { font-size: 13px; font-weight: 700; margin: 0; }
.grid-table[data-layout="audit-pages"] .grid-row { grid-template-columns: minmax(0, 1.2fr) 56px 48px 64px minmax(0, 1.8fr); align-items: start; }
.grid-table[data-layout="audit-pages"] .grid-row.grid-head { align-items: center; }
.audit-page { display: flex; flex-direction: column; gap: 2px; }
.audit-findings { display: flex; flex-direction: column; gap: 8px; }
.audit-finding { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; font-size: 13px; line-height: 1.5; }
.audit-finding > span:last-child { display: flex; flex-direction: column; }
.audit-finding .muted { font-size: 12px; }
.audit-page a { color: var(--text); text-decoration: none; }
.audit-page a:hover { text-decoration: underline; }
.audit-page .cell-url, .speed-page .cell-url { color: var(--text-muted); font-size: 12px; font-weight: 400; }

/* ---- 順位の更新（Figma 05）: 端末・最終計測の列、行の操作メニュー、順位変動 ---- */
.grid-table[data-layout="rank"] .grid-row { grid-template-columns: minmax(0, 1.1fr) 40px minmax(0, 1.5fr) 48px 52px 60px 64px minmax(0, 0.7fr) 96px 32px; }
.row-actions { position: relative; justify-self: end; }
.row-menu > summary { list-style: none; cursor: pointer; padding: 0 6px; border-radius: 4px; color: var(--text-muted); font-weight: 700; line-height: 24px; }
.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu > summary:hover, .row-menu[open] > summary { background: var(--surface-sub); }
.row-menu-list { position: absolute; right: 0; top: 28px; z-index: 20; display: flex; flex-direction: column; min-width: 240px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12); }
.row-menu-list button { text-align: left; padding: 8px 10px; border: 0; background: none; border-radius: 4px; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; white-space: nowrap; }
.row-menu-list button:hover:not(:disabled) { background: var(--surface-sub); }
.row-menu-list button:disabled { color: var(--text-subtle); cursor: not-allowed; }
.row-menu-list button.danger { color: var(--danger); }
.volatility-summary { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; font-size: 12px; color: var(--text-muted); }
.volatility-summary strong { margin-left: 8px; color: var(--text); font-size: 13px; }
.grid-table[data-layout="volatility"] .grid-row { grid-template-columns: 140px repeat(5, 88px) minmax(0, 1fr); }
@media (max-width: 767px) {
  .grid-table[data-layout="rank"] .row-actions { position: absolute; top: 12px; right: 12px; }
  .grid-table[data-layout="rank"] .grid-row { position: relative; padding-right: 44px; }
}
.grid-table[data-layout="rank"] { overflow: visible; }
.sync-line .status { white-space: normal; }
@media (max-width: 767px) {
  .grid-table[data-layout="volatility"] .grid-row:nth-of-type(n + 7) { display: none; }
}
@media (max-width: 767px) {
  .grid-table[data-layout="speed-shared"] .grid-row:nth-of-type(n + 7) { display: none; }
}
@media (max-width: 767px) {
  .grid-table .grid-row > .cell-title.speed-page, .grid-table .grid-row > .cell-title.audit-page { display: flex; }
}

/* ---- 測る画面の表と区画の状態（Figma C1・C2・C3）: 空・0件・読めない・知らせ・読み込み中の骨組み ---- */
.state-empty { gap: 8px; padding: 36px 24px; }
.state-empty .button { margin-top: 6px; }
.state-notice { display: flex; flex-direction: column; gap: 8px; }
.state-notice[hidden] { display: none; }
.state-skeleton { gap: 14px; }
.skeleton-row { display: grid; grid-template-columns: 28px minmax(0, 3fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.skeleton-row span { height: 12px; border-radius: 4px; background: var(--border); opacity: 0.6; }
.state-empty-row { padding: 32px 24px; gap: 6px; }
.state-empty-row .empty-title { color: var(--text); }

/* ---- レポートの詳細（Figma 10b） ---- */
.report-day-nav { display: flex; align-items: center; gap: 8px; }
.report-day-nav span[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.report-day-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.report-day-main, .report-day-side { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.report-candidate { margin: 0; font-size: 14px; font-weight: 700; }
.grid-table[data-layout="report-moves"] .grid-row { grid-template-columns: minmax(0, 1fr) 52px 52px 56px 48px minmax(0, 1.4fr); }
.report-other-page { color: var(--warn); }
.report-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.report-items li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 13px; }
.report-items li:first-child { border-top: 0; padding-top: 0; }
.report-items li > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.report-items .muted { font-size: 12px; }
.report-logs { border: 1px solid var(--border); border-radius: var(--radius); }
.report-logs details { border-top: 1px solid var(--border); }
.report-logs details:first-child { border-top: 0; }
.report-logs summary { padding: 10px 16px; cursor: pointer; font-size: 13px; font-weight: 700; }
.report-logs pre { margin: 0 16px 12px; padding: 12px; background: var(--surface-sub); border-radius: 6px; font-family: var(--mono); font-size: 12px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 1100px) { .report-day-layout { grid-template-columns: minmax(0, 1fr); } }

/* ---- スマホの上の帯とパンくず（2026-09-26 の決まり） ----
   下の階層の画面では「☰」の代わりに「‹ 今の画面名」を出す。本文の上のパンくずはスマホでは出さない */
.mobile-bar .title-back { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; color: #fff; text-decoration: none; }
.mobile-bar .title-back > span[aria-hidden] { flex: none; font-size: 20px; line-height: 1; }
@media (max-width: 767px) {
  .main nav.breadcrumb { display: none; }
  .page-head.report-day-head, .report-day-nav { flex-wrap: wrap; }
}
.mobile-bar .title-back .label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 767px) {
  .page-head.report-day-head { display: flex; }
  .page-head.report-day-head h1 { display: none; }
}
.grid-table[data-layout="report-moves"] .grid-row { grid-template-columns: minmax(0, 0.9fr) 48px 48px 52px 40px minmax(0, 1.7fr); }
.grid-table[data-layout="report-moves"] .cell-path { min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
@media (max-width: 767px) {
  /* パンくずを隠すので、パンくずの下へ見出しを詰める規則もスマホ幅では効かせない */
  .main > .breadcrumb + .page-head { margin-top: 0; }
}

/* ---- 調査ツール（Figma 04〜04k） ---- */
.research-layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 24px; align-items: start; }
.research-side, .research-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.research-main { gap: 20px; }
.research-main > .panel { padding: 16px; }
.research-main > #research-result-panel, .panel[aria-labelledby="priority-title"], .panel[aria-labelledby="reviews-title"] { gap: 12px; }
.research-tools { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.research-tools a { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border); color: var(--text); text-decoration: none; }
.research-tools a:first-child { border-top: 0; }
.research-tools a:hover { background: var(--surface-sub); }
.research-tools a[aria-current="page"] { padding: 16px; box-shadow: inset 0 0 0 1px rgba(30, 64, 175, 0.45); border-radius: var(--radius); }
.research-tools a[aria-current="page"] strong { color: var(--primary); font-weight: 700; }
.research-tool-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.research-tool-text strong { font-size: 14px; font-weight: 500; }
.research-tool-text span { font-size: 12px; color: var(--text-muted); }
.research-cost { flex: none; font-size: 12px; color: var(--ok); }
.research-cost[data-paid] { color: var(--warn); }
.research-recent h2 { font-size: 13px; font-weight: 500; margin: 0 0 6px; }
.research-recent ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.research-recent li { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text-muted); }
.research-recent li .status { font-size: 13px; }
.research-form { display: flex; flex-direction: column; gap: 16px; }
.research-fields { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.research-fields .field { width: 140px; max-width: 100%; }
.research-fields .field-narrow { width: 100px; }
.research-fields .field-grow { flex: 0 1 320px; width: 320px; }
.research-fields .field-wide { flex: 1 1 100%; width: auto; }
.research-fields textarea { width: 100%; resize: vertical; font-family: inherit; }
.research-confirm { display: flex; align-items: center; gap: 16px; padding: 12px 14px; border: 1px solid rgba(180, 83, 9, 0.45); border-radius: var(--radius); background: var(--surface); }
.research-confirm label { flex: 1; display: flex; gap: 8px; align-items: center; font-size: 13px; }
.research-submit { display: flex; justify-content: flex-end; }
.research-note { margin: 0; font-size: 13px; line-height: 1.7; }
.research-note strong { display: block; font-size: 12px; }
.research-subhead { font-size: 13px; font-weight: 700; margin: 8px 0 0; }
.research-copy { display: flex; align-items: center; gap: 12px; }
.research-output { width: 100%; font-family: var(--mono); font-size: 12px; }
.research-meta { margin: 0; border: 1px solid var(--border); border-radius: var(--radius); }
.research-meta div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 10px 14px; border-top: 1px solid var(--border); font-size: 13px; }
.research-meta div:first-child { border-top: 0; }
.research-meta dt { color: var(--text-muted); }
.research-meta dd { margin: 0; overflow-wrap: anywhere; display: flex; gap: 8px; flex-wrap: wrap; }
.heading-tree p { margin: 0; font-size: 13px; line-height: 1.8; }
.heading-tree p > span { display: inline-block; width: 28px; color: var(--primary); font-size: 11px; }
.heading-tree .h2 { padding-left: 14px; } .heading-tree .h3 { padding-left: 28px; } .heading-tree .h4, .heading-tree .h5, .heading-tree .h6 { padding-left: 42px; }
.volume-bars { display: block; }
.volume-bars rect { fill: var(--primary); opacity: 0.7; }
.research-main .panel-title { font-size: 18px; }
.research-page { display: flex; flex-direction: column; gap: 2px; }
.research-page a { color: var(--text); text-decoration: none; }
.research-page .cell-url { color: var(--text-muted); font-size: 12px; font-weight: 400; }
.error-text { color: var(--danger); font-size: 12px; }
.row-detail { padding: 8px 16px 12px 56px; border-top: 1px solid var(--border); background: var(--surface-sub); }
.grid-table[data-layout="research-related"] .grid-row { grid-template-columns: minmax(0, 1fr) 72px 96px 72px 56px 48px; }
.grid-table[data-layout="research-exposure"] .grid-row { grid-template-columns: minmax(0, 1fr) 44px 64px 64px 44px 52px minmax(0, 1fr); }
.grid-table[data-layout="research-competitors"] .grid-row { grid-template-columns: minmax(0, 1fr) 64px 64px 72px 72px 88px; }
.grid-table[data-layout="research-tendency"] .grid-row { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr) 110px; }
.grid-table[data-layout="research-backlinks"] .grid-row { grid-template-columns: minmax(0, 1fr) 64px 80px 72px 64px 64px 80px; }
.grid-table[data-layout="research-referring"] .grid-row { grid-template-columns: minmax(0, 1fr) 72px 64px 72px 96px; }
.grid-table[data-layout="research-pages"] .grid-row { grid-template-columns: 32px minmax(0, 1fr) 64px 32px 72px 64px; align-items: start; }
.grid-table[data-layout="research-coverage"] .grid-row { grid-template-columns: minmax(0, 1fr) 110px 72px; }
@media (min-width: 768px) {
  .research-form[data-tool="tendency"] .field-wide { flex: 0 1 320px; }
  .research-form[data-tool="backlinks"] .field-narrow { width: 180px; }
  .research-form[data-tool="rankfactor"] .field:has([name="targetUrl"]) { flex-basis: 100%; }
  .research-form[data-tool="extract"] .field-grow { flex-basis: 580px; width: 580px; }
  .research-form[data-tool="combinations"] .field-wide { flex: 1 1 calc((100% - 24px) / 3); }
  .research-form[data-tool="combinations"] .field-narrow { width: 120px; }
  .research-form[data-tool="combinations"] .research-fields, .research-form[data-tool="coverage"] .research-fields { align-items: flex-start; }
  .research-form[data-tool="coverage"] .field:has([name="keywords"]) { flex: 0 1 220px; }
  .research-form[data-tool="coverage"] .field:has([name="text"]) { flex: 1 1 300px; }
  .research-main .grid-table { overflow-x: auto; }
  .research-main .grid-row { min-width: 716px; padding-block: 10px; }
  .research-main .grid-head { padding-block: 8px; background: var(--surface-sub); }
}
@media (max-width: 1100px) { .research-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
  .research-main > .panel, .research-form { gap: 12px; }
  .research-main .panel-title, .research-main .section-title h2 { font-size: 15px; }
  .research-main > .panel[aria-labelledby="research-form-title"] > .panel-text { display: none; }
  .research-main > #research-result-panel { padding: 0; border: 0; background: none; }
  .research-fields { gap: 12px 8px; }
  .research-fields .field, .research-fields .field-narrow { flex: 1 1 calc(50% - 4px); width: auto; }
  .research-fields .field-grow, .research-fields .field-wide { flex-basis: 100%; width: 100%; }
  .research-confirm { flex-direction: column; align-items: stretch; gap: 12px; padding: 0; border: 0; background: none; }
  .research-confirm .button, .research-submit .button { width: 100%; }
  .row-detail { padding: 8px 16px 12px; }
}
.research-pick { display: none; }
@media (max-width: 767px) {
  /* スマホは「調査を選ぶ」→ 条件と結果 → 最近の実行 の順（Figma M04） */
  .research-side { display: contents; }
  .research-pick { display: block; order: 0; margin: 0; font-size: 15px; font-weight: 700; }
  .research-tools { order: 1; }
  .research-main { order: 2; }
  .research-recent { order: 3; }
  .research-layout { gap: 16px; }
}

/* ---- 記事一覧の変更履歴（Figma 02g）と記事詳細の変更履歴（03d） ---- */
.changes-status-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.changes-status { flex: 1; gap: 20px; border-bottom: 0; }
.changes-count { font-size: 12px; }
.changes-hint { font-size: 12px; margin: 0; }
.changes-article, .changes-last { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.changes-article .muted, .changes-last .muted { font-size: 12px; font-weight: 400; }
.changes-generated { margin-left: auto; font-size: 12px; }
.grid-table[data-layout="changes"] .grid-row { grid-template-columns: minmax(0, 1.4fr) 110px minmax(0, 1.4fr) 48px 150px; align-items: start; }
.grid-table[data-layout="changes"] .grid-row.grid-head { align-items: center; }
.grid-table[data-layout="changes"] [role="cell"]:last-of-type { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.grid-table[data-layout="ledger"] .grid-row { grid-template-columns: 110px minmax(0, 1.4fr) minmax(0, 1.3fr) 100px 72px minmax(0, 0.9fr); align-items: start; }
.grid-table[data-layout="ledger"] .grid-row.grid-head { align-items: center; }
.ledger-confidence[data-tone="warn"] { color: var(--warn); }
.ledger-source { overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .changes-status { flex: 1 1 100%; }
  .changes-generated { margin-left: 0; }
}
.ledger-source { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- 記事詳細のアクセス「検索クエリの比較」（Figma 03e） ---- */
.access-period { display: flex; align-items: center; gap: 16px; }
.access-period > p { flex: 1; margin: 0; font-size: 13px; }
.period-menu { position: relative; }
.row-menu.period-menu > summary.link-button { color: var(--primary); font-weight: 700; line-height: 30px; padding: 0; }
.row-menu.period-menu > summary.link-button:hover { background: none; text-decoration: underline; }
.period-menu .row-menu-list { min-width: 140px; }
.period-menu .row-menu-list a { padding: 8px 10px; border-radius: 4px; font-size: 13px; color: var(--text); text-decoration: none; }
.period-menu .row-menu-list a:hover { background: var(--surface-sub); }
.period-menu .row-menu-list a[aria-current] { font-weight: 700; color: var(--primary); }
.compare-filter { display: flex; align-items: flex-end; gap: 16px; }
.compare-filter .compare-tabs { flex: 1; min-width: 0; gap: 18px; border-bottom: 0; }
.compare-filter .filter-field { width: 180px; flex: none; }
.grid-table[data-layout="query-compare"] .grid-row { grid-template-columns: minmax(0, 1fr) 96px 100px 150px 130px 64px 56px; }
.grid-table[data-layout="query-lost"] .grid-row { grid-template-columns: minmax(0, 1fr) 120px 120px 120px; }
@media (max-width: 767px) {
  .access-period { flex-wrap: wrap; gap: 4px 12px; }
  .access-period > p { flex-basis: 100%; }
  .compare-filter { flex-direction: column; align-items: stretch; gap: 8px; }
  .compare-filter .filter-field { width: 100%; }
}

/* ---- 記事詳細の本文と版（Figma 16・16b・16c）: 左の版と公開前の確認、右の操作・制作条件・本文・独立レビュー ---- */
.version-list .side-item { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.version-list .side-item:hover .side-main strong { color: var(--primary); }
.version-list .side-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.version-list .side-main strong { font-size: 14px; font-weight: 500; }
.version-list .side-main .muted { font-size: 12px; }
.side-label-next { margin-top: 16px; }
.body-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.body-ops { display: flex; align-items: flex-end; gap: 12px; }
.body-ops-version { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.body-ops-version .muted { font-size: 12px; }
.body-ops .body-saver { width: 140px; flex: none; }
.body-ops .button[aria-disabled="true"] { color: var(--text-subtle); cursor: not-allowed; }
.body-info { padding: 16px; gap: 16px; }
.body-info > summary { list-style: none; cursor: pointer; }
.body-info > summary::-webkit-details-marker { display: none; }
.body-info > summary .section-title h2::after { content: "開く"; margin-left: 8px; color: var(--primary); font-size: 12px; font-weight: 500; }
.body-info[open] > summary .section-title h2::after { content: "閉じる"; }
.body-info-form { display: flex; flex-direction: column; gap: 16px; }
.body-info-form .field-row { display: flex; gap: 12px; }
.body-info-form .field-grow { flex: 1 1 0; }
.body-info-form .field-status { width: 200px; flex: none; }
.body-form-foot { display: flex; align-items: center; gap: 12px; }
.body-form-foot .muted { flex: 1; font-size: 12px; }
/* 本文エディタ（body-editor.js）。Figma「1 部品」の本文エディタ（579:62717）に合わせる */
.body-editor-mount > .muted { padding: 16px; font-size: 13px; }
.body-doc-bar:has(.body-draft-status) { flex-wrap: wrap; }
.body-doc-bar:has(.body-draft-status) h2 { flex: none; white-space: nowrap; }
.body-draft-status { flex: 1; font-size: 11px; }
.body-draft-status[data-tone="error"] { color: var(--danger); }
.body-draft-notice { flex-wrap: wrap; margin: 12px 16px 0; }
.body-draft-notice-text { flex: 1 1 calc(100% - 24px); }
.body-draft-notice-actions { display: flex; flex-wrap: wrap; gap: 8px; flex-basis: 100%; padding-left: 18px; }
.be-toolbar { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px 12px; border-bottom: 1px solid var(--border); background: var(--surface-sub); }
.be-tool, .be-format-button { min-height: 30px; padding: 4px 6px; border: 0; border-radius: 4px; background: none; color: var(--text); font: 13px/1.5 var(--font); cursor: pointer; }
.be-tool:hover, .be-format-button:hover { background: var(--info-soft); }
.be-tool:focus-visible, .be-format-button:focus-visible, .be-format-item:focus-visible, .be-card-button:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.be-bold { font-weight: 700; }
.be-quiet { color: var(--text-muted); }
.be-sep { width: 1px; height: 20px; margin: 0 3px; background: var(--border); }
.be-spacer { flex: 1; }
.be-insert-button { display: inline-flex; align-items: center; gap: 4px; }
.be-format-menu.be-insert-menu { width: 160px; }
.be-insert-menu .be-format-item { font-size: 13px; }
.be-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; padding: 4px; }
.be-icon-undo, .be-icon-redo { width: 16px; height: 16px; background: currentColor; mask: url("/app/icons/undo.svg") center / 16px 16px no-repeat; }
.be-icon-redo { mask-image: url("/app/icons/redo.svg"); }
.be-format { position: relative; }
.be-format-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 6px; width: 92px; border: 1px solid var(--border-input); background: var(--surface); padding: 3px 6px 3px 10px; }
.be-format-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 3; display: flex; flex-direction: column; width: 248px; padding: 6px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12); }
.be-format-menu[hidden] { display: none; }
.be-format-item { display: flex; flex-direction: column; align-items: flex-start; padding: 6px 10px; border: 0; border-radius: 4px; background: none; color: var(--text); text-align: left; cursor: pointer; font-family: var(--font); }
.be-format-item:hover { background: var(--surface-sub); }
.be-format-item.is-current { background: var(--info-soft); color: var(--primary); }
.be-format-sample { font-weight: 700; line-height: 1.4; }
.be-format-p { font-size: 14px; font-weight: 400; }
.be-format-h1 { font-size: 22px; } .be-format-h2 { font-size: 20px; } .be-format-h3 { font-size: 18px; }
.be-format-h4 { font-size: 16px; } .be-format-h5 { font-size: 14px; } .be-format-h6 { font-size: 13px; color: var(--text-muted); }
.be-format-note { font-size: 11px; color: var(--text-subtle); }
.be-body { min-height: 480px; padding: 24px 28px 28px 56px; font-size: 15px; line-height: 1.8; color: var(--text); overflow-wrap: anywhere; }
.be-body:focus { outline: none; }
.be:focus-within .be-toolbar { border-bottom-color: var(--primary); }
.be-body > * { margin: 0 0 14px; }
.be-body > :last-child { margin-bottom: 0; }
/* ブロックの番号。レビューの「ブロック 5」と同じ番号を左の余白に出す。1行目の高さの真ん中にそろえる */
@property --be-row { syntax: "<length>"; inherits: false; initial-value: 27px; }
.be-body > [data-block-no] { position: relative; --be-row: 1lh; }
.be-body > [data-block-no]::before { content: attr(data-block-no); position: absolute; top: 0; left: -40px; width: 28px; height: var(--be-row); display: flex; align-items: center; justify-content: flex-end; color: var(--text-subtle); font-size: 11px; font-weight: 400; font-style: normal; line-height: 1; font-variant-numeric: tabular-nums; pointer-events: none; user-select: none; }
.be-body > .be-card[data-block-no]::before { height: 38px; }
.be-body h1 { font-size: 24px; line-height: 1.5; } .be-body h2 { font-size: 20px; line-height: 1.5; } .be-body h3 { font-size: 18px; line-height: 1.5; }
.be-body h4 { font-size: 16px; } .be-body h5 { font-size: 15px; } .be-body h6 { font-size: 14px; color: var(--text-muted); }
.be-body ul, .be-body ol { padding-left: 1.5em; }
.be-body blockquote { padding: 4px 0 4px 16px; border-left: 3px solid var(--border-input); color: var(--text-muted); }
.be-body blockquote p { margin: 0; }
.be-body a { color: var(--primary); text-decoration: underline; }
.be-table { overflow-x: auto; }
.be-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.be-table th, .be-table td { min-width: 80px; padding: 8px 12px; border: 1px solid var(--border-input); text-align: left; vertical-align: top; }
.be-table th { background: #f1f5f9; font-weight: 500; }
.be-card { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border: 1px dashed var(--border-input); border-radius: 4px; background: var(--surface-sub); font-size: 13px; line-height: 1.5; user-select: none; }
.be-card-label { flex: none; padding: 1px 8px; border-radius: 4px; background: #e2e8f0; color: var(--text-muted); font-size: 12px; font-weight: 500; }
.be-cta .be-card-label { background: var(--info-soft); color: var(--primary); }
.be-card-body { display: flex; flex: 1 1 240px; align-items: center; gap: 12px; min-width: 0; color: var(--text-muted); }
.be-card-body img { width: 96px; height: 64px; object-fit: cover; border-radius: 4px; }
.be-card-actions { display: flex; gap: 4px; }
.be-card-button { min-height: 28px; padding: 2px 8px; border: 1px solid var(--border-input); border-radius: 4px; background: var(--surface); color: var(--text); font: 12px/1.5 var(--font); cursor: pointer; }
.be-card-button:hover { border-color: var(--primary); color: var(--primary); }
/* 文字を直せる部品（吹き出し・枠・ステップ）。名札と操作は編集できず、本文の段落と同じ文字の見た目で中を書く */
.be-part { position: relative; padding: 10px 12px 12px; border: 1px solid var(--border-input); border-radius: 4px; background: var(--surface); }
.be-part-label { display: inline-block; margin: 0 0 6px; padding: 1px 8px; border-radius: 4px; background: #e2e8f0; color: var(--text-muted); font-size: 12px; font-weight: 500; user-select: none; }
.be-balloon { border-color: #cbd5e1; background: var(--surface-sub); }
.be-balloon > p { margin: 0; }
.be-notice.is-style-big_icon_caution { border-color: var(--warn); }
.be-notice.is-style-big_icon_caution .be-part-label { background: var(--warn); color: #fff; }
.be-notice.is-style-big_icon_point .be-part-label, .be-notice.is-style-big_icon_info .be-part-label { background: var(--info-soft); color: var(--primary); }
.be-part > p { margin: 0 0 8px; }
.be-part > p:last-of-type { margin-bottom: 0; }
.be-step-item { display: grid; grid-template-columns: 28px 1fr; gap: 2px 10px; margin: 0 0 10px; }
.be-step-num { grid-row: 1 / span 2; width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 12px; line-height: 24px; text-align: center; user-select: none; }
.be-step-title { font-weight: 600; }
.be-step-body { grid-column: 2; }
.be-step-body p { margin: 0 0 4px; font-size: 14px; }
.be-part .be-card-actions { position: absolute; top: 8px; right: 8px; }
.be-part:not(:hover):not(:focus-within) .be-card-actions { opacity: 0; }
.production-work.is-reading .be-part { border-color: transparent; padding-inline: 0; }
.production-work.is-reading .be-part-label, .production-work.is-reading .be-step-num { display: inline-block; }
.be.is-read-only .be-body { background: var(--surface-sub); color: var(--text-muted); }
.be.is-read-only .be-tool, .be.is-read-only .be-format-button, .be-card-button:disabled { cursor: not-allowed; opacity: 0.5; }
.be-dialog-form { display: flex; flex-direction: column; gap: 14px; }
.be-dialog-title { font-size: 16px; }
.be-dialog-quote { margin: 0; padding: 8px 12px; border-radius: 4px; background: var(--surface-sub); color: var(--text-muted); font-size: 13px; line-height: 1.6; }
.be-dialog textarea { width: 100%; }
/* 推敲と本文確定の執筆モード。左に本文エディタ、右に AI への依頼 */
.mode-switch { align-self: flex-start; }
.mode-switch a { padding: 5px 14px; color: var(--text-muted); font-size: 13px; text-decoration: none; }
.mode-switch a + a { border-left: 1px solid var(--border-input); }
.mode-switch a[aria-current="page"] { background: #eff6ff; color: var(--primary); font-weight: 500; }
.mode-switch a:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.write-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: start; }
.write-doc { border: 1px solid var(--border); border-radius: 6px; min-width: 0; }
.write-doc .body-doc-bar h3 { flex: none; font-size: 13px; font-weight: 400; white-space: nowrap; }
.write-doc .body-doc-bar { flex-wrap: wrap; }
.write-side { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 10px; }
.write-side h3 { font-size: 14px; font-weight: 700; }
.write-side-hint, .write-side-foot .muted { font-size: 12px; line-height: 1.6; }
.write-ai-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.write-ai-list:empty { display: none; }
.write-ai-item { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-top: 1px solid var(--border); }
.write-ai-item .link-button { align-self: flex-start; font-size: 12px; }
.write-ai-quote { color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.write-ai-text { font-size: 13px; line-height: 1.6; white-space: pre-wrap; }
.write-ai-empty { font-size: 13px; }
.write-ai-memo { margin-right: 6px; padding: 1px 6px; border-radius: 4px; background: #e2e8f0; color: var(--text-muted); font-size: 11px; font-weight: 500; }
.write-side-foot { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
@media (max-width: 1023px) {
  .write-layout { grid-template-columns: minmax(0, 1fr); }
  .write-side { position: static; order: -1; } /* 長い本文の下に埋もれないよう、依頼と保存を本文の上に出す */
}
.body-actions { display: flex; justify-content: flex-end; gap: 12px; }
.gate-summary { display: flex; gap: 32px; margin: 0; }
.gate-summary > div { display: flex; flex-direction: column; gap: 2px; }
.gate-summary dt { color: var(--text-muted); font-size: 12px; }
.gate-summary dd { margin: 0; font-size: 13px; }
.grid-table[data-layout="gate"] .grid-row { grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; }
.check-row { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; border: 0; }
.check-row label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.check-row input { width: 18px; height: 18px; accent-color: var(--primary); }
@media (max-width: 767px) {
  .body-ops { flex-wrap: wrap; }
  .body-ops-version { flex-basis: 100%; }
  .body-ops .body-saver { flex: 1 1 100%; width: auto; }
  .body-ops .button { flex: 1 1 0; }
  .body-info-form .field-row { flex-direction: column; }
  .body-info-form .field-status { width: auto; }
  .body-form-foot { flex-direction: column; align-items: stretch; }
  .body-actions .button { flex: 1 1 0; }
  .be-body { min-height: 360px; padding: 16px 16px 16px 44px; }
  .be-toolbar { top: 47px; padding: 6px 8px; } /* スマホの上の帯（.mobile-bar、高さ47px）の下に止める */
  .be-spacer { display: none; }
}
.body-info:not([open]) { gap: 0; }

/* ---- 設定の「サイトと制作ルール」（Figma 14・M14）。値は枠に入れて表示だけにする ---- */
.settings-panel { padding: 24px; gap: 16px; }
.setting-values { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 12px; margin: 0; text-align: left; }
.setting-value { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 140px; text-align: left; }
.setting-value.wide { min-width: 260px; flex: 0 1 420px; }
.setting-value dt { color: var(--text-muted); font-size: 13px; font-weight: 500; }
.setting-value dd { margin: 0; min-height: 41px; padding: 9px 11px; border: 1px solid var(--border-input); border-radius: var(--radius); background: var(--surface); font-size: 14px; min-width: 140px; }
.setting-value dd[data-empty] { color: var(--text-subtle); }
.grid-table[data-layout="guidelines"] .grid-row { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 0.9fr) 64px; }
.grid-table[data-layout="cta-banners"] .grid-row { grid-template-columns: minmax(0, 1fr) 160px 64px; }
.grid-table[data-layout="products"] .grid-row { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 0.8fr) 64px; }
.grid-table[data-layout="products"] .cell-url a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); text-decoration: none; }
.json-editor { min-height: 220px; font-size: 13px; line-height: 1.6; }
.dialog .narrow-field { max-width: 260px; }
@media (max-width: 767px) {
  .settings-panel { padding: 0; border: 0; background: none; }
  .setting-values { flex-direction: column; align-items: stretch; gap: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
  .settings-panel .section-head .button { min-height: 0; padding: 4px 0; border: 0; background: none; color: var(--primary); }
  .setting-value, .setting-value.wide { min-width: 0; flex: none; padding: 12px 16px; border-bottom: 1px solid var(--border); gap: 2px; }
  .setting-value:last-child { border-bottom: 0; }
  .setting-value dt { color: var(--text); font-size: 14px; font-weight: 700; }
  .setting-value dd { min-height: 0; padding: 0; border: 0; background: none; color: var(--text-muted); font-size: 13px; }
}

/* ---- 設定の「履歴と機能状態」（Figma 15・15b・M15） ---- */
.activity-filter { align-items: flex-end; }
.activity-filter .filter-field { width: 180px; flex: none; }
.activity-filter .activity-count { margin-left: auto; font-size: 13px; }
.grid-table[data-layout="activity"] .grid-row { grid-template-columns: 120px minmax(0, 0.8fr) minmax(0, 2fr) 120px 72px; }
.grid-table[data-layout="activity"] [data-empty] { color: var(--text-subtle); }
.grid-table[data-layout="capability"] .grid-row { grid-template-columns: minmax(0, 2fr) minmax(0, 0.8fr) 150px; }
.grid-table[data-layout="features"] .grid-row { grid-template-columns: 96px minmax(0, 2fr) minmax(0, 0.9fr) 120px; }
.grid-table[data-layout="features"] .grid-row > .num:first-child { text-align: right; padding-right: 8px; }
@media (max-width: 767px) {
  .activity-filter .filter-field { width: auto; flex: 1 1 0; }
  .activity-filter .activity-count { margin-left: 0; flex-basis: 100%; }
}

/* ---- 記事を追加（Figma D1・D1b）と構成書JSONの読み込み（D2） ---- */
.dialog .input[aria-invalid="true"] { border-color: var(--danger); }
.dialog .field-error { font-size: 12px; }
.dropzone { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px 16px; border: 1.5px dashed var(--border-input); border-radius: var(--radius); background: var(--surface-sub); cursor: pointer; text-align: center; }
.dropzone:hover, .dropzone.dragging { border-color: var(--primary); }
.dropzone:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
.dropzone-main { color: var(--primary); font-size: 14px; font-weight: 500; }
.dropzone-sub { color: var(--text-muted); font-size: 12px; }
.brief-files { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); }
.brief-files li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.brief-files li:last-child { border-bottom: 0; }
.brief-files li > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.brief-files strong { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.brief-files .muted, .brief-files .field-error { font-size: 12px; }

/* ---- 計測のダイアログ（Figma D5〜D8b） ---- */
.confirm-table { border: 1px solid var(--border); border-radius: var(--radius); }
.confirm-table > div { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); font-size: 13px; }
.confirm-table > div:last-child { border-bottom: 0; }
.confirm-table dt { color: var(--text-muted); }
.confirm-table dd { margin: 0; overflow-wrap: anywhere; }
.csv-history h3 { margin: 0 0 8px; font-size: 14px; font-weight: 700; }
.csv-history-list { border: 1px solid var(--border); border-radius: var(--radius); }
.csv-history-list > div { display: grid; grid-template-columns: 150px minmax(0, 1fr) 80px; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); font-size: 13px; }
.csv-history-list > div:last-child { border-bottom: 0; }
.csv-history-list dd { margin: 0; color: var(--text-muted); }
.csv-history-list dd.num { color: var(--text); text-align: right; }
#csv-form .notice[data-tone="error"] { border: 1px solid #fca5a5; }

/* ---- 今日の判断の「最優先で見る記事」（Figma 01・01b）: 優先度と回復見込み、開閉できる判断の理由 ---- */
.grid-table[data-layout="priority"] .grid-row { grid-template-columns: 56px minmax(0, 1.2fr) minmax(0, 1.2fr) 104px minmax(0, 0.8fr) 88px; align-items: start; }
.grid-table[data-layout="priority"] .grid-row.grid-head { align-items: center; }
.grid-table[data-layout="priority"] .cell-keyword { display: block; margin-top: 2px; color: var(--text-muted); font-size: 12px; font-weight: 400; }
.grid-table[data-layout="priority"] .cell-recovery { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.grid-table[data-layout="priority"] .cell-recovery .muted { font-size: 12px; }
.priority-reason { grid-column: 2 / -1; }
.priority-reason > summary { list-style: none; cursor: pointer; font-size: 13px; }
.priority-reason > summary::-webkit-details-marker { display: none; }
.priority-reason .when-open, .priority-reason[open] .when-closed { display: none; }
.priority-reason[open] .when-open { display: inline; }
.priority-reason[open] { display: flex; flex-direction: column-reverse; gap: 8px; margin: 4px -16px -12px -72px; padding: 16px 16px 16px 72px; border-top: 1px solid var(--border); background: var(--surface-sub); }
.priority-reason-title { margin: 0 0 12px; font-size: 14px; font-weight: 700; }
.priority-reason dl { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 0; }
.priority-reason dl > div { display: flex; flex-direction: column; gap: 2px; }
.priority-reason dl > .wide { flex: 1 1 40%; }
.priority-reason dt { color: var(--text-muted); font-size: 12px; }
.priority-reason dd { margin: 0; font-size: 13px; }
@media (max-width: 767px) {
  .grid-table[data-layout="priority"] .grid-row > .cell-tier { display: inline; order: -1; font-size: 12px; font-weight: 700; color: var(--text-muted); }
  .grid-table[data-layout="priority"] .grid-row > .cell-recovery { display: flex; flex-direction: row; gap: 8px; order: 4; flex-basis: 100%; font-size: 12px; align-items: baseline; }
  .priority-reason { display: block; order: 5; flex-basis: 100%; }
  .priority-reason[open] { margin: 4px -16px -12px; padding: 12px 16px; }
  .priority-reason dl > .wide { flex-basis: 100%; }
}

/* ---- 接続とデータ（Figma 12）: 接続と保護の状態・外部費用の上限・CSV の出力・受け渡しファイル ---- */
.connections-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.status-list { list-style: none; margin: 0; padding: 0; }
.status-list li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.status-list .status-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.status-list strong { font-size: 14px; font-weight: 500; }
.status-list .muted { font-size: 12px; }
.guard-kv { gap: 24px 40px; }
.guard-monitor { padding-top: 16px; border-top: 1px solid var(--border); }
.guard-monitor-head { display: flex; align-items: center; gap: 12px; justify-content: space-between; margin-bottom: 6px; font-size: 14px; }
.export-row { display: flex; flex-wrap: wrap; gap: 8px; }
.grid-table[data-layout="deliveries"] .grid-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 120px 64px; }
@media (max-width: 1100px) {
  .connections-top { grid-template-columns: minmax(0, 1fr); }
}

/* 接続とデータ: Google の連携の中の小見出し（サイトとプロパティ・期間を指定して取り直す） */
.connections-subhead { margin: 4px 0 -4px; font-size: 13px; font-weight: 500; line-height: 20px; color: var(--text); }
/* 取り直す・サイトとプロパティの入力は Figma の幅にそろえ、横いっぱいに伸ばさない（スマホでは折り返して全幅） */
#google-refetch .field { flex: 0 1 200px; }
#google-refetch .field.narrow { flex: 0 1 140px; }
#google-save .field:first-child { flex: 0 1 360px; }
#google-save .field:nth-child(2) { flex: 0 1 420px; }
@media (max-width: 720px) {
  #google-refetch .field, #google-save .field:first-child, #google-save .field:nth-child(2) { flex: 1 1 100%; }
  #google-refetch .field.narrow { flex: 1 1 calc(50% - 6px); }
}

/* メンバーと鍵: AI・CLI の鍵の一覧とダイアログ（Figma 13・D3〜D5） */
.section-note { font-size: 12px; color: var(--text-muted); }
.grid-table[data-layout="keys"] .grid-row { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 110px 100px 100px 104px; }
.grid-table[data-layout="keys"] .grid-row[data-muted] > [role="cell"]:not(.cell-action) { color: var(--text-muted); }
.grid-table[data-layout="keys"] .cell-action { justify-self: end; }
#key-form .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#key-form .field-hint { margin-top: -8px; }
.key-scope { padding: 12px 16px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; line-height: 1.6; color: var(--text-muted); }
.key-scope p + p { margin-top: 4px; }
.key-scope .key-scope-title { font-weight: 700; color: var(--text); }
@media (max-width: 720px) {
  #key-form .form-grid { grid-template-columns: minmax(0, 1fr); }
}

/* メンバーと鍵: メンバーの表（Figma 13）。招待中の人も同じ表に行として出す */
.section-note.accent { color: var(--primary); font-weight: 500; font-size: 13px; }
.grid-table[data-layout="members"] .grid-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) 180px 110px; }
.grid-table[data-layout="members-manage"] .grid-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) 180px 110px 64px; }
.grid-table[data-layout^="members"] .cell-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid-table[data-layout^="members"] .cell-action { justify-self: end; }
#invite-dialog .link-result, #member-dialog .link-result { margin: 0; }
.section-head .actions .section-note { margin-right: 4px; }
.state-box-inline { display: flex; flex-direction: column; align-items: center; text-align: center; border: 1px solid var(--border); border-radius: var(--radius); }

/* 記事詳細（アクセス）の期間の指定（Figma S1） */
.range-form { display: flex; flex-direction: column; gap: 8px; }
.range-fields { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.range-fields .field { flex: 0 1 160px; }
.range-form .input[aria-invalid="true"] { border-color: var(--danger); }
.range-form .field-error { margin: 0; color: var(--danger); font-size: 12px; }
.range-form .field-error[hidden], .range-form .notice[hidden] { display: none; }
@media (max-width: 720px) {
  .range-fields .field { flex: 1 1 calc(50% - 6px); }
  .range-fields .button { flex: 1 1 100%; }
}

/* 記事の画面の操作の結果（Figma S1）: 画面の下に数秒出す */
.result-toast { position: fixed; z-index: 70; right: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 8px; width: min(440px, calc(100vw - 32px)); }
.result-toast .notice { margin: 0; background: var(--surface); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18); align-items: center; }
.result-toast .notice > span { flex: 1; }
.toast-close { border: 0; background: none; color: var(--text-muted); font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 4px; }
@media (max-width: 720px) {
  .result-toast { right: 16px; left: 16px; bottom: 16px; width: auto; }
}

/* 記事一覧の「数値の見方」（Figma S1） */
.metric-guide { margin: -8px 0 0; font-size: 13px; }
.metric-guide summary { cursor: pointer; list-style: none; width: fit-content; }
.metric-guide summary::-webkit-details-marker { display: none; }
.metric-guide dl { margin: 8px 0 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.metric-guide dt { font-weight: 700; color: var(--text); }
.metric-guide dd { margin: 2px 0 0; color: var(--text-muted); }

/* メンバーの登録（Figma D10）: 再設定リンクと、メンバーから外す */
.member-action { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.member-action p { margin: 0; }
.member-action .member-action-title { font-size: 14px; font-weight: 700; color: var(--text); }
.member-action .muted { font-size: 12px; }
.member-action .button { flex: none; }
@media (max-width: 720px) {
  .member-action { flex-direction: column; align-items: stretch; }
}

/* ---- 競合調査KWの選定の「同期計画」（同期計画の確認と人の同期承認）。既存の状態の箱・値の表・表・タブ・ダイアログを使い、足すのは並びと長い値の扱いだけ ---- */
.sync-facts { margin-top: 16px; }
.sync-sources { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.sync-id { overflow-wrap: anywhere; }
.sync-heading { margin-top: 28px; margin-bottom: 8px; font-size: 16px; font-weight: 700; }
.sync-datasets .sync-dsid { display: block; font-size: 12px; }
.sync-datasets tr[aria-current="true"] td { background: var(--surface-sub); }
.sync-datasets tr[aria-current="true"] a { font-weight: 700; }
.sync-parts { margin-bottom: 8px; }
/* 中身の一覧は長い範囲・値を折り返す。番号と行の列だけ詰める */
table.sync-items { width: 100%; }
table.sync-items td { white-space: normal; overflow-wrap: anywhere; }
table.sync-items th.num, table.sync-items td.num { width: 1%; white-space: nowrap; text-align: right; }
table.sync-items[data-part="update"] td:nth-last-child(-n+2), table.sync-items[data-part="add"] td:nth-last-child(-n+2), table.sync-items[data-part="delete"] td:nth-last-child(-n+2) { min-width: 220px; }
table.sync-items[data-part="update"] td:nth-child(2), table.sync-items[data-part="add"] td:nth-child(2), table.sync-items[data-part="delete"] td:nth-child(2) { min-width: 200px; }
table.sync-items[data-part="update"] td:nth-child(3) { min-width: 96px; }
table.sync-datasets th.num, table.sync-datasets td.num { text-align: right; font-variant-numeric: tabular-nums; }
.sync-long summary { cursor: pointer; list-style: none; }
.sync-long summary::-webkit-details-marker { display: none; }
.sync-clip { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.sync-open { font-size: 12px; color: var(--primary); }
.sync-long[open] .sync-clip { display: none; }
.sync-close { display: none; font-size: 12px; color: var(--primary); }
.sync-long[open] .sync-open { display: none; }
.sync-long[open] .sync-close { display: inline; }
.sync-long p { overflow-wrap: anywhere; }
.sync-pager { display: flex; gap: 16px; }
/* 変更前・変更後はセルごとに列の位置（A列…）と値を並べ、境界を保つ。空は「（空）」、行にないセルは「（なし）」 */
.sync-cells { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sync-cells li { display: grid; grid-template-columns: 3.2em minmax(0, 1fr) auto; gap: 8px; align-items: baseline; }
.sync-cells li[data-changed="true"] .sync-col { color: var(--text); font-weight: 700; }
.sync-col { color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sync-none { color: var(--text-muted); }
.sync-mark { font-size: 11px; color: var(--warn); white-space: nowrap; }
.sync-all { margin-top: 6px; }
.sync-all > summary, .sync-reason > summary { cursor: pointer; font-size: 12px; color: var(--primary); }
.sync-all[open] > summary { margin-bottom: 4px; }
.sync-request-row + .sync-request-row { margin-top: 8px; }
.sync-reason { margin-top: 4px; }
.sync-reason p { margin-top: 4px; font-size: 12px; color: var(--text-muted); overflow-wrap: anywhere; }
.sync-empty { padding: 12px 0; }
@media (max-width: 767px) {
  table.sync-items[data-part] td:nth-last-child(-n+2) { min-width: 180px; }
  table.sync-items[data-part="ranges"] td:nth-last-child(-n+2), table.sync-items[data-part="requests"] td:nth-last-child(-n+2) { min-width: 0; }
  .state-box:has(> [data-open-dialog^="sync-"]) { flex-direction: column; align-items: stretch; }
}

/* ---- 主張と根拠の「1ページ7行まで」: 残りはページごとに開く。検索中は畳まない ---- */
/* 畳むのは検索していないときだけ。検索中は表示形式を上書きせず、端末幅ごとの本来の行の表示（375 の2段表示など）に任せる */
#rows-table:not([data-searching="true"]) table.design-table tr.data-row-item.is-folded { display: none; }
#rows-table[data-searching="true"] tr.fold-row { display: none; }
table.design-table tr.fold-row td { padding: 8px 14px; border-top: 1px solid var(--border); }
table.design-table tr.group-row .group-key { margin-left: 8px; color: var(--text-muted); font-weight: 400; font-family: var(--mono); font-size: 11px; }
table.design-table tr.fold-note td { color: var(--text-muted); font-size: 12px; }
table.rows-table[data-artifact="claim_evidence"] tr.group-row th { white-space: normal; }
/* 制作順・受け渡し票の入口（主張と根拠の承認版）。リンクは文の後ろに続け、1語で折り返さない */
.claims-entry a { margin-left: 8px; white-space: nowrap; }
/* 制作順の検査を満たさない理由の知らせ。元にした最終予測へのリンクは本文の中で文の後ろに続け、1語で折り返さない */
.production-order-check a { margin-left: 8px; white-space: nowrap; }
/* 制作順のスマホの表: 順の数字をページ名の前に「順 1」として置く（右下に孤立させない）。判定は名前の下にそろえる */
@media (max-width: 767px) {
  .rows-table[data-artifact="production_order"] tbody tr.data-row-item { grid-template-columns: auto minmax(0, 1fr) auto; }
  .rows-table[data-artifact="production_order"] tr.data-row-item .col-lead { grid-column: 1; grid-row: 1; width: auto; text-align: left; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .rows-table[data-artifact="production_order"] tr.data-row-item .col-lead::before { content: "順 "; }
  .rows-table[data-artifact="production_order"] tr.data-row-item .col-title { grid-column: 2; }
  .rows-table[data-artifact="production_order"] tr.data-row-item .col-decision { grid-column: 3; }
  .rows-table[data-artifact="production_order"] tr.data-row-item .col-judge { grid-column: 2 / -1; }
}

/* 記事制作の判定確認。Figma 414:5293・415:5162 の列幅と余白。 */
.judgment-panel { display: flex; flex-direction: column; gap: 24px; padding: 20px 24px; min-width: 0; }
.judgment-panel h2, .judgment-list-panel h2 { font-size: 16px; line-height: 1.5; margin: 0; }
.judgment-panel h3 { font-size: 13px; line-height: 1.5; margin: 0; }
.judgment-panel p, .judgment-list-panel p { margin: 0; }
.judgment-panel .section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.judgment-small { font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.judgment-phase > summary, .judgment-summary .button, .judgment-return { padding: 9px 14px; gap: 6px; line-height: 1.5; font-weight: 500; }
.judgment-phase .version-menu-list { left: auto; right: 0; min-width: 220px; max-width: calc(100vw - 64px); }
.judgment-wait { background: #eff6ff; border-radius: var(--radius); padding: 14px 16px; color: var(--text-muted); font-size: 13px; line-height: 1.6; }
.judgment-wait strong { display: block; color: var(--primary); margin-bottom: 4px; }
.judgment-summary { display: flex; flex-direction: column; gap: 8px; }
.judgment-summary-table { width: 100%; table-layout: fixed; border: 0; border-collapse: collapse; border-radius: 0; }
.judgment-summary .table-wrap, .judgment-list-panel .table-wrap { border: 0; border-radius: 0; }
.judgment-summary-table th, .judgment-summary-table td { text-align: left; padding: 8px 12px; white-space: normal; overflow-wrap: anywhere; border-bottom: 1px solid var(--border); font-size: 13px; }
.judgment-summary-table th:first-child, .judgment-summary-table td:first-child { width: 24%; padding-left: 0; }
.judgment-summary-table th { border-top: 1px solid var(--border); color: var(--text-muted); font-size: 12px; }
.judgment-summary-table th:nth-child(2) { width: 12%; }
.judgment-summary-table th:nth-child(3) { width: 32%; }
.judgment-summary-table th:nth-child(4) { width: 12%; }
.judgment-list-panel { padding: 20px 0 8px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.judgment-list-head { padding: 0 24px; display: flex; align-items: center; gap: 12px; }
.judgment-list-head > div { min-width: 0; flex: 1; }
.judgment-list-head h2 { margin-bottom: 4px; }
.judgment-list-head .judgment-small { font-size: 13px; }
.judgment-count { flex-shrink: 0; }
.judgment-filters { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 0 24px; flex-wrap: wrap; }
.judgment-status-tabs, .judgment-kind-tabs { display: flex; gap: 24px; font-size: 13px; align-items: baseline; flex-wrap: wrap; }
.judgment-kind-tabs { gap: 16px; color: var(--text-muted); }
.judgment-filters a { padding-bottom: 8px; color: var(--text-muted); text-decoration: none; }
.judgment-filters a[aria-current="page"] { color: var(--text); font-weight: 700; }
.judgment-status-tabs a[aria-current="page"] { border-bottom: 2px solid var(--primary); padding-bottom: 6px; }
.judgment-list-panel .table-wrap { margin: 0; width: 100%; }
.judgment-table { border-collapse: collapse; table-layout: fixed; width: 100%; min-width: 880px; } /* 1280px の画面（表の枠 約970px）で横に流れず、「保留」まで見えるように */
.judgment-col-id { width: 94px; }
.judgment-col-reason { width: 160px; }
.judgment-col-model { width: 150px; }
.judgment-col-decision { width: 272px; }
.judgment-table th, .judgment-table td { padding: 14px 8px; vertical-align: top; text-align: left; white-space: normal; overflow-wrap: anywhere; border-bottom: 1px solid var(--border); font-size: 13px; line-height: 1.5; }
.judgment-table th { border-top: 1px solid var(--border); padding-top: 8px; padding-bottom: 8px; color: var(--text-muted); font-size: 12px; }
.judgment-table th:first-child, .judgment-table td:first-child { padding-left: 24px; }
.judgment-table th:last-child, .judgment-table td:last-child { padding-right: 24px; }
/* 表が横に流れる幅でも、判断のボタンの列は右端に留めて切らさない */
.judgment-table th:last-child, .judgment-table td:last-child { position: sticky; right: 0; background: var(--surface); }
.judgment-risk { color: var(--warn); font-size: 12px; line-height: 1.6; }
.judgment-source { display: flex; flex-direction: column; gap: 6px; }
.judgment-text, .judgment-excerpt { white-space: pre-wrap; overflow-wrap: anywhere; }
.judgment-excerpt { margin: 0; padding: 6px 10px; background: #f6f7f9; color: var(--text-muted); border-radius: 4px; font-size: 12px; }
.judgment-source-link { font-size: 12px; overflow-wrap: anywhere; text-decoration: underline; }
.judgment-model { display: flex; flex-direction: column; gap: 2px; }
.judgment-model + .judgment-model { margin-top: 6px; }
.judgment-model-id { font-size: 11px; color: var(--text-muted); }
.judgment-segments { display: flex; width: 240px; max-width: 100%; }
.judgment-segments button { width: 60px; min-height: 30px; padding: 4px; border: 1px solid var(--border-input); border-left-width: 0; background: var(--surface); font-size: 12px; cursor: pointer; }
.judgment-segments button:first-child { border-left-width: 1px; border-radius: 6px 0 0 6px; }
.judgment-segments button:last-child { border-radius: 0 6px 6px 0; }
.judgment-segments button[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: white; }
.judgment-segments button:disabled { cursor: default; }
.judgment-segments button:disabled:not([aria-pressed="true"]) { color: var(--text-subtle); }
.judgment-table .judgment-saved-reason { margin-top: 8px; }
.judgment-row-history { margin-top: 8px; font-size: 12px; }
.judgment-row-history > summary, .judgment-records > summary { display: flex; gap: 6px; align-items: center; cursor: pointer; list-style: none; }
.judgment-row-history > summary::-webkit-details-marker, .judgment-records > summary::-webkit-details-marker { display: none; }
:is(.judgment-row-history, .judgment-records)[open] > summary .direction-icon { mask-image: url("/app/icons/chevron-down.svg"); }
.judgment-pagination { padding: 4px 24px 8px; display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); }
.judgment-finish-panel h2 { font-size: 14px; margin-bottom: 4px; }
#judgment-finish { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.judgment-check { display: flex; gap: 8px; align-items: baseline; font-size: 13px; cursor: pointer; }
.judgment-check input { flex-shrink: 0; }
.judgment-coverage { margin: 0; font-size: 13px; }
.judgment-coverage > div { display: grid; grid-template-columns: 200px minmax(0,1fr); gap: 24px; padding: 8px 0; border-top: 1px solid var(--border); }
.judgment-coverage dt { color: var(--text-muted); }
.judgment-coverage dd { margin: 0; overflow-wrap: anywhere; }
.judgment-records[open] summary { margin-bottom: 16px; }
.judgment-history { padding: 12px 0; font-size: 12px; overflow-wrap: anywhere; border-bottom: 1px solid var(--border); }
.judgment-versions { list-style: none; margin: 0; padding: 0; }
.judgment-versions li { display: flex; flex-wrap: wrap; gap: 12px 24px; padding: 12px 0; border-top: 1px solid var(--border); font-size: 13px; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .judgment-meta { gap: 4px 8px; }
  .judgment-panel { padding: 20px 16px; }
  .judgment-list-head { flex-direction: column; align-items: flex-start; padding: 0 16px; }
  .judgment-filters { padding: 0 16px; gap: 12px; }
  .judgment-kind-tabs { gap: 8px 16px; }
  .judgment-table { min-width: 0; }
  .judgment-table colgroup { display: none; }
  .judgment-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .judgment-table tbody { display: block; }
  .judgment-table tr { display: grid; grid-template-columns: minmax(0,1fr); border-top: 1px solid var(--border); padding: 16px; gap: 16px; }
  .judgment-table th, .judgment-table td, .judgment-table td:first-child, .judgment-table td:last-child { display: block; padding: 0; border: 0; }
  .judgment-table td::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: 12px; color: var(--text-muted); }
  .judgment-table td:first-child { color: var(--text-muted); font-size: 12px; }
  .judgment-table td:first-child::before { display: inline; margin-right: 8px; }
  .judgment-segments { width: 100%; }
  .judgment-segments button { width: 25%; min-height: 40px; }
  .judgment-coverage > div { grid-template-columns: minmax(0,1fr); gap: 4px; }
  #judgment-finish > .button { width: 100%; }
  .judgment-summary-table { min-width: 560px; }
  .judgment-pagination { padding: 8px 16px; border-top: 1px solid var(--border); }
}

/* ---- 調査結果（Figma「2 画面（PC・スマホ）」の区画「調査結果（汎用の表示）」433:48156） ---- */
table.review-queue.research-list { min-width: 860px; }
.research-list .num, .research-table .num { text-align: right; }
table.research-table { table-layout: auto; width: max-content; min-width: 100%; }
.research-table [data-type="longtext"] { min-width: 300px; }
.research-table [data-type="text"], .research-table [data-type="link"] { min-width: 180px; }
.research-table [data-type="decision"] { min-width: 120px; }
.research-table td { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap !important; }
.research-result-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: 13px; }
.research-table tr.group-row th { white-space: normal; }
.research-group-decision { margin-left: 16px; font-weight: 400; }
.research-table tr.group-row .link-button { margin-left: 16px; }
.research-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.research-column-list { left: auto; right: 0; display: flex; flex-direction: column; gap: 6px; min-width: 280px; max-height: 60vh; overflow-y: auto; padding: 12px 16px; }
.research-column-heading { margin-top: 6px; color: var(--text-subtle); font-size: 12px; }
.research-decision { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.research-decision legend { margin-bottom: 8px; font-size: 14px; font-weight: 700; }
.research-decision legend .muted { margin-left: 6px; font-size: 12px; font-weight: 400; }
.research-decision[disabled] .option { cursor: default; }
.research-fallback { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--radius); background: rgba(180, 83, 9, 0.08); font-size: 12px; }
.research-fallback strong { color: var(--warn); font-size: 13px; }
.research-result-decisions { display: flex; flex-direction: column; gap: 14px; }
.research-result-decisions h2, .research-settings-section h2 { font-size: 16px; font-weight: 700; }
.research-settings-section { display: flex; flex-direction: column; gap: 10px; }
.research-key { margin-left: 8px; font-size: 11px; font-weight: 400; }
.research-sheet .row-detail { display: flex; flex-direction: column; gap: 20px; }
.research-sheet .sheet-body h3 { margin-bottom: 8px; font-size: 14px; font-weight: 700; }
.research-set-buttons { grid-template-columns: 1.2fr 1fr 1fr; }
.research-history-block { display: flex; flex-direction: column; gap: 12px; }
.research-summary { margin: 0; font-size: 12px; color: var(--text-muted); }
table.review-queue.research-history { min-width: 900px; table-layout: fixed; width: 100%; }
.research-history .col-when { width: 150px; }
.research-history .col-decision { width: 120px; }
.research-history .col-target { width: 180px; }
.research-history .col-value { width: 180px; }
.research-history .col-who { width: 180px; }
.research-history td { vertical-align: top; overflow-wrap: anywhere; }
.research-history td.nowrap { white-space: nowrap; }
.research-history-key { display: block; margin-top: 2px; font-size: 11px; color: var(--text-muted); overflow-wrap: anywhere; }
.research-history tr.is-superseded td { color: var(--text-subtle); }
@media (max-width: 767px) {
  .page-head.research-head { display: flex; flex-wrap: wrap; gap: 10px; }
  .page-head.research-head h1 { display: none; }
  .page-head.research-head .actions { margin-left: auto; }
  table.research-table { width: 100%; min-width: 0; }
  table.research-table td { max-width: none; }
  .research-table tbody tr.data-row-item { grid-template-columns: minmax(0, 1fr); }
  .research-table tr.data-row-item td { grid-column: 1; grid-row: auto; }
  .research-table tr.data-row-item td:first-child { font-weight: 500; }
  .research-set-buttons { grid-template-columns: minmax(0, 1fr); }
}

/* 進捗は対象・現在地・報告内容の順に読み、詳細JSONは画面へ出さない。 */
.progress-table { width: 100%; min-width: 1540px; table-layout: fixed; border-collapse: collapse; font-size: 14px; line-height: 1.6; }
.progress-table th, .progress-table td { padding: 16px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.progress-table th { background: var(--surface-sub); color: var(--text-muted); font-size: 12px; font-weight: 600; }
.progress-table td { border-top: 1px solid var(--border); white-space: pre-wrap; }
.progress-table th:nth-child(1) { width: 260px; }
.progress-table th:nth-child(2) { width: 220px; }
.progress-table th:nth-child(3) { width: 360px; }
.progress-table th:nth-child(4) { width: 220px; }
.progress-table th:nth-child(5) { width: 300px; }
.progress-table th:nth-child(6) { width: 180px; }
.progress-table .status { display: flex; width: fit-content; margin-top: 8px; white-space: normal; }
.progress-sub { display: block; margin-top: 6px; color: var(--text-muted); font-size: 12px; }
.progress-warning { color: var(--warning-text, #92400e); }
.progress-updated { margin-top: 12px; color: var(--text-muted); font-size: 12px; }
.progress-pagination { margin-top: 16px; justify-content: flex-end; }
@media (max-width: 640px) {
  .progress-table-wrap { overflow: visible; }
  .progress-table { min-width: 0; display: block; }
  .progress-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .progress-table tbody { display: block; }
  .progress-table tr { display: block; padding: 16px; }
  .progress-table tr + tr { border-top: 1px solid var(--border); }
  .progress-table td { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px 12px; padding: 8px 0; border: 0; }
  .progress-table td::before { content: attr(data-label); grid-column: 1; color: var(--text-muted); font-size: 12px; }
  .progress-table td > * { grid-column: 2; }
  .progress-table .status, .progress-table .progress-sub { margin-top: 6px; }
}

/* ---- 候補を探す（Figma「5 設計フロー」の区画「クラスタリサーチを調査結果の画面で進める形」R8） ---- */
.cluster-research-heading { margin: 8px 0 0; font-size: 16px; font-weight: 700; }
table.review-queue.cluster-research-results, table.review-queue.cluster-candidates { min-width: 860px; }
.cluster-candidates td { vertical-align: top; }
.cluster-research-results .num { text-align: right; }
.cluster-candidates th:nth-child(4), .cluster-candidates td:nth-child(4) { min-width: 220px; }
/* 候補がないとき（Figma R8a・R8b）。ほかの画面の空の状態と同じ白い箱に、見出し・説明・操作1つを置く */
.cluster-research-empty { gap: 8px; }
.cluster-research-empty .panel-text { max-width: 560px; margin: 0; }
.cluster-research-empty .cluster-research-empty-note { font-size: 12px; color: var(--text-muted); }
.cluster-research-empty .button { margin-top: 8px; }
/* AI への依頼の状態（Figma R8d）と依頼のダイアログ（R8c） */
.cluster-research-request { gap: 12px; }
.cluster-research-request-head { display: flex; align-items: center; gap: 12px; }
.cluster-research-request-head h2 { font-size: 15px; font-weight: 700; }
.cluster-research-request-list { margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.cluster-research-request-list > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; }
.cluster-research-request-list dt { color: var(--text-muted); }
.cluster-research-request-list dd { margin: 0; overflow-wrap: anywhere; }
.cluster-research-request .panel-text { font-size: 12px; }
.cluster-research-dialog { width: min(560px, calc(100vw - 32px)); }
.cluster-research-sources { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cluster-research-sources legend { margin-bottom: 8px; }
.cluster-research-check { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.cluster-research-cost { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cluster-research-cost .input { width: 140px; }
.cluster-research-dialog .panel-text { font-size: 12px; }
@media (max-width: 640px) { .cluster-research-request-list > div { grid-template-columns: 1fr; gap: 2px; } }

/* ---- 記事制作のタブ（Figma「7 記事制作フロー」の進行状況・作業） ---- */
/* タブの文字どうしの間は32px（左右の余白4pxずつ＋間24px）。Figma のタブの行の間隔32pxと同じ */
.article-top-tabs, .production-tabs { gap: 24px; }
.article-top-tabs { margin-bottom: 4px; }
.production { display: flex; flex-direction: column; gap: 16px; }
.production-current { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
.production-current-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.production-current-label { color: var(--text-muted); font-size: 12px; }
.production-current h2 { margin: 2px 0 6px; color: var(--primary); font-size: 18px; font-weight: 700; }
.production-line { font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.production-current > .button { flex: none; }
.production-pair { display: flex; flex-wrap: wrap; column-gap: 12px; }
.production-sep { color: var(--text-muted); }
.production-warning { color: var(--danger); margin-left: 4px; }
.production-list-title { font-size: 15px; font-weight: 700; }
.grid-table[data-layout="production"] .grid-row { grid-template-columns: minmax(150px, 1fr) 160px minmax(0, 2fr) 120px; }
.grid-table[data-layout="production"] .grid-row[data-current] { background: var(--info-soft); }
.grid-table[data-layout="production"] .grid-row[data-current] .cell-title a { color: var(--primary); }
.grid-table[data-layout="production"] .cell-action { text-align: left; }
.production-does { color: var(--text-muted); }
.grid-row[data-current] .production-does { color: var(--text); font-weight: 700; }
.production-work .panel-head { justify-content: space-between; }
.production-state { align-items: flex-start; text-align: left; flex-direction: column; gap: 4px; }
.production-block { display: flex; flex-direction: column; gap: 12px; }
.production-block h3 { font-size: 14px; font-weight: 700; }
.production-block > .button { align-self: flex-start; }
.production-block dl { margin: 0; }
.production-facts { display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.6; }
.production-facts > div { display: flex; gap: 0; }
.production-facts dt { flex: none; white-space: nowrap; }
.production-facts dt::after { content: "："; }
.production-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.production-step-menu { position: relative; }
.production-step-menu .version-menu-list { left: auto; right: 0; }
.grid-table[data-layout="production-judgment"] .grid-row { grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); }
/* Content Contract（Figma 447:39691・448:7779）。見出しと要点は項目名140pxの2列、照合は2枚の枠 */
.production-work .state-box strong { font-size: 14px; }
.production-work .state-box[data-tone="ok"] strong { color: var(--ok); }
.contract-intent { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.contract-card { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; border-radius: var(--radius); background: var(--surface-sub); font-size: 13px; line-height: 1.6; }
.contract-card-label { color: var(--text-muted); font-size: 12px; }
.contract-serp { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.contract-promise { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.contract-promise dt { color: var(--text-muted); font-size: 12px; }
.contract-promise dd { margin: 0; }
.contract-kv > div { grid-template-columns: 200px minmax(0, 1fr); line-height: 1.7; }
.contract-key { color: var(--text-muted); }
.contract-verdict[data-tone="ok"] { color: var(--ok); }
.contract-verdict[data-tone="warn"] { color: var(--warn); }
.contract-verdict[data-tone="error"] { color: var(--danger); }
.grid-table[data-layout="contract-intent"] .grid-row { grid-template-columns: 200px 100px minmax(0, 1fr); }
.grid-table[data-layout="contract-steps"] .grid-row { grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1fr); }
.grid-table[data-layout="contract-history"] .grid-row { grid-template-columns: 200px 160px minmax(0, 1fr); }
.grid-table[data-layout="contract-plan"] .grid-row { grid-template-columns: 56px minmax(0, 1.1fr) minmax(0, 1.6fr) 110px 120px; }
.grid-table[data-layout="contract-results"] .grid-row { grid-template-columns: 56px minmax(0, 1.4fr) minmax(0, 1.4fr) 56px; }
.grid-table[data-layout^="contract-"] .grid-row > span > p + p { margin-top: 4px; }
.grid-table[data-layout="contract-full"] .grid-row { grid-template-columns: 220px minmax(0, 1fr); }
/* Figma どおり外枠なし。行は上の罫線で区切り、項目名の列を左端にそろえる */
.grid-table[data-layout^="contract-"] { border: 0; border-radius: 0; background: transparent; border-bottom: 1px solid var(--border); }
.grid-table[data-layout^="contract-"] .grid-row { align-items: start; line-height: 1.7; padding: 8px 0; border-bottom: 0; border-top: 1px solid var(--border); }
.grid-table[data-layout^="contract-"] .grid-head { padding: 6px 0; }
.grid-table[data-layout^="contract-"] .grid-row > span { font-weight: 400; overflow-wrap: anywhere; }
.contract-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.contract-more summary { cursor: pointer; font-size: 13px; list-style: none; display: inline-flex; align-items: center; gap: 4px; }
.contract-more summary::-webkit-details-marker { display: none; }
.contract-more[open] summary .direction-icon { transform: rotate(180deg); }
.contract-more .grid-table { margin-top: 8px; }
.contract-handoff { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.contract-handoff li { display: flex; flex-wrap: wrap; column-gap: 16px; }
.contract-list { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 4px; }
.contract-back { align-self: flex-start; }
.contract-full .panel-head { justify-content: space-between; align-items: flex-start; gap: 16px; }
.contract-full .panel-head h2 { font-size: 16px; }
.contract-note { overflow-wrap: anywhere; }
/* 人への依頼（Figma「2 画面」の区画「人への依頼｜2026年9月28日」） */
.requests-lead { margin-top: -8px; font-size: 13px; }
.requests-tabs { gap: 24px; }
.requests-count { display: flex; justify-content: flex-end; align-items: center; gap: 16px; font-size: 13px; }
.filter-bar .requests-article-field { width: 260px; }
.grid-table[data-layout="requests"] .grid-row { grid-template-columns: minmax(0, 2.4fr) 110px 170px 100px minmax(0, 1.3fr) 80px; align-items: start; }
.grid-table[data-layout="requests"] .cell-sub { display: none; }
.requests-title { display: flex; flex-direction: column; gap: 2px; }
.requests-title .muted { font-size: 12px; font-weight: 400; }
.grid-table[data-layout="contract-requests"] .grid-row { grid-template-columns: minmax(0, 2.4fr) 110px 190px 100px; }
.production-block > .requests-link { align-self: flex-start; }
.grid-table[data-layout="contract-evidence"] .grid-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1.35fr) 72px; }
.grid-table[data-layout="contract-decided"] .grid-row { grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr) minmax(0, 1fr); }
.grid-table[data-layout="contract-facts"] .grid-row { grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr) minmax(0, 1.2fr); }
.grid-table[data-layout="contract-drafting"] .grid-row { grid-template-columns: 56px minmax(0, 1.5fr) minmax(0, 1.3fr) 190px; }
.grid-table[data-layout="contract-drafted"] .grid-row { grid-template-columns: 56px minmax(0, 1fr) 100px 100px 80px; }
.grid-table[data-layout="contract-mainfix"] .grid-row { grid-template-columns: 220px minmax(0, 1fr); }
.grid-table[data-layout="contract-fixes"] .grid-row { grid-template-columns: 56px minmax(0, 1fr); }
.grid-table[data-layout="contract-review-kv"] .grid-row { grid-template-columns: 200px minmax(0, 1fr); }
.grid-table[data-layout="contract-findings"] .grid-row { grid-template-columns: 180px minmax(0, 1.6fr) minmax(0, 1fr); }
.grid-table[data-layout="contract-review-reach"] .grid-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
/* 下書き実装と目視：確認・結果・内容の表と、伝えた直してほしい点の表 */
.grid-table[data-layout="contract-draft-check"] .grid-row { grid-template-columns: 200px 100px minmax(0, 1fr); }
/* 公開判定と公開：影響するページの表と、公開の承認の小窓で示す公開の対象 */
.grid-table[data-layout="contract-release-affected"] .grid-row { grid-template-columns: 200px minmax(0, 1fr) 160px; }
.release-approve-kv { background: var(--surface-sub); border-radius: 6px; padding: 8px 16px; margin: 12px 0; }
.release-approve-kv > div { grid-template-columns: 100px minmax(0, 1fr); border: 0; padding: 6px 0; }
.release-approve-kv > div:last-child, .release-approve-kv dt, .release-approve-kv dd { border: 0; }
.grid-table[data-layout="contract-draft-fix"] .grid-row { grid-template-columns: 200px minmax(0, 1fr); }
.review-intent-summary { display: none; }
.drafting-groups { display: none; list-style: none; margin: 0; padding: 0; }
.drafting-groups li { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 13px; }
.drafting-groups li:last-child { border-bottom: 1px solid var(--border); }
.drafting-group-name { font-weight: 700; }
.evidence-card { display: flex; flex-direction: column; gap: 8px; padding: 16px 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.evidence-card h4 { margin: 0; font-size: 14px; font-weight: 700; }
.evidence-card p { margin: 0; }
.evidence-card .panel-text { color: var(--text-muted); }
.evidence-card .contract-actions { margin-top: 4px; }
.evidence-work { display: flex; flex-direction: column; gap: 16px; }
.evidence-subtitle { margin: 4px 0 0; font-size: 13px; font-weight: 700; }
.request-schedule-inputs { display: flex; gap: 8px; }
.request-schedule { flex: 1.6 1 300px; }
.request-schedule-inputs .select { flex: 0 0 84px; }
.request-schedule-inputs .input[type="date"] { flex: 1 1 150px; min-width: 150px; }
.request-schedule-inputs .input[type="time"] { flex: 0 1 110px; min-width: 96px; }
.requests-articles { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.requests-tabs { scrollbar-width: none; }
.requests-tabs::-webkit-scrollbar { display: none; }
#request-dialog [data-request-meta] { white-space: pre-line; }
#request-dialog textarea { min-height: 84px; resize: vertical; }
/* 1100px 未満は表を「工程名と状態」の一覧にする（Figma のスマホ版と同じ並び） */
@media (max-width: 1099px) {
  .grid-table[data-layout="production"] .grid-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
  .grid-table[data-layout="production"] .grid-head, .grid-table[data-layout="production"] .production-does, .grid-table[data-layout="production"] .cell-action { display: none; }
  .grid-table[data-layout="production"] .grid-row > .cell-title { flex: 1 1 0; min-width: 0; font-weight: 400; }
  .grid-table[data-layout="production"] .grid-row[data-current] > .cell-title { font-weight: 700; }
  .grid-table[data-layout="production"] .grid-row > .cell-status { display: block; flex: none; }
  .production-list-title.show-small { display: block; }
  .production-current { flex-direction: column; align-items: stretch; gap: 16px; }
  .production-current > .button { align-self: flex-start; }
  /* Content Contract は本文の幅が狭くなるので、表を項目ごとの縦積みにする */
  .contract-intent { grid-template-columns: minmax(0, 1fr); }
  .contract-kv > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .grid-table[data-layout^="contract-"] .grid-head { display: none; }
  .grid-table[data-layout^="contract-"] .grid-row { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; }
  .grid-table[data-layout="contract-intent"] .grid-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .grid-table[data-layout="contract-intent"] .grid-row > span:last-child { grid-column: 1 / -1; }
  .grid-table[data-layout="contract-draft-check"] .grid-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .grid-table[data-layout="contract-draft-check"] .grid-row > span:last-child { grid-column: 1 / -1; }
  .grid-table[data-layout="contract-release-affected"] .grid-row > span[data-label]::before { content: attr(data-label) "："; color: var(--text-muted); }
  .grid-table[data-layout="contract-draft-fix"] .grid-row > span[data-label]::before { content: attr(data-label) "："; color: var(--text-muted); }
  .grid-table[data-layout^="contract-"] .grid-row.grid-head { display: none; }
  .grid-table[data-layout^="contract-"] .grid-row > [role="cell"] { display: block; }
  .grid-table[data-layout="contract-steps"] .grid-row > span[data-label]::before { content: attr(data-label) "："; color: var(--text-muted); }
  .grid-table[data-layout="contract-steps"] .grid-row > .contract-key::before { content: "段階 "; }
  .grid-table[data-layout="contract-plan"] .grid-row > span[data-label]::before, .grid-table[data-layout="contract-results"] .grid-row > span[data-label]::before, .grid-table[data-layout="contract-requests"] .grid-row > span[data-label]::before, .grid-table[data-layout="contract-evidence"] .grid-row > span[data-label]::before, .grid-table[data-layout="contract-decided"] .grid-row > span[data-label]::before, .grid-table[data-layout="contract-facts"] .grid-row > span[data-label]::before, .grid-table[data-layout="contract-drafting"] .grid-row > span[data-label]::before, .grid-table[data-layout="contract-drafted"] .grid-row > span[data-label]::before, .grid-table[data-layout="contract-findings"] .grid-row > span[data-label]::before, .grid-table[data-layout="contract-review-reach"] .grid-row > span[data-label]::before { content: attr(data-label) "："; color: var(--text-muted); }
  .grid-table[data-layout] .grid-row > .evidence-question { font-weight: 700; }
  .evidence-card { padding: 12px 16px; }
  .evidence-card .contract-actions .button { flex: 1 1 auto; }
  .grid-table[data-layout="contract-plan"] .grid-row > .contract-key:first-child::before, .grid-table[data-layout="contract-results"] .grid-row > .contract-key:first-child::before { content: "行 "; }
  .grid-table[data-layout="contract-drafting"] .grid-row > .contract-key:first-child::before, .grid-table[data-layout="contract-drafted"] .grid-row > .contract-key:first-child::before, .grid-table[data-layout="contract-fixes"] .grid-row > .contract-key:first-child::before { content: "パート "; }
}
@media (max-width: 767px) {
  .grid-table[data-layout="requests"] .cell-sub { display: block; }
  .drafting-wide { display: none; }
  .review-intent-summary { display: block; }
  .review-intent-table { display: none; }
  .drafting-groups { display: block; }
  .evidence-work[data-deciding] > .production-state { order: -3; }
  .evidence-work[data-deciding] > .evidence-fallbacks { order: -2; }
  .evidence-work[data-deciding] > .evidence-waits { order: -1; }
  .evidence-work[data-deciding] > .panel-text:first-child { order: -4; }
  .evidence-card .contract-actions { flex-direction: column; }
  .evidence-card .contract-actions .button { width: 100%; }
  .grid-table[data-layout="requests"] .grid-row > .requests-title { display: flex; flex-direction: column; }
  .tab-row { gap: 16px; }
  .requests-tabs { gap: 16px; }
  .filter-bar .requests-article-field { width: 100%; }
  .request-schedule-inputs { flex-wrap: wrap; }
  .production-current > .button { align-self: stretch; justify-content: center; }
  .production-pair { flex-direction: column; }
  .production-sep { display: none; }
  .production-work .panel-head { flex-wrap: nowrap; }
  .grid-table[data-layout="production-judgment"] .grid-row > .num { display: inline; color: var(--text-muted); font-size: 12px; }
  .grid-table[data-layout="production-judgment"] .grid-row > .num::before { content: attr(data-label) " "; }
  .grid-table[data-layout="production-judgment"] .grid-row > .cell-title { flex-basis: 100%; }
  .contract-actions { flex-direction: column; }
  .contract-actions .button { justify-content: center; }
}

/* 工程の説明（Figma「2 画面」の区画「工程の説明｜2026年9月28日」G1〜G5） */
/* タブの文字どうしの間は32px（左右の余白4pxずつ＋間24px）。記事制作のタブと同じ */
.flow-guide-tabs { gap: 24px; }
.flow-guide-picker { display: none; }
.flow-guide-layout { display: grid; grid-template-columns: 232px minmax(0, 864px); gap: 40px; align-items: start; padding-top: 8px; }
.flow-guide-phases ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.flow-guide-phases a { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 6px; color: var(--text-muted); font-size: 13px; text-decoration: none; }
.flow-guide-phases a:hover { background: var(--surface); color: var(--text); }
.flow-guide-phases a[aria-current="page"] { background: rgba(30, 64, 175, 0.08); color: var(--text); font-weight: 700; }
.flow-guide-no { width: 16px; flex: none; text-align: right; color: var(--text-subtle); font-size: 12px; font-weight: 400; }
.flow-guide-name { flex: 1; min-width: 0; }
.flow-guide { display: flex; flex-direction: column; gap: 28px; min-width: 0; padding: 32px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; line-height: 1.7; }
.flow-guide h2 { font-size: 20px; margin: 0; }
.flow-guide h3 { font-size: 15px; margin: 0 0 10px; }
.flow-guide p, .flow-guide ul, .flow-guide ol, .flow-guide dl { margin: 0; }
.flow-guide ul { padding-left: 1.4em; display: flex; flex-direction: column; gap: 4px; }
.flow-guide-head { display: flex; flex-direction: column; gap: 6px; }
.flow-guide-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: var(--text-muted); font-size: 12px; }
.flow-guide-source-link { display: inline-flex; align-items: center; gap: 2px; }
.flow-guide-source-link svg { width: 14px; height: 14px; }
.flow-guide-summary { font-size: 14px; }
.flow-guide-pairs { display: flex; flex-direction: column; gap: 12px; }
.flow-guide-pairs > div { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; }
/* 用語は、いちばん長い語に合わせて1列目の幅をそろえる（12文字を超える語は折り返す） */
.flow-guide-terms { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 12px 16px; }
.flow-guide-terms > div { display: contents; }
.flow-guide-terms dt { max-width: 12em; }
.flow-guide-pairs dt { font-weight: 700; }
.flow-guide-pairs dd { margin: 0; }
.flow-guide-steps { list-style: none; padding: 0; counter-reset: guide-step; display: flex; flex-direction: column; gap: 12px; }
.flow-guide-steps li { counter-increment: guide-step; display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; }
.flow-guide-steps li::before { content: counter(guide-step) "."; grid-row: 1 / span 2; color: var(--text-muted); font-weight: 700; }
.flow-guide-pairs dd { display: flex; flex-direction: column; gap: 6px; }
.flow-guide-stops { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.flow-guide-stops table { width: 100%; border-collapse: collapse; }
.flow-guide-stops th, .flow-guide-stops td { padding: 10px 14px; text-align: left; vertical-align: top; }
.flow-guide-stops th { background: var(--surface-sub); color: var(--text-muted); font-size: 12px; font-weight: 700; width: 46%; }
.flow-guide-stops td { border-top: 1px solid var(--border); }
.flow-guide-empty { display: flex; flex-direction: column; gap: 8px; }
.flow-guide-empty h3 { margin: 0; font-size: 14px; }
.flow-guide-empty .panel-text { max-width: 560px; }
.flow-guide-source h3 { font-family: var(--mono); font-size: 12px; color: var(--text-muted); font-weight: 400; }
.flow-guide-source pre { margin: 0; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--mono); font-size: 12px; line-height: 1.6; max-height: 640px; overflow: auto; }
@media (max-width: 767px) {
  .flow-guide-picker { display: block; }
  .flow-guide-picker .input { width: 100%; }
  .flow-guide-layout { grid-template-columns: minmax(0, 1fr); }
  .flow-guide { padding: 16px; }
  .flow-guide-phases { display: none; }
  .flow-guide-meta { flex-direction: column; align-items: flex-start; }
  .flow-guide-pairs > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .flow-guide-terms { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .flow-guide-terms > div + div > dt { margin-top: 12px; }
  .flow-guide-stops thead { display: none; }
  .flow-guide-stops tr { display: flex; flex-direction: column; border-top: 1px solid var(--border); padding: 10px 14px; gap: 4px; }
  .flow-guide-stops tr:first-child { border-top: 0; }
  .flow-guide-stops td { padding: 0; border-top: 0; }
  .flow-guide-stops td:first-child { font-weight: 700; }
}

/* 上位ページの一覧の区切り: 検索語・AI の判定・上位の件数・検索語の行を開く（Figma 594:20600） */
.rows-table tr.keyword-group th { text-align: left; }
.rows-table tr.keyword-group th > * + * { margin-left: 12px; }
.rows-table tr.keyword-group strong { font-size: 14px; color: var(--text); }
.rows-table tr.keyword-group .muted { font-weight: 400; }
.rows-table tr.keyword-group a { font-weight: 500; }
/* 検索語の行の詳細に並べる上位ページ（Figma 592:40686） */
.top-pages table { width: 100%; font-size: 13px; }
.top-pages th, .top-pages td { padding: 10px 12px; vertical-align: top; text-align: left; }
.top-pages th:nth-child(1), .top-pages td:nth-child(1) { width: 64px; white-space: nowrap; text-align: left; }
.top-pages th:nth-child(2), .top-pages td:nth-child(2) { width: 132px; }
.top-pages td.top-pages-open { width: 28px; vertical-align: middle; }
.top-pages td a { color: var(--text); }
.top-pages td.top-pages-open a { color: var(--text-subtle); display: inline-flex; }
/* レビューを終える画面: 未判断の行を AI の判定のまま決める（Figma 595:20791） */
.ai-delegate-box { margin: 16px 0 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-sub); display: flex; flex-direction: column; gap: 8px; }
.ai-delegate-box p { margin: 0; }
.ai-delegate-box .kv-table { margin: 0; }
.warn-text { color: var(--warn); }
.dialog .ai-delegate-box .kv-table > div { grid-template-columns: 160px minmax(0, 1fr); }
.rows-table tr.keyword-group a, .top-pages td a { text-decoration: none; }
.rows-table tr.keyword-group a:hover, .top-pages td a:hover { text-decoration: underline; }
.rows-table td.col-check { cursor: pointer; }
/* 絞り込み中のチップ（判断: 除外 など）。選んでいることが分かるように色を付ける */
.chip.chip-active { border-color: var(--primary); color: var(--primary); }
.comment-popover-options [data-cancel-comment] { margin-left: auto; } /* 宛先を足して2段になっても、キャンセル・保存は右に寄せる */
/* 手元の開発起動だけに出る「どの作業フォルダの画面か」（scripts/dev-clerk.mjs が DEV_WORKSPACE_LABEL を渡す） */
.dev-workspace-label { margin: 0; padding: 4px 16px; background: var(--warn-soft); color: var(--warn); font-size: 12px; line-height: 1.6; text-align: center; overflow-wrap: anywhere; }

/* 操作のボタンを押したあと（action-feedback.js、Figma 617:20982）。送っている間は薄くせず、回る印と文で示す */
.is-busy { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: progress !important; }
.button.is-busy:disabled { opacity: 1; }
.busy-spinner { flex: none; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: busy-spin 0.8s linear infinite; }
@keyframes busy-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .busy-spinner { animation-duration: 2.4s; } }
.busy-hint { margin: 8px 0 0; color: var(--text-muted); font-size: 12px; text-align: right; }
.done-toast { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid rgba(21, 128, 61, 0.35); border-radius: var(--radius); background: var(--surface); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18); }
.done-mark { flex: none; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--ok); }
.done-body { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 13px; overflow-wrap: anywhere; }
.done-body a { font-size: 12px; }
.done-body span { color: var(--text-muted); font-size: 12px; }
/* 最前面の層に出す知らせ（ダイアログの上）。ブラウザの既定の位置・枠を外し、右下に置く */
.result-toast[popover] { inset: auto 24px 24px auto; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; }
@media (max-width: 767px) { .result-toast[popover] { inset: auto 16px 16px 16px; } }
/* 送っている間、ダイアログのほかの操作は押せないと分かるようにする */
dialog[data-busy="true"] button:disabled:not(.is-busy), dialog[data-busy="true"] .link-button:disabled { opacity: 0.45; cursor: not-allowed; }
/* 推奨どおりに決める箱（Figma 624:21177）。承認の結果を先に示す箱と同じ暖色 */
.recommend-box { background: var(--warn-soft); border-color: rgba(180, 83, 9, 0.25); }
.recommend-box > p strong { color: var(--warn); }

/* 予測は数値と根拠を先に読み、ファイルの照合情報は必要なときに開く。 */
.forecast-explanation { display: flex; flex-direction: column; gap: 22px; line-height: 1.7; }
.forecast-explanation p { margin: 0; overflow-wrap: anywhere; }
.forecast-source-notice { margin: 0 0 18px; padding: 14px 16px; background: var(--surface-sub); border-radius: var(--radius); line-height: 1.7; font-size: 13px; }
.forecast-source-notice > strong { color: var(--warn); }
.forecast-source-notice[data-state="pass"] > strong { color: var(--text); }
.forecast-source-notice p { margin: 6px 0; }
.forecast-source-notice summary, .forecast-technical > summary, .forecast-explanation summary { cursor: pointer; font-weight: 600; }
.forecast-technical { margin: 18px 0; font-size: 13px; overflow-wrap: anywhere; }
.forecast-technical[open] > summary { margin-bottom: 14px; }
.forecast-technical .sheet-group { margin-top: 18px; }
.forecast-equation { padding: 12px; background: var(--surface-sub); border-radius: var(--radius); font-variant-numeric: tabular-nums; }
.forecast-issue-list { margin: 10px 0 0; padding-left: 20px; }
.forecast-issue-list li { margin: 10px 0; }
.forecast-issue-list a { display: block; }
.forecast-record-menu { margin-left: auto; }
@media (max-width: 600px) { .forecast-record-menu { margin-left: 0; } }

.forecast-scenarios { margin-top: 14px; }
.forecast-scenarios[open] > summary { margin-bottom: 12px; }

.forecast-explanation .table-wrap { margin-top: 12px; }
.forecast-explanation table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 12px; }
.forecast-explanation th, .forecast-explanation td { padding: 8px; vertical-align: top; text-align: right; }
.forecast-explanation th { background: var(--surface-sub); font-weight: 600; }
.forecast-explanation td { border-top: 1px solid var(--border); white-space: nowrap; }
.forecast-explanation th:first-child, .forecast-explanation td:first-child { min-width: 140px; max-width: 180px; text-align: left; white-space: normal; }

.assignee-work-name { overflow-wrap: anywhere; }

/* 従来の画面も、同じ文章の読むモードを持つ。 */
.mode-switch button { padding: 6px 14px; border: 0; background: var(--surface); color: var(--primary); font: inherit; font-size: 13px; cursor: pointer; }
.mode-switch button[aria-pressed="true"] { background: var(--primary); color: #fff; }
.mode-switch button:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.review-mode.is-reading .review-layout, .production-work.is-reading .write-layout { grid-template-columns: minmax(0, 1fr); }
.review-mode.is-reading .review-comments, .review-mode.is-reading .review-history,
.review-mode.is-reading .rv-num, .review-mode.is-reading .rv-badges, .review-mode.is-reading [data-open-finish],
.production-work.is-reading .write-side, .production-work.is-reading .be-toolbar,
.production-work.is-reading .be-card-actions, .production-work.is-reading [data-body-action="save-version"] { display: none; }
.review-mode.is-reading .rv-block { display: block; background: transparent; }
.review-mode.is-reading .rv-mark { color: inherit; text-decoration: none; cursor: text; }
.production-work.is-reading .be-body > [data-block-no]::before { display: none; }
.production-work.is-reading .be-body { padding: 20px 24px; background: var(--surface); color: var(--text); }

.production-work.is-reading > .panel-text { display: none; }