/* spaces のウェブ版。Mac 版の窓と同じ組みにした（2026-11-05）。左ペインは淡い灰、右は白い紙だ。
   層の色は Okabe と Ito の配色（Base 青・メインセッション朱・サブセッション青みの緑・ピン赤紫）で、Mac 版と同じ値だ */
:root {
  --paper: #fff;
  --ground: #F1F1EF;
  --ink: #1d2328;
  --ink2: rgba(29, 35, 40, .62);
  --ink3: rgba(29, 35, 40, .48);
  --ink4: rgba(29, 35, 40, .34);
  --line: rgba(29, 35, 40, .12);
  --hover: rgba(29, 35, 40, .04);
  --now: rgba(29, 35, 40, .09);
  --part: rgba(29, 35, 40, .05);
  --blue: #026881;
  --on-blue: #fff;
  --blue-soft: rgba(2, 104, 129, .12);
  --red: #b3261e;
  --t-base: #0072B2;
  --t-main: #D55E00;
  --t-sub: #009E73;
  --t-pin: #9D2933;  /* ピンは臙脂（2026-11-05、依頼）。前は赤紫の #CC79A7 */
  --mark: rgba(255, 226, 64, .75);
  --shadow: 0 10px 30px rgba(20, 30, 40, .14), 0 1px 3px rgba(20, 30, 40, .1);
  --ui: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  /* 本文もシステムの書体にした。Mac 版・iPhone 版と同じだ（2026-11-05、依頼）。前は Zen Kaku Gothic New */
  --body: var(--ui);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1C1C1F; --ground: #0F0F12;
    --ink: #e8ecef; --ink2: rgba(232, 236, 239, .66); --ink3: rgba(232, 236, 239, .5); --ink4: rgba(232, 236, 239, .36); --line: rgba(232, 236, 239, .14);
    --hover: rgba(232, 236, 239, .05); --now: rgba(232, 236, 239, .11); --part: rgba(232, 236, 239, .07);
    --blue: #7CC6D8; --on-blue: #0B161C; --blue-soft: rgba(124, 198, 216, .16); --red: #ff8a80;
    --t-base: #56B4E9; --t-main: #E69F00; --t-sub: #3CC49F; --t-pin: #D9707B;
    --mark: rgba(255, 214, 10, .45); --shadow: 0 10px 30px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #1C1C1F; --ground: #0F0F12;
  --ink: #e8ecef; --ink2: rgba(232, 236, 239, .66); --ink3: rgba(232, 236, 239, .5); --ink4: rgba(232, 236, 239, .36); --line: rgba(232, 236, 239, .14);
  --hover: rgba(232, 236, 239, .05); --now: rgba(232, 236, 239, .11); --part: rgba(232, 236, 239, .07);
  --blue: #7CC6D8; --on-blue: #0B161C; --blue-soft: rgba(124, 198, 216, .16); --red: #ff8a80;
  --t-base: #56B4E9; --t-main: #E69F00; --t-sub: #3CC49F; --t-pin: #D9707B;
  --mark: rgba(255, 214, 10, .45); --shadow: 0 10px 30px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--paper); color: var(--ink); font-family: var(--ui); -webkit-font-smoothing: antialiased; overflow: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button[hidden] { display: none !important; }
input, textarea, select { font: inherit; color: inherit; }
#app { height: 100dvh; }

