/* リセット・地・スクロール。装飾はここに置かない（それは components.css）。 */

* { box-sizing: border-box; }

/* ページ自体は動かさない。動くのは中の .og-scroll だけ。
   ここを開けておくと、スマホでキーボードが出たときに端末がページごと
   スクロールして本文を持ち上げ、枠・タブ・浮いている面がまとめてずれる
   （＝入力中に画面が崩れる）。overscroll-behavior はゴムの跳ね返りも止める。 */
html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  /* ダブルタップの拡大を止める。viewport の user-scalable=no は iOS Safari が
     無視するので、そちらだけでは効かない（`manipulation` は指のスクロールと
     つまむ操作は残したまま、ダブルタップの縮尺変更だけを落とす）。 */
  touch-action: manipulation;
  /* 横向きにしたときに端末が勝手に本文を太らせるのを止める。
     ここの寸法は 390px 幅を基準に決まっているので、文字だけ膨らむと崩れる。 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html {
  background: var(--bg);
  color-scheme: light dark;
}

/* テーマを手で固定したら、OS が描く部品（日付ピッカー・プルダウンの一覧・
   スクロールバー）もそちらに合わせる。既定の `light dark` のままだと、
   暗い画面の上に真っ白なカレンダーが開く。 */
[data-og-theme="light"] { color-scheme: light; }
[data-og-theme="dark"] { color-scheme: dark; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hi); text-decoration: underline; }

button {
  font-family: var(--font-sans);
  cursor: pointer;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
}

input, textarea, select {
  font-family: var(--font-sans);
  color: inherit;
}

input::placeholder, textarea::placeholder { color: inherit; opacity: .78; }

/* 日付・時刻の欄が iOS で器からはみ出るのを止める（2026-09-05。依頼主「マイルストーン
   編集画面の date と end date の入力欄がスマホだとはみ出ている」）。

   `og-field` は `width: 100%; min-width: 0`（`box-sizing: border-box` も上で全部に
   当たっている）を渡しているので、**Chromium では既に器ぴったりに収まる**（実測 390px
   で器 350px・欄 350px）。**iOS Safari だけが違う**: `input[type=date]` は既定の
   `-webkit-appearance` のまま「中身ぶんの幅」を主張し、値を中央に寄せるので、
   `width: 100%` を渡しても器を越えて右へ出る。3 つそろえて初めて収まる。

   - `appearance: none` … 中身ぶんの幅の主張を落とす
   - `::-webkit-date-and-time-value { text-align: left }` … 値を左に寄せる。
     **これが本体**（中央寄せのままだと、iOS は寄せるための余白を幅に足す）
   - `min-width: 0` … flex / grid の子として縮めることを許す

   `appearance: none` にしても**日付ピッカーは出る**（タップで OS のホイールが開く）。
   ここで消えるのは枠の見た目だけで、器の見た目は `og-field` が持っている。
   `date` だけでなく `datetime-local` / `time` / `month` も同じ癖なので、まとめて当てる。 */
input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  max-width: 100%;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value,
input[type="month"]::-webkit-date-and-time-value {
  text-align: left;
}

button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

img { max-width: 100%; display: block; }

/* 影は存在しない。ぼかしも使わない。宣言として明示しておく。 */
* { box-shadow: none !important; }

.og-scroll { -ms-overflow-style: none; scrollbar-width: thin; }

/* スマホでは横スクロールを作らない。縦だけ。
   長い URL や折り返さない一続きの文字が入ると、入れ物が横にも伸びて
   本文が画面の外へ逃げる（読むために横へ払うことになる）。
   `!important` なのは、面の本文が og.js / overlays.js のインライン style で
   `overflow: auto`（＝縦横とも auto）を持っているため。条件は app.js の MEDIA
   ── `(min-width: 880px) and (hover: hover) and (pointer: fine)` ── の**否定**で、
   窓が狭いか、指で触る画面（iPad を横にした 1024px も含む）ならこちら。
   デスクトップの盤面だけが横に流れてよい。片方だけ直すと枠と食い違う。 */
@media (max-width: 879px), (hover: none), (pointer: coarse), (pointer: none) {
  .og-scroll { overflow-x: hidden !important; }
}

/* 折り返す場所の無い一続きの文字（URL・型番）は、どこでも折る。
   横スクロールを閉じただけだと、はみ出した分がただ切れて読めなくなる。 */
.og-wrap-anywhere { overflow-wrap: anywhere; word-break: break-word; min-width: 0; }

.og-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.og-scroll::-webkit-scrollbar-thumb { background: var(--neutral-mid); }
.og-scroll::-webkit-scrollbar-track { background: transparent; }

.og-vis-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

#og-app {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* タブバーの横スクロール。`.og-scroll` は overflow-x を潰しているので使えない
   （タブが増えたら横へ流す、が効かなくなる）。専用に持つ。 */
.og-tabbar__scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.og-tabbar__scroll::-webkit-scrollbar { display: none; }

/* 面を選ぶピルの帯。4枚は 375px に収まらないので横へ流す。
   `.og-scroll` は overflow-x を潰しているので、タブバーと同じく専用に持つ。 */
.og-pill-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.og-pill-scroll::-webkit-scrollbar { display: none; }

/* 繋がっていないことを言う帯。窓の上端に貼る（枠の並びを崩さないため）。
   出るのは落ちているあいだだけで、普段は display:none。
   safe-area のぶんだけ内側に押し下げる（ノッチの下に文字が潜らないように）。 */
#og-offline-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: calc(4px + var(--safe-top, 0px)) 12px 4px;
  background: var(--ink);
  color: var(--on-ink);
  font: 700 10px var(--font-mono);
  letter-spacing: .1em;
  pointer-events: none;
}

/* 下へ引いて読み直すときの印。**枠**（.og-frame）に置く ── 本文の箱は
   タブを描くたびに空にされるので、その中に置くと消える。
   本文が下へずれた隙間にこれが覗く。引いていないあいだは見えない。

   置く高さは**上端の余白より下**。文字を上端に置いたら iOS のぼかしに入って
   読めなかったので、印そのものもぼかしの帯より下へ逃がす。 */
.og-pull {
  position: absolute;
  top: calc(var(--safe-top, 0px) + var(--top-buffer, 24px)); left: 0; right: 0;
  height: 34px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  opacity: 0;
  transition: opacity var(--dur-tap, 120ms) linear;
  pointer-events: none;
}
/* 円弧は引きしろに連動して閉じる（JS が stroke-dashoffset を動かす）。
   閉じ切ってから離すと、そこからは回り続ける。 */
.og-pull svg { transition: transform var(--dur-tap, 120ms) linear; }
.og-pull--busy svg { animation: og-spin 900ms linear infinite; }
@keyframes og-spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }