/* 管理画面の見た目。見た目の正はこのファイル。手本は output/marketing-mock.html（2026-11-05 承認）。
   PC の業務画面の密度で作る（スマホ表示は作らない）。淡い灰色の地に白いカードを置く。
   黒は主操作のボタンだけ、選択中は --accent-bg と --accent、グラフは #2a6fd6・#00a0a8・灰 #8c929c。
   カードの縁に色帯を付けない。区切りは罫線1本か、1px のすき間で作る。インラインの style は CSP で使えない */
:root {
  color-scheme: light only;
  --ink: #14171f;
  --ink2: #4d5461;
  --ink3: #6b7280;
  --faint: #9aa0aa;
  --line: #e4e6ea;
  --line2: #eff0f3;
  --line-strong: #cfd3da;
  --canvas: #f5f6f8;
  --hover: #fafbfc;
  --white: #ffffff;
  --accent: #2556c9;
  --accent-bg: #edf2fd;
  /* 状態の色（意味ごとに分ける） */
  --good: #12703f;
  --good-bg: #e4f5ea;
  --good-dot: #1a9c55;
  --bad: #b3261e;
  --bad-bg: #fbe9e7;
  --warn: #a65300;
  --warn-bg: #f1f2f4;
  /* グラフの系列の色（順番で固定）。src/charts.mjs の SERIES_COLOR と同じ値 */
  --s1: #2a6fd6;
  --s2: #00a0a8;
  --s3: #8c929c;
  --s-gray: #8c929c;
  /* データの濃淡（--s1 と白を混ぜた5段）。文字は5段とも --ink のままで、コントラストは 4.5:1 を超える */
  --d1: #e3ecf9;
  --d2: #c6d9f5;
  --d3: #a4c2ef;
  --d4: #7fa9e6;
  --d5: #558cde;
  --r: 12px;
  --r-control: 8px;
  --r-tag: 6px;
  --shadow: 0 1px 2px rgba(20, 23, 31, 0.05);
  --sh-pop: 0 4px 16px rgba(20, 23, 31, 0.1), 0 1px 3px rgba(20, 23, 31, 0.06);
  --side-w: 232px;
  /* 密な表の1列目（曜日）の幅。左のぼかしの開始位置もここから計算する */
  --dense-head: 72px;
  --font: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--canvas); }
body { margin: 0; min-width: 1280px; background: var(--canvas); color: var(--ink); font-family: var(--font); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; word-break: auto-phrase; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
a { color: var(--accent); text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ic, .ic--s { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.num { font-variant-numeric: tabular-nums; }
/* 数のうしろの単位。隣の列が同じ数になる時に、何を数えたのかを読めるようにする */
.num .unit { margin-left: 2px; color: var(--ink3); font-size: 12px; font-weight: 400; }
/* 棒に入れられない参考の数。棒の下に罫線で区切って置く（カードの副題と地続きに見せない） */
.side-num { margin: 14px 0 10px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink2); font-size: 13px; }
.side-num .num { color: var(--ink); font-size: 15px; font-weight: 600; }
.nowrap { white-space: nowrap; }
.muted { color: var(--ink3); }
.note { color: var(--ink3); font-size: 13px; }
.spacer { margin-left: auto; }

/* ---------- 左の列 ---------- */
.layout { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; z-index: 30; align-self: start; height: 100vh; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--white); }
.brand { display: flex; align-items: center; gap: 10px; padding: 16px 22px 12px; font-size: 16px; font-weight: 700; flex: none; }
.brand-logo { width: 24px; height: 24px; display: block; flex: none; }
.brand b { font-weight: 700; }
.biz { flex: none; padding: 0 12px 10px; }
.biz-l { display: block; padding: 0 10px 4px; font-size: 12px; color: var(--ink3); }
.biz .seg { display: flex; }
.biz .seg a { flex: 1; padding: 0 6px; }
/* 4つは1段に収まらないので、2段にそろえる */
.biz .seg:has(a:nth-child(4)) { display: grid; grid-template-columns: 1fr 1fr; }
.nav { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 12px 12px; }
.nav-group { padding: 14px 10px 4px; font-size: 12px; font-weight: 500; color: var(--ink3); }
.nav a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--r-control); color: var(--ink2); font-weight: 500; }
.nav a:hover { background: var(--canvas); }
.nav a[aria-current="page"] { background: var(--accent-bg); color: var(--accent); }
.me { flex: none; padding: 8px 12px; border-top: 1px solid var(--line); }

