/* ============================================================================
   VP Screening Suite — Sky UI v2.0  "Approach Plate"
   ----------------------------------------------------------------------------
   設計コンセプト: 航空図(AIP/進入チャート)の紙面 × 設計事務所の製図台。
   - UI本体は「チャート紙」: 明るい紙面 + 濃紺チャートインク。視認性最優先
     (本文インク #14283a / 白地コントラスト比 約12:1, WCAG AAA)。
   - 図化領域(#carea / .center)のみ濃紺の「計器ディスプレイ」として暗色を維持。
     紙のUIが暗いディスプレイを縁取る構成が本テーマの署名要素。
   - ヘルプモーダル(#helpModal)は独立した暗色リファレンスとして従来配色を保持。
   v2.0 変更点:
   - v1で未対応だった CAD / Hub / index / START の変数系(--txt,--ink,--p等)を
     全面リマップし、「白背景に白文字」となる箇所を解消。
   - ピル型ボタンを廃し、矩形ベースのエンジニアリング調へ統一。
   - フォーカスリング・キーボード操作可視化・prefers-reduced-motion対応。
   ============================================================================ */

/* ─────────────────────────── 0. Design tokens ─────────────────────────── */
:root{
  --vp-paper:#f4f7f9;        /* チャート紙 */
  --vp-panel:#ffffff;
  --vp-recess:#eef4f8;       /* 沈み込み面(入力・セクション地) */
  --vp-recess2:#e2ecf2;
  --vp-ink:#14283a;          /* チャートインク */
  --vp-ink2:#3b5468;
  --vp-ink3:#61788a;
  --vp-faint:#8aa0b0;
  --vp-hairline:#d3e0e8;
  --vp-line:#b4c9d6;
  --vp-line-strong:#8fb0c2;
  --vp-chart:#085d8c;        /* チャートブルー(テキスト安全) */
  --vp-chart-hi:#0b76b3;     /* インタラクティブ */
  --vp-chart-fill:#e3f2fb;
  --vp-ok:#0a7a52;   --vp-ok-fill:#e4f5ec;   --vp-ok-line:#9fd6bd;
  --vp-warn:#8a5300; --vp-warn-fill:#fdf3df; --vp-warn-line:#e3c886;
  --vp-ng:#b32030;   --vp-ng-fill:#fdeaea;   --vp-ng-line:#f0b6bd;
  --vp-display:#0d1c2a;      /* 計器ディスプレイ(キャンバス背景) */
  --vp-shadow:0 6px 22px rgba(8,61,92,.10);
  --vp-shadow-lg:0 14px 40px rgba(8,61,92,.16);
}

/* ─────────────── 1. 変数リマップ: OLS / NOISE / VP-REQ 系 ─────────────── */
:root{
  --bg:var(--vp-paper)!important;
  --bg2:var(--vp-panel)!important;
  --bg3:var(--vp-recess)!important;
  --bg4:var(--vp-recess2)!important;
  --bg5:#d8e5ed!important;
  --border:var(--vp-hairline)!important;
  --border2:var(--vp-line)!important;
  --border3:var(--vp-line-strong)!important;
  --text:var(--vp-ink)!important;
  --text2:var(--vp-ink2)!important;
  --text3:var(--vp-ink3)!important;
  --text4:var(--vp-faint)!important;
  --accent:var(--vp-chart-hi)!important;
  --accent2:var(--vp-chart)!important;
  --accentg:#0a8f94!important;
  --accentd:var(--vp-chart-fill)!important;
  --sky:var(--vp-chart)!important;
  --green:var(--vp-ok)!important;  --green2:var(--vp-ok-fill)!important;  --greenl:#064f37!important;
  --amber:var(--vp-warn)!important; --amber2:var(--vp-warn-fill)!important; --amberl:#6e4200!important;
  --red:var(--vp-ng)!important;    --red2:var(--vp-ng-fill)!important;    --redl:#8c1622!important;
  --purple:#6d4fc3!important; --teal:#0a8f94!important; --coral:#b4530f!important;
  --warn-bg:var(--vp-warn-fill)!important; --warn-border:var(--vp-warn-line)!important;
  --ok-bg:var(--vp-ok-fill)!important;     --ok-border:var(--vp-ok-line)!important;
  --ng-bg:var(--vp-ng-fill)!important;     --ng-border:var(--vp-ng-line)!important;
  /* OLS固有 */
  --ink:var(--vp-ink)!important; --sub:var(--vp-ink2)!important;
  --line:var(--vp-hairline)!important; --soft:var(--vp-recess)!important;
  --blue:var(--vp-chart)!important;
  /* 可読サイズへ底上げ */
  --fs:14px!important; --fsm:13px!important; --fss:12.5px!important;
  --fsxs:12px!important; --fsxxs:11px!important;
  /* CAD系 */
  --p:var(--vp-panel); --p2:var(--vp-recess); --p3:var(--vp-recess2);
  --line2:var(--vp-line); --txt:var(--vp-ink); --muted:var(--vp-ink2); --m2:var(--vp-ink3);
  --a:var(--vp-chart-hi); --a2:var(--vp-chart-fill);
  --g:var(--vp-ok); --y:var(--vp-warn); --o:#b4530f; --u:#6d4fc3; --br:6px;
  /* Hub / index 系 */
  --gray:#64748b;
  /* START 系 */
  --plate:var(--vp-panel); --plate2:var(--vp-recess);
  --mute:var(--vp-ink2); --faint:var(--vp-ink3);
  --go:var(--vp-ok); --caution:var(--vp-warn); --nogo:var(--vp-ng); --info:var(--vp-chart-hi);
  --pad-w:var(--vp-line-strong); --pad-y:#c79a1f; --pad-b:var(--vp-chart-hi);
  --r-s:8px; --shadow:var(--vp-shadow-lg);
}
/* --r は OLS/NOISE/REQ では角丸、CAD/Hub/index では赤色として使われるため
   スコープを分けて再定義する(グローバル一括は色を破壊する) */
