/* Bubbles — 骨格・トークン・共通部品
   画面固有のスタイルは css/screens/ に置く。 */

:root {
  color-scheme: light;

  --bg: #f4f4f1;
  --surface: #ffffff;
  --surface-2: #eceae6;
  --line: rgba(0,0,0,.10);
  --line-strong: rgba(0,0,0,.22);
  --text: #22221e;
  --text-2: #66655f;
  --text-3: #9a998f;

  /* 海（ステージ背景）。上から下へ 空色 → 藤色 → --bg に溶ける */
  --sea-1: #d9eff6;
  --sea-2: #e7ebf8;
  --sea-3: #f5efe8;
  --drift-a: rgba(159,214,248,.42);   /* 流れる光のかたまり */
  --drift-b: rgba(255,210,232,.36);
  --spark: rgba(255,255,255,.95);     /* のぼる光の粒 */
  --spark-2: rgba(150,210,240,.85);

  /* バブル：シャボン玉の膜 */
  --bub-fill: rgba(148,205,233,.14);
  --bub-edge: rgba(60,140,176,.60);
  --bub-edge-soft: rgba(255,255,255,.70);
  --bub-text: #14424f;
  --bub-glow: rgba(255,255,255,.85);
  --bub-shadow: rgba(38,80,110,.28);
  --irid-a: rgba(255,148,208,.30);    /* 虹色の膜（桃） */
  --irid-b: rgba(110,226,255,.34);    /* 同（水） */
  --irid-c: rgba(186,158,255,.28);    /* 同（藤） */
  --sheen: rgba(255,255,255,.22);     /* ななめの照り */

  --today-edge: #c07a4e;
  --today-fill: rgba(192,122,78,.09);

  /* 時間帯の色。画面2・ふりかえり・集中オーバーレイが共有するので :root に置く。
     オーバーレイやドラッグの分身は画面の外に出るため、画面スコープに置くと色が抜ける */
  --slot-morning: #d99a3f;
  --slot-noon:    #4fa3c7;
  --slot-night:   #6f6ab8;
  /* きっかけ／すきま のカードは3枚では足りない（すきまの既定だけで4つある）。
     色そのものに意味は無く、カードを見分けるための印。文字は載せないので
     WCAG の文字コントラストは掛からず、要るのは**色どうしの見分け**だけ。

     足す2色は総当たりで選んだ（明度も動かす——色覚特性のもとで効くのは
     色相より明度差なので）。5色にしても、いちばん見分けにくい組は
     **足す前と同じ #4fa3c7 / #6f6ab8 のまま**で、最小色差（OKLab ΔE）は動かない:
       明 2型 0.0986（3色のときと同値） / 暗 2型 0.0590（同値）
     6色目まで足すと 0.0878 まで落ちたので、5色で止めてある。 */
  --slot-amber:   #a0600b;   /* OKLCH .549 .120  65 */
  --slot-rose:    #b67e81;   /* OKLCH .650 .070  16 */
  --today-fill-hot: rgba(192,122,78,.17);
  --today-glow: rgba(192,122,78,.35);

  /* 送信ボタン */
  /* 送信ボタン。白文字を載せるので 4.5:1 を切らない深さにしてある
     （#3aa5c8 は 2.84:1 で不足していた） */
  --accent-a: #1d7d9c;
  --accent-b: #5b4cc2;
  --accent-text: #ffffff;

  --radius: 12px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  /* 上の安全領域。ブラウザで開いている間は 0。
     ホーム画面に追加して standalone で開いたとき（とくに iOS を
     black-translucent にしたとき）だけ、ステータスバーのぶんが入る。
     ここを見ていないと、海の上の帯（長期保留）が時計の裏に潜る。 */
  --safe-t: env(safe-area-inset-top, 0px);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #15151a;
    --surface: #202027;
    --surface-2: #2a2a32;
    --line: rgba(255,255,255,.12);
    --line-strong: rgba(255,255,255,.26);
    --text: #f0efeb;
    --text-2: #a9a8a2;
    --text-3: #76756f;

    --sea-1: #101c2a;
    --sea-2: #151529;
    --sea-3: #1c1626;
    --drift-a: rgba(64,140,200,.22);
    --drift-b: rgba(190,110,180,.14);
    --spark: rgba(255,255,255,.55);
    --spark-2: rgba(140,200,235,.42);

    --bub-fill: rgba(120,190,225,.10);
    --bub-edge: rgba(124,196,226,.62);
    --bub-edge-soft: rgba(255,255,255,.30);
    --bub-text: #d8eef8;
    --bub-glow: rgba(255,255,255,.28);
    --bub-shadow: rgba(0,0,0,.55);
    --irid-a: rgba(255,120,200,.20);
    --irid-b: rgba(100,220,255,.22);
    --irid-c: rgba(170,140,255,.20);
    --sheen: rgba(255,255,255,.10);

    --today-edge: #d99568;
    --today-fill: rgba(217,149,104,.11);

    --slot-morning: #e0aa5c;
    --slot-noon:    #63b6d8;
    --slot-night:   #8f8ade;
    /* 明のぶんと同じだけ明度を上げた（+0.055）。既存3色の持ち上げ方と同じ */
    --slot-amber:   #b27025;
    --slot-rose:    #c88f92;
    --today-fill-hot: rgba(217,149,104,.22);
    --today-glow: rgba(217,149,104,.40);

    --accent-a: #1d7d9c;
    --accent-b: #6f5fc9;
    --accent-text: #ffffff;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; height: 100%; overscroll-behavior: none; }
body {
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.6 -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- アプリの骨格 ---------- */
.app {
  display: flex; flex-direction: column;
  position: relative;                        /* 右上の歯車の位置の基準 */
  /* 高さは2行で書く。**上の行が控え。**dvh を知らない描画エンジン
     （Android WebView 103 など）は下の行を捨てるので、上が残って高さが立つ。
     1行しか書いていなかったとき、古い WebView で .app の高さが auto になり、
     panes が潰れて**下タブだけが画面の上に出て、中身が真っ白**になった（A-63）。 */
  height: 100vh;
  height: 100dvh;
  max-width: 430px; margin: 0 auto;
  /* 中身をぜんぶ安全領域の下から始める。海の水も帯もここから下に入るので、
     どの画面でも「ステータスバーに隠れているところ」が生まれない */
  padding-top: var(--safe-t);
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--line);
}
.panes { flex: 1; min-height: 0; position: relative; }
.pane { position: absolute; inset: 0; display: none; flex-direction: column; min-height: 0; }
.pane.is-active { display: flex; }

/* ---------- 右上の歯車（設定。利用者の指示） ----------
   下タブから外した設定への入口。**アプリの枠の子**なので、どの画面から見ても
   同じところに在る。設定（とその中のふりかえり）に居るあいだは ✕ に変わり、
   さっきまで居た画面へ戻る。

   ドラッグ層（60）より下、下タブ（70）より下に置く。掴んだバブルは
   この上を通る＝歯車が的に見えない（落とし先は下タブだけ、という決まりを崩さない）。

   画面の中身がこの下へ潜らないよう、下の各画面に上の余白を入れてある
   （海だけは自分で位置を決めているので、そちらで避けている）。 */
.gearbtn {
  /* 絶対配置の基準は .app の**パディングの外側**なので、
     .app に padding-top を入れても歯車は動かない。自分で足す */
  position: absolute; z-index: 30; top: calc(10px + var(--safe-t)); right: 10px;
  appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit;
  width: 44px; height: 44px; padding: 0;      /* タップ目標は 44 を下回らない */
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  color: var(--text-2);
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  transition: transform .1s, color .12s, border-color .12s, background-color .12s;
}
.gearbtn .ic { font-size: 16px; line-height: 1; }
.gearbtn:hover { color: var(--text); }
.gearbtn:active { transform: scale(.95); }
.gearbtn:focus-visible { outline: 2px solid var(--bub-edge); outline-offset: 2px; }
.gearbtn.is-open { color: var(--text); border-color: var(--bub-edge); background: var(--surface); }
/* バブルを掴んでいる間は薄くする。落とし先ではないので、狙わせない */
body.is-dragging .gearbtn { opacity: .25; pointer-events: none; }

/* ---------- 左のメニュー（F7）----------
   ボタンは歯車の鏡（左上）。板は左から出て、右側は覆い。
   重なり：下タブ 70 ＜ ここ 75 ＜ トースト 80（「今日に置いた」の取り消しが板の上に出る）
   ＜ 集中画面・盤の覆い 90。 */
.menubtn {
  position: absolute; z-index: 30; top: calc(10px + var(--safe-t)); left: 10px;
  appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit;
  width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  color: var(--text-2);
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  transition: transform .1s, color .12s, border-color .12s, background-color .12s;
}
.menubtn .ic { font-size: 20px; line-height: 1; }
.menubtn:hover { color: var(--text); }
.menubtn:active { transform: scale(.95); }
.menubtn:focus-visible { outline: 2px solid var(--bub-edge); outline-offset: 2px; }
.menubtn[aria-expanded="true"] { color: var(--text); border-color: var(--bub-edge); background: var(--surface); }
body.is-dragging .menubtn { opacity: .25; pointer-events: none; }
/* 集中画面の間は隠す（覆いの下に居るが、読み上げの順からも外す） */
body:has(.focus) .menubtn { visibility: hidden; }

.drawer-back {
  position: fixed; inset: 0; z-index: 75;
  background: rgba(0,0,0,0);
  transition: background-color .2s;
}
.drawer-back.is-open { background: rgba(0,0,0,.28); }
.drawer {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: min(78vw, 320px);
  padding: calc(10px + var(--safe-t)) 0 calc(12px + var(--safe-b));
  background: var(--surface); color: var(--text);
  box-shadow: 8px 0 30px -12px rgba(0,0,0,.35);
  transform: translateX(-100%);
  transition: transform .2s ease-out;
  display: flex; flex-direction: column;
}
.drawer-back.is-open .drawer { transform: none; }
.drawer.is-still, .drawer-back.is-open .drawer.is-still { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .drawer-back, .drawer { transition: none !important; }
}
.drawer-close {
  position: absolute; top: calc(10px + var(--safe-t)); right: 6px;
  appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--text-2); font-size: 16px; line-height: 1;
}
.drawer-close:hover { color: var(--text); }
.drawer-close:focus-visible { outline: 2px solid var(--bub-edge); outline-offset: 2px; }
.drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: 44px 0 0; }
/* 区分の見出し。押すと開閉（既定は「最近つかった」だけ開く）。件数は出さない */
.drawer-sec-h {
  display: flex; align-items: center; gap: 8px; width: 100%;
  min-height: 44px; margin: 4px 0 0; padding: 0 12px 0 16px;
  appearance: none; -webkit-appearance: none; border: 0; background: transparent;
  font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-align: left;
  color: var(--text-2); cursor: pointer;
}
.drawer-sec-h:focus-visible { outline: 2px solid var(--bub-edge); outline-offset: -2px; }
.drawer-sec-h .dot {
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--tcd, transparent); box-shadow: inset 0 0 0 1px var(--line);
}
.drawer-sec-h .sec-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-sec-h .ch { margin-left: auto; font-size: 14px; line-height: 1; transition: transform .15s; }
.drawer-sec-h[aria-expanded="true"] .ch { transform: rotate(90deg); }
.drawer-sec-b[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .drawer-sec-h .ch { transition: none; } }
.drawer-empty { margin: 0 16px 8px; font-size: 13px; color: var(--text-3); }
.drawer-row {
  display: flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 8px 0 16px;
}
.drawer-row .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; }
/* 名前は押せる（押すとその泡の盤が開く）。見た目は文字のまま、当たりは 44 */
.drawer-row .nm {
  appearance: none; -webkit-appearance: none; border: 0; background: transparent;
  font: inherit; font-size: 14.5px; color: var(--text); text-align: left; cursor: pointer;
  width: 100%; min-height: 44px; padding: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.drawer-row .nm:focus-visible { outline: 2px solid var(--bub-edge); outline-offset: -2px; border-radius: 6px; }
.drawer-row .sub { font-size: 11.5px; color: var(--text-2); margin-top: -8px; padding-bottom: 6px; }
.drawer-row .go {
  flex: none; appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit;
  min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--bg); color: var(--text);
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.drawer-row .go:focus-visible { outline: 2px solid var(--bub-edge); outline-offset: 2px; }
/* 今日にあるもの。行を薄くし、ボタンは「今日にある」（押すと外す） */
.drawer-row.is-today .nm { color: var(--text-2); }
.drawer-row.is-today .go { border-color: var(--line); background: transparent; color: var(--text-2); font-weight: 500; }

/* ---------- 下タブ ---------- */
/* タブはナビゲーションであると同時に、バブルの落下先でもある。
   ドラッグ層（z-index 60）より手前に置いて、掴んだバブルがタブの下へ潜るようにする。
   潜ってくれないと、バブルの外形がタブ6本ぶんを覆って、どれを狙っているか見えない。 */
.tabbar {
  flex: none; position: relative; z-index: 70;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding-bottom: var(--safe-b);
}
.tabbar button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  position: relative;                      /* 選んでいるときの上の線を置くため */
  /* --text-3 は --surface に対し 明2.87 / 暗3.50 で 4.5:1 を切る。
     タブのラベルは意味を持つ文字（しかも落下先の名前）なので --text-2 で止める */
  font: inherit; font-size: 11px; color: var(--text-2);
  padding: 9px 0 8px;
  display: grid; gap: 3px; justify-items: center;
  transition: opacity .14s, background-color .14s;
}
.tabbar button .ic { font-size: 17px; line-height: 1; }
.tabbar button.is-active { color: var(--text); }
.tabbar button.is-active .ic { color: var(--bub-edge); }
.tabbar button:focus-visible { outline: 2px solid var(--bub-edge); outline-offset: -3px; }