/* 地。白い紙だけだ。窓から離れているあいだは、真ん中にアイコンと同じ青の細い○を置く（Mac 版の閉じた画面と同じ） */
.desk { position: fixed; inset: 0; z-index: 0; background: var(--paper); }
.hidden .desk { z-index: 50; }
.hidden .desk::after { content: ""; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px; border-radius: 50%; padding: 3px;
  background: linear-gradient(#22D8FF, #0FA4F5); -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }

/* 入口・鍵・窓の箱は、紙に細い線の縁だ。前は磨りガラスだった */
.glass { background: var(--paper); border: 1px solid var(--line); }

/* 全体。左ペイン・境目・紙 */
.shell { position: relative; z-index: 1; height: 100%; display: grid; grid-template-columns: var(--pw, 280px) 1px minmax(0, 1fr); }
.shell.nopane { grid-template-columns: minmax(0, 1fr); }
.shell.nopane .pane, .shell.nopane .grip { display: none; }
.hidden .shell { visibility: hidden; }

/* 印。細く淡く。枠は付けない */
.pi { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--ink3); flex: none; }
.pi:hover { color: var(--ink); background: var(--hover); }
.pi.on { color: var(--ink); }
.pi svg { width: 17px; height: 17px; stroke-width: 1.3; }

/* 左ペイン */
.pane { position: relative; background: var(--ground); display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.grip { background: var(--line); position: relative; cursor: col-resize; }
.grip::after { content: ""; position: absolute; inset: 0 -4px; }
.ptop { display: flex; justify-content: flex-end; gap: 2px; height: 44px; align-items: center; padding: 0 8px; flex: none; }
.find { display: flex; align-items: center; gap: 6px; margin: 0 10px 6px; padding: 0 6px 0 10px; height: 32px; border-radius: 8px; background: var(--part); flex: none; }
.find .mg { display: grid; color: var(--ink3); }
.find .mg svg { width: 14px; height: 14px; stroke-width: 1.6; }
.find input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: calc(var(--fs, 17px) * .82); }
.find input::-webkit-search-cancel-button { display: none; }
.find .clr { width: 24px; height: 24px; display: grid; place-items: center; color: var(--ink3); border-radius: 12px; }
.find .clr svg { width: 15px; height: 15px; }
.filters { display: flex; align-items: center; gap: 8px; margin: 0 10px 6px 12px; flex: none; }
.filters[hidden] { display: none; }
.chip { position: relative; height: 24px; padding: 0 9px; border-radius: 12px; display: inline-flex; align-items: center; gap: 4px; font-size: max(11px, calc(var(--fs, 17px) * .7)); color: var(--ink2); background: var(--part); white-space: nowrap; }
.chip.on { color: var(--ink); background: var(--now); }
.chip svg { width: 11px; height: 11px; }
.chip.sel select { appearance: none; -webkit-appearance: none; border: 0; background: none; outline: none; font-size: 12px; max-width: 120px; padding-right: 2px; cursor: pointer; }
.chip.sel select:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.filters .sp { flex: 1; }
.filters .cnt { font-size: max(11px, calc(var(--fs, 17px) * .7)); color: var(--ink3); font-variant-numeric: tabular-nums; }
.rows { flex: 1; overflow-y: auto; padding: 2px 6px 12px; }
.pfoot { flex: none; border-top: 1px solid var(--line); padding: 4px 12px; display: flex; }

/* 一覧の行。字は本文と同じ大きさで、行の高さはその2.2倍だ（Mac 版と同じ）。日付と数は出さない */
.row { --h: calc(var(--fs, 17px) * 2.2); position: relative; display: flex; align-items: center; gap: 6px; min-height: 36px; height: var(--h); padding: 0 4px 0 16px; border-radius: 8px; font-size: var(--fs, 17px); cursor: default; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; margin-bottom: 1px; }
.row:hover { background: var(--hover); }
.row.on { background: var(--now); }
.row.target { box-shadow: inset 0 0 0 1.5px var(--blue); }
.row:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.row .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .sp { flex: 1; }
.row .o { width: calc(var(--fs, 17px) * .5); height: calc(var(--fs, 17px) * .5); border-radius: 50%; border: 1.5px solid currentColor; flex: none; }
.o.base { color: var(--t-base); }
.o.loose { border: none; background: currentColor; transform: scale(.58); }  /* 未分類は○ではなく青の点（2026-11-05、依頼） */
.o.main { color: var(--t-main); }
.o.sub { color: var(--t-sub); }
.o.pin { color: var(--t-pin); }
.o.recent { color: var(--ink4); }  /* 最近の項目の灰の○（2026-11-05、依頼） */
.o.trash { color: var(--ink4); }
.row .lead { display: flex; align-items: center; gap: 4px; flex: none; height: 100%; }
.row .cs, .row .tri { width: 12px; flex: none; }
.row .ic { width: calc(var(--fs, 17px) * .8); display: grid; place-items: center; flex: none; color: var(--ink2); }
.row .ic svg { width: calc(var(--fs, 17px) * .62); height: calc(var(--fs, 17px) * .62); stroke-width: 1.4; }
.row .tri { height: 100%; display: grid; place-items: center; color: var(--ink4); transition: transform .15s; }
.row .tri svg { width: 10px; height: 10px; stroke-width: 2; }
.row .tri.closed { transform: rotate(-90deg); }
.row.head { color: var(--ink2); margin-top: 6px; }
.row.head .t { color: var(--ink2); }
.row.note .t { color: var(--ink); opacity: .82; }
.row.note.on .t { opacity: 1; }
.row.main { padding-left: 32px; }
.row.sub { padding-left: 64px; }
.row.dark { padding-left: 32px; }
.row.dark .t { color: var(--ink3); opacity: 1; }
/* サブセッションをつなぐ細い縦の線。最後の行で右へ曲げて終える */
.row.sub::before { content: ""; position: absolute; left: calc(48px + var(--fs, 17px) * .4); top: 0; bottom: 0; border-left: 1px solid var(--line); }
.row.sub.last::before { bottom: 50%; width: calc(13px - var(--fs, 17px) * .4); border-bottom: 1px solid var(--line); border-bottom-left-radius: 6px; }
.row.more .t { color: var(--ink3); }  /* 閉じたセッションの下の件数の行（2026-11-05、依頼） */
.row .plus { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; color: var(--ink3); flex: none; }
.row .plus:hover { color: var(--ink); background: var(--hover); }
.row .plus svg { width: 15px; height: 15px; stroke-width: 1.4; }
.row .plus.hov { visibility: hidden; }
.row:hover .plus.hov, .row:focus-within .plus.hov { visibility: visible; }
@media (hover: none) { .row .plus.hov { display: none; } }
.row.add { color: var(--ink3); margin-top: 4px; gap: 8px; }
.row.add .pl { display: grid; }
.row.add .pl svg { width: 13px; height: 13px; }
.empty { font-size: var(--fs, 17px); color: var(--ink4); padding-left: 64px; height: calc(var(--fs, 17px) * 2.2); display: flex; align-items: center; }

/* 紙の場 */
.stage { position: relative; display: grid; grid-template-rows: 44px 1fr auto auto; min-width: 0; min-height: 0; background: var(--paper); --mx: max(24px, 8%); }
.topbar { display: flex; align-items: baseline; gap: 10px; padding: 0 20px 0 20px; color: var(--ink2); position: relative; min-width: 0; font-size: max(13px, calc(var(--fs, 17px) * .82)); align-self: center; }
.topbar .opener { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); }
/* 居場所の行は左の端に寄せ、下に淡い細い線を引いて本文と分ける。線は左ペインの探す欄の上の端（上から44px）にそろえる（2026-11-05、依頼）。
   前は居場所の行を本文と同じ字下げ（--mx）から始めていて、本文と見分けにくかった */
.topbar:has(.opener) { padding-left: 48px; }
.stage::before { content: ""; position: absolute; left: 0; right: 0; top: 43px; height: 1px; background: var(--line); pointer-events: none; z-index: 1; }
.nopane .topbar { padding-left: max(var(--mx), 48px); }
.topbar .trail { flex: 0 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 6px; overflow: hidden; }
.topbar .where { color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .step { display: flex; align-items: baseline; gap: 6px; min-width: 0; color: var(--ink2); font-size: inherit; }
.topbar .step.now { color: var(--ink); }
.topbar .step .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .step:hover .nm { color: var(--ink); }
.topbar .o { width: .6em; height: .6em; border-radius: 50%; border: 1.5px solid currentColor; flex: none; align-self: center; }
/* 家の印。淡く細い線で、字の真ん中の高さに置く（2026-11-05、依頼） */
.topbar .home { flex: none; align-self: center; display: grid; place-items: center; width: 1.4em; height: 1.4em; margin: -.2em 0; color: var(--ink4); }
.topbar .home:hover { color: var(--ink2); }
.topbar .home svg { width: 1em; height: 1em; stroke-width: 1.3; }
.topbar .pinmark { display: grid; place-items: center; align-self: center; color: var(--t-pin); }
.topbar .pinmark svg { width: .95em; height: .95em; stroke-width: 1.5; }
.topbar .sep2 { color: var(--ink4); flex: none; }
.topbar .sync { position: absolute; right: 8px; top: 50%; margin-top: -3px; width: 6px; height: 6px; border-radius: 3px; background: var(--ink3); opacity: 0; transition: opacity .3s; }
.topbar .sync.on { opacity: 1; background: var(--blue); }
.topbar .sync.err { opacity: 1; background: var(--red); }
/* いまの日付と時刻。天気と同じ淡い字で、数字の幅をそろえる */
.topbar .sp { flex: 1; }
.topbar .cp { align-self: center; margin: -6px 0; }
.topbar .stamp { margin: 0; font-size: inherit; flex: none; }
.topbar .tedit { min-width: 8em; width: min(24em, 50%); font: inherit; color: var(--ink); background: var(--paper); border: 1px solid color-mix(in srgb, var(--blue) 70%, transparent); border-radius: 4px; padding: 0 3px; outline: none; }
/* 本文の上のタイトルの欄はやめた。居場所の行の最後の項目がタイトルだ（2026-11-05、依頼） */
.topbar .clock { flex: none; color: var(--ink3); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* いまの天気・気温・湿度（weather.js）。時刻の右に、同じ淡い字で出す */
.topbar .wx { flex: none; display: inline-flex; align-items: center; gap: 5px; color: var(--ink3); align-self: center; font-size: .9em; }
.topbar .wx:empty { display: none; }
.topbar .wx .i { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }

/* タイトル。枠も線も付けず、本文より一回り大きい字で1行。欄は字の幅だけで、すぐ右にコピーの印 */
.titlerow { display: block; padding: 14px var(--mx) 0 calc(var(--mx) + 5px); min-width: 0; }
.title { flex: 0 1 auto; border: 0; outline: none; background: none; padding: 0; font-family: var(--ui); font-weight: 500; line-height: 1.5; min-width: 3em; color: var(--ink); caret-color: var(--ink); }
.title::placeholder { color: var(--ink4); }
.tline { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cp { width: 28px; height: 28px; display: grid; place-items: center; color: var(--ink4); border-radius: 7px; flex: none; }
/* 判子。タイトルの下に、左の端をタイトルと本文にそろえて淡く小さく置く。数字は幅をそろえる */
.stamp { margin: 2px 0 6px; font-size: max(12px, calc(var(--fs, 17px) * .76)); color: var(--ink3); font-variant-numeric: tabular-nums; letter-spacing: .01em; white-space: nowrap; }
.stamp[hidden] { display: none; }
.cp:hover { color: var(--ink2); background: var(--hover); }
.cp svg { width: 16px; height: 16px; stroke-width: 1.2; }

.place { position: relative; min-height: 0; min-width: 0; overflow: hidden; display: flex; }
.card { position: relative; flex: 1; min-width: 0; background: var(--paper); }
.card.trashed { background: color-mix(in srgb, var(--paper) 90%, #000); }
.card.shake { animation: shake .3s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.page { position: absolute; inset: 0; padding: 8px var(--mx) 16px calc(var(--mx) + 5px); overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; line-break: strict; line-height: 1.7; outline: none; container-type: size; color: var(--ink); font-family: var(--body); }
.page::selection, .page *::selection { background: var(--blue-soft); }
/* カーソルは標準のものにした（Mac 版と同じ）。前は自前の明滅する線だった */
.writing .page { caret-color: var(--ink); }
.page img { display: inline-block; vertical-align: top; max-width: 100%; max-height: min(75cqw, 50cqh); border-radius: 10px; }
/* 紙の中の小さな道しるべ（継いだ引用・返した行）は部品の側の字だ */
.page .q { font-size: .8em; color: var(--ink3); cursor: pointer; font-family: var(--ui); }
.page .bk { font-size: .72em; color: var(--t-sub); cursor: pointer; font-family: var(--ui); }
.ink { position: absolute; inset: 0; pointer-events: none; }
.writing .ink { display: none; }
.ink i { position: absolute; display: block; background: var(--mark); border-radius: 2px; }

/* 名前を打つ欄。左ペインの行の中と、保管庫の名前の位置に出る（2026-11-05、依頼） */
.row.namein { background: var(--hover); }
.nm-in, .shelfin { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: inherit; color: var(--ink); padding: 0; }
.row.namein .nm-in { font-size: var(--fs, 17px); box-shadow: inset 0 -1.5px 0 var(--blue); height: 1.5em; }
.shelfin { font-size: 14px; margin: 0 8px; height: 28px; box-shadow: inset 0 -1.5px 0 var(--blue); }
/* 入力の欄の下の Base の選び。左の端は入力の欄にそろえ、14px 内へ寄せる。字は左ペインの行と同じ大きさ */
.chooser { margin: 0 auto 10px; width: calc(100% - 2 * max(24px, calc(8% - 10px))); max-width: 760px; padding-left: 14px; display: flex; align-items: center; gap: 6px; font-size: calc(var(--fs, 17px)); color: var(--ink2); min-width: 0; }
.chooser[hidden] { display: none; }
.stage.choose .composer { margin-bottom: 6px; }
.chooser .pick { display: flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; color: inherit; font: inherit; }
.chooser .pick:hover { color: var(--ink); }
.chooser .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chooser .o { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid currentColor; flex: none; }
.chooser .dn { display: grid; flex: none; }
.chooser .dn svg { width: 12px; height: 12px; stroke-width: 1.6; }
.chooser .nm-in { max-width: 240px; box-shadow: inset 0 -1.5px 0 var(--blue); height: 1.5em; font-size: inherit; }

/* 入力の欄。はじめ1行の細い欄で、＋ と字が並ぶ。送る丸は打ったときだけ出る（Claude Code の欄と同じ） */
.composer { margin: 0 auto 14px; width: calc(100% - 2 * max(24px, calc(8% - 10px))); max-width: 760px; padding: 10px 10px 10px 8px; border-radius: 14px; background: var(--part); border: 1.5px solid transparent; }
.composer.drop { border-color: var(--blue); }
.composer .line { display: flex; align-items: flex-end; gap: 6px; }
.composer textarea { flex: 1; min-width: 0; border: 0; outline: none; background: none; resize: none; font-family: var(--ui); font-size: var(--fs, 17px); color: var(--ink); line-height: 1.6; height: 1.6em; padding: 0; overflow-y: auto; }
/* 入力の欄の字は部品の字と同じ大きさで、地の色の字にする。前は15/17倍で小さく、見えにくかった（2026-11-05、指摘） */
.composer textarea::placeholder { color: var(--ink3); }
.composer .plus { width: 28px; height: 24px; display: grid; place-items: center; color: var(--ink2); flex: none; }
.composer .plus svg { width: 15px; height: 15px; stroke-width: 1.6; }
.composer .send { width: 24px; height: 24px; border-radius: 12px; display: grid; place-items: center; background: var(--ink); color: var(--paper); flex: none; }
.composer .send svg { width: 14px; height: 14px; stroke-width: 2.2; }
.composer .att { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 8px; }
.composer .att[hidden] { display: none; }
.composer .th { position: relative; width: 56px; height: 56px; flex: none; }
.composer .th img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.composer .th .x { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 10px; display: grid; place-items: center; background: rgba(0, 0, 0, .55); color: #fff; }
.composer .th .x svg { width: 14px; height: 14px; }

/* 設定。左ペインのいちばん下の印の上に出す */
.sheet { position: absolute; bottom: 48px; left: 10px; z-index: 5; border-radius: 14px; padding: 8px; width: 320px; max-width: calc(100vw - 32px); box-shadow: var(--shadow); background: var(--paper); border: 1px solid var(--line); }
.sheet .it { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 12px; border-radius: 9px; font-size: 14px; }
.sheet .it:hover { background: var(--hover); }
.sheet .it svg { width: 17px; height: 17px; color: var(--ink2); flex: none; stroke-width: 1.4; }
/* 字の大きさの段。表示サイズのような画面の絵（2026-11-05、依頼） */
.sheet .sizes { padding: 10px 12px 6px; }
.sheet .sizes .hd { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink2); margin-bottom: 6px; }
.sheet .sizes .hd svg { width: 14px; height: 14px; stroke-width: 1.4; }
.sheet .thumbs { display: flex; gap: 6px; }
.sheet .thumbs .th { flex: 1; min-width: 0; padding: 2px; border-radius: 7px; line-height: 0; }
.sheet .thumbs .th svg { width: 100%; height: auto; }
.sheet .thumbs .th svg { border-radius: 5px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.sheet .thumbs .th .ln rect { fill: var(--ink); opacity: .32; }
.sheet .thumbs .th .sd { fill: var(--ink); opacity: .07; }
.sheet .thumbs .th.on svg { box-shadow: inset 0 0 0 2.5px var(--blue); }
.sheet .thumbs .th:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.sheet .sizes .ends { display: flex; justify-content: space-between; font-size: 10px; color: var(--ink3); margin-top: 4px; }
.sheet .slide { display: flex; align-items: center; gap: 10px; padding: 14px 12px; color: var(--ink2); }
.sheet .slide .a1 { font-size: 11px; }
.sheet .slide .a2 { font-size: 18px; }
.sheet .slide input { flex: 1; min-width: 0; accent-color: var(--ink2); }
.sheet .foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; padding: 10px 12px 6px; border-top: 1px solid var(--line); }
.sheet .who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sheet .who img { width: 24px; height: 24px; border-radius: 6px; flex: none; }
.sheet .who .nm { font-size: 13px; font-weight: 500; letter-spacing: .03em; }
.sheet .who .by { font-size: 11px; color: var(--ink3); white-space: nowrap; }
.sheet .who .by a { color: inherit; text-decoration: none; }
.sheet .who .by a:hover { color: var(--blue); }
.sheet .legal { display: flex; gap: 2px; }
.sheet .legal a { width: 30px; height: 30px; border-radius: 15px; display: grid; place-items: center; color: var(--ink3); }
.sheet .legal a:hover { color: var(--blue); background: var(--blue-soft); }
.sheet .legal svg { width: 16px; height: 16px; }
.sheet hr { border: 0; height: 1px; background: var(--line); margin: 4px 8px; }

/* 一覧の長押しと右クリックのメニュー */
.menu { position: fixed; z-index: 20; min-width: 220px; max-width: 300px; max-height: 70vh; overflow-y: auto; padding: 6px; border-radius: 12px; box-shadow: var(--shadow); font-size: 14px; background: var(--paper); border: 1px solid var(--line); }
.menu .it { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 7px 10px; border-radius: 7px; }
.menu .it:hover { background: var(--hover); }
.menu .it:disabled { opacity: .35; cursor: default; background: none; }
.menu .it .ck { width: 14px; color: var(--ink); flex: none; display: grid; }
.menu .it .ck svg { width: 13px; height: 13px; }
.menu .it .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu .it.sub { padding-left: 32px; }
.menu .it.danger { color: var(--red); }
.menu .mh { font-size: 11px; color: var(--ink3); padding: 6px 10px 2px; }
.menu hr { border: 0; height: 1px; background: var(--line); margin: 4px 6px; }

/* 名前や1行目を打つ窓・入口・鍵 */
.veil { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(0, 0, 0, .18); padding: 16px; }
.ask { width: min(360px, 100%); border-radius: 16px; padding: 20px; box-shadow: var(--shadow); }
.ask h2 { font-size: 15px; font-weight: 500; margin: 0 0 12px; }
.ask p { font-size: 13px; color: var(--ink2); line-height: 1.7; margin: 0 0 12px; }
.field { width: 100%; height: 42px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); padding: 0 12px; font-size: 15px; outline: none; margin-bottom: 10px; }
.field:focus { border-color: var(--blue); }
.peek { position: relative; margin-bottom: 10px; }
.peek .field { padding-right: 46px; margin-bottom: 0; }
.peek .eye { position: absolute; right: 4px; top: 4px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--ink3); }
.peek .eye:hover, .peek .eye[aria-pressed="true"] { color: var(--blue); }
.peek .eye svg { width: 20px; height: 20px; }
.acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.btn { height: 38px; padding: 0 16px; border-radius: 19px; font-size: 14px; }
.btn.main { background: var(--blue); color: var(--on-blue); }
.btn.sub { background: var(--part); }
.btn:disabled { opacity: .5; }
.err { font-size: 12px; color: var(--red); min-height: 18px; }
.err small { display: block; color: var(--ink3); }
.code { font-family: ui-monospace, monospace; font-size: 15px; letter-spacing: .05em; padding: 12px; border-radius: 12px; background: var(--part); text-align: center; line-height: 1.6; user-select: all; margin-bottom: 12px; }

.gate { position: relative; z-index: 1; height: 100%; display: grid; place-items: center; padding: 16px; }
.gate .box { width: min(360px, 100%); border-radius: 22px; padding: 28px 24px; text-align: center; box-shadow: var(--shadow); }
.gate .icon { width: 72px; height: 72px; border-radius: 17px; }
.gate h1 { font-size: 22px; font-weight: 500; margin: 10px 0 6px; letter-spacing: .04em; }
.gate .note { font-size: 13px; color: var(--ink2); line-height: 1.7; margin: 0 0 18px; }
.gate form { text-align: left; }
.gate .lab { display: block; font-size: 12px; color: var(--ink2); margin-bottom: 6px; }
.gate .go { width: 100%; height: 44px; border-radius: 22px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--line); background: var(--paper); font-size: 15px; margin-bottom: 8px; }
.gate .what { display: inline-block; font-size: 12px; color: var(--ink2); margin-top: 6px; }
/* 読んでいる画面。紙の地に、アイコンの○を描きながら回す（2026-11-05、依頼） */
.gate.reading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.orbit { width: 96px; height: 96px; }
.orbit svg { width: 100%; height: 100%; overflow: visible; }
.orbit circle { fill: none; stroke-width: 5; stroke-linecap: round; }
.orbit-track { stroke: var(--line); }
.orbit-arc { stroke-dasharray: 195 195; transform-origin: 50px 50px; animation: orbit-draw 1.6s cubic-bezier(.65, 0, .35, 1) infinite, orbit-turn 3.2s linear infinite; filter: drop-shadow(0 2px 6px rgba(15, 164, 245, .35)); }
@keyframes orbit-draw { 0% { stroke-dashoffset: 195; } 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -195; } }
@keyframes orbit-turn { to { transform: rotate(360deg); } }
.reading-note { margin: 0; font-size: 13px; letter-spacing: .12em; color: var(--ink3); }
@media (prefers-reduced-motion: reduce) { .orbit-arc { animation: none; stroke-dasharray: none; } }
.gate .legal { font-size: 11px; color: var(--ink3); margin: 14px 0 0; }
.gate .legal a { color: inherit; }
.gate .row2 { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; }
.gate .row2 button { color: var(--ink2); text-decoration: underline; }

/* 狭い画面では、左ペインを出すと紙ごと右へずれる。紙のどこからでも右へはらうと指についてくる。
   幅は画面の80%（上限400px）で、右に残った紙に青みの灰をかぶせる。影はつけない（iPhone 版と同じ、2026-11-05、依頼） */
@media (max-width: 759px) {
  .shell, .shell.nopane { grid-template-columns: minmax(0, 1fr); --dw: min(80vw, 400px); --shift: var(--dw); --p: 1; overflow: hidden; touch-action: pan-y; }
  .shell.nopane { --shift: 0px; --p: 0; }
  .shell .grip { display: none; }
  .shell .pane, .shell.nopane .pane { display: flex; position: absolute; z-index: 10; inset: 0 auto 0 0; width: var(--dw); border-right: .5px solid var(--line);
    transform: translateX(calc(var(--shift) - 100%)); transition: transform .32s cubic-bezier(.2, .8, .2, 1); }
  .shell .stage { transform: translateX(var(--shift)); transition: transform .32s cubic-bezier(.2, .8, .2, 1); }
  .shell .stage::after { content: ""; position: absolute; inset: 0; z-index: 20; pointer-events: none; background: rgba(0, 57, 117, .1); opacity: var(--p); transition: opacity .32s; }
  .shell.dragging .pane, .shell.dragging .stage, .shell.dragging .stage::after { transition: none; }
  .ptop .close { display: none; }
  .stage { --mx: 20px; }
  /* 下の余白は、iPhone のホームバーの高さを下回らない（2026-11-05、指摘） */
  .composer { width: calc(100% - 24px); margin-bottom: max(10px, env(safe-area-inset-bottom)); }
  .chooser { width: calc(100% - 24px); margin-bottom: max(8px, env(safe-area-inset-bottom)); }
  .stage.choose .composer { margin-bottom: 4px; }
}
@media (prefers-reduced-motion: reduce) { .card.shake { animation: none; } .row .tri { transition: none; } .shell .pane, .shell .stage, .shell .stage::after { transition: none !important; } }

/* ── pogala で開ける機能（2026-11-05、依頼） ── */
/* 南京錠。線だけで、灰色の項目の右に置く */
.padlock { display: grid; color: var(--ink4); flex: none; }
.padlock svg { width: 14px; height: 14px; stroke-width: 1.5; }
.sheet .it.locked, .menu .it.locked { color: var(--ink4); }
.sheet .it.locked svg { color: var(--ink4); }
.sheet .it.locked .cost { font-size: 11px; color: var(--ink4); font-variant-numeric: tabular-nums; }
.sheet .it .sp { flex: 1; }
.sheet .it.static { cursor: default; }
.sheet .it.static:hover { background: none; }
.sheet .it.sub { padding-left: 39px; color: var(--ink2); }
/* テーマの6色。Mac 版の Tint の点の色だ */
.tints { display: flex; gap: 6px; }
.tints .tn { width: 18px; height: 18px; border-radius: 50%; background: var(--dot); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.tints .tn.on { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--blue); }
.tints .tn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.t-plain { --dot: #8A96A8; } .t-mist { --dot: #789BB0; } .t-moss { --dot: #8A9E67; } .t-sand { --dot: #AC906C; } .t-apricot { --dot: #BC8294; } .t-wisteria { --dot: #AE82BE; } .t-cafe { --dot: #E3D63B; }
/* 磨りガラスの入り切り */
.sw { width: 30px; height: 18px; border-radius: 9px; background: var(--now); position: relative; transition: background .15s; flex: none; }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .15s; }
.sw.on { background: var(--blue); }
.sw.on::after { transform: translateX(12px); }
/* 左ペインのいちばん下の保管庫の名前 */
.pfoot { align-items: center; }
.pfoot .sp { flex: 1; }
.shelfbtn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px; border-radius: 8px; color: var(--ink2); font-size: calc(var(--fs, 17px) * .76); max-width: 60%; }
.shelfbtn:hover { background: var(--hover); color: var(--ink); }
.shelfbtn svg { width: 15px; height: 15px; stroke-width: 1.4; flex: none; }
.shelfbtn .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shelfbtn.locked .t { color: var(--ink2); }

/* テーマの色。左ペインの地に、Mac 版の Tint と同じ昼と夜の色を敷く（Store.swift の hex、2026-11-05 に取り直した値）。開けていなければ前の淡い灰のままだ */
body[data-tint="plain"] { --ground: #EAEDF1; }
body[data-tint="mist"] { --ground: #E4EFF5; }
body[data-tint="moss"] { --ground: #EAEFE3; }
body[data-tint="sand"] { --ground: #F4EBE0; }
body[data-tint="apricot"] { --ground: #F7E9EC; }
body[data-tint="wisteria"] { --ground: #F2E9F5; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body[data-tint="plain"] { --ground: #171A1D; }
  :root:not([data-theme="light"]) body[data-tint="mist"] { --ground: #121B20; }
  :root:not([data-theme="light"]) body[data-tint="moss"] { --ground: #171B12; }
  :root:not([data-theme="light"]) body[data-tint="sand"] { --ground: #1E1811; }
  :root:not([data-theme="light"]) body[data-tint="apricot"] { --ground: #201619; }
  :root:not([data-theme="light"]) body[data-tint="wisteria"] { --ground: #1B121F; }
}
:root[data-theme="dark"] body[data-tint="plain"] { --ground: #171A1D; }
:root[data-theme="dark"] body[data-tint="mist"] { --ground: #121B20; }
:root[data-theme="dark"] body[data-tint="moss"] { --ground: #171B12; }
:root[data-theme="dark"] body[data-tint="sand"] { --ground: #1E1811; }
:root[data-theme="dark"] body[data-tint="apricot"] { --ground: #201619; }
:root[data-theme="dark"] body[data-tint="wisteria"] { --ground: #1B121F; }

/* 夜のカフェテラス。昼も夜も絵の星空の群青を敷き、左ペインの字と層の色を夜の値にする（2026-11-05、依頼） */
body[data-tint="cafe"] { --ground: #002177; }
body[data-tint="cafe"] .pane {
  --ink: #e8ecef; --ink2: rgba(232, 236, 239, .66); --ink3: rgba(232, 236, 239, .5); --ink4: rgba(232, 236, 239, .36); --line: rgba(232, 236, 239, .14);
  --hover: rgba(232, 236, 239, .07); --now: rgba(232, 236, 239, .13); --part: rgba(232, 236, 239, .08);
  --t-base: #56B4E9; --t-main: #E69F00; --t-sub: #3CC49F; --t-pin: #D9707B;
  color: var(--ink); color-scheme: dark;
}

/* 背景の写真と磨りガラス。写真は左ペインの後ろに敷き、磨りガラスのときはぼかす。
   写真がなくて磨りガラスのときは、地の色と層の色を淡く混ぜた光をぼかして敷く。狭い画面では紙の上に重なるので、後ろの紙がそのまま透ける */
/* 磨りガラスの backdrop-filter で左ペインが重なりの単位になる。設定の紙が紙の場の下に隠れないよう、左ペインを上に置く */
.pane { z-index: 2; }
.pane > * { position: relative; z-index: 1; }
.pane > .sheet { position: absolute; z-index: 5; }
.pane > .bd { position: absolute; inset: 0; z-index: 0; overflow: hidden; background-size: cover; background-position: center; pointer-events: none; display: none; }
.pane.photo > .bd { display: block; }
.pane.photo::after { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--ground); opacity: .82; pointer-events: none; }
.pane.glass { background: color-mix(in srgb, var(--ground) 55%, transparent); -webkit-backdrop-filter: blur(28px) saturate(1.5); backdrop-filter: blur(28px) saturate(1.5); }
.pane.glass > .bd { display: block; filter: blur(26px) saturate(1.2); clip-path: inset(0); }
.pane.glass:not(.photo) > .bd { background:
  radial-gradient(60% 40% at 20% 15%, color-mix(in srgb, var(--t-base) 30%, transparent), transparent 70%),
  radial-gradient(50% 40% at 85% 55%, color-mix(in srgb, #CC79A7 26%, transparent), transparent 70%),
  radial-gradient(60% 45% at 30% 95%, color-mix(in srgb, var(--t-sub) 24%, transparent), transparent 70%), var(--ground); }
.pane.glass::after { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--ground); opacity: .62; pointer-events: none; }
.narrow .pane.glass:not(.photo) > .bd { display: none; }
/* 帆（無地）は Finder のサイドバーに倣い、色を重ねない。淡い灰の磨りガラスだけにし、層の色のにじみも敷かない（2026-11-05、依頼） */
body:not([data-tint]) .pane.glass, body[data-tint="plain"] .pane.glass { --frost: rgba(236, 236, 238, .78); background: var(--frost); }
body:not([data-tint]) .pane.glass::after, body[data-tint="plain"] .pane.glass::after { background: var(--frost); opacity: .5; }
body:not([data-tint]) .pane.glass:not(.photo) > .bd, body[data-tint="plain"] .pane.glass:not(.photo) > .bd { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body:not([data-tint]) .pane.glass, :root:not([data-theme="light"]) body[data-tint="plain"] .pane.glass { --frost: rgba(40, 40, 44, .78); }
}
:root[data-theme="dark"] body:not([data-tint]) .pane.glass, :root[data-theme="dark"] body[data-tint="plain"] .pane.glass { --frost: rgba(40, 40, 44, .78); }