/* ==================================================================
   app.css — シルベ / SHIRUBE アプリ本体のスタイル

   読み込み順: tokens.css → components.css → app-tokens.css → app.css
   既存トークンだけで組み、新しい色・余白・角丸は定義しない（06 §5.3）。
   ================================================================== */

/* ---------------------------------------------------------------
   0. 基本
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: var(--leading-body);
  min-height: 100vh;
  min-height: 100dvh;
}
h1, h2, h3, h4 { font-family: var(--font-display); line-height: var(--leading-tight); margin: 0 0 var(--sp-2); font-weight: 500; }
p { margin: 0 0 var(--sp-3); }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
input, select, textarea { background: var(--surface); border: var(--hairline); border-radius: var(--radius); }
button { cursor: pointer; }
a { text-decoration-line: underline; }
img { max-width: 100%; display: block; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }

/* 数値・日付・番号は必ず等幅体 */
.data, time, .amount, .num {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------
   1. アプリシェル全体レイアウト
   --------------------------------------------------------------- */
.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* アイコン（Material Symbols のパスを内蔵した SVG。src/lib/icons.js） */
:root {
  --icon-expand-more: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z'/%3E%3C/svg%3E");
}
.icon { display: inline-block; flex: none; fill: currentColor; vertical-align: -0.15em; }

.app-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  height: var(--app-header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--sp-3);
  background: var(--saku-night);
  color: var(--geppaku);
  gap: var(--sp-3);
}
.app-header__brand { display: flex; align-items: center; gap: var(--sp-2); text-decoration: none; color: inherit; }
.app-header__brand img { height: 26px; width: auto; }
.app-header__wordmark { font-family: var(--font-logotype); font-size: var(--fs-lg); letter-spacing: 0.04em; color: #FFFFFF; }
.app-header__actions { display: flex; align-items: center; gap: var(--sp-2); }
.app-header__icon-btn {
  appearance: none; border: 0; background: transparent; color: var(--geppaku);
  width: var(--tap-min); height: var(--tap-min); border-radius: var(--radius);
  display: inline-flex; align-items: center; justify-content: center;
}
.app-header__icon-btn:hover { background: var(--tsukikage); }

.app-main {
  flex: 1 1 auto;
  width: 100%;
  padding-bottom: calc(var(--tab-bar-h) + var(--sp-4));
}
.app-main--reading { max-width: var(--container); margin: 0 auto; padding: var(--sp-5) var(--sp-3); }
.app-main--data { max-width: var(--app-container); margin: 0 auto; padding: var(--sp-4) var(--sp-3); }

/* 下部タブ（スマホ） */
.app-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  height: var(--tab-bar-h);
  display: flex;
  background: var(--saku-night);
  border-top: 1px solid var(--yoiyami);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.app-tabbar__item {
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  appearance: none; border: 0; background: transparent;
  color: var(--usuzuki); text-decoration: none;
  font-size: var(--fs-xs);
  min-height: var(--tap-min);
}
.app-tabbar__item.is-active { color: var(--geppaku); }
.app-tabbar__item .icon { font-size: var(--fs-lg); line-height: 1; }

/* サイドナビ（タブレット・PC） */
.app-sidenav {
  display: none;
  flex-direction: column;
  gap: var(--sp-1);
  background: var(--saku-night);
  color: var(--geppaku);
  padding: var(--sp-4) var(--sp-2);
  width: var(--side-nav-w);
  flex-shrink: 0;
}
.app-sidenav__link {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 10px var(--sp-3); border-radius: var(--radius);
  color: var(--usuzuki); text-decoration: none; font-size: var(--fs-sm);
  min-height: var(--tap-min);
}
.app-sidenav__link:hover { background: var(--tsukikage); color: var(--geppaku); }
.app-sidenav__link.is-active { background: var(--tsukikage); color: var(--geppaku); }
.app-sidenav__group-label { font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); color: var(--usuzuki); padding: var(--sp-3) var(--sp-3) var(--sp-1); }

.app-body { display: flex; flex: 1 1 auto; min-height: 0; }
/* 夜面は data-theme="night" をこの箱に付けて切り替えるため、背景もここで塗る
   （塗らないと body の明面の地が透けて、文字が読めなくなる）。
   文字色も同じ理由でここで指定する。body から受け継いだ色は明面のまま
   固まってしまい、見出しが夜面で読めなくなるため */
.app-body__content { flex: 1 1 auto; min-width: 0; background: var(--bg); color: var(--text); }

/* FAB */
.fab {
  position: fixed; right: var(--sp-3);
  bottom: calc(var(--tab-bar-h) + var(--sp-3));
  width: 56px; height: 56px; border-radius: var(--radius-pill);
  background: var(--hagane); color: #FFFFFF; border: 0;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-night);
  z-index: var(--z-sticky);
  text-decoration: none;
}
.fab:hover { background: var(--tsukikage); }

@media (min-width: 720px) {
  .app-tabbar { display: none; }
  .app-sidenav { display: flex; }
  .app-main { padding-bottom: var(--sp-4); }
  .fab { bottom: var(--sp-4); }
}

/* 二画面（一覧＋詳細）は 1040px 以上のみ */
.app-two-pane { display: block; }
@media (min-width: 1040px) {
  .app-two-pane {
    display: grid;
    grid-template-columns: minmax(280px, 360px) 1fr;
    gap: var(--sp-4);
    align-items: start;
  }
  .app-two-pane__detail { position: sticky; top: calc(var(--app-header-h) + var(--sp-3)); }
}

/* ---------------------------------------------------------------
   2. ホーム
   --------------------------------------------------------------- */
.section { margin-bottom: var(--sp-6); }
.section__title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.section__title h2 { font-size: var(--fs-lg); }

