/* sss-board 共通スタイル（C-01・S-01〜S-05）。外部フォント・外部 URL は使わない（CSP default-src 'self'） */
:root {
  --bg: #f7f7f8;
  --panel: #ffffff;
  --text: #1f2328;
  --muted: #6b7280;
  --line: #e5e7eb;
  --accent: #2563eb;
  --danger: #dc2626;
  --warn: #b45309;
}
* { box-sizing: border-box; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif; font-size: 15px; }
h1, h2 { margin: 0; font-weight: 600; }
.brand { font-size: 16px; letter-spacing: 0.02em; }
button, input { font: inherit; }

/* ---- 一覧・ログイン（index.html） ---- */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--panel); border-bottom: 1px solid var(--line); }
.page { max-width: 880px; margin: 24px auto; padding: 0 16px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 20px; }
.panel h2 { font-size: 16px; margin-bottom: 12px; }
#login-form { display: flex; gap: 8px; }
#login-form input { flex: 1; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text); cursor: pointer; }
.btn:hover { background: #f3f4f6; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: #1d4ed8; }
.btn.danger { color: var(--danger); }
.btn[disabled] { opacity: 0.5; cursor: default; }
.list-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.boards { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.board-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; }
.board-row .name { flex: 1; font-weight: 500; text-decoration: none; color: var(--text); }
.board-row .meta { color: var(--muted); font-size: 12px; }
.empty { color: var(--muted); text-align: center; padding: 24px 0; }
.message { min-height: 1.4em; color: var(--danger); margin: 8px 0 0; }
.message.center { text-align: center; padding: 40px 16px; }
/* 編集・閲覧ページの「ボードが見つかりません」は fixed の .canvas（#app）に覆われて「一覧へ戻る」が押せなかった（T-047・E2E-02 で発見）。
   バー（44px・z-index 10）の下に出し、キャンバス層より前に置く */
.editor-bar ~ .message.center { position: relative; z-index: 5; margin-top: 44px; }
.usage { max-width: 880px; margin: 8px auto 24px; padding: 0 16px; color: var(--muted); font-size: 12px; }
.usage.warn { color: var(--warn); }

/* ---- 編集・閲覧（board.html / view.html） ---- */
.editor-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; background: var(--panel); border-bottom: 1px solid var(--line); }
.editor-bar .title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.editor-bar .title[role="button"] { cursor: text; border-radius: 6px; padding: 4px 6px; }
.editor-bar .title[role="button"]:hover, .editor-bar .title[role="button"]:focus-visible { background: var(--bg); outline: none; box-shadow: 0 0 0 1px var(--line) inset; }
.editor-bar .title-note { color: var(--danger); font-size: 12px; white-space: nowrap; }
.editor-bar .title-note[hidden] { display: none; }
.editor-bar .title-input { flex: 1; min-width: 0; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; }
.editor-bar .status { color: var(--muted); font-size: 12px; white-space: nowrap; }
.editor-bar .status.error { color: var(--danger); }
.editor-bar .size-warn { color: var(--warn); font-size: 12px; white-space: nowrap; }
.editor-bar .size-warn[hidden] { display: none; }
.badge { font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; }
.canvas { position: fixed; top: 44px; left: 0; right: 0; bottom: 0; }
/* Miro 風の方眼（T-057・FR-EDIT-010）。Excalidraw の canvas は transparent、線はここ。変数は grid.js が当てる（細線・濃線の間隔と原点） */
:root { --grid-minor-color: #e6e7ea; --grid-major-color: #d5d7dc; }
.canvas.grid {
  background-color: var(--bg);
  background-image:
    linear-gradient(to right, var(--grid-major-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-major-color) 1px, transparent 1px),
    linear-gradient(to right, var(--grid-minor-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-minor-color) 1px, transparent 1px);
  background-size:
    var(--grid-major, 100px) var(--grid-major, 100px),
    var(--grid-major, 100px) var(--grid-major, 100px),
    var(--grid-minor, 20px) var(--grid-minor, 20px),
    var(--grid-minor, 20px) var(--grid-minor, 20px);
  background-position: var(--grid-x, 0) var(--grid-y, 0);
}
/* ツールバーを画面左に縦置き（T-059・NFR-USE-004・Miro と同じ位置）。Excalidraw の DOM は触らず CSS だけで動かす。
   transform を使わない（使うと中の HintViewer の fixed が画面基準でなくなる）。プロパティパネル（.App-menu_top__left）はツールバーの右へ */
/* PC の編集ページだけ（閲覧 .excalidraw--view-mode とモバイル UI .excalidraw--mobile には当てない・レビュー NIT-1/3）。
   下端は 64px 空けてズーム／undo の島（.App-menu_bottom＝bottom 1rem＋44px）と重ねない。中央寄せは子の margin:auto（safe center 相当）で、
   入り切らないときは上から並ぶ（上端がバーの下に隠れない・レビュー R1 MUST-1）。overflow は付けない（付けると横も切り抜かれ、右に開く
   括弧メニュー・「その他のツール」が消える・R2 MUST-1）。低い画面は下の @media で zoom（transform と違い fixed の基準を変えない）で縮めて収める */
.excalidraw:not(.excalidraw--view-mode):not(.excalidraw--mobile) .App-toolbar-container { position: fixed; left: 12px; top: 44px; bottom: 64px; display: flex; flex-direction: column; align-items: flex-start; pointer-events: none; z-index: 4; }
/* 描画・ドラッグ中は Excalidraw が --ui-pointerEvents を none にする（レビュー NIT-2）。固定値で auto にしない */
.excalidraw:not(.excalidraw--view-mode):not(.excalidraw--mobile) .App-toolbar-container > * { pointer-events: var(--ui-pointerEvents, auto); }
.excalidraw:not(.excalidraw--view-mode):not(.excalidraw--mobile) .App-toolbar { padding: 4px; margin: auto 0; flex: none; }
.excalidraw:not(.excalidraw--view-mode):not(.excalidraw--mobile) .App-toolbar .Stack.Stack_horizontal { grid-auto-flow: row; grid-auto-columns: auto; justify-items: center; }
.excalidraw:not(.excalidraw--view-mode):not(.excalidraw--mobile) .App-toolbar__divider { width: auto; height: 1px; margin: 4px 2px; align-self: stretch; }
.excalidraw:not(.excalidraw--view-mode):not(.excalidraw--mobile) .App-toolbar .HintViewer { position: fixed; left: 50%; right: auto; top: auto; bottom: 60px; transform: translateX(-50%); width: max-content; max-width: 70vw; }
.excalidraw:not(.excalidraw--view-mode):not(.excalidraw--mobile) .App-toolbar .App-toolbar__extra-tools-dropdown { top: auto; bottom: 0; left: 3rem; right: auto; margin-top: 0; }
.excalidraw:not(.excalidraw--view-mode):not(.excalidraw--mobile) .App-menu_top__left { margin-left: 56px; }
/* 低い画面（ノート PC でブラウザ込み 600〜700px）は縮めて 44px〜下 64px の間に収める。zoom は Chrome/Edge（NFR-COMP-001 の対象）で効く */
@media (max-height: 720px) { .excalidraw:not(.excalidraw--view-mode):not(.excalidraw--mobile) .App-toolbar { zoom: 0.85; } }
@media (max-height: 620px) { .excalidraw:not(.excalidraw--view-mode):not(.excalidraw--mobile) .App-toolbar { zoom: 0.72; } }
/* 括弧ボタン（T-058）: Excalidraw のツールバーに並ぶので ToolIcon と同じ寸法・見た目。メニューは右に横並びで開く（T-059 で左縦になったため） */
.sss-bracket-tool { position: relative; display: inline-flex; }
.sss-bracket-btn { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: var(--border-radius-lg, 0.5rem); background: transparent; color: var(--icon-fill-color, #1b1b1f); cursor: pointer; }
.sss-bracket-btn:hover { background: var(--button-hover-bg, #f1f0ff); }
.sss-bracket-btn[aria-expanded="true"] { background: var(--color-primary-light, #e0dfff); }
.sss-bracket-icon { font: 600 15px/1 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: -0.05em; }
.sss-bracket-tool .menu-list { top: 0; left: 3rem; grid-auto-flow: column; z-index: 30; }
.menu { position: relative; }
.menu-list { position: absolute; top: 36px; left: 0; display: grid; gap: 2px; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
.menu-list[hidden] { display: none; }
.menu-list button { min-width: 56px; }
.dialog { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(0, 0, 0, 0.3); }
.dialog[hidden] { display: none; }
.dialog .box { width: min(520px, 92vw); background: var(--panel); border-radius: 8px; padding: 20px; display: grid; gap: 10px; }
.dialog .link { width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 6px; font-family: ui-monospace, monospace; font-size: 13px; }
.dialog .row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.dialog .dialog-title { margin: 0; font-weight: 600; }
.dialog .dialog-body { margin: 0; color: var(--muted); line-height: 1.6; }

/* T-001 spike 時点の最小版と互換（#app を全面に） */
body.spike #app { position: fixed; inset: 0; }