/* ============================================================================
 * layout.css — 画面全体の構造
 * ----------------------------------------------------------------------------
 * ■ 設計の核
 *   スマホ縦持ちで「水槽を見たまま操作する」ことが最優先。
 *   .viewport（ログ＋水槽＋メーター）を position:sticky で上部に固定し、
 *   その下に操作パネルを流す。スクロールすると水槽だけが縮む。
 *
 *   高さは dvh を使っている。iOS Safari はアドレスバーの伸縮で vh がずれるため、
 *   vh に戻すと水槽の下端が隠れる。ここを変更するときは必ず実機で確認すること。
 *
 * ■ ブレークポイント
 *   900px 以上で2カラムに切り替える。それ未満はすべて1カラム。
 * ========================================================================== */

/* ── 上部バー ──────────────────────────────────────────────────────── */
.topbar{
  display:flex;align-items:center;gap:12px;
  padding:calc(10px + env(safe-area-inset-top)) 16px 10px;
  border-bottom:1px solid var(--line);
  background:var(--hull);
}
.brand{
  font-family:var(--f-display);font-weight:700;font-size:19px;letter-spacing:.04em;
  display:flex;align-items:baseline;gap:9px;
}
.brand small{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;
  color:var(--chalk-dim);font-weight:400;
}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.points{font-family:var(--f-mono);font-size:16px;color:var(--amber);white-space:nowrap}

/* 検証用の速度切替。本番URLでは ui.js が hidden のままにする */
.dev{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--chalk-dim)}
.dev[hidden]{display:none}
.dev select{
  background:var(--hull-raise);border:1px solid var(--line);color:var(--chalk);
  font-family:var(--f-mono);font-size:11px;padding:4px 6px;border-radius:6px;
}

/* ── 固定される観察エリア ──────────────────────────────────────────── */
.viewport{
  position:sticky;top:0;z-index:20;
  background:var(--hull);
  padding:8px 12px 10px;
  border-bottom:1px solid var(--line);
  box-shadow:0 12px 24px -18px rgba(0,0,0,.9);
}

/* ── 操作エリア ────────────────────────────────────────────────────── */
.controls{
  padding:14px 12px calc(40px + env(safe-area-inset-bottom));
  max-width:640px;margin:0 auto;
  /* 固定水槽の下に十分スクロールできる余白を確保する。
     これが足りないと、最後のパネルを開いても画面下に隠れる */
  min-height:70vh;
}

/* ── 900px 以上：2カラム ───────────────────────────────────────────── */
@media (min-width:900px){
  .brand{font-size:23px}
  .topbar{padding:14px 24px}

  body{
    display:grid;
    grid-template-columns:1fr 380px;
    grid-template-areas:"top top" "view side";
    align-items:start;
    max-width:1280px;margin:0 auto;
    column-gap:20px;padding:0 20px 40px;
  }
  .topbar{grid-area:top;padding-left:0;padding-right:0}
  .viewport{
    grid-area:view;position:sticky;top:16px;
    padding:0;border:none;box-shadow:none;background:none;
  }
  .controls{grid-area:side;padding:0;min-height:0;max-width:none}
  /* 水槽の高さは tank.css 側の同じブレークポイントで指定している。
     ここに書くと、後から読み込まれる tank.css に打ち消されるので書かないこと。 */
}