.alert-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.alert-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface); border: var(--hairline); border-left: 3px solid var(--line);
  border-radius: var(--radius); text-decoration: none; color: var(--text);
  min-height: var(--tap-min);
}
.alert-row--warning { border-left-color: var(--state-warning); }
.alert-row__label { flex: 1 1 auto; font-size: var(--fs-sm); }
.alert-row__meta { color: var(--text-muted); font-size: var(--fs-xs); }

.category-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--sp-2); }
.category-tile {
  display: block; text-decoration: none; color: var(--text);
  background: var(--surface); border: var(--hairline); border-radius: var(--radius-lg);
  padding: var(--sp-3); text-align: center;
}
.category-tile__count { font-family: var(--font-data); font-size: var(--fs-lg); }
.category-tile__label { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 4px; }

.backup-status { background: var(--surface); border: var(--hairline); border-radius: var(--radius-lg); padding: var(--sp-3); font-size: var(--fs-sm); }
.backup-status__banner { margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--state-warning); background: var(--surface); border-radius: var(--radius); font-size: var(--fs-sm); }

.empty-state { text-align: center; padding: var(--sp-6) var(--sp-3); color: var(--text-muted); }
.empty-state h3 { color: var(--text); font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.empty-state .btn { margin: var(--sp-1); }

/* ---------------------------------------------------------------
   3. 一覧
   --------------------------------------------------------------- */
.list-toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-3); }
.search-field { flex: 1 1 200px; }
.search-field input {
  width: 100%; padding: 10px 14px; border: var(--hairline); border-radius: var(--radius);
  background: var(--surface); color: var(--text); font-size: var(--fs-sm);
}
.list-count { font-size: var(--fs-xs); color: var(--text-muted); }

.filter-chips { display: flex; gap: var(--sp-1); overflow-x: auto; padding-bottom: var(--sp-1); margin-bottom: var(--sp-2); }
.filter-chip {
  appearance: none; flex-shrink: 0; padding: 6px 14px; border: 1px solid var(--line);
  border-radius: var(--radius-pill); background: var(--surface); color: var(--text-muted);
  font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); white-space: nowrap;
}
.filter-chip.is-active { background: var(--hagane); border-color: var(--hagane); color: #FFFFFF; }

.active-filters { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-bottom: var(--sp-2); }
.active-filter { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: var(--hairline); border-radius: var(--radius-pill); padding: 3px 6px 3px 12px; font-size: var(--fs-xs); }
.active-filter button { appearance: none; border: 0; background: transparent; color: var(--text-muted); font-size: var(--fs-sm); line-height: 1; padding: 4px; }

.contract-list { list-style: none; margin: 0; padding: 0; border-top: var(--hairline); }
.contract-row {
  display: block; text-decoration: none; color: var(--text);
  padding: var(--sp-3) var(--sp-1); border-bottom: var(--hairline);
  min-height: var(--tap-min);
}
.contract-row:hover, .contract-row.is-selected { background: var(--surface); }
.contract-row__line1 { display: flex; align-items: center; gap: var(--sp-2); }
.contract-row__name { font-weight: 700; flex: 1 1 auto; }
.contract-row__cat { font-size: var(--fs-xs); color: var(--text-muted); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 1px 8px; flex-shrink: 0; }
.contract-row__line2 { display: flex; align-items: center; gap: var(--sp-3); margin-top: 2px; font-size: var(--fs-sm); color: var(--text-muted); }
.contract-row__due { margin-left: auto; }
.contract-row__due.is-soon { color: var(--state-warning); font-weight: 600; }
.contract-row--cancelled { opacity: 0.6; }
.contract-row--sample .contract-row__name::after {
  content: "サンプル"; margin-left: 8px; font-size: var(--fs-xs); font-weight: 400;
  color: var(--text-muted); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 0 8px;
}

@media (min-width: 1040px) {
  .contract-row__line1, .contract-row__line2 { display: inline-flex; }
  .contract-row__line2 { margin-top: 0; margin-left: var(--sp-2); }
  .contract-list { line-height: 1.5; }
}

/* ---------------------------------------------------------------
   4. 金額表示
   --------------------------------------------------------------- */
.amount { display: inline-flex; align-items: baseline; gap: 4px; }
.amount__value { font-weight: 500; }
.amount__cycle { font-size: var(--fs-xs); color: var(--text-muted); font-family: var(--font-body); }
.amount--masked .amount__value { letter-spacing: 0.15em; }
.amount--liability .amount__value { color: var(--state-warning); }

/* ---------------------------------------------------------------
   5. 詳細
   --------------------------------------------------------------- */
.detail-header { margin-bottom: var(--sp-4); }
.detail-header__cat { display: inline-block; margin-right: var(--sp-2); }
.detail-header__status { display: inline-block; background: var(--line); color: var(--text-muted); border-radius: var(--radius-pill); padding: 1px 10px; font-size: var(--fs-xs); }
.detail-section { margin-bottom: var(--sp-4); }
.detail-section__label { font-size: var(--fs-xs); color: var(--text-muted); letter-spacing: var(--tracking-wide); margin-bottom: var(--sp-1); }
.detail-list { list-style: none; margin: 0; padding: 0; }
.detail-list li { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 6px 0; border-bottom: var(--hairline); }
.detail-list .label { color: var(--text-muted); }
.detail-contact { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-2) 0; border-bottom: var(--hairline); }
.detail-contact a { font-family: var(--font-data); font-weight: 600; }
.detail-contract-block {
  background: var(--surface); border: var(--hairline); border-radius: var(--radius-lg);
  padding: var(--sp-3); margin-bottom: var(--sp-2);
}
.detail-contract-block__name { font-weight: 600; margin-bottom: var(--sp-1); display: flex; align-items: center; gap: var(--sp-2); }
.detail-contract-block .detail-list li { border-bottom: none; padding: 3px 0; }

