/* =====================================================================
   neutral_auth.css — **ロール非依存の standalone 画面**の「ニュートラル」系統
   ・従業員アプリ（ターコイズ #00B7A7）でも管理画面（森林緑 #1F3A2E）でもない第3系統
   ・アクセント = スレートネイビー（信頼・手続き）
   ・全ルールを .na スコープに閉じ込める（:root にトークンを漏らさない＝共有ページ/
     email_verify_action の verifyEmail 側〔ターコイズ〕に一切影響させない）
   ・外部フォント CDN は使わない（フォールバックスタックで描画＝computed font で検証）
   ・DesignSync handoff（_request_password_reset）準拠。ブランド製品名は非表示（ユーザー確定 2026-07-10）

   ★適用範囲（タスクIX・2026-08-11 に拡大）:
     元は「パスワード再設定フロー（GL）専用」として作ったが、この系統の定義は
     **「ロールが確定していない／確定させたくない画面」**であり、同じ性質の画面が他にもあった。
       - GL: forgot_password.ejs ／ email_verify_action.ejs（mode=resetPassword）
       - IX: enterprise/consent_gate ／ consent_declined ／ service_restricted ／
             maintenance ／ legal/document
     いずれも管理者・メンバー・未ログインが横断して到達する（片方のブランドに寄せられない）。
     ファイル名は互換のため変更していない。
   ★IX の 5 画面が使う修飾（.na-card の幅・.na-btn-quiet・.na-icon.is-stop/.is-time・
     .na-alert 等）は各ビューの in-page <style> に置いた。この系統の**基礎**（トークン・器・
     見出し・ボタン・リンク規則）だけがここにある。
   ===================================================================== */

.na{
  /* 面 */
  --n-bg:#EEF1F4; --n-surface:#FFFFFF;
  /* 文字 */
  --n-ink:#1F2A37; --n-ink-2:#4B5763; --n-ink-3:#6B7682;
  /* 罫線 */
  --n-line:#E2E7EC; --n-line-2:#C4CCD4;
  /* アクセント（スレートネイビー・中立） */
  --n-accent:#3D5A73; --n-accent-hover:#324B60; --n-accent-soft:#E9EEF3; --n-accent-ink:#FFFFFF;
  /* 状態文字色（赤ベタ背景は使わない・文字/枠色で表現） */
  --n-error:#B04A3A; --n-ok:#3E7C5A; --n-ok-soft:#E9F1EC; --n-warn:#9A6A2E; --n-warn-soft:#F5EEE1;
  /* 角丸・余白 */
  --n-r:12px; --n-r-2:8px;
  /* placeholder（handoff の #9AA3AD をトークン化） */
  --n-placeholder:#9AA3AD;
  /* 書体：外部 CDN を使わずフォールバックスタックで描画（Hiragino が実効プライマリ） */
  --n-font:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,system-ui,sans-serif;
  /* タイポ（最小 14px＝幅広い年齢層。handoff の 11.5/13px を 14px 下限へ引き上げ）。
     h1 は案C（ヘッダー廃止・見出し強化）で 26px（狭幅 24px）＝見出しが文脈の主役。 */
  --n-fs-h1:26px; --n-fs-lede:15px; --n-fs-body:15px; --n-fs-label:14px; --n-fs-small:14px;
  --n-shadow:0 1px 2px rgba(31,42,55,.05), 0 8px 24px rgba(31,42,55,.06);
  --n-focus:0 0 0 3px rgba(61,90,115,.28);
  --n-tap:48px;
}

/* ページ地色は body に直接当てず、フルページラッパ .na-page に持たせる
   （email_verify_action の verifyEmail 側の body 背景を侵さないため） */
.na-page{
  background:var(--n-bg); color:var(--n-ink);
  font-family:var(--n-font); font-size:var(--n-fs-body); line-height:1.7;
  -webkit-font-smoothing:antialiased;
  min-height:100vh; display:flex; flex-direction:column;
}

/* リンク色はボタン（.na-btn）を除外する。除外しないと .na a〔詳細度 0,1,1〕が
   .na-btn-primary〔0,1,0〕に勝ち、アンカーボタンの文字色がアクセント色になって
   同色背景に埋もれる（＝文字が見えなくなる。視覚ゲートで検出）。 */
.na a:not(.na-btn){color:var(--n-accent); text-decoration:none}
.na a:not(.na-btn):hover{color:var(--n-accent-hover); text-decoration:underline}
.na *{box-sizing:border-box}

/* レイアウト：中央1カラム */
.na-wrap{flex:1; display:flex; align-items:center; justify-content:center; padding:56px 20px 40px}
.na-card{width:100%; max-width:440px; background:var(--n-surface); border:1px solid var(--n-line);
  border-radius:var(--n-r); box-shadow:var(--n-shadow); padding:40px 40px 32px}

/* 中立ヘッダー（案C＝ヘッダー廃止・見出し強化・ユーザー確定 2026-07-10）:
   製品名・ロゴ・マークは出さず、アクセント短罫（44×3px）＋強い h1 のみ。
   短罫はアイコンのないフォーム状態（①依頼／③再設定）だけに置く＝アイコン付き状態
   （②送信完了／④完了／⑤期限切れ）は罫を出さずアイコンが先頭を担う（罫の下にアイコンが
   並ぶと罫線が誤表示に見えるため・ユーザー指摘対応）。実装フックは .na-rule。 */