/* 左下のメニュー */
.avatar { flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--accent-bg); color: var(--accent); font-weight: 600; object-fit: cover; }
.avatar--s { width: 28px; height: 28px; font-size: 12px; }
.avatar--m { width: 34px; height: 34px; font-size: 13px; }
.um { position: relative; }
.um-btn { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 10px; border: 0; border-radius: var(--r-control); background: transparent; color: var(--ink); font-weight: 500; text-align: left; cursor: pointer; }
.um-btn:hover, .um-btn[aria-expanded="true"] { background: var(--canvas); }
.um-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.um-chev { width: 14px; height: 14px; color: var(--ink3); }
.um-menu { position: absolute; bottom: calc(100% + 4px); left: 0; width: 256px; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--white); box-shadow: var(--sh-pop); z-index: 50; }
.um-menu form { margin: 0; }
.um-id { display: flex; align-items: center; gap: 8px; padding: 8px; }
.um-who { min-width: 0; font-size: 12px; line-height: 1.45; color: var(--ink3); }
.um-who > * { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.um-who b, .um-who .um-mail { font-size: 13px; font-weight: 500; color: var(--ink); }
.um-who small { font-size: 12px; }
.um-sep { height: 1px; margin: 4px 0; background: var(--line); }
.um-item { width: 100%; display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 8px; border: 0; border-radius: var(--r-tag); background: transparent; color: var(--ink); cursor: pointer; text-align: left; font-size: 13px; }
.um-item .ic { color: var(--ink3); }
.um-item:hover { background: var(--canvas); }
.um-item--danger, .um-item--danger .ic { color: var(--bad); }
.um-item--danger:hover { background: var(--bad-bg); }

/* ---------- 本文 ---------- */
.main { min-width: 0; }
.page { max-width: 1400px; margin: 0 auto; padding: 24px 32px 56px; }
.ph { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; min-height: 38px; margin-bottom: 20px; }
.ph h1 { margin-right: auto; font-size: 22px; font-weight: 700; line-height: 1.35; }
.ph > div:first-child { margin-right: auto; }
.ph > div:first-child h1 { margin-right: 0; }
.ph .lead { margin-top: 2px; font-size: 13px; }
.ph-act { display: flex; gap: 8px; flex: none; }
.range { color: var(--ink3); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px; font-size: 13px; font-weight: 500; }
.stack { display: grid; gap: 16px; align-content: start; min-width: 0; }
/* 並ぶカードは高さをそろえる。右が縦に積んだ列の時は、いちばん下のカードが余りを持つ */
.cols-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.cols-2 > .stack { display: flex; flex-direction: column; }
.cols-2 > .stack > :last-child { flex: 1; }
.cols-2--wide-left { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.form-narrow { max-width: 720px; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.c8, .c6, .c4 { display: grid; min-width: 0; }
.c12 { grid-column: span 12; }
.c8 { grid-column: span 8; }
.c6 { grid-column: span 6; }
.c4 { grid-column: span 4; }

/* カード */
.card { position: relative; min-width: 0; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); box-shadow: var(--shadow); }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.card-h h2 { font-size: 15px; font-weight: 700; line-height: 1.4; }
.card-h .sub { margin-top: 1px; color: var(--ink3); font-size: 13px; line-height: 1.5; }
.card--flush { padding: 0; }
.card--flush > .card-h { margin: 0; padding: 16px 20px 8px; }
.more { display: inline-flex; align-items: center; gap: 2px; flex: none; color: var(--accent); font-size: 13px; font-weight: 500; white-space: nowrap; }
.more .ic { width: 14px; height: 14px; }
h3 { font-size: 13px; font-weight: 600; line-height: 1.5; margin-bottom: 8px; }

/* 文の中のリンクは主の色、表と一覧の名前は太い黒 */
:where(.main td, .main .rows, .main .tag-list) a { color: var(--ink); font-weight: 600; }
:where(.main td, .main .rows) a:hover { color: var(--accent); }
.em { font-weight: 600; color: var(--ink); }
.name { display: block; color: var(--ink); font-size: 14px; font-weight: 600; }
.sub { color: var(--ink3); font-size: 12px; }
td .sub { display: block; }

/* ボタン。黒は主操作だけ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 7px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-control); background: var(--white); color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.4; cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--canvas); }
.btn--primary { background: var(--ink); border-color: var(--ink); color: var(--white); }
.btn--primary:hover { background: #2b303b; border-color: #2b303b; }
.btn--quiet { border-color: transparent; background: transparent; color: var(--ink2); }
.btn--quiet:hover { background: var(--canvas); color: var(--ink); }
/* 消すことの確定だけに使う赤。ふだんの画面には出さない */
.btn--danger { border-color: var(--bad); background: var(--bad); color: var(--white); }
.btn--danger:hover { border-color: #9a2019; background: #9a2019; }
.btn--sm { min-height: 30px; padding: 4px 10px; font-size: 13px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: 13px; font-weight: 500; cursor: pointer; }
.act-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.act-row form { display: inline-flex; gap: 8px; align-items: center; }
.qr-panel + .act-row, .builder + .act-row { margin-top: 12px; }
.inline-form { display: inline-flex; margin: 0; }
.inline-input { display: flex; align-items: center; gap: 8px; }
.inline-input select { width: auto; min-width: 104px; }
.icon-btn { width: 32px; height: 32px; display: inline-grid; place-items: center; border: 0; border-radius: var(--r-control); background: transparent; color: var(--ink3); cursor: pointer; }
.icon-btn:hover { background: var(--canvas); color: var(--ink); }
.icon-btn:disabled { color: var(--faint); cursor: not-allowed; background: transparent; }

/* 小さな切り替え（事業・期間・画面の中の切り替えで共通） */
.period-wrap { display: flex; align-items: center; flex: none; }
.period, .seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--r-control); background: var(--line2); }
.period a, .seg a { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 28px; padding: 0 10px; border: 0; border-radius: var(--r-tag); background: transparent; color: var(--ink2); font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.period a:hover, .seg a:hover { background: var(--white); }
.period a[aria-current="true"], .seg a[aria-current="true"] { background: var(--accent-bg); color: var(--accent); }
.seg a .ic { width: 14px; height: 14px; }
.seg a .n { font-weight: 400; font-variant-numeric: tabular-nums; }

/* 札 */
.badge, .chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: var(--r-tag); background: var(--line2); color: var(--ink2); font-size: 12px; font-weight: 500; line-height: 1.5; white-space: nowrap; vertical-align: middle; }
.badge .ic { width: 12px; height: 12px; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-list a.badge { font-weight: 500; color: var(--ink2); }
.tag-list a.badge:hover { background: var(--line); }

/* 状態（丸＋文字。色だけで伝えない） */
.st { display: inline-flex; align-items: center; gap: 6px; color: var(--ink2); font-size: 13px; font-weight: 500; white-space: nowrap; vertical-align: middle; }
.st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
.st--ok::before { background: var(--good-dot); }
.st--sch::before { background: var(--s1); }
.st--warn::before { background: var(--warn); }
.st--fail::before { background: var(--bad); }
.st--fail { color: var(--bad); }

/* 表 */
.tbl-wrap { overflow-x: auto; padding-bottom: 6px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 10px 12px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line2); }
th { padding: 8px 12px; font-weight: 500; color: var(--ink3); white-space: nowrap; border-bottom-color: var(--line); }
tbody tr:hover td { background: var(--hover); }
tbody tr:last-child td { border-bottom: 0; }
tfoot td { border-top: 1px solid var(--line); border-bottom: 0; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.card--flush table th:first-child, .card--flush table td:first-child { padding-left: 20px; }
.card--flush table th:last-child, .card--flush table td:last-child { padding-right: 20px; }
.sum-row td { font-weight: 600; }
.due-line { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
/* 列の少ない表: 列を中身の幅に詰め、右の余りは最後の列（数字で終わる表は .tbl-rest）が持つ */
.tbl-fit th:not(:last-child), .tbl-fit td:not(:last-child) { width: 1%; padding-right: 32px; white-space: nowrap; }
.note--pad { padding: 10px 20px; }
/* 読み方を2行に分けて添える時、間が開きすぎないようにする */
.note--pad + .note--pad { padding-top: 0; }
.who { display: flex; align-items: center; gap: 10px; }

/* 顧客の丸 */
.av { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; font-size: 13px; font-weight: 700; }
.av--s { width: 28px; height: 28px; font-size: 12px; }
.av--l { width: 56px; height: 56px; font-size: 20px; }
.a0 { background: #e3ebfb; color: #1f4fa3; }
.a1 { background: #dff3f0; color: #0b6b62; }
.a2 { background: #f6e6f1; color: #7f1f63; }
.a3 { background: #ebe7f9; color: #4b3a9e; }

/* 数字の帯: 1枚のカードの中を 1px のすき間で等分する */
.kpis { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--line); box-shadow: var(--shadow); }
.kpi { min-width: 0; padding: 16px 20px; background: var(--white); }
.kpi-label { font-size: 13px; font-weight: 600; color: var(--ink2); }
.kpi-value { margin-top: 2px; display: flex; align-items: baseline; gap: 3px; font-size: 26px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
.kpi-value small { font-size: 13px; font-weight: 400; color: var(--ink3); }
.kpi-delta { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 13px; color: var(--ink3); font-variant-numeric: tabular-nums; }
.kpi-delta b { font-weight: 600; }
.kpi-delta.up { color: var(--good); }
.kpi-delta.down { color: var(--bad); }
.hidden-amt { color: var(--ink3); font-weight: 500; }
.kpi .hidden-amt { font-size: 16px; }
/* 増減の札。増えた・減ったは矢印でも示す */
.dlt { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.delta { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px 1px 7px; border-radius: 12px; background: var(--line2); color: var(--ink2); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.delta .ic { width: 14px; height: 14px; }
.delta.up { background: var(--good-bg); color: var(--good); }
.delta.down { background: var(--bad-bg); color: var(--bad); }
.vs { color: var(--ink3); font-size: 13px; }

/* ホーム: 要対応 */
.alerts { padding: 0; }
.alerts > summary { display: flex; align-items: center; gap: 8px; padding: 14px 20px; font-size: 15px; font-weight: 700; list-style: none; cursor: pointer; }
.alerts > summary::-webkit-details-marker { display: none; }
.alerts > summary .ic { transition: transform 0.15s; }
.alerts[open] > summary .ic { transform: rotate(180deg); }
.card.alerts-none { display: flex; align-items: center; gap: 8px; padding: 14px 20px; }
.alerts-none b { font-size: 15px; font-weight: 700; }
.alerts-none .ic { color: var(--good); }
.count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--bad); color: var(--white); font-size: 12px; font-weight: 700; }
.alert { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--line2); }
.mark { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: var(--r-control); background: var(--line2); color: var(--ink3); }
.m-bad { background: var(--bad-bg); color: var(--bad); }
.m-warn { background: var(--warn-bg); color: var(--warn); }
.alert p { flex: 1; min-width: 0; }
.alert strong { display: block; font-weight: 600; }
.alert p > span { color: var(--ink3); font-size: 13px; }
.alert .btn { min-width: 112px; }
.alerts-more { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 20px; border-top: 1px solid var(--line2); color: var(--ink3); font-size: 13px; }

/* ホーム: 成果の要約 */
.hero { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 6px 20px 0; background: var(--line); }
.hero > div { min-width: 0; padding: 16px 24px 20px; background: var(--white); }
.hero > div:first-child { padding-left: 0; }
.hero b { display: block; font-size: 36px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.hero b small { margin-left: 4px; font-size: 15px; font-weight: 500; color: var(--ink3); }
.hero h3 { margin: 6px 0 0; font-size: 14px; font-weight: 600; color: var(--ink2); }
.break { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 0 20px 6px; padding: 14px 0; border-top: 1px solid var(--line); }
.break--grouped { grid-template-columns: 1fr 2fr 2fr; gap: 0; padding: 0; }
.bgroup { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; min-width: 0; padding: 14px 20px; }
.bgroup + .bgroup { border-left: 1px solid var(--line); }
.bgroup:first-child { padding-left: 0; }
.bgroup:last-child { padding-right: 0; }
.bitem h4 { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink2); }
.bitem b { display: block; margin-top: 4px; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bitem b.exp-near { color: var(--warn); }
.bitem > span { color: var(--ink3); font-size: 13px; }

/* ホーム: 購入までの流れ */
.fun { display: grid; gap: 12px; padding: 14px 20px 18px; }
.fun .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; font-size: 13px; }
.fun .row b { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fun small { display: block; margin-top: 3px; color: var(--ink3); font-size: 12px; }
.fbar { display: block; width: 100%; height: 10px; }
.fbar .bg { fill: var(--line2); }
.fbar .fg { fill: var(--s1); }
.fun-note { padding: 0 20px 16px; }

/* グラフ */
.chart-head { margin-bottom: 8px; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--ink2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.legend i.s1 { background: var(--s1); }
.legend i.s2 { background: var(--s2); }
.legend i.s3 { background: var(--s3); }
.legend i.s-gray { background: var(--s-gray); }
.legend i.dash { width: 14px; height: 0; border-radius: 0; border-top: 2px dashed var(--s-gray); background: none; }
/* 目盛りの文字は左の余白に出す。幅は枠に合わせて伸び、高さは変えない */
.chart { position: relative; padding: 0 12px 0 64px; }
.chart svg { display: block; width: 100%; overflow: visible; }
.chart .grid line { stroke: var(--line2); stroke-width: 1; }
.chart .ln { fill: none; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chart .ln.dash { stroke-dasharray: 4 3; }
.chart .ln.s1 { stroke: var(--s1); }
.chart .ln.s2 { stroke: var(--s2); }
.chart .ln.s3 { stroke: var(--s3); }
.chart .ln.s-gray { stroke: var(--s-gray); }
.chart .pt { stroke: var(--white); stroke-width: 2; }
.chart .pt.s1 { fill: var(--s1); }
.chart .pt.s2 { fill: var(--s2); }
.chart .pt.s3 { fill: var(--s3); }
.chart .pt.s-gray { fill: var(--s-gray); }
.chart .bar.s1 { fill: var(--s1); }
.chart .axis text, .chart .bar-tick { fill: var(--ink3); font-size: 12px; font-variant-numeric: tabular-nums; }
.chart .bar-label { fill: var(--ink); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chart .bar-label .unit { fill: var(--ink3); font-size: 11px; font-weight: 400; }
.chart .bar-sub { fill: var(--ink3); font-size: 12px; font-variant-numeric: tabular-nums; }
.chart .bar-name { fill: var(--ink2); font-size: 12px; }
.chart--heat { padding: 0 0 0 28px; }
.heat-scale { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--ink3); }
.heat-scale i { width: 120px; height: 8px; border-radius: var(--r-tag); background: linear-gradient(90deg, var(--d1), var(--d5)); display: inline-block; }
.heat-c--0 { fill: var(--line2); }
.heat-c--1 { fill: var(--d1); }
.heat-c--2 { fill: var(--d2); }
.heat-c--3 { fill: var(--d3); }
.heat-c--4 { fill: var(--d4); }
.heat-c--5 { fill: var(--d5); }
.chartbox + .note { margin-top: 12px; }
/* 「表で見る」はグラフの下に置き、開くと表が出る */
.chart-more { margin-top: 8px; }
/* 文字とアイコンの左端を、カードのほかの要素にそろえる（ボタンの内側の余白 10px と枠 1px を負のマージンで打ち消す。押せる範囲は変えない） */
.chart-more > summary { margin-left: -11px; list-style: none; }
.chart-more > summary::-webkit-details-marker { display: none; }
.chart-table { margin-top: 8px; max-height: 320px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-control); }
.chart-table th { position: sticky; top: 0; z-index: 2; background: var(--white); }
.chart-table--dense th, .chart-table--dense td { padding: 8px; font-size: 12px; }
.chart-table--dense table { table-layout: fixed; }
.chart-table--dense th:first-child { width: var(--dense-head); }
/* 桁の多い数字が隣のセルに重なるので、いちばん長い数字に合わせて列の幅の下限を上げる（3桁までは下限を付けず、枠に収める）。
   下限が枠を超えた時だけ横にスクロールするので、その時は曜日の列を左に貼り付けて見失わせない */
.chart-table--wide { --dense-min: 0; }
.chart-table--w5 { --dense-min: calc(var(--dense-head) + 24 * 52px); } /* 「1,234」: 曜日の列 ＋ 24列 × 52px */
.chart-table--w6 { --dense-min: calc(var(--dense-head) + 24 * 60px); } /* 「12,345」: 曜日の列 ＋ 24列 × 60px */
.chart-table--w7 { --dense-min: calc(var(--dense-head) + 24 * 66px); } /* 「123,456」: 曜日の列 ＋ 24列 × 66px */
.chart-table--wide table { min-width: var(--dense-min); }
.chart-table--wide th:first-child,
.chart-table--wide td:first-child { position: sticky; left: 0; z-index: 1; background: var(--white); box-shadow: 1px 0 0 var(--line2); }
.chart-table--wide th:first-child { z-index: 3; }
.chart-table--wide tbody tr:hover td:first-child { background: var(--hover); }
/* まだ続きがある側だけを白へぼかして、送れることを見せる（app.js が is-more・is-back を付け外しする。
   スクリプトが無い時は出ないので、今までの見え方のまま） */
.chart-fade { position: relative; }
.chart-fade::before,
.chart-fade::after { content: ""; position: absolute; top: 1px; bottom: 1px; width: 28px; opacity: 0; pointer-events: none; transition: opacity .15s linear; }
.chart-fade::before { left: calc(var(--dense-head) + 1px); border-radius: 0; background: linear-gradient(to left, rgba(255, 255, 255, 0), var(--white)); }
.chart-fade::after { right: 1px; border-radius: 0 var(--r-control) var(--r-control) 0; background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--white)); }
.chart-fade.is-back::before { opacity: 1; }
.chart-fade.is-more::after { opacity: 1; }

/* 一覧（稼働状況・区分） */
.rows li { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 6px 20px; border-top: 1px solid var(--line2); }
.rows li:first-child { border-top: 0; }
.rows li > .badge { margin-left: auto; }
/* 状態の左端をそろえる */
.rows li.health-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); }

/* 入力 */
textarea, select, input[type="text"], input[type="number"], input[type="search"], input[type="date"], input[type="time"] { width: 100%; min-height: 36px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--r-control); background-color: var(--white); font-size: 14px; }
textarea { min-height: 96px; padding: 7px 10px; resize: vertical; line-height: 1.55; }
/* 選択欄の矢印と、日付・時刻のアイコンは、ほかのアイコンと同じ線画にそろえる */
select { appearance: none; padding-right: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 14px 14px; }
/* 日付・時刻の欄は Chrome が内側に余白を足すので、消してほかの欄と文字の左端をそろえる */
input::-webkit-datetime-edit, input::-webkit-datetime-edit-fields-wrapper, input::-webkit-datetime-edit-year-field, input::-webkit-datetime-edit-hour-field { padding: 0; margin: 0; }
input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator { width: 14px; height: 14px; padding: 0; opacity: 1; background-repeat: no-repeat; background-position: center; background-size: 14px 14px; cursor: pointer; }
input[type="date"]::-webkit-calendar-picker-indicator { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E"); }
input[type="time"]::-webkit-calendar-picker-indicator { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"); }
textarea:focus, input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
textarea:disabled, input:disabled, select:disabled { background-color: var(--line2); color: var(--ink3); cursor: not-allowed; }
input::placeholder, textarea::placeholder { color: var(--ink3); }
.field { display: grid; gap: 4px; }
.field > label, .field > .flabel { font-size: 13px; font-weight: 500; color: var(--ink2); }
.field .help { font-size: 13px; color: var(--ink3); }
.checks, .radios { display: flex; flex-wrap: wrap; gap: 4px; }
.check { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r-control); cursor: pointer; font-size: 13px; font-weight: 500; }
.check input { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); }
.check.is-off { color: var(--ink3); font-weight: 400; cursor: not-allowed; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }

/* 絞り込み */
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 20px; border-bottom: 1px solid var(--line2); }
.toolbar:last-child { border-bottom: 0; }
.toolbar select { width: auto; min-width: 150px; }
.toolbar input[type="text"] { flex: 1; width: auto; min-width: 240px; }
.toolbar .count-text { color: var(--ink3); font-size: 13px; }
.pager { border-top: 1px solid var(--line2); border-bottom: 0; }
.search { position: relative; width: 300px; }
.search .ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--ink3); }
.search input { padding-left: 32px; }
.filters { display: grid; gap: 8px; padding: 12px 20px; border-bottom: 1px solid var(--line2); }
.filters:last-child { border-bottom: 0; }
.filters-row { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; }
.filters-row > .seg { flex-wrap: wrap; min-width: 0; }
.filters-row > .lbl { flex: none; font-size: 13px; color: var(--ink3); }

