/* ライセンスサーバ 管理画面
   トークンは contactbox を継承し、mockup-dashboard.html の決め事に従う。
   正常時は色を使わない。赤は「今すぐ人が動く 2 種」だけ（VISUAL-DIRECTION.md §2）。
   余白は段階で持つ（§14.2・§14.4）。 */

:root{
  --bg:#eef1f5; --panel:#fff; --panel2:#f2f4f7; --ink:#1b2027; --muted:#5a626f;
  --line:#d5dae0; --accent:#2563eb; --accent-ink:#fff;
  --urgent:#b91c1c; --urgent-bg:#fdf2f2; --watch:#7c5e10; --rule:#e3e7ec;
  --caution:#92400e; --caution-ink:#fff; --caution-bg:#fffbeb; --caution-line:#e8d9a8;
  --err:#b91c1c;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:48px;
  --mono:ui-monospace,"DejaVu Sans Mono",monospace;
  /* 入力欄は板より一段沈める（受け皿の合図。枠線に頼らず「ここに入力」が伝わる） */
  --field-bg:#f8f9fb;
  /* 浮遊層（列の絞り込みの札）だけに許す影。板・釦は罫線と面差のまま */
  --float-bg:#fff;
  --float-shadow:0 0 0 1px rgba(27,32,39,.05), 0 8px 24px -6px rgba(27,32,39,.16);
}
html[data-theme="dark"]{
  --bg:#0f1115; --panel:#171a21; --panel2:#1d212b; --ink:#e6e8ee; --muted:#9aa3b2;
  --line:#2a2f3a; --accent:#2563eb; --accent-ink:#fff;
  --urgent:#f87171; --urgent-bg:#2a1616; --watch:#d9a441; --rule:#232833;
  --caution:#e0b054; --caution-ink:#241d0e; --caution-bg:#241d0e; --caution-line:#463a1c;
  --err:#f87171;
  --field-bg:#10141b;
  /* 暗い面に影は載らないので、浮遊層は一段明るい面 + 縁で浮かせる */
  --float-bg:#1d212b;
  --float-shadow:0 0 0 1px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,IPAGothic,sans-serif;
  background:var(--bg); color:var(--ink); font-size:14px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ===== 全体レイアウト（左ナビ + 本文） ===== */
.shell{display:flex;min-height:100vh}
.nav{flex:0 0 208px;background:var(--panel);border-right:1px solid var(--line);
  padding:var(--sp-4) 0;display:flex;flex-direction:column;gap:var(--sp-1);
  position:sticky;top:0;height:100vh;overflow-y:auto}
.nav .brand{font-weight:600;font-size:15px;padding:var(--sp-1) var(--sp-5) var(--sp-4);
  border-bottom:1px solid var(--line);margin-bottom:var(--sp-2)}
.nav a{display:block;padding:var(--sp-2) var(--sp-5);color:var(--ink);text-decoration:none;
  font-size:13.5px;border-left:3px solid transparent}
.nav a:hover{background:var(--panel2)}
.nav a.on{border-left-color:var(--accent);background:var(--panel2);font-weight:600}
.nav a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.nav .navgroup{font-size:11px;color:var(--muted);padding:var(--sp-4) var(--sp-5) var(--sp-1)}
.nav .navfoot{margin-top:auto;padding:var(--sp-4) var(--sp-5) 0;border-top:1px solid var(--line);
  font-size:12px;color:var(--muted)}
.nav .navfoot .who{margin-bottom:var(--sp-2);word-break:break-all}
/* ログアウトと配色切替を同じ行に置く（切替は印だけ） */
.nav .navacts{display:flex;align-items:center;gap:var(--sp-2)}
.nav .navacts .btn{flex:1 1 auto}

/* 印だけの釦（配色切替・秘密の表示）。文字の釦と同じ高さに揃える */
.iconbtn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:32px;height:32px;padding:0;border:1px solid var(--line);border-radius:7px;
  position:relative;background:var(--panel);color:var(--muted);cursor:pointer}