/* ---------- タブの色（利用者の指示） ----------
   --tab-c は app.js が入れる＝そのタブが指している場所の**いまの色**。
   持っていないタブ（ふりかえり・設定）には .has-c が付かず、今までどおりの見た目。

   **文字には載せない。**タグの色は OKLCH の L .855〜.935 の淡色ばかりで、
   白地の文字に使うと 2:1 も出ない。ラベルは --text-2 / --text のまま動かさない。

   アイコンも生の色では出さず、**文字色と混ぜて**沈める。混ぜ先が --text なので、
   明るいテーマでは暗く、暗いテーマでは明るくなる——1つの式で両方に効く。
   混ぜる比はアイコンが 3:1（文字ではない部品の下限）を切らないところで決めた。 */
.tabbar button.has-c .ic {
  color: color-mix(in oklab, var(--tab-c) 52%, var(--text));
}
.tabbar button.is-active.has-c .ic {
  color: color-mix(in oklab, var(--tab-c) 66%, var(--text));
}
/* 選んでいるタブだけ、地をうっすらとその色にして、上に線を1本引く。
   線は色だけの手がかりにしない——ラベルの色と太さも一緒に変わる（1.4.1） */
.tabbar button.is-active.has-c {
  background: color-mix(in srgb, var(--tab-c) 13%, transparent);
}
.tabbar button.is-active.has-c::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: color-mix(in oklab, var(--tab-c) 66%, var(--text));
}