.wishes {
  font-family: var(--font-display); letter-spacing: 0.04em;
  border-left: 3px solid var(--hagane); padding: var(--sp-2) 0 var(--sp-2) var(--sp-3);
  font-size: var(--fs-md); line-height: 1.8;
}
.wishes--empty { color: var(--text-muted); border-left-color: var(--line); font-family: var(--font-body); font-size: var(--fs-sm); }

.reverse-lookup { background: var(--surface); border: var(--hairline); border-radius: var(--radius-lg); padding: var(--sp-3); }
.reverse-lookup ul { list-style: none; margin: var(--sp-2) 0 0; padding: 0; }
.reverse-lookup li { padding: 4px 0; }

.detail-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }

/* ---------------------------------------------------------------
   6. 編集フォーム
   --------------------------------------------------------------- */
.form-stack { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 640px; }
.field textarea { min-height: 80px; padding: 10px 14px; resize: vertical; font: inherit; }
.field select { padding: 10px 14px; }
.field .hint { font-size: var(--fs-xs); color: var(--text-muted); }
.field .warn { font-size: var(--fs-xs); color: var(--yakikomi); }
.field-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.field-row > * { flex: 1 1 140px; }

.autocomplete { position: relative; }
.autocomplete > input { width: 100%; }
.autocomplete__list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px 0;
  list-style: none; background: var(--surface); border: var(--hairline); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-night); z-index: var(--z-modal); max-height: 260px; overflow-y: auto;
}
.autocomplete__option { padding: 10px 14px; font-size: var(--fs-sm); cursor: pointer; }
.autocomplete__option mark { background: none; color: inherit; font-weight: 600; }
.autocomplete__option.is-active, .autocomplete__option:hover { background: var(--line); }

.wishes-field textarea, .wishes-field input {
  font-family: var(--font-display); font-size: var(--fs-md);
}

.repeatable { border: var(--hairline); border-radius: var(--radius-lg); padding: var(--sp-3); position: relative; }
.repeatable + .repeatable { margin-top: var(--sp-2); }
.repeatable__remove { position: absolute; top: var(--sp-2); right: var(--sp-2); appearance: none; border: 0; background: transparent; color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; padding: 4px; }
.add-row-btn {
  appearance: none; border: 1px dashed var(--line); background: transparent; color: var(--hagane);
  border-radius: var(--radius); padding: 8px 14px; font-size: var(--fs-sm); text-align: left;
  display: inline-flex; align-items: center; gap: 6px;
}

.section-collapse summary { cursor: pointer; padding: var(--sp-2) 0; font-size: var(--fs-sm); color: var(--hagane); list-style: none; }
.section-collapse summary::-webkit-details-marker { display: none; }
.section-collapse summary::before {
  content: ""; display: inline-block; width: 1em; height: 1em; margin-right: 4px;
  vertical-align: -0.15em; background-color: currentColor;
  -webkit-mask: var(--icon-expand-more) center / contain no-repeat;
  mask: var(--icon-expand-more) center / contain no-repeat;
  transform: rotate(-90deg);
}
.section-collapse[open] summary::before { transform: none; }
.section-collapse__body { display: flex; flex-direction: column; gap: var(--sp-3); padding-top: var(--sp-2); }

.form-actions { position: sticky; bottom: calc(var(--tab-bar-h) + env(safe-area-inset-bottom, 0px)); background: var(--bg); padding: var(--sp-3) 0; margin-top: var(--sp-3); border-top: var(--hairline); display: flex; gap: var(--sp-2); }
@media (min-width: 720px) { .form-actions { position: static; border-top: 0; } }

/* ---------------------------------------------------------------
   6b. かんたん登録（S-04b「続けて書く」）
   欄を4つに絞り、［次へ］で1件ずつ続けて書ける画面。
   --------------------------------------------------------------- */
.quick-lede { max-width: 38em; }
.quick-form { gap: var(--sp-3); }
/* 続けて打つ画面なので、欄は本文と同じ大きさにして読み返しやすくする */
.quick-form .field input[type="text"] { font-size: var(--fs-md); }
.quick-category select { max-width: 240px; }
.quick-actions { flex-wrap: wrap; }
.quick-actions .btn { min-height: var(--tap-min); }
.quick-added { margin-top: var(--sp-5); }

/* 文字だけの補助ボタン（見た目はリンク、実体は button） */
.link-button {
  appearance: none; border: 0; background: transparent; color: var(--hagane);
  text-decoration: underline; text-align: left; padding: 10px 0;
  min-height: var(--tap-min); font-size: var(--fs-sm); align-self: flex-start;
}

/* ---------------------------------------------------------------
   7. 緊急連絡先
   --------------------------------------------------------------- */
.emergency-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.emergency-card { background: var(--surface); border: var(--hairline); border-radius: var(--radius-lg); padding: var(--sp-3); }
.emergency-card__phone { display: block; font-family: var(--font-data); font-size: var(--fs-xl); font-weight: 700; color: var(--hagane); }
.emergency-card__name { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 4px; }
.emergency-card__note { font-size: var(--fs-xs); color: var(--text-muted); }

/* ---------------------------------------------------------------
   8. 設定
   --------------------------------------------------------------- */