.iconbtn:hover{background:var(--panel2);color:var(--ink);border-color:var(--accent)}
.iconbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.iconbtn:disabled{opacity:.5;cursor:not-allowed}
.iconbtn:disabled:hover{background:var(--panel);color:var(--muted);border-color:var(--line)}
/* 左メニューの行はログアウト釦の高さに合わせる */
.navacts .iconbtn{width:28px;height:28px}
/* 秘密の入力欄と表示の印を横に並べる */
.secret-row{display:flex;align-items:center;gap:var(--sp-2)}
.secret-row input{flex:1 1 auto;min-width:0}
.main{flex:1 1 auto;min-width:0;padding:var(--sp-6) var(--sp-5) 112px}

/* ===== 見出し帯 ===== */
/* 本文へ飛ぶリンク。ふだんは見えず、キーボードで当たったときだけ出す。
   **画面の外へ飛ばす書き方（left:-9999px）は使わない。**
   親からのはみ出しを見る機械検査に毎回引っかかり、本物の指摘が埋もれる
   （2026/08/22 に実測: 全画面で「9999px はみ出し」と報告された）。
   大きさを 1px に潰す標準の書き方なら、置き場所は親の中に収まる */
.skip{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}
.skip:focus{left:0;top:0;z-index:100;width:auto;height:auto;margin:0;padding:8px 16px;
  overflow:visible;clip-path:none;background:var(--accent);color:var(--accent-ink);
  border-radius:0 0 6px 0;font-size:13px;text-decoration:none}
.topbar{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4);
  padding-bottom:var(--sp-3);border-bottom:1px solid var(--line);margin-bottom:var(--sp-6);flex-wrap:wrap}
.topbar h1{font-size:18px;font-weight:600;margin:0}
.topbar .side{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}

/* ===== 板 ===== */
.board{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  margin-bottom:var(--sp-5)}
.board .pad{padding:var(--sp-5) var(--sp-6)}

/* ===== ダッシュボード（モック準拠） ===== */
.quiet{padding:var(--sp-9) var(--sp-7)}
.quiet-line{font-size:25px;font-weight:600;line-height:1.3;margin:0;text-wrap:balance}
.quiet-sub{margin:var(--sp-2) 0 0;color:var(--muted);font-size:13px;max-width:38em}
.urgent-block{border-left:3px solid var(--urgent);background:var(--urgent-bg)}
.urgent-row{display:flex;gap:var(--sp-5);align-items:flex-start;padding:var(--sp-6) var(--sp-6)}
.urgent-row + .urgent-row{border-top:1px solid rgba(185,28,28,.18)}
.urgent-block + .watch{border-top:1px solid var(--line)}
.urgent-row .body{flex:1 1 auto;min-width:0}
.urgent-row .say{margin:0;font-size:18px;font-weight:600;line-height:1.35;text-wrap:balance}
.urgent-row .num{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--urgent);font-size:19px}
.urgent-row .why{margin:var(--sp-1) 0 0;color:var(--muted);font-size:13px;max-width:38em;text-wrap:pretty}
.urgent-row .go{flex:0 0 auto}
.watch{padding:var(--sp-4) var(--sp-6);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--sp-2) var(--sp-6)}
.watch-title{font-size:12px;font-weight:400;margin:0 0 var(--sp-1);color:var(--muted);grid-column:1/-1}
/* **切らずに折り返す。** 1 行に収める指定だと、長い項目
   （「7 日以内に期限切れのサブスクリプション」）が 3 点記号で切られて読めなくなる。
   3 点が連続する記号は使わない決まりでもある（2026/08/23 に実画面で見つけた。
   機械検査は中に <b> を持つ要素を対象外にしていて素通りしていた） */
.watch-item{font-size:13px;color:var(--watch);line-height:1.5;
  overflow-wrap:anywhere;text-wrap:pretty;
  background:none;border:0;padding:0;text-align:left;cursor:pointer}
.watch-item:hover{text-decoration:underline}
.watch-item:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.watch-item b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;margin-left:var(--sp-1)}

/* 運用状況（グラフ） */
.stats-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--sp-3);margin-bottom:var(--sp-5)}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:var(--sp-4) var(--sp-5)}
.tile .cap{font-size:12px;color:var(--muted)}
.tile .val{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:22px;font-weight:600}
.tile .unit{font-size:12px;color:var(--muted);margin-left:2px}
.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--sp-5)}
.chart{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:var(--sp-4) var(--sp-5) var(--sp-5)}
.chart h3{font-size:13px;font-weight:600;margin:0 0 var(--sp-2);color:var(--muted)}
.chart svg{display:block;width:100%;height:auto}
.chart .bar{fill:var(--accent);opacity:.85}
.chart .bar.b2{fill:var(--muted);opacity:.55}
.chart .axis{stroke:var(--line);stroke-width:1}
.chart .lbl{fill:var(--muted);font-size:10px;font-family:var(--mono)}
.chart .legend{display:flex;gap:var(--sp-4);font-size:12px;color:var(--muted);margin-top:var(--sp-2)}
.chart .legend .sw{display:inline-block;width:10px;height:10px;border-radius:3px;
  background:var(--accent);opacity:.85;margin-right:4px;vertical-align:baseline}