/* ドラッグ中だけ、タブが落下先に見える。
   受けないタブ（ふりかえり・設定）は薄くして、狙っても無駄だと分かるようにする。 */
body.is-dragging .tabbar button[data-drop="no"] { opacity: .3; }
body.is-dragging .tabbar button[data-drop="yes"] { background: var(--today-fill); }
body.is-dragging .tabbar button.is-over {
  background: var(--today-fill-hot);
  box-shadow: inset 0 2px 0 var(--today-edge);
}

/* ---------- ドラッグ層 ---------- */
.drag-layer { position: fixed; inset: 0; pointer-events: none; z-index: 60; }

/* ---------- 共通部品 ---------- */
/* タップ目標は 44×44 を下回らない。padding だけだと 39px にしかならない */
.btn {
  appearance: none; font: inherit; font-size: 13px; cursor: pointer;
  border-radius: 999px; padding: 8px 16px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); background: transparent; color: var(--text);
  transition: transform .08s;
}
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 2px solid var(--bub-edge); outline-offset: 2px; }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(126px + var(--safe-b)); z-index: 80;   /* 下タブ＋入力欄の上に出す */
  display: flex; align-items: center; gap: 12px;
  background: var(--text); color: var(--bg);
  font-size: 13.5px; padding: 9px 15px; border-radius: 999px;
  box-shadow: 0 6px 24px rgba(0,0,0,.24);
  max-width: min(94vw, 406px);
}
/* 「取り消す」の当たりは 44px を切らない（初見レビュー 2026-09-25：押したのに戻らない、の原因）。
   前は padding:0 で高さ約 13px しか無く、少しずれると文字の側を押して何も起きなかった。
   見た目の丸い帯（padding 9px）はそのまま——余白ぶんを負の margin で相殺して、
   当たりだけを帯の外へ広げる */
