/*
  全画面に共通の枠（設計書 5 章）: 上の帯・下の帯（場所）・状態の行・帯・画面の骨組み。値は tokens.css の変数だけ。
  ・枠（.app）は position: fixed で、いま見えている範囲（visualViewport）に合わせる（js/app.js の fitAppToViewport）。
  ・どの画面も「上の帯 → 送れる中身（.screen-body） → 下の物」の縦の並び。中身だけが送れる。
*/

html, body { height: 100%; overflow: hidden; }
.app {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--app-top, 0px);
  height: var(--app-h, 100dvh);
  background: var(--bg);
}
.booting { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-3); }
.shell { height: 100%; display: flex; flex-direction: column; }
.root-host { flex: 1; min-height: 0; position: relative; }
.banners { flex: none; }
.banners:empty { display: none; }

/* ---------- 画面 ---------- */
.screen { height: 100%; display: flex; flex-direction: column; background: var(--bg); padding-top: var(--safe-t); }
.screen.is-root { padding-top: var(--safe-t); }
.screen-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--gutter) var(--sp-6);
}
:root[data-measure="read"] .note-read,
:root[data-measure="read"] .write-scroll { padding-left: max(var(--gutter), calc((100% - var(--measure)) / 2)); padding-right: max(var(--gutter), calc((100% - var(--measure)) / 2)); }

/* ---------- 上の帯（iOS のナビゲーションバー: 高さ 44、題は真ん中に 17 の太字、左に戻る、右に文字ボタン） ---------- */
.appbar {
  position: relative;
  z-index: 3;
  flex: none;
  display: grid;
  /* 左右（戻る・ボタン）は中身の幅をとり、題は残りの幅で真ん中に寄せて省く（戻るの名前を切らない。統合で直した） */
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-height: var(--bar-h);
  padding: 0 var(--sp-2);
  background: var(--bg);
  transition: background-color var(--dur-2) linear, box-shadow var(--dur-2) linear;
}
/* 送ったら、帯を面にして細い線で中身と分ける（iOS の送ったときの見た目） */
.appbar.is-scrolled { background: var(--bar); box-shadow: 0 0.5px 0 var(--line); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); }
.bar-side { display: flex; align-items: center; min-width: var(--hit-min); }
.bar-actions { justify-content: flex-end; gap: var(--sp-1); }
.bar-text { min-width: 0; padding: 0 var(--sp-1); display: flex; flex-direction: column; align-items: center; text-align: center; }
.bar-title {
  margin: 0;
  font-size: var(--fs-headline);
  font-weight: var(--fw-bold);
  line-height: var(--lh-ui);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.bar-title:empty { display: none; }
/* 大きな見出しのある画面: 送って見出しが隠れるまで、帯の題は出さない */
.appbar.has-large .bar-title { opacity: 0; transition: opacity var(--dur-1) linear; }
.appbar.has-large.is-collapsed .bar-title { opacity: 1; }
:root[data-title-style="inline"] .appbar.has-large .bar-title { opacity: 1; }
.bar-sub { margin: 0; color: var(--text-3); font-size: var(--fs-small); line-height: var(--lh-ui); letter-spacing: var(--ls-small); }
.bar-sub:empty { display: none; }
.bar-sub[data-level="error"] { color: var(--danger); }

/* 戻る（印と前の画面の名前。設定で印だけにもできる） */
.bar-back {
  display: inline-flex;
  align-items: center;
  min-height: var(--hit-min);
  min-width: var(--hit-min);
  max-width: 100%;
  padding: 0 var(--sp-2) 0 0;
  border: 0;
  border-radius: var(--r-btn);
  background: transparent;
  color: var(--accent);
  font-size: var(--fs-body);
  line-height: var(--lh-ui);
}
.bar-back:active { background: var(--press-bg); }
.bar-back-icon { display: inline-flex; width: 30px; justify-content: center; }
.bar-back-icon .icon { width: 26px; height: 26px; stroke-width: 2.2; }
.bar-back-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-back-style="icon"] .bar-back-label { display: none; }
:root[data-back-style="icon"] .bar-back { padding: 0; justify-content: center; }
.bar-lead-text { padding-left: var(--sp-2); }