#app{ --r:6px!important; --r2:10px!important; }      /* OLS / NOISE / VP-REQ */
.app{ --r:#c22a3a!important; }                        /* CAD STUDIO (red) */

/* ─────────────────────────── 2. ベース(全ツール) ─────────────────────────── */
html,body{
  background:var(--vp-paper)!important;
  color:var(--vp-ink)!important;
  -webkit-font-smoothing:antialiased;
}
body{
  background:
    linear-gradient(0deg, rgba(8,93,140,.035) 1px, transparent 1px) 0 0/100% 28px,
    var(--vp-paper)!important; /* チャート紙の細グリッド */
  font-family:'Segoe UI','Hiragino Sans','Noto Sans JP',system-ui,-apple-system,Meiryo,sans-serif!important;
}
::selection{background:rgba(11,118,179,.22)}
:focus-visible{outline:2px solid var(--vp-chart-hi)!important;outline-offset:2px!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important;scroll-behavior:auto!important}
}

/* ── ヘッダー = プレート余白(署名要素): 上端チャートルール + 細罫 ── */
#hdr,.hdr{
  background:linear-gradient(180deg,#ffffff,#f7fafc)!important;
  border-top:3px solid var(--vp-chart)!important;
  border-bottom:1px solid var(--vp-line)!important;
  box-shadow:0 2px 10px rgba(8,61,92,.06)!important;
}
.logo{color:var(--vp-chart)!important;letter-spacing:.02em!important}
.logo small{color:var(--vp-ink3)!important;letter-spacing:.08em!important}
#ftr,.footer{
  background:#f7fafc!important;
  border-top:1px solid var(--vp-hairline)!important;
  color:var(--vp-ink3)!important;
}
.footer b{color:var(--vp-chart)!important}

/* ── パネル/サイドレール ── */
#lpanel,#rpanel,.left,.right,aside{
  background:var(--vp-panel)!important;
  border-color:var(--vp-hairline)!important;
}
#rpanel{background:var(--vp-paper)!important}

/* ── 図化領域 = 計器ディスプレイ(暗色維持) ── */
#carea,.center{
  background:var(--vp-display)!important;
  box-shadow:inset 0 0 0 1px #28455c, inset 0 0 60px rgba(0,0,0,.35)!important;
}

/* ── セクション見出し = チャート欄外ラベル ── */
.sechdr{
  background:var(--vp-panel)!important;
  color:var(--vp-chart)!important;
  border-color:var(--vp-hairline)!important;
  font-size:12px!important;
  font-weight:700!important;
  letter-spacing:.10em!important;
  text-transform:none;
  border-left:3px solid var(--vp-chart)!important;
}
.sechdr:hover{background:var(--vp-chart-fill)!important;color:var(--vp-chart)!important}
.sechdr .ic{color:var(--vp-line-strong)!important}
.secbody{background:var(--vp-panel)!important;border-color:var(--vp-hairline)!important}

