/* 本番のボードに、試作には無いものだけを足す ——**ログイン画面**と**保存の様子**。

   ⚠️⚠️ **すべて `#login` / `#cb…` の中に閉じる。**
      試作の見た目（base.html の <style> ＋ prototype/*.css）は
      `button{}` `input{}` `header{}` のような**素の名前**で書かれている。
      ここで素の名前に書くと、**盤面の見た目を静かに壊す**——しかも
      「ボタンが全部横いっぱいになる」のような、原因の読めない壊れ方をする。 */

/* ⚠️⚠️⚠️ **これが無いと `hidden` が効かない。**
   ブラウザの既定は `[hidden]{display:none}` だが、**クラスで display を指定すると勝ってしまう。**

   2026-08-22、これで半日溶かした。症状は「ログインしても画面から動けない」——
   実際は**ログインは成功し、アプリも描画されていて、ログイン画面が消えていなかっただけ。**
   ⚠️ エラーは1つも出ないので、**例外を追いかけても永久に見つからない。**
      「動かない」と言われたら、まず**本当に描画されていないのか**を確かめること。 */
[hidden] { display: none !important; }

/* ── ログイン ── */
#login {
  --l-bg: #F2F0EC; --l-card: #FFF; --l-line: #D5D0C6; --l-ink: #1B1A18;
  --l-sub: #6B6558; --l-gold: #9A7434; --l-err: #B42318;
  position: fixed; inset: 0; z-index: 9500; overflow: auto;
  display: grid; place-items: center; padding: 24px;
  background: var(--l-bg); color: var(--l-ink);
  font: 15px/1.6 -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", sans-serif;
  -webkit-text-size-adjust: 100%;   /* ⚠️ スマホで勝手に文字が拡大されるのを止める */
}
#login .cbcard {
  width: 100%; max-width: 360px; background: var(--l-card); border: 1px solid var(--l-line);
  border-radius: 12px; padding: 28px 24px; box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
#login h1 { margin: 0; font-size: 20px; letter-spacing: .02em; font-weight: 600; }
#login .cbsub { margin: 4px 0 22px; color: var(--l-sub); font-size: 13px; }
#login label { display: block; margin-bottom: 14px; font-size: 13px; color: var(--l-sub); }
#login input {
  width: 100%; margin-top: 6px; padding: 10px 12px; font-size: 16px;  /* 16px 未満だと iOS が拡大する */
  border: 1px solid var(--l-line); border-radius: 8px; background: #FFF; color: var(--l-ink);
}
#login input:focus { outline: 2px solid var(--l-gold); outline-offset: -1px; border-color: var(--l-gold); }
#login button {
  width: 100%; padding: 11px; font-size: 15px; font-weight: 600; cursor: pointer;
  border: 0; border-radius: 8px; background: var(--l-gold); color: #FFF;
}
#login button:disabled { opacity: .6; cursor: default; }
#login .cberr { margin: 14px 0 0; color: var(--l-err); font-size: 13px; }
#login .cbfoot { margin: 18px 0 0; font-size: 12px; color: var(--l-sub); }
#login .cbfoot a { color: var(--l-sub); }

/* ── 見出しの右端（自分の名前・保存の様子・ログアウト）──
   ⚠️ 試作の <header> の中に足す。別の場所に浮かせると、盤面の下の
      操作バー（add.css の position:fixed）と重なって押せなくなる。 */
#cbme { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#cbwho { white-space: nowrap; }
/* ⚠️ **保存できたかどうかは、必ず目に見える所に出す。**
   試作のトーストは「試作なので書き戻しません」と言うので、本番では別に名乗る場所が要る。 */
#cbnet {
  font-size: 11px; line-height: 1.4; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--line, #D5D0C6); color: var(--sub, #6B6558); white-space: nowrap;
}
#cbnet[data-s="ok"] { border-color: #B7D9C2; background: #F1F8F3; color: #2E6B45; }
#cbnet[data-s="ng"] { border-color: #E5B9B4; background: #FBF2F1; color: #B42318; }
.cbout {
  font-size: 11px; padding: 3px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line, #D5D0C6); background: transparent; color: var(--sub, #6B6558);
}