.settings-group { margin-bottom: var(--sp-5); }
.settings-group__title { font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); color: var(--text-muted); text-transform: uppercase; margin-bottom: var(--sp-2); }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: var(--hairline); }
.settings-row__label { font-size: var(--fs-sm); }
.settings-row__desc { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.danger-zone { border: 1px solid var(--yakikomi); border-radius: var(--radius-lg); padding: var(--sp-3); }

/* ---------------------------------------------------------------
   9. 読み込みプレビュー
   --------------------------------------------------------------- */
.diff-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-4); }
@media (min-width: 480px) { .diff-summary { grid-template-columns: repeat(4, 1fr); } }
.diff-tile { background: var(--surface); border: var(--hairline); border-radius: var(--radius-lg); padding: var(--sp-3); text-align: center; }
.diff-tile__count { font-family: var(--font-data); font-size: var(--fs-xl); }
.diff-tile__label { font-size: var(--fs-xs); color: var(--text-muted); }
.diff-list { list-style: none; margin: 0 0 var(--sp-4); padding: 0; }
.diff-list li { border-bottom: var(--hairline); }
.diff-list details { padding: var(--sp-2) 0; }
.diff-list summary { cursor: pointer; display: flex; justify-content: space-between; }
.diff-list .diff-tag { font-size: var(--fs-xs); border-radius: var(--radius-pill); padding: 1px 10px; }
.diff-tag--new { background: var(--hagane); color: #fff; }
.diff-tag--update { background: var(--tangetsu); color: var(--yoizumi); }
.diff-tag--delete { background: var(--yakikomi); color: #fff; }
.diff-tag--same { background: var(--line); color: var(--text-muted); }
.merge-mode { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.merge-mode label { display: flex; align-items: center; gap: 6px; }
.warning-banner { background: var(--surface); border-left: 3px solid var(--yakikomi); border-radius: var(--radius); padding: var(--sp-3); margin-bottom: var(--sp-3); font-size: var(--fs-sm); }

/* ---------------------------------------------------------------
   10. ロック画面
   --------------------------------------------------------------- */
.lock-screen {
  min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  background: var(--saku-night); color: var(--geppaku); padding: var(--sp-4);
}
.lock-card { width: 100%; max-width: 360px; text-align: center; }
.lock-card input { width: 100%; padding: 14px; text-align: center; font-size: var(--fs-lg); margin: var(--sp-3) 0; }
.lock-card .error { color: var(--yakikomi); font-size: var(--fs-sm); min-height: 1.4em; }

/* ---------------------------------------------------------------
   11. オンボーディング
   --------------------------------------------------------------- */
.onboard { max-width: 560px; margin: 0 auto; padding: var(--sp-6) var(--sp-3); text-align: left; }
.onboard__dots { display: flex; gap: 6px; justify-content: center; margin-top: var(--sp-5); }
.onboard__dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.onboard__dots span.is-active { background: var(--hagane); }
.onboard__actions { display: flex; justify-content: space-between; margin-top: var(--sp-5); gap: var(--sp-2); }

/* ---------------------------------------------------------------
   12. トースト / ダイアログ
   --------------------------------------------------------------- */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--tab-bar-h) + var(--sp-3));
  transform: translateX(-50%); background: var(--saku-night); color: #fff;
  padding: 10px 20px; border-radius: var(--radius); font-size: var(--fs-sm);
  z-index: var(--z-modal); box-shadow: var(--shadow-night);
  display: flex; align-items: center; gap: var(--sp-3);
}
.dialog-overlay {
  position: fixed; inset: 0; background: rgba(11,18,32,0.6);
  display: flex; align-items: center; justify-content: center; padding: var(--sp-3);
  z-index: var(--z-modal);
}
.dialog { background: var(--surface); border-radius: var(--radius-lg); padding: var(--sp-4); max-width: 420px; width: 100%; }
.dialog h3 { margin-bottom: var(--sp-2); }
.dialog__actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-4); }
.dialog__actions .btn.danger { border-color: var(--yakikomi); color: var(--yakikomi); }
.dialog__actions .btn.danger:hover { background: var(--yakikomi); color: #fff; }

/* ---------------------------------------------------------------
   13. ヘルプ・利用規約（読み物面）
   --------------------------------------------------------------- */
.help-toc { border: var(--hairline); border-radius: var(--radius-lg); padding: var(--sp-3); margin-bottom: var(--sp-5); }
.help-section { margin-bottom: var(--sp-6); }
.help-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin: var(--sp-3) 0; }
.help-table th, .help-table td { border: var(--hairline); padding: var(--sp-2); text-align: left; vertical-align: top; }
.help-table th { background: var(--surface); }

/* ---------------------------------------------------------------
   14. 印刷を除くユーティリティ
   --------------------------------------------------------------- */
.no-print-note { font-size: var(--fs-xs); color: var(--text-muted); }
.btn.is-block { display: block; width: 100%; text-align: center; }
.stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.row { display: flex; gap: var(--sp-2); align-items: center; }
.row.wrap { flex-wrap: wrap; }
.spacer { flex: 1 1 auto; }
.text-muted { color: var(--text-muted); }
.mt-0 { margin-top: 0; }

/* ---------------------------------------------------------------
   15. ユーティリティ（CSP style-src 'self' のため、インラインstyleを
   使わずここから組む）
   --------------------------------------------------------------- */