.toast button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--bg);
  text-decoration: underline; white-space: nowrap;
  min-height: 44px; min-width: 44px;
  padding: 0 10px; margin: -9px -15px -9px -4px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* 「今日」タブが今日以外の日を映しているとき（利用者の指示）。
   文字が「今日」から「8/31」に変わる＝**落とし先が今日でないことが、
   タブ自身に書いてある**。輪郭ではなく文字で言うのは、
   タブの札はもともと文字で名乗る場所だから（記号を足すと意味が増える）。 */
#tabbar button .is-otherday {
  font-variant-numeric: tabular-nums;
  /* **色では言わない。**--accent-a（#1d7d9c）は下タブの地に対し
     明 4.27 / 暗 3.87 で 4.5:1 を割る。ここは意味を持つ文字なので使えない。
     そもそも **文字そのものが「今日」から「8/31」に変わる**ので、
     色を足さなくても違いは伝わる（1.4.1 の観点でも、色だけの手がかりにしない）。
     --text は下タブの地（--surface）に対し 明 14.5 / 暗 14.3。 */
  color: var(--text);
  font-weight: 700;
}
/* 下に細い線を1本。色ではなく形で「いつもと違う」と言う。
   線の色は輪郭の色なので 4.5:1 の対象ではない（文字は上の --text） */