/* タブ */
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; }
.tabs a { padding: 6px 12px; border-radius: var(--r-control); color: var(--ink2); font-weight: 500; }
.tabs a:hover { background: #e9ebef; }
.tabs a[aria-current="page"] { background: var(--accent-bg); color: var(--accent); }

/* お知らせ */
.info { display: flex; gap: 8px; align-items: flex-start; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--white); font-size: 13px; }
.info .ic { color: var(--ink3); margin-top: 2px; }
.info--warn .ic { color: var(--warn); }
.info--bad { border-color: var(--bad-bg); background: var(--bad-bg); }
.info--bad .ic { color: var(--bad); }
.flash { margin-bottom: 16px; }
.stack > .flash { margin-bottom: 0; }

/* 空の状態 */
.st-panel { display: grid; justify-items: center; gap: 4px; padding: 48px 24px; text-align: center; }
.st-panel > .ic { width: 24px; height: 24px; margin-bottom: 4px; color: var(--faint); stroke-width: 1.5; }
.st-panel h2 { font-size: 15px; font-weight: 600; }
.st-panel p { max-width: 520px; color: var(--ink3); font-size: 13px; text-wrap: balance; }
.st-inline { padding: 32px 24px; }

/* 定義の並び */
.dl { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px 12px; font-size: 13px; }
.dl dt { color: var(--ink3); }
/* 並びのすぐ下に読み方を添える時の余白 */
.dl + .note { margin-top: 12px; }
/* 設定の YouTube のカード。見出しの「最後に取り込んだ日時」が 112px の列で折り返すので、このカードだけ列を広げる */
.yt-dl { grid-template-columns: 140px minmax(0, 1fr); }
.yt-act { margin-top: 14px; }
.yt-warn { margin-bottom: 14px; }
.yt-video { display: flex; align-items: center; gap: 12px; min-width: 0; }
.yt-thumb { flex: none; width: 64px; height: 36px; border-radius: 4px; object-fit: cover; background: var(--line); }