.u-mt-1 { margin-top: var(--sp-1); }
.u-mt-2 { margin-top: var(--sp-2); }
.u-mt-3 { margin-top: var(--sp-3); }
.u-mt-4 { margin-top: var(--sp-4); }
.u-mb-3 { margin-bottom: var(--sp-3); }
.u-mb-4 { margin-bottom: var(--sp-4); }
.u-fs-xs { font-size: var(--fs-xs); }
.u-fs-sm { font-size: var(--fs-sm); }
.u-fs-md { font-size: var(--fs-md); }
.u-fs-xl { font-size: var(--fs-xl); }
.u-inline-block { display: inline-block; }
.u-block { display: block; }
.u-no-underline { text-decoration: none; }
.u-danger-text { color: var(--yakikomi); }
.u-cursor-pointer { cursor: pointer; }
.btn.danger { border-color: var(--yakikomi); color: var(--yakikomi); }
.btn.danger:hover { background: var(--yakikomi); color: #fff; }
.lock-card__title { color: var(--geppaku); font-size: var(--fs-xl); margin-top: var(--sp-3); }
.lock-card__lede { color: var(--usuzuki); font-size: var(--fs-sm); }
.lock-card__note { color: var(--usuzuki); font-size: var(--fs-xs); margin-top: var(--sp-4); }
.u-mt-6px { margin-top: 6px; }
.diff-list__local { font-size: var(--fs-xs); padding: 4px 0 8px; }
.emergency-card__phone--url { font-size: var(--fs-md); }

/* ---------------------------------------------------------------
   16. 使いやすさの見直し（書く・見直す・出す）
   既存トークンだけで組む（06 §5.3）。
   --------------------------------------------------------------- */

/* 主ボタン：枠線だけのボタンは押せる感じが弱いので、1画面に1つの主操作は塗る */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--tap-min); }
.btn-primary { background: var(--hagane); border-color: var(--hagane); color: #FFFFFF; }
.btn-primary:hover { background: var(--tsukikage); border-color: var(--tsukikage); color: #FFFFFF; }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn-sm { padding: 6px 14px; min-height: 36px; font-size: var(--fs-xs); }
.icon-btn {
  appearance: none; border: 0; background: transparent; color: var(--text-muted);
  width: var(--tap-min); height: var(--tap-min); border-radius: var(--radius);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.icon-btn:hover { background: var(--line); color: var(--text); }
:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

/* ナビ：アイコン＋ラベル */
.app-tabbar__item .icon { width: 22px; height: 22px; }
.app-tabbar__item.is-active { font-weight: 700; }
.app-tabbar__item.is-active .icon { color: var(--geppaku); }
.app-sidenav__link .icon { opacity: 0.85; }

/* FAB は「追加」の文字も出して、何のボタンかを迷わせない */
.fab { width: auto; height: 52px; padding: 0 20px 0 16px; gap: 6px; font-size: var(--fs-sm); letter-spacing: var(--tracking-wide); }
.fab__label { line-height: 1; }

/* 画面見出しと、その横の操作 */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.page-head h1 { margin: 0; font-size: var(--fs-xl); }
.back-link {
  display: inline-flex; align-items: center; gap: 2px; margin: 0 0 var(--sp-2) -6px;
  color: var(--text-muted); text-decoration: none; font-size: var(--fs-sm); min-height: var(--tap-min);
}
.back-link:hover { color: var(--text); }

/* お知らせの帯 */
.notice {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2);
  background: var(--surface); border: var(--hairline); border-left: 3px solid var(--hagane);
  border-radius: var(--radius); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm);
}
.notice--warn { border-left-color: var(--state-warning); }

/* ---- ホーム ---- */
.home-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-5); }
.home-action {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: var(--sp-3); background: var(--surface); border: var(--hairline); border-radius: var(--radius-lg);
  color: var(--text); text-decoration: none; min-height: 112px;
}
.home-action .icon { color: var(--hagane); }
.home-action:hover { border-color: var(--hagane); }
.home-action__title { font-weight: 700; font-size: var(--fs-md); }
.home-action__desc { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.6; }
.home-action--primary { background: var(--hagane); border-color: var(--hagane); color: #FFFFFF; }
.home-action--primary .icon, .home-action--primary .home-action__desc { color: #FFFFFF; }
.home-action--primary:hover { background: var(--tsukikage); border-color: var(--tsukikage); }
@media (max-width: 479px) {
  .home-actions { grid-template-columns: 1fr 1fr; }
  .home-action--primary { grid-column: 1 / -1; flex-direction: row; align-items: center; min-height: 0; flex-wrap: wrap; column-gap: var(--sp-2); }
  .home-action { min-height: 0; }
}

.progress-card { background: var(--surface); border: var(--hairline); border-radius: var(--radius-lg); padding: var(--sp-1) var(--sp-3); }
.progress-row {
  display: grid; grid-template-columns: 7.5em 1fr auto 4.5em; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) 0; border-bottom: var(--hairline); color: var(--text); text-decoration: none; min-height: var(--tap-min);
}
.progress-row__label { font-size: var(--fs-sm); }
.progress-row__count { font-size: var(--fs-xs); color: var(--text-muted); text-align: right; }
.progress-row__go { font-size: var(--fs-xs); color: var(--hagane); text-decoration: underline; text-align: right; }
.progress-row__ok { color: var(--hagane); justify-self: end; }
.progress-row__meter { width: 100%; height: 8px; }
meter { appearance: none; -webkit-appearance: none; background: var(--line); border: 0; border-radius: var(--radius-pill); }
meter::-webkit-meter-bar { background: var(--line); border: 0; border-radius: var(--radius-pill); height: 8px; }
meter::-webkit-meter-optimum-value, meter::-webkit-meter-suboptimum-value, meter::-webkit-meter-even-less-good-value { background: var(--hagane); border-radius: var(--radius-pill); }
meter::-moz-meter-bar { background: var(--hagane); border-radius: var(--radius-pill); }
.progress-card__foot { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); padding: var(--sp-2) 0; font-size: var(--fs-xs); }
.progress-card__foot a { color: var(--text-muted); }

.category-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.category-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2); padding: 6px 14px; min-height: 36px;
  border: var(--hairline); border-radius: var(--radius-pill); background: var(--surface);
  color: var(--text); text-decoration: none; font-size: var(--fs-sm);
}
.category-chip__count { color: var(--text-muted); font-size: var(--fs-xs); }

/* ---- 一覧 ---- */
.list-toolbar select { padding: 10px 12px; }
.filter-chip { min-height: 36px; }
.filter-chips--need { align-items: center; }
.filter-chips__label { font-size: var(--fs-xs); color: var(--text-muted); flex-shrink: 0; }
.filter-chip--need.is-active { background: var(--state-warning); border-color: var(--state-warning); }
.more-filters { margin-bottom: var(--sp-2); }
.more-filters summary {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer; list-style: none;
  font-size: var(--fs-xs); color: var(--text-muted); min-height: 36px;
}
.more-filters summary::-webkit-details-marker { display: none; }
.list-status { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-1); min-height: 32px; }
.link-button--inline { min-height: 0; padding: 0; font-size: var(--fs-xs); align-self: auto; }
.contract-row__gaps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.gap-badge {
  font-size: var(--fs-xs); color: var(--state-warning); border: 1px solid currentColor;
  border-radius: var(--radius-pill); padding: 0 8px; line-height: 1.7;
}
@media (min-width: 1040px) {
  .contract-row__gaps { display: inline-flex; margin: 0 0 0 var(--sp-2); }
}

/* ---- 詳細 ---- */
.detail-toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.add-prompt {
  display: flex; align-items: center; gap: 6px; padding: var(--sp-2) var(--sp-3); min-height: var(--tap-min);
  border: 1px dashed var(--line); border-radius: var(--radius); color: var(--hagane); text-decoration: none; font-size: var(--fs-sm);
}
.add-prompt:hover { border-color: var(--hagane); }
.review-box {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3);
  background: var(--surface); border: var(--hairline); border-radius: var(--radius-lg); padding: var(--sp-3); margin-top: var(--sp-4);
}
.review-box__label { font-size: var(--fs-xs); color: var(--text-muted); letter-spacing: var(--tracking-wide); }
.detail-actions { margin-top: var(--sp-4); }

/* ---- 編集 ---- */
.form-group { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.form-group > legend, .quick-category > legend {
  font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); color: var(--text-muted); padding: 0; margin-bottom: 6px;
}
.field input, .field select, .field textarea { width: 100%; min-width: 0; }
.field input[type="text"], .field input[type="date"], .field input[type="password"], .field select { min-height: var(--tap-min); padding: 10px 14px; }
.field input[type="text"] { min-width: 0; }
.contract-edit-block { display: flex; flex-direction: column; gap: var(--sp-3); }
.contract-edit-block__head { display: flex; align-items: center; justify-content: space-between; margin: calc(var(--sp-2) * -1) calc(var(--sp-2) * -1) 0 0; }
.contract-edit-block__num { font-size: var(--fs-xs); color: var(--text-muted); letter-spacing: var(--tracking-wide); }
.amount-edit { display: flex; flex-direction: column; gap: var(--sp-2); }
.amount-edit__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: var(--sp-2); align-items: end; }
.amount-edit__grid--date { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; }
.amount-edit__asof { max-width: 240px; }
@media (max-width: 479px) {
  .amount-edit__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .amount-edit__grid > .field:first-child { grid-column: 1 / -1; }
  .amount-edit__grid--date > .field:first-child { grid-column: auto; }
  .amount-edit__grid--date { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto; }
}
.section-collapse > summary { min-height: var(--tap-min); display: flex; align-items: center; }
.section-collapse--inner summary { color: var(--text-muted); font-size: var(--fs-xs); }
.form-actions { z-index: 5; }
.form-actions .btn { min-width: 7em; }