.na-rule{width:44px; height:3px; background:var(--n-accent); border-radius:2px; margin:0 0 20px}

/* 見出し・案内 */
.na-hd{font-size:var(--n-fs-h1); font-weight:700; line-height:1.4; margin:0 0 10px; letter-spacing:.01em; color:var(--n-ink)}
.na-lede{font-size:var(--n-fs-lede); color:var(--n-ink-2); margin:0 0 24px}
.na-lede .na-mask{color:var(--n-ink); font-weight:500}

/* フォーム */
.na-field{margin:0 0 18px}
.na-label{display:block; font-size:var(--n-fs-label); font-weight:500; color:var(--n-ink); margin:0 0 7px}
.na-pw-wrap{position:relative}
.na-input{width:100%; height:var(--n-tap); padding:0 14px; font:inherit; font-size:15px; color:var(--n-ink);
  background:#fff; border:1px solid var(--n-line-2); border-radius:var(--n-r-2); outline:none;
  transition:border-color .12s, box-shadow .12s}
.na-pw-wrap .na-input{padding-right:56px}
.na-input::placeholder{color:var(--n-placeholder)}
.na-input:focus{border-color:var(--n-accent); box-shadow:var(--n-focus)}
.na-input.is-err{border-color:var(--n-error)}
.na-pw-toggle{position:absolute; right:6px; top:50%; transform:translateY(-50%); height:36px; min-width:44px;
  border:0; background:transparent; color:var(--n-ink-3); font:inherit; font-size:var(--n-fs-small); font-weight:500;
  cursor:pointer; border-radius:6px}
.na-pw-toggle:hover{color:var(--n-accent); background:var(--n-accent-soft)}
.na-pw-toggle:focus-visible{outline:2px solid var(--n-accent); outline-offset:2px}
.na-hint{margin:7px 0 0; font-size:var(--n-fs-small); color:var(--n-ink-3)}
/* エラーは文字色＋枠色（色のみに依存しない・赤ベタ背景なし）。既定は非表示、.is-active で表示 */
.na-err{display:none; margin:7px 0 0; font-size:var(--n-fs-small); color:var(--n-error)}
.na-err.is-active{display:block}

/* ボタン */
.na-btn{width:100%; height:var(--n-tap); border:0; border-radius:var(--n-r-2); font:inherit; font-size:15px;
  font-weight:700; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  text-decoration:none; transition:background .12s}
.na-btn-primary{background:var(--n-accent); color:var(--n-accent-ink)}
.na-btn-primary:hover{background:var(--n-accent-hover); color:var(--n-accent-ink); text-decoration:none}
.na-btn:focus-visible{outline:2px solid var(--n-accent); outline-offset:2px; box-shadow:var(--n-focus)}
.na-btn[disabled]{opacity:.6; cursor:default}

.na-help{margin:20px 0 0; font-size:var(--n-fs-small); color:var(--n-ink-3); line-height:1.7}
.na-note{margin:16px 0 0; padding:12px 14px; background:var(--n-accent-soft); border-radius:var(--n-r-2);
  font-size:var(--n-fs-small); color:var(--n-ink-2); line-height:1.65}

/* 状態パネル（1つだけ表示。hidden 属性で制御＝JS は el.hidden をトグル） */
.na-state[hidden]{display:none}

/* 送信完了/完了/期限切れ の丸アイコン */
.na-icon{width:56px; height:56px; border-radius:50%; display:grid; place-items:center; margin:0 0 18px}
.na-icon.is-info{background:var(--n-accent-soft)}
/* 封筒（README §9）: 本体（角丸矩形）＋ ::after のフラップ（三角）。::after が無いと
   「ただの長方形」に見える（README 注意書き）。 */
.na-icon.is-info i{display:block; width:24px; height:17px; border:2px solid var(--n-accent); border-radius:3px; position:relative}
.na-icon.is-info i::after{content:""; position:absolute; left:-1px; top:-1px; width:0; height:0;
  border-left:12px solid transparent; border-right:12px solid transparent; border-top:9px solid var(--n-accent); opacity:.55}
.na-icon.is-ok{background:var(--n-ok-soft)}
.na-icon.is-ok i{width:22px; height:12px; border-left:3px solid var(--n-ok); border-bottom:3px solid var(--n-ok);
  transform:rotate(-45deg); margin-top:-4px}
.na-icon.is-warn{background:var(--n-warn-soft)}
.na-icon.is-warn i{width:4px; height:20px; background:var(--n-warn); border-radius:2px; position:relative}
.na-icon.is-warn i::after{content:""; position:absolute; left:0; bottom:-8px; width:4px; height:4px;
  border-radius:50%; background:var(--n-warn)}

@media(max-width:480px){
  .na-card{padding:30px 22px 26px; border-radius:14px}
  .na-hd{font-size:24px}
  .na-wrap{padding:32px 16px 32px}
}