/* Kaname 共有シェル（K4-S3）——ブランドトークン＋共通ベース＋サイドメニューレイアウト。
 * 設計原本: docs/design/k4s3-shell-design.md（確定モック=docs/design/mockups/k4s3-shell/mock-a.html 改訂 4）。
 * 読み込み規約: 各アプリの index.html はこの <link> をインライン <style> より前に置く
 * （アプリ側の上書きが常に後勝ちになるカスケード順を固定する）。
 * 配信: platform 静的フォールバック（src/web/mtServer.ts の express.static）で /shared/shell.css。
 * 配色は 4 桁アルファ hex（#8884 等）＋ color-scheme で light/dark 両対応（従来慣行を継承）。 */
:root {
  color-scheme: light dark;
  --accent: #34568b;        /* 既定=Kaname 藍。各アプリが <style> 冒頭で上書きする */
  --accent-weak: #34568b14; /* accent の淡色（ナビ活性・ブランドタイル地）——accent とペアで上書き */
  --ok: #2e8b57;
  --danger: #c0392b;
  --warn: #b8860b;
  --nav-w: 220px;
}
* { box-sizing: border-box }
body { margin: 0; font-family: system-ui, sans-serif; font-size: 15px; line-height: 1.55 }
h1 { font-size: 1.25rem }
h2 { font-size: 1.05rem; border-bottom: 1px solid #8883; padding-bottom: .25rem; margin: 1.3rem 0 .6rem }
.row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap }
input, select, textarea { font: inherit; padding: .4rem .55rem; border: 1px solid #8886;
  border-radius: 7px; background: transparent; color: inherit }
/* リサイズハンドルの横ドラッグはインライン幅を書き width:100% に勝つ（2026-08-20 実画面報告:
   エディタ 2 カラム突き破り）——防御の主役は resize:vertical（ドラッグは height しか書かなくなる）。
   max-width:100% は JS 等がインライン幅を書く経路の保険で、祖先の min-width:0 が保たれている場合に
   効く（grid/flex 子に textarea を置くコンテナは min-width:0 とセットにすること——.editor-grid の例） */