/* ── フォーム ── */
.field label,label:not(#helpModal *){color:var(--vp-ink2)!important;font-weight:600!important}
.field input,.field select,.field textarea,
input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{
  background:#ffffff!important;
  border:1px solid var(--vp-line)!important;
  color:var(--vp-ink)!important;
  border-radius:6px!important;
  min-height:32px;
}
input::placeholder,textarea::placeholder{color:var(--vp-faint)!important}
.field input:focus,.field select:focus,input:focus,select:focus,textarea:focus{
  border-color:var(--vp-chart-hi)!important;
  box-shadow:0 0 0 3px rgba(11,118,179,.16)!important;
  outline:none!important;
}
input[type=checkbox],input[type=radio]{accent-color:var(--vp-chart-hi)}
.hint,.note,.sub,small{color:var(--vp-ink3)!important}
.hint b,.note b{color:var(--vp-ink2)!important}

/* ── ボタン: 矩形・実務調 ── */
.btn,.open,button.btn{
  background:linear-gradient(180deg,#ffffff,var(--vp-recess))!important;
  border:1px solid var(--vp-line)!important;
  color:var(--vp-ink)!important;
  border-radius:6px!important;
  font-weight:600!important;
  box-shadow:0 1px 2px rgba(8,61,92,.08)!important;
}
.btn:hover,.open:hover{border-color:var(--vp-chart-hi)!important;background:var(--vp-chart-fill)!important;color:var(--vp-chart)!important}
.btn.pr,.btn.act,button.btn.pr{
  background:linear-gradient(180deg,var(--vp-chart-hi),var(--vp-chart))!important;
  border-color:var(--vp-chart)!important;
  color:#ffffff!important;
}
.btn.pr:hover{background:var(--vp-chart)!important;color:#ffffff!important}
.btn.gr,.btn.g{background:var(--vp-ok-fill)!important;border-color:var(--vp-ok-line)!important;color:var(--vp-ok)!important}
.btn.warn,.btn.y{background:var(--vp-warn-fill)!important;border-color:var(--vp-warn-line)!important;color:var(--vp-warn)!important}
.btn.danger,.btn.r{background:var(--vp-ng-fill)!important;border-color:var(--vp-ng-line)!important;color:var(--vp-ng)!important}
.btn.on{background:var(--vp-chart)!important;border-color:var(--vp-chart)!important;color:#fff!important}
.btn:disabled{opacity:.45!important}

/* ── 表・データ ── */
table:not(#helpModal *){background:var(--vp-panel)!important;color:var(--vp-ink)!important;border-color:var(--vp-hairline)!important}
th:not(#helpModal *){background:var(--vp-recess)!important;color:var(--vp-chart)!important;font-weight:700!important;letter-spacing:.03em}
td:not(#helpModal *),th:not(#helpModal *){border-color:var(--vp-hairline)!important}
tr:hover>td:not(#helpModal *){background:rgba(11,118,179,.05)}
pre:not(#helpModal *),code:not(#helpModal *){
  background:#f3f7fa!important;border:1px solid var(--vp-hairline)!important;
  color:#0f3a55!important;border-radius:8px;
}
.derived,.canvas-overlay,.legend,#ols-legend,.model-card,.seg-table,.kpi,.basis,.warnbox{
  background:var(--vp-panel)!important;
  border-color:var(--vp-hairline)!important;
  color:var(--vp-ink)!important;
  box-shadow:var(--vp-shadow)!important;
}
.seg-head,.seg-row input,.seg-row select{background:var(--vp-recess)!important;color:var(--vp-ink)!important}
.warnbox{border-left:4px solid var(--vp-warn)!important;background:var(--vp-warn-fill)!important}
.warnbox li{color:var(--vp-warn)!important}
.notif,#toast.show{
  background:#ffffff!important;color:var(--vp-ink)!important;
  border:1px solid var(--vp-line)!important;border-left:4px solid var(--vp-chart-hi)!important;
  box-shadow:var(--vp-shadow-lg)!important;
}

/* ── 見出し ── */
h1:not(#helpModal *),h2:not(#helpModal *),.legend-title{color:var(--vp-chart)!important}
h3:not(#helpModal *){color:var(--vp-ink)!important}

/* ───────────────── 3. Hub v2 / index (暗色直書きの上書き) ───────────────── */
.hero,.panel{
  background:var(--vp-panel)!important;
  border:1px solid var(--vp-hairline)!important;
  box-shadow:var(--vp-shadow)!important;
  border-radius:12px!important;
}
.hero{border-top:3px solid var(--vp-chart)!important}
.card{background:var(--vp-panel)!important;border:1px solid var(--vp-hairline)!important;box-shadow:var(--vp-shadow)!important}
.card h3{color:var(--vp-ink)!important}
.card p{color:var(--vp-ink2)!important}
.kpi{background:var(--vp-recess)!important;border:1px solid var(--vp-hairline)!important}
.kpi span,.kpi .l{color:var(--vp-ink3)!important}
.kpi b,.kpi .v{color:var(--vp-chart)!important;font-family:'JetBrains Mono',Consolas,monospace!important}
.step{background:var(--vp-panel)!important;border:1px solid var(--vp-hairline)!important;border-left-width:5px!important}
.step .num{background:var(--vp-recess2)!important;color:var(--vp-chart)!important}
.step .body span{color:var(--vp-ink3)!important}
.step.green{border-left-color:var(--vp-ok)!important}
.step.yellow{border-left-color:#c79a1f!important}
.step.red{border-left-color:var(--vp-ng)!important}
.basis{background:var(--vp-panel)!important;border:1px solid var(--vp-hairline)!important;border-left:5px solid #c79a1f!important}
.basis.ok{border-left-color:var(--vp-ok)!important}
.basis p{color:var(--vp-ink2)!important}
.basis code{background:#f3f7fa!important;border:1px solid var(--vp-hairline)!important;color:#0f3a55!important}
.basis .tag{background:var(--vp-chart-fill)!important;color:var(--vp-chart)!important;border:1px solid #bcdcf0!important}
.basis small{color:var(--vp-warn)!important}
.basis.ok small{color:var(--vp-ok)!important}
.flowText{background:#f3f7fa!important;border:1px solid var(--vp-hairline)!important;color:#0f3a55!important}
.warn{color:var(--vp-warn)!important}
ul{color:var(--vp-ink2)}

/* ───────────────── 4. CAD STUDIO (暗色直書きの上書き) ───────────────── */
.nav button{color:var(--vp-ink2)!important}
.nav button:hover{color:var(--vp-ink)!important;background:var(--vp-recess)!important}
.nav button.on{background:var(--vp-chart)!important;border-color:var(--vp-chart)!important;color:#fff!important}

/* ───────────────── 5. START (ランディング) ───────────────── */
.eyebrow{color:var(--vp-ink3)!important}
.lede{color:var(--vp-ink2)!important}
.chip,.pill{background:var(--vp-recess)!important;border:1px solid var(--vp-line)!important;color:var(--vp-ink2)!important}
.tool,.handoff,.readout,.signal,.verdict{background:var(--vp-panel)!important;border-color:var(--vp-hairline)!important;box-shadow:var(--vp-shadow)!important}
.ghost{background:transparent!important;border:1px solid var(--vp-line)!important;color:var(--vp-chart)!important}
.primary{background:var(--vp-chart-hi)!important;border-color:var(--vp-chart)!important;color:#fff!important}

/* ───────────────── 6. ヘルプモーダル: 独立した暗色リファレンスを保持 ───────────────── */
#helpModal .hm-inner{background:#0e1b2a!important;color:#d4e6f4!important;border-color:#2a4060!important}
#helpModal table{background:#0c1826!important;color:#cfe4f4!important}
#helpModal th{background:#10243a!important;color:#7dd3fc!important}
#helpModal th,#helpModal td{border-color:#23405c!important}
#helpModal pre,#helpModal code{background:#0a1420!important;border-color:#23405c!important;color:#b8e0c9!important}
#helpModal label{color:#9fc3da!important}
#helpModal input,#helpModal select{background:#0a1623!important;color:#e5f3ff!important;border-color:#37597a!important}

/* ───────────────── 7. 印刷 ───────────────── */
@media print{
  body{background:#fff!important}
  #hdr,.hdr{border-top-color:#000!important}
  .btn,.open{display:none!important}
}