.chart .legend .sw.s2{background:var(--muted);opacity:.55}
.chart .hbar-row{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-2)}
.chart .hbar-cap{flex:0 0 96px;font-size:12.5px;text-align:right;color:var(--muted)}
.chart .hbar-track{flex:1 1 auto;background:var(--panel2);border-radius:3px;height:14px;
  border:1px solid transparent;overflow:hidden}
.chart .hbar-fill{height:100%;background:var(--accent);opacity:.85}
.chart .hbar-num{flex:0 0 48px;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12.5px}
.chart .nodata{color:var(--muted);font-size:12.5px;padding:var(--sp-4) 0}

/* ===== 一覧 =====
   border-collapse:collapse を使わない（配色切替でレイアウトが走る。VISUAL-DIRECTION.md §13.5） */
.list-scroll{overflow-x:auto}
.list{width:100%;min-width:520px;border-collapse:separate;border-spacing:0;font-size:13.5px}
.list th{text-align:left;font-weight:500;color:var(--muted);font-size:12px;
  padding:var(--sp-2) var(--sp-4);border-bottom:1px solid var(--line);white-space:nowrap}
/* 切るのは幅を保つため。**text-overflow の三点は「書いた文字」ではなくブラウザの印**で、
   開発ルールが禁じている三点リーダー（文中に書く U+2026）とは別物 - コピーしても入らないし、
   句点と紛れる位置にも出ない。文字として縮めたい場所（長い ID）は shortId が末尾チルダを使う。
   切れたセルの全文は app.js の titleTruncated が title に入れて到達できるようにする */
.list td{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--rule);
  max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list tr:last-child td{border-bottom:0}
/* 読むための列（監査の詳細など）は省略せず折り返す。
   min-width で潰れ止めをする。狭い画面では列を縮めるより横スクロール（.list-scroll）に任せる
   ＝ 10 文字ほどの語が 2 行になるまで縮むと、読むための列として用をなさない */
.list td.wrap{max-width:420px;min-width:16em;white-space:normal;overflow-wrap:anywhere;overflow:visible;text-overflow:clip}
/* 全文を切らずに出す列（権利の要約など） */
.list td.full{max-width:none;overflow:visible;text-overflow:clip}
/* 鍵のように長い値は折り返して出す（横へ押し出して操作列を画面外へ追いやらない） */
.list td.keycell{max-width:22ch;white-space:normal;overflow-wrap:anywhere;
  overflow:visible;text-overflow:clip;font-size:12.5px;line-height:1.5}
/* 識別子の列（監査の対象など）。端末IDは 32 桁あり、省略すると何を操作したのか分からない */
.list td.idcell{max-width:26ch;min-width:20ch;white-space:normal;overflow-wrap:anywhere;
  overflow:visible;text-overflow:clip;line-height:1.5}
/* 操作列は縮めない・省略しない（ボタンが切れて押せなくなるのを防ぐ） */
.list td.ops,.list th.ops{white-space:nowrap;width:1%;max-width:none;
  overflow:visible;text-overflow:clip}
.list tbody tr.rowlink{cursor:pointer}
.list tbody tr.rowlink:hover{background:var(--panel2)}
.list tbody tr:focus-within{outline:2px solid var(--accent);outline-offset:-2px}
.list a{color:var(--ink);text-decoration:none}
.list a:hover{text-decoration:underline}
.list .off{color:var(--muted)}
.list .u{color:var(--urgent);font-weight:600}
/* 画面が使っているのに定義が無かった（アプリ一覧の「未発行」と旧キーの期限） */
.muted{color:var(--muted)}
.count-line{font-size:12.5px;color:var(--muted)}