textarea { width: 100%; max-width: 100%; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem }
button { font: inherit; padding: .4rem .95rem; border-radius: 7px; border: 1px solid transparent;
  background: var(--accent); color: #fff; cursor: pointer }
button.sec { background: transparent; color: inherit; border-color: #8886 }
button.danger { background: var(--danger); color: #fff }
button:hover { filter: brightness(1.08) }
button:disabled { opacity: .5; cursor: default; filter: none }
table { border-collapse: collapse; width: 100%; font-size: .85rem }
th { text-align: left; font-size: .72rem; opacity: .6; font-weight: 600 }
th, td { padding: .42rem .55rem; border-bottom: 1px solid #8882 }
tbody tr:hover { background: #8881 }
.muted { color: #8888 }
.pill { display: inline-block; border: 1px solid #8885; border-radius: 999px; padding: .02rem .55rem; font-size: .74rem }
.card { border: 1px solid #8883; border-radius: 10px; padding: .85rem 1rem; margin: .5rem 0; box-shadow: 0 1px 2px #0001 }
.hidden { display: none }
.ok { color: var(--ok) }
.ng { color: var(--danger) }
.warn { color: var(--warn) }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .83rem;
  background: #8881; padding: .05rem .3rem; border-radius: 5px }

/* 状態ドット（稼働中/停止/エラー等の汎用表示） */
.st { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; white-space: nowrap }
.st::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; flex: none }
.st-running { color: var(--ok) }
.st-stopped { color: #888 }
.st-error { color: var(--danger) }
.st-degraded { color: var(--warn) }
/* pending＝発報プロセスがこの変更をまだ取り込んでいない（保存直後の一瞬・worker 停止中） */
.st-pending { color: var(--warn) }

/* 有効/無効トグル（クリック配線はアプリ側） */
.switch { position: relative; width: 2.1rem; height: 1.15rem; border-radius: 999px; background: #8885;
  transition: background .15s; cursor: pointer; display: inline-block; vertical-align: middle; flex: none }
.switch::after { content: ""; position: absolute; left: .12rem; top: .12rem; width: .9rem; height: .9rem;
  border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 2px #0003 }
.switch.on { background: var(--ok) }
.switch.on::after { left: calc(100% - 1.02rem) }

/* 未認証時のヘッダに置くロゴタイプ（マーク＋アプリ名＋説明・4 アプリ共通）。
   シェルをマウントすると #chrome ごと隠れ、ブランドはサイドメニューの .k-brand が担う。
   マークは shared/icons.js が data-mark 属性を読み込み時に展開する（定義の二重化を避けるため）。 */
.lockup { display: flex; align-items: center; gap: .55rem }
/* ⚠ .hidden はこの規則より前（上）にあるので、display を持つクラスは必ず .hidden との
   組み合わせを書き足すこと——さもないと hidden を付けても消えない。K4-S3 で #welcomeBanner が
   同じ罠を踏んでおり、今回も platform の #chrome が消えず [購入] ボタンのクリックを
   妨げて統合テストが落ちた（2026-07-30・原因特定まで実測 4 回）。 */
.lockup.hidden { display: none }
.lockup > .lmark { flex: none; color: var(--accent); background: var(--accent-weak);
  border: 1px solid #8883; border-radius: 9px; width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center }
.lockup > .lmark > svg { width: 1.25rem; height: 1.25rem; display: block }

/* ---- シェルレイアウト（body.shell / 各 k-* は shell.js の KanameShell.mount が生成・付与） ---- */
body.shell { display: grid; grid-template-columns: var(--nav-w) 1fr; min-height: 100vh }
/* min-width: 0＝grid 1fr 子の暗黙 min-width:auto を殺す（3-6④——長い無改行内容が列幅を押し広げ
   レイアウトを突き破る同型ハザード。hidori .editor-grid で実画面顕在化済みの shell 層対策） */
.k-main { max-width: 1080px; width: 100%; margin-inline: auto; padding: 1rem 1.6rem 2.5rem; min-width: 0 }

/* サイドメニュー（確定案 A: ライト地・活性=左アクセントバー） */
.k-nav { display: flex; flex-direction: column; gap: .15rem; padding: .9rem .7rem .7rem;
  background: #8881; border-right: 1px solid #8883; position: sticky; top: 0; height: 100vh; overflow-y: auto }
.k-brand { display: flex; align-items: center; gap: .55rem; padding: .1rem .35rem .75rem }
/* ブランドマークは SVG（shared/icons.js が入れる・確定案 C＝丸に三つ引き基準）。
   線画なので地色と枠線はそのまま使える——塗りタイル案を採っていたら枠が二重になっていた。
   色は currentColor 経由で --accent に従う。 */
.k-logo { color: var(--accent); background: var(--accent-weak); border: 1px solid #8883;
  border-radius: 9px; width: 2.3rem; height: 2.3rem; display: grid; place-items: center; flex: none }
.k-logo > svg { width: 1.35rem; height: 1.35rem; display: block }
.k-brand b { font-size: 1.02rem; display: block; line-height: 1.2 }
.k-sub { font-size: .67rem; opacity: .6; display: block }
a.k-item { display: flex; align-items: center; gap: .5rem; padding: .46rem .65rem; border-radius: 8px;
  color: inherit; text-decoration: none; font-size: .92rem; border-left: 3px solid transparent; cursor: pointer }
a.k-item:hover { background: #8882 }
a.k-item.active { background: var(--accent-weak); border-left-color: var(--accent);
  color: var(--accent); font-weight: 600 }
/* アイコンは幅を揃えて左端を縦に通す。ラベルは 1 行で省略（長いアプリ名＋「表示中」タグでも
   2 行に折り返さない——例「JKK 先着順あき家 表示中」が nav 幅 220px を超えるケース） */
.k-ico { flex: none; width: 1.2rem; height: 1.2rem; display: grid; place-items: center }
.k-ico > svg { width: 1.05rem; height: 1.05rem; display: block }
/* アプリ色（アプリスイッチャーと platform のアプリ一覧カード）。値は各アプリの :root 上書きと同値。
   絵文字は固有色を持っていたので、SVG 化でアプリの見分けが「形」だけになると弱くなる。
   ここを埋めておくと、アプリを増やしても 1 行足すだけで済む。 */
[data-app="kaname"], [data-app="koyomi"] { color: #34568b }
[data-app="hidori"] { color: #b3541e }
[data-app="hojokin"] { color: #2e8b57 }
[data-app="jkk"] { color: #7b4b94 }
.k-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.k-tag { margin-left: auto; flex: none; font-size: .62rem; opacity: .55; border: 1px solid #8885;
  border-radius: 999px; padding: 0 .4rem; white-space: nowrap }
a.k-item.disabled { opacity: .45; pointer-events: none }
.k-cap { font-size: .68rem; letter-spacing: .06em; opacity: .55; margin: .85rem .5rem .25rem }
.k-grow { flex: 1 }
.k-user { border-top: 1px solid #8883; padding: .65rem .35rem 0; font-size: .78rem }

/* 狭幅用トップバー（ワイドでは非表示・k-backdrop はハンバーガー展開時の遮蔽） */
.k-topbar { display: none; align-items: center; gap: .6rem; padding: .5rem .8rem;
  background: #8881; border-bottom: 1px solid #8883; position: sticky; top: 0; z-index: 10 }
.k-topbar button { background: transparent; border: 1px solid #8886; color: inherit; padding: .2rem .6rem }
/* 狭幅トップバーのブランド行（マーク＋名）。名は 1 行で省略する——390px でブランド名が
   2 行に折り返す不具合を LP モックで踏んだので、ここでも同じ手当てをしておく。 */
.k-brandline { display: flex; align-items: center; gap: .4rem; min-width: 0 }
.k-brandline .k-brandtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.k-tico { flex: none; color: var(--accent); display: grid; place-items: center }
.k-tico > svg { width: 1.15rem; height: 1.15rem; display: block }
.k-backdrop { display: none; position: fixed; inset: 0; background: #0006; z-index: 15 }

/* 狭幅=ハンバーガー＋オーバーレイ（モック裁定 1 巡目） */
@media (max-width: 768px) {
  body.shell { display: block }
  .k-topbar { display: flex }
  .k-nav { position: fixed; inset: 0 auto 0 0; width: var(--nav-w); z-index: 20;
    background: Canvas; transform: translateX(-105%); transition: transform .18s ease }
  .k-nav.open { transform: none }
  body.k-navopen .k-backdrop { display: block }
  .k-main { padding: .9rem 1rem 2rem }
}