/* ============================================================================
 * FVJAPAN CRM — 基底（リセット・本文・数値・読み上げ専用・フォーカス）
 *
 * 出典: web/app/globals.css §D と、Tailwind v4 の preflight のうち
 * 部品の見た目が依存していた分だけ。値は tokens.css の変数でのみ参照する。
 * ========================================================================== */

/* ---- リセット（最小限）--------------------------------------------------
 * Tailwind 版の部品は preflight（余白ゼロ・見出しの文字サイズ継承・ボタンの面なし 等）を
 * 前提に組まれていた。これが無いと同じクラスを移しても寸法がずれる
 * （e2e/geometry.spec.ts が 32px / 36px を実測している）ので、依存していた分だけ移す。 */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid var(--border);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-family: var(--font-ui);
  height: 100%;
  /* 固定のトップバー（l-topbar・sticky）の裏にフォーカスや `#…` の着地点を隠さない（WCAG 2.2 2.4.11 Focus Not Obscured）。
     Tab で上へ戻ったとき・`#customer-q4` へ着地したとき、ブラウザはこの分だけ下に止める。
     `#…` の着地点に scroll-margin-top を足さない（足し算になって二重に空く）。**Tab のスクロールにはこれだけでは足りない**
     （画面の端にかかった欄を「もう見えている」と判断して動かさない）ので、フォームの欄は画面 CSS が scroll-margin も持つ（customers.css） */
  scroll-padding-top: calc(var(--topbar-h) + calc(var(--spacing) * 4));
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

ol, ul, menu {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: inherit;
}

b, strong {
  font-weight: bolder;
}

img, svg, video, canvas {
  display: block;
  vertical-align: middle;
}

button, input, select, optgroup, textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  background-color: transparent;
  border-radius: 0;
}

button,
input:where([type="button"], [type="reset"], [type="submit"]) {
  appearance: button;
}

table {
  border-collapse: collapse;
  text-indent: 0;
  border-color: inherit;
}

summary {
  display: list-item;
}

[hidden]:where(:not([hidden="until-found"])) {
  display: none !important;
}

/* ---- 本文 ---------------------------------------------------------------- */
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--background);
  color: var(--foreground);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

/* ---- 密度規約（docs/DESIGN.md §6）------------------------------------------
   セル側の padding だけだと中身が行高を押し広げてしまい、
   コンパクト指定でも 41px になっていた（globals.css §D の実測）。表の属性で縦 padding を決める。 */
table[data-density="compact"] :is(th, td) {
  padding-block: calc(var(--spacing) * 1); /* 4px */
}
table[data-density="standard"] :is(th, td) {
  padding-block: calc(var(--spacing) * 2); /* 8px */
}

/* ---- 中止（CXL）の斜線 -------------------------------------------------------
   未着手（gray-200）と明度が近く色では区別できないため、パターンで差をつける
   （docs/DESIGN.md §10 色だけで意味を伝えない）。 */
.stripe-cxl {
  background: repeating-linear-gradient(
    135deg,
    var(--color-gray-400) 0 var(--stripe-w),
    var(--color-gray-200) var(--stripe-w) calc(var(--stripe-w) * 2)
  );
}

/* ---- 数値は必ず桁を揃える（金額・件数・電話番号・顧客番号・日付）------------ */
.num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

/* ---- 読み上げ専用 -------------------------------------------------------------
   Tailwind の `sr-only` と同じ宣言。**display:none にしない** —— 読み上げにも届かなくなり、
   RestrictedAction の理由（aria-describedby の参照先）が空になる。 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
}
/* ↑ 1px / -1px は「見えないが寸法0にしない」ための定型（Tailwind `sr-only` の値そのもの）。
   トークンではなく技法の一部なので変数にしない。 */

/* ---- スキップリンク（web/components/layout/main-focus.tsx の SkipToMain）----------
   **DOM の最初のフォーカス可能な要素**に置く。普段は sr-only、フォーカスが当たった瞬間だけ
   左上に出す。display:none で隠さない（フォーカスを受け取れなくなる）。
   行き先は main#main-content（e2e の DOM 契約）。
   下の 1px / -1px は上の .sr-only と同じ定型。 */
.skip-link:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
}
.skip-link:focus {
  position: absolute;
  top: calc(var(--spacing) * 2);
  left: calc(var(--spacing) * 2);
  z-index: 50;
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  box-shadow: var(--shadow-3);
}

/* ============================================================================
 * フォーカスは常時可視。outline: none を単体で書かない（docs/DESIGN.md §10）。
 *
 * 出典は web/app/globals.css §D の同名の2規則。**理由は向こうのコメントが一次情報**で、
 * ここにはその趣旨だけを残す:
 *
 *   ⑴ Tailwind 版では「@layer の外に置く」ことが要点だった（shadcn 由来の `.outline-none` に
 *      負けないため）。素の CSS に層は無いが、**部品側で outline を消す宣言を書かない**ことで
 *      同じ状態を保つ。部品 CSS に `outline: none` を足したら、この規則が負ける。
 *
 *   ⑵ `* { outline-color }` が要る理由: ボタン・入力欄は `transition` に outline-color を含む。
 *      フォーカスされていないあいだの outline-color は初期値の currentColor なので、
 *      この規則が無いと focus した瞬間から 150ms かけて「文字色 → --color-focus」へ遷移し、
 *      **白文字のボタン（default / ai）ではその間だけ輪郭が白**＝見えない。
 *      1日数百件をキーボードで捌く利用者は連続で Tab を押すので、事実上フォーカスが見えなくなる
 *      （globals.css に 2026-09-10 の実測値あり）。始点と終点を同じ色にして遷移の余地を無くす。
 *
 *   :focus-visible（詳細度 0,1,0）が *（0,0,0）に勝つので、上書きの向きも正しい。
 *   見張りは web/e2e/a11y.spec.ts「フォーカスの輪郭は --color-focus で描かれる」
 *   （移植後も同じ実測を当てる必要がある）。
 * ========================================================================== */
* {
  outline-color: var(--color-focus);
}

:focus-visible {
  outline: var(--focus-outline-w) solid var(--color-focus);
  outline-offset: var(--focus-outline-offset);
}