/* 一覧の道具立て（全文検索・列で絞り込む・解除・件数） */
.list-tools{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  padding:var(--sp-2) var(--sp-4);border-bottom:1px solid var(--rule)}
/* display の指定は hidden 属性より強い。0 件のときに隠すため明示する */
.list-tools[hidden]{display:none}
.list-search{flex:0 1 260px;min-width:160px}
.list-search input{font:inherit;width:100%;padding:4px 12px;border:1px solid var(--line);
  border-radius:7px;background:var(--field-bg);color:var(--ink);font-size:13px}
.list-search input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.list-tools .count-line{margin-left:auto}
.list-note{font-size:12px;color:var(--muted);margin:0;padding:var(--sp-2) var(--sp-4) var(--sp-3)}

/* 見出しを押すと並べ替わる。印で今の向きを示す。
   漏斗印は見出し名のすぐ隣に置く（列の右端に置くと隣の列の印と見分けが付かない） */
.list th .th-inner{display:flex;align-items:center;gap:var(--sp-1);justify-content:flex-start}
.list th .sortbtn{display:flex;align-items:center;gap:var(--sp-1);flex:0 1 auto;min-width:0;
  background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer;text-align:left}
.list th .sortbtn:hover{color:var(--ink)}
.list th .sortbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.list th.sorted{color:var(--ink)}
.list th .sortmark{font-size:10px;line-height:1}

/* 列ごとの絞り込み（見出しの漏斗印 -> 札） */
.colfil{flex:0 0 auto;line-height:1}
.colfil-btn{display:inline-flex;align-items:center;gap:var(--sp-1);padding:4px;line-height:1;
  position:relative;border:1px solid transparent;border-radius:7px;background:none;
  color:var(--muted);cursor:pointer}
/* 見た目は小さくても、押せる範囲は広げる（枠の 4px 外まで反応することを実測）。
   この擬似要素は枠の外へ出るため、**中身の大きさ（scrollWidth）が枠より大きく測られる** -
   UI の機械検査が「文字が切れている」と誤って知らせるので、検査側で除く
   （同じ書き方の .iconbtn は押せる範囲が広がっておらず、効果が無いまま
     検査を誤らせるだけだったので 2026/08/21 に削除した） */
.colfil-btn::after{content:"";position:absolute;inset:-6px}
.colfil-btn:hover{background:var(--panel2);color:var(--ink)}
.colfil-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.colfil.open .colfil-btn{color:var(--ink);background:var(--panel2);border-color:var(--line)}
.colfil.on .colfil-btn{color:var(--accent);border-color:var(--accent)}
.colfil-count{font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums}
.colfil:not(.on) .colfil-count{display:none}
/* 札は fixed で出す（表の横スクロール枠に切られないため）。位置は JS が決める */
.colfil-panel{position:fixed;z-index:40;min-width:212px;max-width:300px;overflow:auto;
  display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-3);
  background:var(--float-bg);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--float-shadow);white-space:normal;
  font-size:13px;font-weight:400;color:var(--ink)}
.colfil-panel[hidden]{display:none}
.colfil-head{font-size:12px;color:var(--muted)}
.colfil-panel input[type=text]{font:inherit;width:100%;padding:4px 8px;font-size:12.5px;
  border:1px solid var(--line);border-radius:7px;background:var(--field-bg);color:var(--ink)}
.colfil-panel input[type=text]:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.colfil-all{display:flex;align-items:center;gap:var(--sp-2);padding-bottom:var(--sp-2);
  border-bottom:1px solid var(--rule);cursor:pointer;color:var(--muted);font-size:12.5px}
