/* 個人と共有（js/space.js。2026-10-23 利用者の指示）。
   2026-10-24: 切り替えは引き出し（≡）の頭へ移し、いちばん上は表示だけの薄い帯（30px）にした
   （Android の小さい画面で、54px の帯が海を削っていた。デザイン案の B と D）。

   ■ 帯のぶん、全体を下げる
   上の段（≡・海の名前・カレンダー・歯車・!）も画面の中身も、上端を --safe-t から測っている。
   だから --safe-t に帯の高さを足すだけで、全部がそろって下がる（.app の padding-top も）。
   帯そのものは、元の安全領域（env）から測る。 */
html.has-strip { --strip-h: 30px; --safe-t: calc(env(safe-area-inset-top, 0px) + var(--strip-h)); }

/* 帯の下地は水のいちばん上の色（帯だけを塗る）。画面の中身は帯の下から始まるので、
   塗らないと海の上に灰色の段ができる。.app ごと塗ると、設定の画面まで水の色になる */
.space-strip {
  position: absolute; z-index: 31; left: 0; right: 0; top: 0;
  height: calc(env(safe-area-inset-top, 0px) + var(--strip-h));
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--sea-1);
  display: flex; justify-content: center; align-items: center; pointer-events: none;
}
/* 表示だけの「個人 共有」。今の側を白く浮かせる。押せないので 44px の決まりは当てはまらない */
.space-seg { display: inline-flex; gap: 2px; }
.space-seg span {
  font-size: 12.5px; line-height: 1; color: var(--text-3);
  padding: 5px 14px; border-radius: 999px;
}
.space-seg span.is-on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
/* 共有の印。今が共有のときだけ、字の前に小さな点 */
.space-seg span.is-share-btn.is-on::before,
.drawer-space button.is-share-btn.is-on::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--share-mark); margin-right: 6px; vertical-align: 1px;
}

/* 引き出しの頭の切り替え。2つ並べ、今の側を浮かせる。押す的は 44px 以上 */
.drawer-space {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin: 4px 56px 4px 14px;            /* 右は ✕（引き出しを閉じる）の分あける */
}
.drawer-space button {
  appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit; font-size: 14px;
  min-height: 48px; border-radius: 14px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2);
}
.drawer-space button.is-on {
  border-color: var(--bub-edge); color: var(--text);
  background: color-mix(in srgb, var(--sea-1) 60%, var(--surface));
}
html.is-share .drawer-space button.is-on { border-color: var(--share-edge); }
.drawer-space button:focus-visible { outline: 2px solid var(--bub-edge); outline-offset: 2px; }
/* 切り替えが ✕ の高さを占めるので、下の一覧の上の余白を詰める */
.drawer-space + .drawer-body { padding-top: 8px; }

/* ---------- 共有の水（夕方の杏・藤・若葉）----------
   海の色はどの画面も --sea-* と --drift-* から塗っているので、ここを替えるだけで全画面が変わる */
:root { --share-mark: #b0604f; --share-edge: rgba(176,96,82,.55); --share-text: #5a2a22; }
html.is-share {
  --sea-1: #f8e3d6;
  --sea-2: #eee0f3;
  --sea-3: #e3f0e8;
  --drift-a: rgba(250,182,150,.40);
  --drift-b: rgba(200,170,240,.32);
  --bub-text: #5a2a22;
  --bub-shadow: rgba(150,80,70,.24);
}
@media (prefers-color-scheme: dark) {
  :root { --share-mark: #e39a86; --share-edge: rgba(227,154,134,.55); --share-text: #f6dcd4; }
  html.is-share {
    --sea-1: #2a1a1c;
    --sea-2: #241a2c;
    --sea-3: #1a2420;
    --drift-a: rgba(220,120,100,.18);
    --drift-b: rgba(170,120,200,.14);
    --bub-text: #f6dcd4;
    --bub-shadow: rgba(0,0,0,.55);
  }
}

/* 繋がっていない共有: 最後に見たものを、色を抜いて出す */
html.is-share.is-off .panes { filter: saturate(.45); opacity: .82; }

/* 共有の状態の字。薄い帯の右の空き（「個人 共有」の右どなり）に2行で置く。
   押せない（読むだけの字） */
.space-state {
  position: absolute; z-index: 32; right: 8px;
  top: env(safe-area-inset-top, 0px); height: var(--strip-h);
  width: calc(50% - 76px);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-end;
  text-align: right; pointer-events: none;
  font-size: 10px; line-height: 1.25; color: var(--text-2);
}
.space-state span { display: block; white-space: nowrap; }
.space-state.is-off { color: var(--share-text); }
.space-state[hidden], .space-join[hidden] { display: none; }

/* 共有に入る札（共有の合言葉がまだ無いとき） */
.space-join {
  position: absolute; z-index: 9; left: 34px; right: 34px;
  top: calc(var(--safe-t) + 200px);
  /* 透かさない。空の海の案内の字が下から透けて読みにくかった */
  background: var(--surface); box-shadow: 0 6px 24px rgba(0,0,0,.10);
  border: 1px solid var(--line-strong); border-radius: 18px; padding: 18px 18px 16px;
}
.space-join h4 { margin: 0 0 6px; font-size: 16px; color: var(--text); }
.space-join p { margin: 0 0 12px; font-size: 13px; color: var(--text-2); line-height: 1.7; }
.space-join .btn {
  appearance: none; cursor: pointer; font: inherit; font-size: 14px; color: var(--text);
  min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface);
}

/* 読むだけのときの入力欄。点線にして、字は案内だけ */
input.is-space-locked {
  border-style: dashed !important;
  background: color-mix(in srgb, var(--surface) 55%, transparent) !important;
}
input.is-space-locked::placeholder { color: var(--share-text); }