/* 端から端まで使う画面（顧客の詳細・自動の決まりの図） */
.col { min-width: 0; background: var(--white); border-right: 1px solid var(--line); }
.col:last-child { border-right: 0; }
.col > header { display: flex; align-items: center; gap: 12px; min-height: 74px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.col > header h2 { font-size: 16px; font-weight: 700; }
.col > header p { color: var(--ink3); font-size: 13px; }
.col > header .back { margin-bottom: 0; }
.person { display: grid; grid-template-columns: 300px minmax(0, 1fr) 300px; min-height: 100vh; }
.facts { padding: 6px 18px 18px; }
.facts h3 { margin: 0; padding: 14px 0 6px; font-weight: 600; }
.facts .dl { grid-template-columns: 84px minmax(0, 1fr); }
.facts-who { display: flex; align-items: center; gap: 12px; padding-top: 12px; }
.facts-who h1 { font-size: 18px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.facts-text { color: var(--ink2); font-size: 13px; }
.sep { margin-top: 14px; border-top: 1px solid var(--line2); }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; overflow: hidden; margin-top: 8px; border: 1px solid var(--line2); border-radius: 10px; background: var(--line2); }
.kv > div { padding: 10px 12px; background: var(--white); }
.kv--one { grid-template-columns: 1fr; }
.kv span { display: block; color: var(--ink3); font-size: 12px; }
.kv b { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tl { padding: 12px 24px 24px; }
.tl .info { margin-bottom: 8px; }
.tl li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line2); }
.tl li:last-child { border-bottom: 0; }
.dot { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-control); background: var(--line2); color: var(--ink2); }
.tl strong { display: block; font-weight: 600; }
.tl time { color: var(--ink3); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* タグと区分 */
.tag-list li { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 20px; border-top: 1px solid var(--line2); }
.tag-list li:first-child { border-top: 0; }
.tag-list .n { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 500; }
.tag-list li.tag-sec { min-height: 32px; padding: 4px 20px; font-size: 13px; color: var(--ink3); }
.builder { display: grid; gap: 12px; }
.cond { display: grid; grid-template-columns: 40px minmax(0, 1.2fr) minmax(0, 1fr); gap: 8px; align-items: center; }
.cond .join { font-size: 13px; color: var(--ink3); }
.builder-foot { display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line2); }
.builder-foot .hit { margin-right: auto; }
.builder-foot .hit b { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tag-edit { display: grid; gap: 12px; }
.tag-edit .badges { align-items: center; }
.tag-chip { display: inline-flex; align-items: center; gap: 2px; padding: 0 0 0 8px; border-radius: var(--r-tag); background: var(--line2); color: var(--ink2); font-size: 12px; font-weight: 500; }
.tag-chip .icon-btn { width: 24px; height: 24px; }
.tag-chip .icon-btn .ic { width: 12px; height: 12px; }
.tag-add { display: flex; align-items: center; gap: 8px; }
.tag-add input { flex: 1; min-width: 0; }

/* QR の板 */
.qr-panel { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 20px; align-items: start; }
.qr-panel:has(> .st-inline) { grid-template-columns: minmax(0, 1fr); }
.qr-panel > .st-inline { order: 1; padding: 0; text-align: left; }
/* 大きさを決めるのは QR の絵だけ。中の印（コピーのボタンなど）まで大きくしない */
.qr-panel > svg { width: 148px; height: 148px; border: 1px solid var(--line); border-radius: var(--r-control); padding: 4px; background: var(--white); }
.url-box { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 10px; border-radius: var(--r-control); background: var(--canvas); word-break: break-all; }
.url-box span { flex: 1; }
/* 写し取れたことを、印だけでなく文字でも2秒だけ出す。箱の下に空のまま置いてある1行なので、
   出ても消えても下の中身の高さが動かない */
.copy-msg { min-height: 18px; margin-top: 4px; color: var(--ink2); font-size: 13px; line-height: 18px; }

/* LINE の通数 */
.quotas { padding: 8px 20px 12px; margin-bottom: 16px; }
.stack > .quotas { margin-bottom: 0; }
.quota { display: grid; grid-template-columns: 160px minmax(0, 360px) auto; align-items: center; gap: 14px; padding: 6px 0; }
.quota strong { font-weight: 600; }
.quota .exp-near { color: var(--warn); }
.qnote { padding-top: 4px; color: var(--ink3); font-size: 13px; }
.quota-more { padding-top: 6px; }
.quota-more > summary { list-style: none; }
.quota-more > summary::-webkit-details-marker { display: none; }
.quota-more .chev { transition: transform 0.15s; }
.quota-more[open] .chev { transform: rotate(180deg); }
.quota-nums { display: grid; grid-template-columns: repeat(5, auto); justify-content: start; gap: 8px 32px; margin-top: 10px; }
.quota-nums dt { font-size: 13px; color: var(--ink3); white-space: nowrap; }
.quota-nums dd { font-size: 18px; font-weight: 600; line-height: 1.35; white-space: nowrap; font-variant-numeric: tabular-nums; }
.quota-nums dd small { margin-left: 1px; font-size: 13px; font-weight: 400; color: var(--ink3); }
.quota-nums dd.exp-near { color: var(--warn); }
/* 記事の訪問（GA の参考値）。通数の数字と同じ形で4列 */
.quota-nums--4 { grid-template-columns: repeat(4, auto); margin-top: 0; }
/* YouTube の再生（YouTube アナリティクスの参考値）。同じ形で3列 */
.quota-nums--3 { grid-template-columns: repeat(3, auto); margin-top: 0; }
.quota-nums + .note { margin-top: 14px; }
.ga-lead { margin-bottom: 8px; padding-left: 21px; } /* 左端をカードの中の文字にそろえる */
.quota-svg { display: block; width: 100%; height: 8px; border-radius: 4px; overflow: hidden; }
.quota-svg .q-used { fill: var(--s1); }
.quota-svg .q-resv { fill: var(--s2); }
.quota-svg .q-free { fill: var(--line2); }
.quota-cap { margin-top: 8px; font-size: 13px; color: var(--ink3); }
.quota-legend { display: flex; flex-wrap: nowrap; gap: 12px; margin-top: 8px; font-size: 13px; color: var(--ink3); white-space: nowrap; }
.quota-legend span { display: inline-flex; align-items: center; gap: 4px; }
.quota-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.quota-legend i.q-used { background: var(--s1); }
.quota-legend i.q-resv { background: var(--s2); }
.quota-legend i.q-free { background: var(--line2); }
.quota-legend i.q-res { background: repeating-linear-gradient(135deg, var(--s3) 0 1px, var(--white) 1px 3px); box-shadow: inset 0 0 0 1px var(--line-strong); }

/* 発信の予定表 */
.cal-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.cal-h h2 { margin-left: 8px; font-size: 15px; font-weight: 700; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-dow { padding: 8px; font-size: 13px; color: var(--ink3); border-bottom: 1px solid var(--line); }
.cal-day { min-height: 144px; padding: 6px; border-right: 1px solid var(--line2); border-bottom: 1px solid var(--line2); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal-day:nth-child(7n) { border-right: 0; }
.cal-day:nth-last-child(-n + 7) { border-bottom: 0; }
.cal--month .cal-day { min-height: 96px; }
.cal-day.is-out { background: var(--hover); }
.cal-day.is-out .cal-date { color: var(--faint); }
.cal-date { font-size: 13px; font-variant-numeric: tabular-nums; padding: 0 2px; line-height: 24px; }
.cal-day.is-today .cal-date span { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: var(--accent); color: var(--white); font-weight: 500; }
a.cal-item { display: grid; gap: 2px; width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--white); color: var(--ink); font-size: 12px; line-height: 1.45; }
a.cal-item:hover { background: var(--canvas); }
a.cal-item.is-draft { background: var(--canvas); }
.cal-item .t { display: flex; align-items: center; gap: 6px; color: var(--ink3); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.cal-item .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cal-item .st { font-size: 12px; }
.cal-more { font-size: 12px; color: var(--ink3); padding: 0 2px; }

/* 自動の決まりの図（きっかけ・条件・動きの1段） */
.flowhead { display: flex; align-items: center; gap: 12px; padding: 12px 24px; border-bottom: 1px solid var(--line); background: var(--white); }
.flowhead h1 { font-size: 17px; font-weight: 700; line-height: 1.4; }
.crumb { font-size: 13px; color: var(--ink3); }
.flowhead .sp { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.flow-notes { display: grid; gap: 8px; margin-bottom: 28px; }
.flow-notes .flash { margin: 0; }
.flow-page { display: flex; flex-direction: column; min-height: 100vh; }
.flowsplit { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 320px; }
.flowsplit .col { border-right: 0; }
.flowsplit .facts { padding: 18px; }
.board { position: relative; border-right: 1px solid var(--line); background-color: #f7f8fa; background-image: radial-gradient(#d6d9df 1px, transparent 1px); background-size: 18px 18px; }
.board-scroll { overflow-x: auto; padding: 28px 24px 48px; }
/* 木が板より広い時のぼかしは、曜日の表と同じ合図（app.js が is-more・is-back を付け外しする）。板の地に合わせる */
.board.chart-fade::before, .board.chart-fade::after { top: 0; bottom: 0; border-radius: 0; }
.board.chart-fade::before { left: 0; background: linear-gradient(to left, rgba(247, 248, 250, 0), #f7f8fa); }
.board.chart-fade::after { right: 0; background: linear-gradient(to right, rgba(247, 248, 250, 0), #f7f8fa); }
/* 木が板より広くなる時に左端まで送れるよう、幅を中身ぴったりにする（狭い時は板いっぱいで中央） */
.tree { display: flex; flex-direction: column; align-items: center; width: max-content; min-width: 100%; }
.node { width: 440px; max-width: 100%; border: 1px solid #d7dae0; border-radius: var(--r); background: var(--white); box-shadow: 0 1px 3px rgba(20, 23, 31, 0.07); }
.nt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.nt b { font-weight: 600; }
.tk { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: var(--r-control); }
.tk-go { background: #f1f2f4; color: #a65300; }
.tk-if { background: #ebe7f9; color: #4b3a9e; }
.tk-act { background: #e3ebfb; color: #1f4fa3; }
.nb { display: grid; gap: 10px; padding: 12px; border-top: 1px solid var(--line2); }
.wire { position: relative; width: 2px; height: 22px; background: #c3c8d0; flex: none; }
/* つなげる先が無い所は、線を引かずに高さだけ空ける */
.wire--off { background: none; }
.wire.arr::after { content: ""; position: absolute; left: -4px; bottom: 0; border: 5px solid transparent; border-top: 6px solid #c3c8d0; border-bottom: 0; }
/* 決まりの編集では、カードが「このカードを選ぶ」リンクになる（CSP でインラインの JS を置けないため） */
a.node { display: block; color: var(--ink); text-align: left; }
a.node:hover { border-color: var(--line-strong); }
.node--on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ntt { min-width: 0; }
.ntt small { display: block; color: var(--ink3); font-size: 12px; }
.ntt b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.node .nm { display: flex; gap: 12px; padding: 10px 12px; border-top: 1px solid var(--line2); color: var(--ink3); font-size: 13px; min-width: 0; }
.node .nm > span { display: flex; gap: 8px; min-width: 0; }
.node .nm b { font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-wait { background: #eceef1; color: #4d5461; }
/* 分かれ道。2本の列の上を横線でつなぐ。中に分かれ道が入った時は、カードを縮めずに列を広げる（横線は等幅が前提なので 1fr で両方そろえる） */
.branches { position: relative; display: grid; grid-template-columns: repeat(2, minmax(320px, 1fr)); width: max-content; }
.branches .node { width: 320px; }
.branches::before { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 2px; background: #c3c8d0; }
.branch { display: flex; flex-direction: column; align-items: center; }
.wire--stub { height: 10px; }
.blab { margin-top: 10px; padding: 1px 10px; border: 1px solid #d7dae0; border-radius: 12px; background: var(--white); color: var(--ink2); font-size: 12px; font-weight: 600; }
/* 短い枝の下を伸ばして、両方の枝の「足す」を同じ高さにそろえる */
.wire.grow { flex: 1 0 22px; }
.step-add { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.board .note { max-width: 320px; text-align: center; }
/* 右の列の見出しは、カードと同じ札と呼び名を出す。
   例外は根のパネルで、見出しは「この決まり」だけにして呼び名を出さない
   （名前が左上の題と名前の欄にもあり、同じ画面に3回出るため。2026-11-08） */
.col > header .ntt p { color: var(--ink3); font-size: 12px; }

/* 比べの増減 */
.cmp-up { color: var(--good); font-weight: 500; }
.cmp-down { color: var(--bad); font-weight: 500; }

/* クロス分析（濃さで数の多さを表す） */
/* 札の右の余白を負のマージンで打ち消し、数字の右端を見出しと合計にそろえる */
.xcell { display: inline-block; min-width: 56px; margin-right: -8px; padding: 2px 8px; border-radius: var(--r-tag); text-align: right; font-variant-numeric: tabular-nums; }
.xcell--0 { color: var(--ink3); }
/* 濃さの付いたセルは背景が濃くなるので、単位を灰色にも薄くもせず、文字と同じ色の小さい字にする
   （一番濃い段 --d5 でも文字色のままなら 5.28 で読めるが、薄さ .65 を掛けると 3.08 まで落ちて 11px には足りない） */
.xcell .unit { margin-left: 2px; font-size: 11px; font-weight: 400; }
.xcell--1 { background: var(--d1); }
.xcell--2 { background: var(--d2); }
.xcell--3 { background: var(--d3); }
.xcell--4 { background: var(--d4); }
.xcell--5 { background: var(--d5); }

/* 受信箱: ページ全体ではなく、両ペインが別々にスクロールする。返信欄は右のペインの下に固定する */
.inbox { display: grid; grid-template-columns: 340px minmax(0, 1fr); height: 100vh; }
.inbox .col { display: flex; flex-direction: column; min-height: 0; }
.inbox .col > header { flex: none; }
.inbox-list > header { padding-inline: 16px; }
.inbox-thread > header { padding-inline: 24px; }
.inbox-list h1 { font-size: 16px; font-weight: 700; }
.inbox-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.inbox .pager { flex: none; padding: 10px 16px; }
.inbox-who { flex: 1; min-width: 0; }
.inbox-who h2 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.inbox-flash { flex: none; margin: 12px 24px; }
.thread { display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line2); color: var(--ink); }
.thread:hover { background: var(--hover); }
.thread[aria-current="true"] { background: var(--accent-bg); }
.thread-tx { flex: 1; min-width: 0; display: block; }
.thread-top { display: flex; justify-content: space-between; gap: 8px; }
.thread-top b { overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.thread-top time { flex: none; color: var(--ink3); font-size: 13px; font-variant-numeric: tabular-nums; }
.thread p { overflow: hidden; color: var(--ink2); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.thread p.thread-kind { color: var(--ink3); }
.thread-biz { display: block; margin-top: 2px; color: var(--ink3); font-size: 13px; }
.msgs { display: flex; flex-direction: column; gap: 14px; padding: 16px 24px 24px; background: var(--canvas); }
.msgs-note { color: var(--ink3); font-size: 13px; text-align: center; text-wrap: balance; }
.msgs-empty { margin: auto; color: var(--ink3); }
.msg { flex: none; max-width: 72%; align-self: flex-start; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.msg-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg time { display: block; margin-top: 4px; color: var(--ink3); font-size: 13px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.msg--me { align-self: flex-end; border-color: #d8e3fa; background: var(--accent-bg); }
.msg--note { color: var(--ink3); }
.msg--failed { border-color: var(--bad-bg); background: var(--white); }
.msg-fail { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--bad); font-size: 13px; text-wrap: pretty; }
.msg-fail--warn { color: var(--warn); }
.msg--me time { color: var(--ink2); }
.msg--failed form { margin-top: 8px; }
.reply { flex: none; display: grid; gap: 8px; padding: 12px 24px 16px; border-top: 1px solid var(--line); background: var(--white); }
.reply textarea { min-height: 76px; max-height: 40vh; }
.reply-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ink2); font-size: 13px; }
.reply-why { display: flex; align-items: center; gap: 6px; color: var(--ink2); font-size: 13px; }

/* 権限の表 */
.perm td:not(:first-child), .perm th:not(:first-child) { text-align: center; width: 128px; }
.perm td.tbl-rest, .perm th.tbl-rest { width: auto; }
.perm .yes, .perm .no { display: inline-flex; vertical-align: middle; }
.perm .yes { color: var(--good-dot); }
.perm .no { color: var(--faint); }

/* ログインの画面（背景の星空は login-sky.js が描く） */
.login { position: relative; min-height: 100vh; display: grid; place-items: center; padding: 32px; overflow: hidden; background: linear-gradient(135deg, #0b1a4a, #1a3bb0 55%, #040a22); }
.login-sky { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.login-card { position: relative; width: 380px; display: grid; gap: 12px; padding: 28px; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); box-shadow: 0 24px 64px -16px rgba(2, 5, 18, 0.7); }
.login-card .brand { padding: 0; margin: 0 0 4px; }
.login-card h1 { font-size: 22px; font-weight: 700; }
.login-card p { color: var(--ink3); }
.login-card .info { color: var(--ink); }
.login-card .btn { margin-top: 4px; }

/* YouTube の投稿: 題名と概要欄の案（src/screens.mjs の uploadDetail・uploadsView） */
/* 表のセルの小さいボタン。枠と内余白の分だけ左へ出して、文字の左端を列の見出しとそろえる */
.btn--in-col { margin-left: -11px; }
/* 3案のカード。「この案を使う」をカードの下の端にそろえる */
.draft-card { display: flex; flex-direction: column; }
.draft-card > .stack { flex: 1; }
.draft-card .draft-use { margin-top: auto; padding-top: 16px; }
/* 概要欄の本文は4行まで見せ、「全文を見る」で開く */
.draft-body .clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.draft-body:has(details[open]) .clamp { display: none; }
.draft-body details > summary { color: var(--accent); cursor: pointer; list-style: none; font-size: 13px; margin-top: 4px; }
.draft-body details > summary::-webkit-details-marker { display: none; }