.colfil-opts{display:flex;flex-direction:column;overflow:auto;max-height:232px;margin:0 -4px}
/* display の指定は hidden 属性より強い。文字入力の列で選択肢側を消すため明示する */
.colfil-all[hidden],.colfil-opts[hidden],.colfil-foot[hidden]{display:none}
.colfil-opt{display:flex;align-items:center;gap:var(--sp-2);padding:4px;border-radius:3px;cursor:pointer}
.colfil-opt:hover{background:var(--panel2)}
.colfil-opt[hidden]{display:none}
.colfil-opt .nm{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.colfil-opt .cnt{flex:0 0 auto;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.colfil-foot{display:flex;justify-content:flex-end;gap:var(--sp-2);
  padding-top:var(--sp-2);border-top:1px solid var(--rule)}
.bone{display:block;height:11px;border-radius:3px;background:var(--panel2);border:1px solid transparent}
.bone.w1{width:78%} .bone.w2{width:52%} .bone.w3{width:34%}
.blank{padding:var(--sp-8) var(--sp-4);text-align:center}
.blank p{margin:0 0 var(--sp-1);font-size:14px}
.blank .sub{color:var(--muted);font-size:13px;margin-bottom:var(--sp-4);text-wrap:pretty;
  max-width:38em;margin-left:auto;margin-right:auto}
.failed{display:flex;align-items:center;gap:var(--sp-5);
  /* 左 13px は光学補正（3px の縁と合わせて 16px。段階外だが意図的） */
  padding:var(--sp-5) var(--sp-4) var(--sp-5) 13px;
  border-left:3px solid var(--muted);background:var(--panel2)}
.failed .body{flex:1 1 auto;min-width:0}
.failed p{margin:0;font-size:14px}
.failed .sub{color:var(--muted);font-size:13px;margin-top:var(--sp-1);max-width:38em}

/* ===== 検索・絞り込み ===== */
.filters{display:flex;gap:var(--sp-2);align-items:flex-end;flex-wrap:wrap;margin-bottom:var(--sp-4)}
.filters .field{margin:0}
.filters .field input,.filters .field select{min-width:0}
.pager{display:flex;gap:var(--sp-2);align-items:center;margin-top:var(--sp-3);font-size:13px;color:var(--muted)}

/* ===== フォーム部品 ===== */
.field{margin-bottom:var(--sp-5)}
.field label{display:block;font-size:13px;margin-bottom:var(--sp-2);font-weight:500}
.field input[type=text],.field input[type=email],.field input[type=password],
.field input[type=number],.field input[type=url],.field select,.field textarea{
  font:inherit;width:100%;padding:8px 12px;border:1px solid var(--line);
  border-radius:7px;background:var(--field-bg);color:var(--ink)}
.field textarea{resize:vertical;min-height:72px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.field input:disabled,.field select:disabled,.field textarea:disabled{
  opacity:.6;background:var(--panel2);cursor:default}
.field .hint{font-size:12px;color:var(--muted);margin-top:var(--sp-2);max-width:38em;text-wrap:pretty}
/* 誤りを示す文は .field の外にも置く（ログイン失敗・締め出しの理由・組み立て失敗・保存不可）。
   色を .field の中だけに書いていたため、それらが本文の色のまま出ていた。
   要素名で絞るのは .tab.err（button）と .toast.err（div）へ字の大きさを漏らさないため */
p.err{font-size:12.5px;color:var(--err);margin:0}
.field .err{font-size:12.5px;color:var(--err);margin-top:var(--sp-2)}
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"]{
  border-color:var(--err)}
.field input[aria-invalid="true"]:focus{outline-color:var(--err)}
.field .checkline{display:flex;gap:var(--sp-2);align-items:center;font-size:13.5px;font-weight:400}
.field .checkline input{width:auto}
.form-wrap{max-width:560px}

/* ===== 釦 ===== */
.btn{cursor:pointer;border:1px solid var(--accent);background:var(--accent);
  color:var(--accent-ink);padding:8px 20px;border-radius:7px;transition:opacity .15s;white-space:nowrap}
.btn:hover{opacity:.88}
.btn:active:not(:disabled),.iconbtn:active:not(:disabled){transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn:disabled{opacity:.55;cursor:default}
.btn[aria-busy="true"]{opacity:.6;cursor:default}
.btn.ghost{background:transparent;color:var(--muted);border-color:var(--line)}
.btn.ghost:hover{background:var(--panel2);opacity:1;color:var(--ink)}
.btn.caution{background:var(--caution);border-color:var(--caution);color:var(--caution-ink)}
.btn.danger{background:var(--urgent);border-color:var(--urgent);color:#fff}
html[data-theme="dark"] .btn.danger{color:#1b0d0d}
.btn.small{padding:4px 12px;font-size:12.5px}
.actions{display:flex;align-items:center;gap:var(--sp-4);margin-top:var(--sp-6);flex-wrap:wrap}

/* タブ。関心ごとに切り替える（横に並べず、選んだものだけ出す） */
.tabbar{display:flex;gap:var(--sp-1);border-bottom:1px solid var(--line);
  margin-bottom:var(--sp-5);flex-wrap:wrap}
.tab{background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);
  padding:var(--sp-2) var(--sp-4);cursor:pointer;font-size:13.5px;margin-bottom:-1px;
  border-radius:7px 7px 0 0}
.tab:hover{background:var(--panel2);color:var(--ink)}
.tab.on{color:var(--ink);border-bottom-color:var(--accent);font-weight:600}
.tab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* 入力の誤りがあるタブ。色だけでなく印でも分かるようにする */
.tab.err{color:var(--err)}
.tab.err::after{content:' !';font-weight:600}
.tab.err.on{border-bottom-color:var(--err)}
@media (pointer:coarse){ .tab{min-height:44px} }

/* 設定の板は縦に積む。入力欄を画面幅いっぱいに伸ばすと、
   ラベルと欄が離れて目で追いにくくなるため、読める幅で止める */
.board.group{margin-bottom:var(--sp-5);max-width:720px}
.board.group .grouptitle{font-size:14px;font-weight:600;margin:0;
  padding:var(--sp-4) var(--sp-6) 0}
.board.group .groupdesc{font-size:12.5px;color:var(--muted);margin:var(--sp-1) 0 0;
  padding:0 var(--sp-6);max-width:38em;text-wrap:pretty}
.board.group .pad{padding:var(--sp-5) var(--sp-6) var(--sp-2)}
.board.group .field:last-child{margin-bottom:var(--sp-3)}

/* ===== 詳細画面 ===== */
.kv{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:var(--sp-2) var(--sp-5);
  font-size:13.5px;align-items:baseline}
.kv dt{color:var(--muted);font-size:12.5px}
.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
/* **情報カードのリンクにも色を与える。** 一覧（.list a）には指定があるのに
   ここだけ無く、ブラウザ既定の #0000EE がそのまま出ていた。明るい配色では
   読めるが（比 9.4）、**暗い配色では比 1.85 で実質読めない**
   （2026/09/02 に暗い配色のコントラストを測って発覚。機械検査は
   文字の切れ・はみ出し・折り返ししか見ないので、この 1 件は出なかった）。
   一覧と同じ扱いにして、下線で「押せる」ことを示す */
.kv dd a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.kv dd a:hover{color:var(--accent)}
.kv dd a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.badge{display:inline-block;font-size:12px;padding:2px 8px;border-radius:99px;
  border:1px solid var(--line);color:var(--muted);background:var(--panel2)}
/* 正常（有効）は無彩色。色は異常にだけ与える（VISUAL-DIRECTION.md §2「正常時は色を使わない」。
   一覧に 50 個並んでもアクセントの希少性を壊さず、赤が出たときに確実に目へ入る） */
.badge.st-active{border-color:var(--line);color:var(--ink);background:transparent}
.badge.st-revoked,.badge.st-suspended{border-color:var(--urgent);color:var(--urgent);background:transparent}
.badge.st-expired,.badge.st-superseded{border-color:var(--line);color:var(--muted)}
.subhead{font-size:13px;font-weight:600;color:var(--muted);margin:var(--sp-6) 0 var(--sp-2)}

/* ===== ログイン ===== */
.login-wrap{max-width:400px;margin:12vh auto 0;padding:0 var(--sp-5)}
.login-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:var(--sp-7) var(--sp-7)}
.login-card h1{font-size:18px;margin:0 0 var(--sp-5)}

/* ===== モーダル（alert は使わない） ===== */
.modal-back{position:fixed;inset:0;background:rgba(15,17,21,.45);z-index:50;
  display:flex;align-items:flex-start;justify-content:center;padding:10vh var(--sp-5) var(--sp-5)}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  width:100%;max-width:480px;max-height:80vh;overflow-y:auto;
  padding:var(--sp-6) var(--sp-6)}
.modal h2{font-size:16px;font-weight:600;margin:0 0 var(--sp-3);text-wrap:balance}
.modal .modal-body{font-size:13.5px;color:var(--muted);margin-bottom:var(--sp-2);text-wrap:pretty}
.modal .modal-body b{color:var(--ink)}
.modal.caution{border-color:var(--caution-line);background:var(--caution-bg)}
.modal.caution h2{color:var(--caution)}
.modal.wide{max-width:760px}
/* メールテンプレートは日本語と英語を並べて直す（片方だけ直して食い違うのを防ぐ） */
.modal.wide:has(.tpl-pair){max-width:1080px}
.tpl-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5)}
@media (max-width:900px){.tpl-pair{grid-template-columns:1fr}}
.tpl-col{min-width:0}
.tpl-lang{font-size:12px;font-weight:600;color:var(--muted);margin:0 0 var(--sp-3);
  padding-bottom:var(--sp-2);border-bottom:1px solid var(--rule)}
