/*
 * 引合管理の共通の見た目（inq-01 項6）。
 *
 * ⚠ :root の値は仕様書 §6.1.1 のとおり（試作 v0.7.3 の :root と突き合わせ、42 個すべて一致・2026-10-25）。
 *    値を直すときは仕様書と一緒に、ここだけを直す。
 * ⚠ 文字の読み込みは resources/views/partials/fonts.blade.php の1か所。
 */
:root{
  --navy:#20225f; --navy-hover:#151549; --navy-soft:#eaecf8; --on-navy:#ffffff;
  --surface:#ffffff; --sunken:#f6f7fb; --ink:#181c33; --muted:#5b5f75; --disabled:#a1a4b0;
  --line:#e0e2eb; --line-strong:#818599; --gridline:#e4e6ee; --freeze:#b9bdcc;
  --success:#0d736a; --success-soft:#e2f9f6; --warning:#92500b; --warning-soft:#fff3ce;
  --danger:#b7221a; --danger-hover:#991711; --danger-soft:#ffedeb;
  --plum:#6a2d8c; --plum-soft:#f3eafa;
  --stone:#5b5f75; --stone-soft:#eef0f5;
  --amber-bar:#c27a12; --blue-bar:#2f6fb0; --brown-bar:#8a5a2b;
  --row-hover:#f7f8fc; --row-act:#f1f3fa; --row-sel:#eaecf8;
  --stage:#e3e6ef;
  --shadow-sm:0 1px 2px #181c330f; --shadow-lg:0 4px 8px #181c3314, 0 12px 28px -4px #181c3329;
  --ring:0 0 0 2px #ffffff, 0 0 0 4px #20225f;
  --font:Inter, "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", Meiryo, sans-serif;
  --mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r-sm:2px; --r-md:4px; --r-lg:8px;
  --rowh:34px; --cellfs:14px; --chk:40px;
}

/* ── 土台（§6.2・§8.1） ── */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%; margin:0}
body{background:var(--sunken); color:var(--ink); font-family:var(--font); font-size:14px; line-height:24px; letter-spacing:.02em; -webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit; letter-spacing:inherit; color:inherit}
:focus-visible{outline:none; box-shadow:var(--ring)}
a{color:var(--navy)}
[hidden]{display:none!important}
/* 画面上端の安全域（§6.4）は濃紺で塗る */
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:10; background:var(--navy)}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important; transition:none!important}}

/* ── ボタン（§6.3.1） ── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; height:36px; padding:0 14px; border-radius:var(--r-md); border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); cursor:pointer; font-size:13px; font-weight:600; white-space:nowrap; text-decoration:none}
.btn:hover{background:var(--sunken)}
.btn.primary{background:var(--navy); border-color:var(--navy); color:var(--on-navy)}
.btn.primary:hover{background:var(--navy-hover)}

/* ── アプリの枠（§8.1） ── */
.app{position:relative; height:100%; display:flex; flex-direction:column; background:var(--sunken); overflow:hidden; padding-top:env(safe-area-inset-top,0px)}
.app-body{flex:1; min-height:0; display:flex; position:relative; overflow:auto}
.screen{flex:1; min-width:0; display:flex; flex-direction:column}

/* ── ヘッダー（§8.2） ── */
.ah{height:56px; flex:none; background:var(--surface); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:16px; padding:0 16px}
.ah-logo{height:40px; flex:none; display:flex; align-items:center; padding-right:4px}
.ah-logo img{height:40px; width:auto; display:block}
.ah-name{font-weight:700; font-size:16px; color:var(--navy); white-space:nowrap; padding-left:12px; border-left:1px solid var(--line)}
.ah-nav{display:flex; gap:2px; height:100%; min-width:0; flex:0 1 auto; overflow-x:auto; scrollbar-width:none}
.ah-nav::-webkit-scrollbar{display:none}
.ah-nav a{display:flex; align-items:center; padding:0 12px; height:100%; color:var(--muted); font-weight:600; font-size:14px; border-bottom:3px solid transparent; white-space:nowrap; text-decoration:none}
.ah-nav a:hover{color:var(--ink)}
.ah-nav a[aria-current="page"]{color:var(--navy); border-bottom-color:var(--navy)}
/* ⚠ 右のまとまりは縮めない。収まらないときは見出しのナビが横に動く（§8.2） */
.ah-right{margin-left:auto; display:flex; align-items:center; gap:10px; flex:none}