#tabbar button .is-otherday::after {
  content: ''; display: block;
  margin: 2px auto 0; width: 18px; height: 2px; border-radius: 1px;
  background: var(--bub-edge);
}

/* 「今日」タブの ▽（利用者の指示）。長押しで日を選べることを示す。
   海の「▽フィルター」と同じ記号・同じ意味（押すと何か出る）。
   ラベルと同じ行に並べるため、この2つだけ横並びの入れ物に入れてある
   （下タブ自体は縦並びの grid なので、素直に足すと ▽ が下の段へ落ちる）。 */
/* 下タブは縦並びの grid で、既定では行が縦に伸びる（align-items: stretch）。
   伸びると ▽ が文字から離れるので、この入れ物だけ中央に置く */
.tabbar button .lbrow {
  display: inline-flex; align-items: center; gap: 3px;
  align-self: center;
}
/* 記号なので 4.5:1 の対象ではないが、--text-3 までは落とさない
   （--surface に対し 明2.87 / 暗3.50。輪郭として見えなくなる）。
   --text-2 は 明5.85 / 暗6.79。 */
.tabbar button .hold {
  font-size: 9px; line-height: 1; color: var(--text-2);
  position: relative; top: .5px;
}
.tabbar button.is-active .hold { color: var(--text-2); }

/* ---------- 長押しの手応え（利用者の指示） ----------
   長押しは触って初めて存在が分かる操作で、押している間ずっと何も起きない。
   指の下に輪を出して、貯まりきると開く——貯まる途中で離せば何も起きない、も同時に伝わる。

   ドラッグ層（z-index 60・pointer-events:none）に置くので、指は透ける。
   海の引き（z-index 90）より下なので、開いた瞬間に輪は隠れる（そのあと消す）。 */
@property --hold-p { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

.holdring {
  position: fixed; z-index: 61; pointer-events: none;
  width: 54px; height: 54px; margin: -27px 0 0 -27px;
  border-radius: 50%;
  /* 貯まっていく扇と、その下の薄い輪 */
  background:
    conic-gradient(var(--bub-edge) var(--hold-p), transparent 0),
    radial-gradient(circle, transparent 0 66%, color-mix(in srgb, var(--text) 14%, transparent) 67%);
  /* 真ん中は抜く。指の下が見えないと、どこを押しているのか分からなくなる */
  -webkit-mask: radial-gradient(circle, transparent 0 66%, #000 67%);
  mask: radial-gradient(circle, transparent 0 66%, #000 67%);
  animation: hold-fill var(--hold-ms, 480ms) linear forwards;
}
@keyframes hold-fill { from { --hold-p: 0%; } to { --hold-p: 100%; } }

/* 「演出を減らす」設定。貯まる動きは出さず、輪郭だけ置く
   ——動かないが、押しっぱなしを受け取っていることは伝わる */
.holdring.is-still {
  animation: none;
  background: radial-gradient(circle, transparent 0 66%, color-mix(in srgb, var(--text) 26%, transparent) 67%);
}
@media (prefers-reduced-motion: reduce) {
  .holdring { animation: none; }
}