/* 使える変数の一覧（既定は畳んでおく） */
.varbox{border:1px solid var(--line);border-radius:7px;padding:var(--sp-3) var(--sp-4);
  margin-bottom:var(--sp-5);background:var(--panel2)}
.varbox summary{cursor:pointer;font-size:13px;font-weight:500}
.varbox summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.varbox .hint{margin:var(--sp-2) 0}
.varlist{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px;margin-top:var(--sp-2)}
.varlist th{text-align:left;font-weight:500;color:var(--muted);font-size:11.5px;
  padding:var(--sp-1) var(--sp-2);border-bottom:1px solid var(--line)}
.varlist td{padding:var(--sp-1) var(--sp-2);border-bottom:1px solid var(--rule);vertical-align:top}
.varlist tr:last-child td{border-bottom:0}
.varlist td.mono{white-space:nowrap}
/* メール本文・テンプレートの表示（等幅・折り返し・原文のまま） */
.mailview{font-family:var(--mono);font-size:13px;background:var(--panel2);
  border:1px solid var(--line);border-radius:7px;padding:var(--sp-3) var(--sp-4);
  white-space:pre-wrap;word-break:break-word;margin:0}
.mailview.body{max-height:46vh;overflow-y:auto}
.modal .keyshow{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.04em;
  background:var(--panel2);border:1px solid var(--line);border-radius:7px;
  padding:var(--sp-3) var(--sp-4);margin:var(--sp-3) 0;font-size:14px;user-select:all;
  overflow-x:auto;white-space:nowrap}