/* ---- 続けて書く：カテゴリの選択チップ ---- */
.quick-category { border: 0; padding: 0; margin: 0; min-width: 0; }
.choice-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.choice-chip { position: relative; }
.choice-chip input { position: absolute; opacity: 0; pointer-events: none; }
.choice-chip span {
  display: inline-flex; align-items: center; min-height: 36px; padding: 4px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface);
  font-size: var(--fs-xs); color: var(--text-muted); cursor: pointer;
}
.choice-chip input:checked + span { background: var(--hagane); border-color: var(--hagane); color: #FFFFFF; }
.choice-chip input:focus-visible + span { outline: var(--focus-ring); outline-offset: 2px; }

/* ---- 印刷・控え ---- */
.print-block { margin-bottom: var(--sp-5); }
.choice-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-2); }
.choice-card {
  position: relative; display: flex; flex-direction: column; gap: 4px; cursor: pointer;
  padding: var(--sp-3) var(--sp-3) var(--sp-3) calc(var(--sp-3) + 26px);
  background: var(--surface); border: var(--hairline); border-radius: var(--radius-lg);
}
.choice-card input { position: absolute; left: var(--sp-3); top: calc(var(--sp-3) + 4px); margin: 0; accent-color: var(--hagane); }
.choice-card.is-active, .choice-card:has(input:checked) { border-color: var(--hagane); box-shadow: inset 0 0 0 1px var(--hagane); }
.choice-card__title { font-weight: 700; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.choice-card__badge { font-size: var(--fs-xs); font-weight: 400; color: #FFFFFF; background: var(--hagane); border-radius: var(--radius-pill); padding: 0 8px; }
.choice-card__desc { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.6; }
.custom-outputs { margin-top: var(--sp-3); border-top: var(--hairline); }

.choice-list { display: flex; flex-direction: column; border-top: var(--hairline); }
.choice-list__item { display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-2) 0; border-bottom: var(--hairline); cursor: pointer; min-height: var(--tap-min); }
.choice-list__item input { margin-top: 6px; accent-color: var(--hagane); }
.choice-list__title { display: block; font-size: var(--fs-sm); }
.choice-list__desc { display: block; font-size: var(--fs-xs); color: var(--text-muted); }

.checklist { list-style: none; margin: 0 0 var(--sp-3); padding: 0; border-top: var(--hairline); }
.checklist__item { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 0; border-bottom: var(--hairline); min-height: var(--tap-min); font-size: var(--fs-sm); }
.checklist__icon { color: var(--hagane); }
.checklist__dot { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 2px solid var(--state-warning); }
.checklist__text { flex: 1 1 auto; }
.checklist__item.is-ok .checklist__text { color: var(--text-muted); }
.checklist__item.is-ok .checklist__fix { display: none; }
.checklist__fix { font-size: var(--fs-xs); flex-shrink: 0; }

.print-go {
  position: sticky; bottom: calc(var(--tab-bar-h) + env(safe-area-inset-bottom, 0px)); z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
  background: var(--bg); border-top: var(--hairline); padding: var(--sp-3) 0; margin-bottom: var(--sp-5);
}
.print-go__summary { flex: 1 1 200px; color: var(--text-muted); }
.print-go .hint { flex-basis: 100%; margin: 0; font-size: var(--fs-xs); }
.print-go .hint:empty { display: none; }
@media (min-width: 720px) { .print-go { bottom: 0; } }

/* ---- ダイアログ ---- */
.dialog { max-height: calc(100dvh - 2 * var(--sp-3)); overflow-y: auto; }
.dialog__actions .btn-primary { color: #FFFFFF; }
.list-toolbar { flex-wrap: nowrap; }
.list-toolbar .search-field { flex: 1 1 0; min-width: 0; }
.list-toolbar select { flex: none; max-width: 42%; }
.hint:empty, .field .hint:empty { display: none; }
.hint { font-size: var(--fs-xs); color: var(--text-muted); }
@media (min-width: 1040px) {
  /* 詳細が画面より長いときも最後（削除などの操作）まで届くよう、枠の中で送る */
  .app-two-pane__detail { max-height: calc(100dvh - var(--app-header-h) - var(--sp-5)); overflow-y: auto; padding-right: var(--sp-1); }
}

/* ---------------------------------------------------------------
   17. お金の流れ（S-12）
   節点は HTML、線は SVG。線は「お金の動く向き」に矢印を付ける。
   引き落としは実線、入金は破線（色だけに頼らない）。
   --------------------------------------------------------------- */
.flow-lede { max-width: 44em; }
.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 2px; gap: 2px; margin-bottom: var(--sp-3); background: var(--surface); }
.segmented__btn {
  appearance: none; border: 0; background: transparent; color: var(--text-muted);
  font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); padding: 6px 16px; min-height: 36px; border-radius: var(--radius-pill);
}
.segmented__btn.is-active { background: var(--hagane); color: #FFFFFF; }

.flow-legend { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin-bottom: var(--sp-3); }
.flow-legend span { display: inline-flex; align-items: center; gap: 6px; }
.flow-legend__out, .flow-legend__in { stroke: var(--text-muted); stroke-width: 2; }
.flow-legend__in { stroke-dasharray: 4 3; }
.flow-legend__transfer { stroke: var(--text-muted); stroke-width: 2; stroke-dasharray: 1 3; stroke-linecap: round; }
.flow-legend__arrow { fill: var(--text-muted); }

.flow-layout { display: block; }
@media (min-width: 1040px) {
  .flow-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-4); align-items: start; }
  .flow-panel { position: sticky; top: calc(var(--app-header-h) + var(--sp-3)); }
}