/* 大きな見出し（Large Title 34 の太字、左 16。下に保存の状態の一言） */
.large-head { min-height: var(--large-h); padding: 0 0 var(--sp-2); }
.large-title { margin: 0; font-size: var(--fs-largetitle); font-weight: var(--fw-heavy); line-height: var(--lh-title); letter-spacing: var(--ls-largetitle); }
:root[data-title-style="inline"] .large-title { display: none; }
.large-head .bar-sub { margin-top: 2px; }

/* ---------- 状態の行（件数と、出口一つ） ---------- */
.statusline {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--hit-min);
  padding-left: var(--cell-x);
  color: var(--text-3);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}
.statusline-text { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; }
.statusline-exit { flex: none; font-size: var(--fs-small); }
.statusline-exit .btn-label { font-size: var(--fs-small); }

/* ---------- 帯（大事な知らせ） ---------- */
.banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin: var(--sp-2) var(--gutter) 0;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-m);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.banner-error { box-shadow: inset 0 0 0 1px var(--danger); }
/* 画面の上に重ねる帯（新しい版があります。js/shell/updates.js）。いちばん上の画面の上の帯のすぐ下に置き、戻るや完了を覆わない。
   --banner-top は updates.js がその上の帯の下端を入れる（無ければ画面の上端） */
.banner-float {
  position: fixed;
  top: calc(var(--banner-top, var(--safe-t)) + var(--sp-2));
  left: 0;
  right: 0;
  margin-top: 0;
  z-index: 20;
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow);
}
.banner-text { flex: 1 1 200px; margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); }
.banner-badge { display: inline-block; margin-right: var(--sp-2); padding: 0 var(--sp-2); border-radius: var(--r-pill); border: 1px solid var(--text); font-weight: var(--fw-bold); }
.banner-error .banner-badge { border-color: var(--danger); color: var(--danger); }

/* ---------- 下の帯（場所。iOS のタブバー: 高さ 49、印の下に言葉、選んだ所は強調の色。言葉は 12px） ---------- */
.tabbar {
  flex: none;
  display: flex;
  justify-content: center;
  height: calc(var(--tab-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  background: var(--bar);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 -0.5px 0 var(--line);
}
.tab {
  flex: 1;
  max-width: 168px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 0;
  background: transparent;
  color: var(--text-3);
}
.tab-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 28px; border-radius: var(--r-pill); }
.tab-label { font-size: var(--fs-caption); line-height: 1.2; }
.tab:active .tab-icon { background: var(--press-bg); }
/* 選んだ所: 印と言葉を強調の色にし、言葉を太字に（色だけに頼らない。16-6.9） */
.tab[aria-current="page"] { color: var(--accent); }
.tab[aria-current="page"] .tab-label { font-weight: var(--fw-bold); }
/* 設定「下の帯の形」が丸い面のとき: 選んだ所の印の後ろを強調の色で塗る */
:root[data-tab-style="android"] .tab[aria-current="page"] { color: var(--text); }
:root[data-tab-style="android"] .tab[aria-current="page"] .tab-icon { background: var(--accent-fill); color: var(--on-accent); width: 64px; height: 30px; }

/* お知らせは、下の帯と下のボタン（書く・道具の帯）の上に出す（よく押す物を隠さない） */
.toasts { --toast-bottom: calc(var(--tab-h) + var(--sp-7) + var(--sp-4)); }

/* 帯の右端の主な操作（iOS の作法: 太字の文字ボタン） */
.bar-primary .btn-label { font-weight: var(--fw-heavy); }

/* ---------- 下のボタンの帯（どの画面も同じ形。統合で shell へ上げた）。中身の上に重ねず、送れる中身の下に置く ---------- */
.fab-row {
  flex: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--gutter);
  background: var(--bg);
}
.fab-row .btn-strong { min-width: calc(var(--btn-h) * 2.4); }
/* 全画面（下の帯の無い画面）では、端末の下の余白の分を足す */
.layer-screen .fab-row { padding-bottom: calc(var(--sp-2) + var(--safe-b)); }

/* 設定「書くボタンの並び」が「二つを同じ大きさに並べる」とき（一覧とやることの画面）: 左右半々・同じ高さ・同じ文字の大きさ。
   色の強さは「書く」が強い色、「タグで書く」が普通のまま（強い色は一つ。16-4.1） */
:root[data-write-buttons="equal"] :is(.screen-memos, .screen-todo) .fab-row:has(> .btn-normal):has(> .btn-strong) > .btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--btn-h);
  padding: 0 var(--sp-3);
  font-size: var(--fs-body);
}