/* ===== 知らせ（右下・自動で消える。role=status） ===== */
.toast-wrap{position:fixed;right:var(--sp-4);bottom:var(--sp-4);z-index:60;
  display:flex;flex-direction:column;gap:var(--sp-2);max-width:360px}
.toast{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:12px;padding:var(--sp-3) var(--sp-4);font-size:13px;
  animation:toast-in .2s cubic-bezier(.23,1,.32,1)}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.toast.err{border-left-color:var(--urgent)}

/* ===== 補助 ===== */
/* 説明文は最終行が 1 語だけ残らないように分配する。
   同じ役目の .why / .blank .sub / .modal-body には付いていたのに、
   いちばん長い .notewrap だけ抜けていた（実測: テンプレート画面の 3 行目が 13% しか埋まっていなかった。
   2026/08/23 の点検で発覚） */
.notewrap{font-size:12.5px;color:var(--muted);max-width:38em;margin:0 0 var(--sp-4);text-wrap:pretty}

@media (pointer:coarse),(max-width:560px){
  .btn{min-height:44px}
}
@media (max-width:860px){
  .shell{flex-direction:column}
  .nav{position:static;height:auto;flex:none;border-right:0;border-bottom:1px solid var(--line);
    flex-direction:row;flex-wrap:wrap;align-items:center;gap:0;padding:var(--sp-2) var(--sp-2)}
  .nav .brand{border-bottom:0;margin-bottom:0;padding:var(--sp-2) var(--sp-3)}
  .nav a{border-left:0;border-bottom:3px solid transparent;padding:var(--sp-2) var(--sp-3)}
  .nav a.on{border-left-color:transparent;border-bottom-color:var(--accent)}
  .nav .navgroup{display:none}
  .nav .navfoot{margin:0;border-top:0;padding:var(--sp-2) var(--sp-3)}
  .main{padding:var(--sp-4) var(--sp-3) 112px}
  .quiet{padding:var(--sp-9) var(--sp-6)}
  .quiet-line{font-size:22px}
  .urgent-row{flex-wrap:wrap;padding:var(--sp-4) var(--sp-5)}
  .urgent-row .go{width:100%}
  .urgent-row .go .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* JavaScript を切っている環境への案内。画面は SPA なので、無いと白紙のまま理由が分からない */
.noscript{max-width:640px;margin:var(--sp-6) auto;padding:var(--sp-5) var(--sp-6);
  border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink)}