.flow-diagram { position: relative; padding: var(--sp-2) 0 var(--sp-4); }
.flow-links { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.flow-cols { position: relative; display: flex; flex-direction: column; gap: var(--sp-6); }
.flow-col { min-width: 0; }
.flow-col__title { font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); color: var(--text-muted); margin-bottom: var(--sp-2); }
.flow-col__nodes { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.flow-col__nodes > .flow-node { flex: 1 1 150px; max-width: 100%; }
@media (min-width: 720px) {
  .flow-cols { flex-direction: row; gap: var(--sp-6); align-items: flex-start; }
  .flow-col { flex: 1 1 0; }
  .flow-col__nodes { flex-direction: column; flex-wrap: nowrap; gap: var(--sp-3); }
  .flow-col__nodes > .flow-node { flex: none; }
}

.flow-node {
  appearance: none; text-align: left; font: inherit; color: var(--text);
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  background: var(--surface); border: 1px solid var(--line); border-left-width: 3px; border-radius: var(--radius-lg);
  padding: var(--sp-2) var(--sp-3); cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.flow-node:hover { border-color: var(--hagane); }
.flow-node--account { border-left-color: var(--hagane); }
.flow-node--card { border-left-color: var(--text-muted); }
.flow-node--inflow { border-style: dashed; border-left-style: solid; border-left-color: var(--line); }
.flow-node__title { font-weight: 700; font-size: var(--fs-sm); line-height: 1.5; overflow-wrap: anywhere; }
.flow-node__sub { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; overflow-wrap: anywhere; }
.flow-node__meta { font-size: var(--fs-xs); color: var(--text-muted); font-family: var(--font-data); font-variant-numeric: tabular-nums; line-height: 1.6; }
.flow-node__warn { font-size: var(--fs-xs); color: var(--state-warning); }
.flow-node__tag {
  display: inline-block; margin-left: 6px; font-size: 0.65rem; font-weight: 400; color: var(--text-muted);
  border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 0 6px; vertical-align: 1px;
}
.flow-node.is-selected { border-color: var(--hagane); box-shadow: 0 0 0 2px var(--hagane); }
.flow-node.is-related { border-color: var(--hagane); }
.flow-diagram.has-selection .flow-node:not(.is-selected):not(.is-related) { opacity: 0.35; }

.flow-link { fill: none; stroke: var(--text-muted); stroke-width: 1.5; opacity: 0.55; marker-end: url(#flow-arrow); transition: opacity var(--dur-fast) var(--ease); }
.flow-link--receive { stroke-dasharray: 6 4; }
.flow-link--transfer { stroke-dasharray: 1.5 3.5; stroke-linecap: round; }
.flow-link.is-related { stroke: var(--hagane); stroke-width: 2.5; opacity: 1; marker-end: url(#flow-arrow-hi); }
.flow-diagram.has-selection .flow-link:not(.is-related) { opacity: 0.12; }
.flow-arrow { fill: var(--text-muted); }
.flow-arrow--hi { fill: var(--hagane); }

.flow-panel {
  background: var(--surface); border: var(--hairline); border-radius: var(--radius-lg); padding: var(--sp-3);
  margin: var(--sp-3) 0 var(--sp-5); font-size: var(--fs-sm);
}
@media (min-width: 1040px) { .flow-panel { margin-top: 0; } }
@media (max-width: 719px) {
  /* スマホでは、選んだときだけ下から出す（選んだ節点から目を離さずに読めるように） */
  .flow-panel.is-open {
    position: fixed; left: var(--sp-2); right: var(--sp-2); z-index: var(--z-overlay);
    bottom: calc(var(--tab-bar-h) + env(safe-area-inset-bottom, 0px) + var(--sp-2));
    max-height: 40vh; overflow-y: auto; margin: 0; box-shadow: var(--shadow-night);
  }
}
.flow-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.flow-panel__title { font-weight: 700; }
.flow-panel__lede { margin: var(--sp-2) 0 var(--sp-1); }
.flow-panel__list { margin: 0 0 var(--sp-2); padding-left: 1.2em; }
.flow-panel__list li { padding: 2px 0; }
.flow-path { list-style: none; margin: 0 0 var(--sp-2); padding: 0; }
.flow-path li { position: relative; padding: 4px 0 4px 18px; }
.flow-path li::before { content: ""; position: absolute; left: 4px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--hagane); }
.flow-path li + li::after { content: ""; position: absolute; left: 7px; top: -8px; height: 18px; border-left: 1px solid var(--hagane); }

.flow-tree { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-5); }
.flow-tree__block { background: var(--surface); border: var(--hairline); border-left: 3px solid var(--hagane); border-radius: var(--radius-lg); padding: var(--sp-3); }
.flow-tree__block--warn { border-left-color: var(--state-warning); }
.flow-tree__head { display: flex; align-items: flex-start; gap: var(--sp-2); font-family: var(--font-body); font-size: var(--fs-md); font-weight: 700; margin: 0; }
.flow-tree__head .icon { margin-top: 3px; color: var(--hagane); }
.flow-tree__meta { font-size: var(--fs-xs); color: var(--text-muted); margin: 2px 0 var(--sp-2) 28px; font-family: var(--font-data); }
.flow-tree__label { font-size: var(--fs-xs); color: var(--text-muted); letter-spacing: var(--tracking-wide); margin-top: var(--sp-2); }
.flow-tree__list { list-style: none; margin: 4px 0 0; padding: 0; font-size: var(--fs-sm); }
.flow-tree__list li { padding: 4px 0 4px 16px; position: relative; border-top: var(--hairline); }
.flow-tree__list li::before { content: "→"; position: absolute; left: 0; color: var(--text-muted); font-size: var(--fs-xs); top: 6px; }
.flow-tree__list--nested { margin: 4px 0 0; }
.flow-tree__list--nested li { border-top: 0; padding-left: 20px; font-size: var(--fs-xs); }
.flow-tree__list--nested li::before { content: "└"; }
.flow-tree__money { margin-left: var(--sp-2); font-size: var(--fs-xs); color: var(--text-muted); }

.flow-unlinked__list { list-style: none; margin: 0; padding: 0; border-top: var(--hairline); }
.flow-unlinked__item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); padding: var(--sp-2) 0; border-bottom: var(--hairline); }
.flow-unlinked__name { flex: 1 1 200px; font-size: var(--fs-sm); }
.flow-unlinked__field { display: flex; flex-direction: column; gap: 2px; flex: 1 1 220px; max-width: 360px; }
.flow-unlinked__label { font-size: var(--fs-xs); color: var(--text-muted); }
.flow-unlinked__field select { min-height: var(--tap-min); padding: 8px 12px; width: 100%; }

.flow-summary {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3);
  background: var(--surface); border: var(--hairline); border-radius: var(--radius-lg); color: var(--text); text-decoration: none;
}
.flow-summary:hover { border-color: var(--hagane); }
.flow-summary > .icon { color: var(--hagane); }
.flow-summary__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); }
.flow-summary__warn { font-size: var(--fs-xs); color: var(--state-warning); }
.flow-summary__go { font-size: var(--fs-xs); color: var(--hagane); text-decoration: underline; flex-shrink: 0; }

.flow-jump { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--sp-1); margin-right: var(--sp-3); font-size: var(--fs-xs); }
.flow-node__title .icon { margin-right: 4px; color: var(--hagane); vertical-align: -3px; }
/* 夜面では鋼青が沈むので、強調は月光の銀にする */
[data-theme="night"] .flow-link.is-related { stroke: var(--moon-silver); }
[data-theme="night"] .flow-arrow--hi { fill: var(--moon-silver); }
[data-theme="night"] .flow-node.is-selected { border-color: var(--moon-silver); box-shadow: 0 0 0 2px var(--moon-silver); }
[data-theme="night"] .flow-node.is-related { border-color: var(--moon-silver); }
[data-theme="night"] .flow-node__title .icon, [data-theme="night"] .flow-tree__head .icon, [data-theme="night"] .flow-summary > .icon { color: var(--moon-silver); }
.flow-rename { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-2) 0 var(--sp-3); border-bottom: var(--hairline); margin-bottom: var(--sp-2); }
.flow-rename label { font-size: var(--fs-xs); color: var(--text-muted); letter-spacing: var(--tracking-wide); }
.flow-rename__row { display: flex; gap: var(--sp-2); }
.flow-rename__row input { flex: 1 1 auto; min-width: 0; min-height: 36px; padding: 6px 10px; }
.flow-rename p { margin: 0; }