/* 説明の量のボタン（§8.3）・［＋ 新しい引合］（§8.2）・右下の［＋］（§8.7） */
.guidebtn{display:inline-flex; align-items:center; gap:4px; height:32px; padding:0 10px; border:1px solid var(--line-strong); border-radius:var(--r-md); background:var(--surface); cursor:pointer; font-size:13px; white-space:nowrap; color:var(--ink)}
.guidebtn:hover{background:var(--sunken)}
.guidebtn svg{width:15px; height:15px}
.guidebtn[aria-pressed="true"]{background:var(--navy-soft); border-color:var(--navy); color:var(--navy); font-weight:600}
.btn.outline{border-color:var(--navy); color:var(--navy)}
.btn.outline:hover{background:var(--navy-soft)}
.btn.sm{height:32px; padding:0 10px}
.btn svg{width:16px; height:16px}
.fab{display:none}

/* ヘッダーの検索欄（§8.4） */
.ah-search{position:relative; width:280px; min-width:0}
.ah-search input{width:100%; height:36px; border:1px solid var(--line-strong); border-radius:var(--r-md); padding:0 64px 0 32px; background:var(--surface); font-size:14px}
.ah-search .ico{position:absolute; left:9px; top:10px; width:16px; height:16px; color:var(--muted); pointer-events:none}
.ah-search kbd{position:absolute; right:8px; top:8px; font:12px/18px var(--font); color:var(--muted); border:1px solid var(--line); border-radius:var(--r-sm); padding:0 5px; background:var(--sunken)}
.search-pop{position:absolute; top:40px; left:0; min-width:340px; width:100%; max-height:380px; overflow:auto; z-index:60; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-lg); padding:4px}
.search-pop .sp-i{padding:6px 8px; border-radius:var(--r-md); cursor:pointer}
.search-pop .sp-i:hover,.search-pop .sp-i.hl{background:var(--navy-soft)}
.search-pop .sp-1{font-size:13px; line-height:20px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.search-pop .sp-2{font-size:12px; line-height:18px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.search-pop .sp-none{padding:6px 8px; font-size:12px; line-height:18px; color:var(--muted)}
.app[data-mode="tablet"] .ah-search{width:200px}
.app[data-mode="phone"] .ah-search{width:auto; flex:1}
.app[data-mode="phone"] .ah-search input{padding-right:8px}
.app[data-mode="phone"] .ah-search kbd{display:none}
.app[data-mode="phone"] .search-pop{position:fixed; left:8px; right:8px; top:56px; width:auto; min-width:0}
.screen:focus{outline:none}

/* ログイン中の人（§8.5）と、押したときの小さなメニュー（§6.3.9 の形） */
.ah-me{position:relative; flex:none}
.ah-user{width:32px; height:32px; border-radius:50%; background:var(--navy-soft); color:var(--navy); display:grid; place-items:center; font-weight:700; font-size:13px; border:0; padding:0; cursor:pointer; letter-spacing:0}
.pop{position:absolute; right:0; top:calc(100% + 4px); z-index:80; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-lg); min-width:200px; max-width:min(380px, calc(100vw - 24px)); padding:4px; font-size:13px}
.pop form{margin:0}
.mi{display:flex; align-items:center; gap:8px; width:100%; text-align:left; border:0; background:transparent; padding:6px 10px; border-radius:var(--r-sm); line-height:20px; cursor:pointer; font-size:13px}
.mi:hover,.mi:focus-visible{background:var(--navy-soft)}

/* ── 画面の見出し（§6.2：18／26・700） ── */
.viewbar{display:flex; align-items:flex-end; gap:16px; padding:10px 16px 0; background:var(--sunken)}
.viewbar h1{font-size:18px; line-height:26px; font-weight:700; margin:0 0 6px; white-space:nowrap}
/* 仮の一文（inq-01 項6-6）。注記の大きさ（§6.2：12／18） */
.placeholder{margin:0; padding:0 16px; font-size:12px; line-height:18px; color:var(--muted)}

/* ── 状態バー（§9.7）と同期の表示（§8.9） ── */
.grow{flex:1}
.statusbar{height:32px; flex:none; display:flex; align-items:center; gap:16px; padding:0 12px; background:var(--sunken); border-top:1px solid var(--line); font-size:12px; line-height:18px; color:var(--muted); white-space:nowrap; overflow-x:auto}
.statusbar b{font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums}
.sb-right{margin-left:auto; display:flex; align-items:center; gap:16px}
.sync,.sb-warn{display:inline-flex; align-items:center; gap:6px}
.sync .dot,.sb-warn::before{width:8px; height:8px; border-radius:50%; background:var(--amber-bar); flex:none}
.sb-warn::before{content:""}
.sync[data-state="ok"] .dot{background:var(--success)}
.linkbtn{border:0; background:none; padding:0; color:var(--navy); text-decoration:underline; font-size:12px; cursor:pointer}
.app[data-mode="phone"] .statusbar{display:none}

/* ── 通知（トースト・§8.8） ── */
.toasts{position:fixed; left:16px; bottom:44px; z-index:95; display:flex; flex-direction:column; gap:8px; max-width:min(460px, calc(100vw - 32px)); pointer-events:none}
.toast{background:#181c33; color:#ffffff; font-size:13px; line-height:20px; padding:8px 10px 8px 14px; border-radius:var(--r-md); box-shadow:var(--shadow-lg); pointer-events:auto; display:flex; gap:12px; align-items:center; animation:tin .18s ease-out}
.toast button{border:1px solid #ffffff66; background:transparent; color:#fff; border-radius:var(--r-sm); padding:0 8px; line-height:22px; cursor:pointer; font-size:12px; white-space:nowrap}
@keyframes tin{from{transform:translateY(6px); opacity:0}to{transform:none; opacity:1}}
.toast.ok{background:#0b4f49}
.toast.warn{background:#5c3407}
.toast.remote{background:#4b1f63}
.app[data-mode="phone"] ~ .toasts{left:8px; right:8px; bottom:72px; max-width:none}

/* ── 下のナビ（スマホだけ・§8.7） ── */
.bottomnav{display:none}
.bottomnav a{min-width:0; white-space:nowrap; text-decoration:none}

/* ── 幅による切り替え（アプリの枠の幅で判定・§6.4） ── */
.app[data-mode="tablet"] .ah-name{display:none}
.app[data-mode="phone"] .ah{padding:0 8px 0 12px; gap:8px; height:52px}
.app[data-mode="phone"] .ah-name,.app[data-mode="phone"] .ah-nav{display:none}
.app[data-mode="phone"] .viewbar{padding:8px 8px 0}
.app[data-mode="phone"] .viewbar h1{display:none}
.app[data-mode="phone"] .placeholder{padding:8px}
.app[data-mode="phone"] .guidebtn .gl{display:none}
.app[data-mode="phone"] .guidebtn{padding:0 8px}
.app[data-mode="phone"] #btn-new{display:none}
.app[data-mode="phone"] .ah-right{flex:1; min-width:0}
.app[data-mode="phone"] .fab{display:grid; place-items:center; position:absolute; right:16px; bottom:72px; width:56px; height:56px; border-radius:50%; background:var(--navy); color:#fff; border:0; box-shadow:var(--shadow-lg); z-index:24; cursor:pointer}
.app[data-mode="phone"] .fab svg{width:24px; height:24px}
.app[data-mode="phone"] .bottomnav{display:flex; flex:none; border-top:1px solid var(--line); background:var(--surface); padding-bottom:env(safe-area-inset-bottom,0px)}
.app[data-mode="phone"] .bottomnav a{flex:1; height:56px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:11px; line-height:16px; font-weight:600; color:var(--muted)}
.app[data-mode="phone"] .bottomnav a svg{width:20px; height:20px}
.app[data-mode="phone"] .bottomnav a[aria-current="page"]{color:var(--navy)}

/* ── ログイン画面（inq-01 項5-5） ── */
.login-page{display:flex; align-items:center; justify-content:center; min-height:100%; padding:16px}
.login-box{width:100%; max-width:360px; background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:32px 24px 24px; display:flex; flex-direction:column; align-items:center; text-align:center}
.login-logo{height:40px; width:auto; display:block}
.login-name{margin:8px 0 24px; font-size:18px; line-height:26px; font-weight:700; color:var(--navy)}
.login-error{margin:0 0 12px; font-size:13px; line-height:20px; color:var(--danger); text-align:left; align-self:stretch}
.login-btn{width:100%}
.login-note{margin:12px 0 0; font-size:12px; line-height:18px; color:var(--muted)}