/* The whole visual language, in one file. There is no framework and no build:
   what is written here is what the browser receives. */

:root {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --ink: #1a1d21;
  --muted: #6b7280;
  --line: #e3e6ea;
  --accent: #1f5f8b;
  --accent-soft: #eaf2f8;
  --draft: #8a8f98;
  --review: #b4761a;
  --approved: #2f7a4d;
  --obsolete: #9a3d3d;
  --danger: #b3261e;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.7 -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}
button { font: inherit; cursor: pointer; }
input, select { font: inherit; }
a { color: var(--accent); }

/* login */
#loginView { max-width: 380px; margin: 12vh auto; padding: 0 20px; }
#loginView h1 { font-size: 20px; margin: 0 0 4px; letter-spacing: .04em; }
#loginView p.sub { color: var(--muted); font-size: 13px; margin: 0 0 24px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 22px; }
label { display: block; font-size: 12px; color: var(--muted); margin: 12px 0 4px; letter-spacing: .04em; }
input[type=text], input[type=password] {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px; background: #fff;
}
/* 焦点は :focus-visible の節（末尾）が持つ。旧来の --accent-soft の outline は
   白地に 1.13:1 で事実上見えていなかった。 */
input:focus { outline: none; border-color: var(--accent); }
.primary {
  width: 100%; margin-top: 20px; padding: 10px; border: 0; border-radius: 6px;
  background: var(--accent); color: #fff; font-weight: 600; letter-spacing: .06em;
}
.primary:disabled { opacity: .5; cursor: default; }
.err { color: var(--danger); font-size: 13px; margin-top: 12px; min-height: 20px; }
/* 空でないときだけブロックになる——380px の右カラムでは素の赤文字が折返しの下に沈む。 */
.err:not(:empty) {
  border-left: 4px solid var(--danger); background: #fdeeed; font-weight: 600;
  padding: 9px 12px; border-radius: 0 6px 6px 0; margin: 12px 0 0;
}

/* shell */
#app { display: none; }
header {
  background: var(--panel); border-bottom: 1px solid var(--line);
  padding: 0 22px; height: 56px; display: flex; align-items: center; gap: 14px;
}
header .brand { font-weight: 700; letter-spacing: .1em; color: var(--accent); }
/* 帯は名前を読ませ、**アカウントIDは常に隣に出す**。台帳（documents.created_by・
   approved_by・op_log.actor）が名乗るのは auth_accounts.id だけなので、これが消えると
   人は単票の承認者欄を見ても自分のものだと確かめられない。**テナントIDは title に置く**
   ——テナントを名乗る列は台帳に1つも無く（テナントはDBファイルそのもの）、突き合わせる
   相手ではないからである。この非対称は意図であって、書き忘れではない。 */
header .tenant {
  color: var(--ink); font-size: 13px; font-weight: 600;
  /* 会社名は長さが読めない。折り返すと帯（高さ 56px 固定）から溢れてロールのピルが
     2段目に落ちるので、1行に留めて溢れる分だけ省略する。**縮む役はここ1つだけ**で、
     幅が足りないときに削られるのは会社名である（IDとロールは縮まない）。
     上限は置かない——nowrap と ellipsis で溢れは既に止まっており、固定上限を足すと
     帯に余白があっても切られる（C2 実測: 1440px で「一般社団法人日本品質マネジ…」）。 */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /* overflow:hidden は flex 項目の自動最小幅を 0 にするので、そのままだと窓が狭いとき
     会社名が1文字まで潰れる（実測 536px で「デ·」）。下限を置く。 */
  min-width: 6ch;
}
header .spacer { flex: 1; }
/* 名前・ID・ロールの3つで1組。IDは途中で切ると「短いID」に見え、台帳の値と
   突き合わせる相手として嘘になるので、縮めも隠しもしない。
   幅で隠す媒体クエリを一度置いたが外した——900px という固定の境は「載るかどうか」を
   測っておらず、実測では 768px でも 180px 余っているのにIDを落としていた（C2）。
   代わりに置いていた言い訳（「単票の登録者・承認者欄に全長が在る」）も誤りで、
   そこに出るのは**他人のID**である。自分のIDを出す場所は帯しか無い。 */
.who { font-size: 13px; color: var(--muted); white-space: nowrap; flex-shrink: 0; }
header .who .name { color: var(--ink); font-weight: 600; }
header .brand, header .linkish { white-space: nowrap; }
/* 入らない幅では**帯を高くする**。隠すのでも横へ逃がすのでもない——
   隠せば情報が消え、横スクロールにすればログアウトが画面外に出て、押せることに
   気づけない（実測 536px でボタンの右端が 552px＝窓の外だった）。折り返しなら
   失われるものが無く、境の見積もりを外しても代償は「帯が1段高い」だけである。
   固定の境をIDの表示に使うのをやめたのはそのためで（C2: 768px でも 180px 余って
   いるのにIDを落としていた）、境を残すならこちら側に置く。 */
@media (max-width: 760px) {
  header {
    height: auto; min-height: 56px; flex-wrap: wrap;
    padding-top: 8px; padding-bottom: 8px; row-gap: 6px;
  }
  header .spacer { display: none; }
}
.role {
  display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px;
  background: var(--accent-soft); color: var(--accent); font-weight: 700; letter-spacing: .06em;
}
.linkish { background: none; border: 0; color: var(--muted); text-decoration: underline; font-size: 13px; }

nav#tabs { background: var(--panel); border-bottom: 1px solid var(--line); padding: 0 22px; display: flex; gap: 2px; }
nav#tabs button {
  background: none; border: 0; border-bottom: 2px solid transparent; padding: 11px 16px;
  color: var(--muted); font-size: 14px; font-weight: 600; letter-spacing: .04em;
}
nav#tabs button:hover { color: var(--ink); }
nav#tabs button.on { color: var(--accent); border-bottom-color: var(--accent); }
nav#tabs:empty { display: none; }
.panel { display: none; }
.panel.on { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; padding: 18px 22px; align-items: start; }
@media (max-width: 780px) { .panel.on { grid-template-columns: minmax(0, 1fr); } }
main { display: block; }

section { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 18px; }
section > h2 {
  font-size: 13px; letter-spacing: .1em; color: var(--muted); margin: 0;
  padding: 13px 16px; border-bottom: 1px solid var(--line); font-weight: 700;
}

table { width: 100%; border-collapse: collapse; }
table caption { text-align: left; font-weight: 600; font-size: 14px; color: var(--ink); padding: 14px 16px 8px; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
th, td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
th { font-size: 11px; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
/* 押せるのは data-id を名乗る行だけ。名乗らない行に affordance を配らない。 */
tbody tr[data-id] { cursor: pointer; }
tbody tr[data-id]:hover { background: #fafbfc; }
tbody tr.on { background: var(--accent-soft); }
tbody tr:last-child td { border-bottom: 0; }
.empty { padding: 34px 16px; text-align: center; color: var(--muted); font-size: 14px; }

.badge { display: inline-block; padding: 2px 9px; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: #fff; }
.s-draft { background: var(--draft); } .s-review { background: var(--review); }
.s-approved { background: var(--approved); } .s-obsolete { background: var(--obsolete); }

.pad { padding: 16px; }
dl { margin: 0; display: grid; grid-template-columns: 92px 1fr; gap: 7px 12px; font-size: 13px; }
dt { color: var(--muted); }
dd { margin: 0; word-break: break-all; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

.actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--line); }
.act { padding: 7px 14px; border: 1px solid var(--line); background: #fff; border-radius: 6px; font-size: 13px; }
.act:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.act.go { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
/* hover の規則（.act:hover:not(:disabled)・詳細度 0,3,0）が .act.go（0,2,0）の白い文字を accent 色に
   塗り替え、accent の地の上で文字が消えていた——押した直後の「保存」「いま1巡する」が青い箱になる
   （手元の確認 2026-09-07・F-1290）。塗りつぶしのボタンは hover でも白のまま。 */
.act.go:hover:not(:disabled) { color: #fff; border-color: var(--accent); }
.act:disabled { opacity: .38; cursor: not-allowed; }
/* .off は <a> 版の :disabled である。リンクは disabled を持てないので、無効に
   見せる約束をクラスで書いていた——が、この規則が無かったあいだ、押せるリンクと
   色も不透明度も枠線も同一だった（C2・2026-08-14）。:disabled と同じ見た目にする。 */
.act.off { opacity: .38; cursor: not-allowed; }
.act.off:hover { border-color: var(--line); color: inherit; }
.note { font-size: 12px; color: var(--muted); padding: 0 16px 14px; }
.flash { margin: 0 16px 14px; padding: 9px 12px; border-radius: 6px; font-size: 13px; }
.flash.ok { background: #eef7f1; color: var(--approved); }
.flash.ng { background: #fdeeed; color: var(--danger); }
.drop { border: 1px dashed var(--line); border-radius: 8px; padding: 14px; text-align: center; color: var(--muted); font-size: 13px; }

/* operation log */
ol.trail { list-style: none; margin: 0; padding: 4px 16px 16px; }
ol.trail li { position: relative; padding: 9px 0 9px 22px; border-left: 2px solid var(--line); }
ol.trail li:last-child { border-left-color: transparent; }
ol.trail li::before {
  content: ''; position: absolute; left: -6px; top: 15px;
  width: 10px; height: 10px; border-radius: 50%; background: var(--line);
}
ol.trail li.approved::before { background: var(--approved); }
ol.trail li .what { font-size: 13px; font-weight: 600; }
ol.trail li .meta { font-size: 12px; color: var(--muted); }

/* forms: a select and a textarea read like the inputs beside them */
form select {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px; background: #fff;
}
textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px;
  background: #fff; font: inherit; resize: vertical; min-height: 5.5em;
}
/* 「キー | 表示名」は行指向なので等幅で | を縦に揃える */
textarea.items { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.6; }

/* 右レールの長い一覧はカードの中でスクロールする（人が30人を超えても他の面が沈まない） */
.railScroll { max-height: 360px; overflow: auto; }
.railScroll thead th {
  position: sticky; top: 0; z-index: 1; background: var(--panel);
  border-bottom: 0; box-shadow: inset 0 -1px 0 var(--line);
}

/* skill matrix (F-3130) */
.bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px 4px; }
.bar select { padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
/* max-height が無いと sticky は効かない——スクロールしない容れ物の sticky は発火しない（実測）。 */
.matrixScroll { overflow: auto; max-height: min(70vh, 620px); overscroll-behavior: contain; }
/* 余り幅は人の列に配る——項目列は width:1px（縮んで内容幅）＋max-width で留める。
   人が増えたら min-width:96px が下限になり、表ごと横スクロールへ倒れる。 */
table.matrix { width: 100%; }
/* 罫線は影で描く。border-collapse の罫線は sticky セルに付いてこない（csswg #3136）。 */
table.matrix th, table.matrix td { border-bottom: 0; box-shadow: inset 0 -1px 0 var(--line); }
table.matrix thead th { position: sticky; top: 0; z-index: 2; background: var(--panel); }
/* 項目名は切らずに折り返して全文を見せる——省略記号＋ツールチップは実データ
   （長い公差指定の項目）で「読めない台帳」になった（2026-08-28 実測）。 */
table.matrix th.item {
  position: sticky; left: 0; z-index: 1; background: var(--panel);
  box-shadow: inset -1px 0 0 var(--line), inset 0 -1px 0 var(--line);
  font-weight: 500; font-size: 13px; line-height: 1.5; letter-spacing: 0; color: var(--ink);
  width: 280px; min-width: 280px; white-space: normal;
}
table.matrix thead th:first-child { left: 0; z-index: 3; box-shadow: inset -1px 0 0 var(--line), inset 0 -1px 0 var(--line); }
table.matrix tbody tr:last-child td.cell { box-shadow: none; }
table.matrix tbody tr:last-child th.item { box-shadow: inset -1px 0 0 var(--line); }
table.matrix th.person { min-width: 96px; text-align: center; }
table.matrix th.person .who { display: block; font-size: 13px; color: var(--ink); letter-spacing: 0; }
/* セルの実体は td の中の button——キーボード到達とフォーカスをブラウザから貰う。 */
table.matrix td.cell { text-align: center; padding: 0; height: 52px; }
table.matrix td.cell > button {
  display: block; width: 100%; height: 100%; min-height: 52px; padding: 4px 8px;
  border: 0; background: none; font: inherit; color: inherit; cursor: pointer;
}
table.matrix td.cell > button:hover { background: var(--accent-soft); }
table.matrix td.cell > button.on { background: var(--accent-soft); outline: 2px solid var(--accent); outline-offset: -2px; }
table.matrix td.cell > button:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }
/* 空欄の＋は hover と focus に出す。/ '' は代替テキストを空にする——空のセルは空の名前のまま。 */
table.matrix td.cell.blank > button:is(:hover, :focus-visible)::before { content: '＋' / ''; color: var(--accent); opacity: .55; }
/* 行の追跡と退職者の列。sticky の不透明背景（上）より後に置くこと。 */
table.matrix tbody tr:hover th.item, table.matrix tbody tr:hover td.cell { background: #fafbfc; }
table.matrix th.person.dim, table.matrix td.cell.dim {
  background-image: repeating-linear-gradient(45deg, transparent 0 6px, rgba(0, 0, 0, .045) 6px 12px);
}
table.matrix td.cell.dim .mark { opacity: .5; }
.mark { font-size: 20px; font-weight: 700; line-height: 1.2; }
.mark.ok { color: var(--approved); }
.mark.ng { color: var(--muted); opacity: .7; } /* ◯だけを図として立たせる。消しはしない */
.mark.stale { color: var(--review); }
.stale-note { display: block; font-size: 11px; color: var(--review); line-height: 1.4; }
.legend {
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline;
  padding: 10px 16px 14px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line);
}
.legend .mark, ol.trail .mark { font-size: 15px; }
.act.sm { padding: 4px 10px; font-size: 12px; }
.flash.info { background: var(--accent-soft); color: var(--accent); }
.seg { display: flex; gap: 8px; }
.seg button {
  flex: 1; padding: 8px 0; border: 1px solid var(--line); background: #fff; border-radius: 6px;
  font-size: 20px; font-weight: 700; color: var(--muted);
}
.seg button.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* keyboard focus. :where() は詳細度0——component 側の規則を1つも上書きしない代わり、
   将来どこかの outline: none に黙って負ける。 */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px;
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent);
}

/* business ledger (F-3140). 表は公開部品 Tabulator の上の薄い層（2026-09-18 人間裁定で手書きを見直し）。部品の既定の見た目は下で上書きする */
.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .04em; margin-left: auto; }
.pill.dirty { background: #fdf3e3; color: var(--review); }
.pill.clean { background: #eef7f1; color: var(--approved); }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); letter-spacing: 0; margin: 0; }
.check input { margin: 0; }
.num { font-variant-numeric: tabular-nums; }
.bar .title { font-weight: 600; font-size: 15px; }
.bar .purpose { color: var(--muted); font-size: 12px; }
.bar .spacer { flex: 1; }
.act.danger:hover:not(:disabled) { border-color: var(--danger); color: var(--danger); }
a.act { text-decoration: none; color: inherit; display: inline-block; line-height: 1.4; }
textarea.csv { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.5; white-space: pre; }

/* #142 帳票の見え方（2026-09-16）——台帳を開いたら表が主役。一覧は畳んで選択欄に、
   補助面（セル・版の履歴・証跡）は「詳細を開く」で要るときだけ出す。開いていないあいだ表が幅を全部使う。 */
.panel.ledgerView.ledgerOpen.on { grid-template-columns: minmax(0, 1fr); }
.panel.ledgerView.ledgerOpen:not(.auxOpen) > .right, .panel.ledgerView.ledgerOpen:not(.auxOpen) .aux { display: none; }
.panel.ledgerView.ledgerOpen.auxOpen.on { grid-template-columns: minmax(0, 1fr) 360px; }
@container feature-content (max-width: 1000px) {
  .panel.ledgerView.ledgerOpen.auxOpen.on { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
.ledgerList > h2 { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.ledgerList > h2 .check { margin-left: auto; }
.ledgerList select.pick { flex: 1 1 220px; min-width: 0; max-width: 100%; padding: 6px 9px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font: inherit; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--ink); }
.ledgerList:not(.collapsed) > h2 select.pick { display: none; }
.ledgerList.collapsed > .body, .ledgerList.collapsed > .note, .ledgerList.collapsed > h2 .check { display: none; }
/* 帯（台帳名・保存状態・理由・保存・詳細）は表を送っても画面の上に残る。 */
section.sheet { border-radius: 6px; }
.sheetBar { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; padding: 10px 14px; background: var(--panel); border-bottom: 1px solid var(--line); border-radius: 6px 6px 0 0; }
.sheetBar .ident { flex: 1 1 240px; min-width: 0; display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.sheetBar .title { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.sheetBar .purpose, .sheetBar .meta { font-size: 12px; color: var(--muted); }
.sheetBar .pill { margin-left: 0; }
.sheetBar .reason { width: 200px; max-width: 100%; padding: 6px 9px; }
.sheetBar .act { white-space: nowrap; }
.sheet > .flash { margin: 12px 14px; }
.sheet .actions { padding: 10px 14px; }
@media (max-width: 639px) {
  .sheetBar .reason { width: 100%; }
}
/* #143 部品（Tabulator）の見た目を #142 の帳票に合わせる——白地・細い罫線・薄い地の見出し・1行の高さ・固定列の影。
   部品の class に対する規則はここに閉じる（vendor/ の CSS は触らない）。 */
.sheet .gridScroll.tabulator { border: 0; background: var(--panel); font: inherit; font-size: 13px; border-radius: 0; }
.ledgerView .tabulator .tabulator-header { background: #f4f6f8; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 600; }
.ledgerView .tabulator .tabulator-header .tabulator-col { background: #f4f6f8; border-right: 1px solid var(--line); }
.ledgerView .tabulator .tabulator-header .tabulator-col.on { background: var(--accent-soft); }
.ledgerView .tabulator .tabulator-header .tabulator-col.on .lbl { color: var(--accent); }
.ledgerView .tabulator .tabulator-header .tabulator-col .tabulator-col-content { padding: 0; }
.ledgerView .tabulator .tabulator-header .tabulator-col .tabulator-col-title { padding: 0; white-space: nowrap; }
.ledgerView .tabulator .tabulator-header .tabulator-col.rn .tabulator-col-title { padding: 6px 8px 6px 4px; font-size: 12px; color: var(--muted); font-weight: 600; }
.ledgerView .tabulator .hd { display: flex; align-items: center; gap: 4px; padding: 6px 4px 6px 8px; min-height: 30px; }
.ledgerView .tabulator .hd .lbl { font-size: 12px; color: var(--ink); font-weight: 600; letter-spacing: 0; outline: none; min-width: 3ch; overflow: hidden; text-overflow: ellipsis; }
.ledgerView .tabulator .hd .lbl[contenteditable=true] { background: var(--accent-soft); padding: 0 4px; border-radius: 4px; overflow: visible; }
.ledgerView .tabulator .hd .lock { font-size: 11px; color: var(--review); }
.ledgerView .tabulator .hd .menuBtn { border: 0; background: none; color: var(--muted); font-size: 14px; line-height: 1; padding: 2px 4px; border-radius: 4px; margin-left: auto; }
.ledgerView .tabulator .hd .menuBtn:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent); }
.ledgerView .tabulator .tabulator-header .tabulator-col.addc .tabulator-col-title { padding: 0; }
.ledgerView .tabulator .addColHead, .ledgerView .tabulator .addRowFoot { border: 0; background: none; color: var(--accent); font-size: 12px; padding: 7px 12px; white-space: nowrap; font-weight: 600; }
.ledgerView .tabulator .tabulator-tableholder { background: var(--panel); }
.ledgerView .tabulator .tabulator-row { background: var(--panel); border-bottom: 1px solid var(--line); min-height: 30px; }
.ledgerView .tabulator .tabulator-row.tabulator-row-even { background: var(--panel); }
.ledgerView .tabulator .tabulator-row:hover { background: #fafbfc; }
.ledgerView .tabulator .tabulator-row.rowOn .tabulator-cell:not(.on) { background-color: #fbfcfd; }
.ledgerView .tabulator .tabulator-row .tabulator-cell { border-right: 1px solid var(--line); padding: 0; height: auto; min-height: 30px; background: inherit; }
.ledgerView .tabulator .tabulator-row .tabulator-cell.tabulator-frozen { border-right: 1px solid var(--line); box-shadow: inset -1px 0 0 var(--line); background: var(--panel); }
.ledgerView .tabulator .tabulator-header .tabulator-col.tabulator-frozen { box-shadow: inset -1px 0 0 var(--line); }
.ledgerView .tabulator .tabulator-frozen.tabulator-frozen-left { border-right: 1px solid var(--line); }
.ledgerView .tabulator .tabulator-row .tabulator-cell.rn { color: var(--muted); font-size: 12px; padding: 0 8px 0 4px; font-variant-numeric: tabular-nums; }
.ledgerView .tabulator .tabulator-row.rowOn .tabulator-cell.rn { color: var(--accent); font-weight: 700; background: var(--accent-soft); }
.ledgerView .tabulator .rnw { display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; width: 100%; }
.ledgerView .tabulator .rnw .rm { display: none; border: 0; background: none; color: var(--muted); font-size: 12px; padding: 0 2px; }
.ledgerView .tabulator .tabulator-row:hover .rnw .rm { display: inline; }
.ledgerView .tabulator .rnw .rm:hover { color: var(--danger); }
.ledgerView .tabulator .tabulator-cell.cell .cv { display: block; padding: 5px 8px; font-size: 13px; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ledgerView .tabulator .tabulator-cell.cell.on { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--accent-soft); }
.ledgerView .tabulator .tabulator-cell.cell.hasNote::after { content: ''; position: absolute; top: 0; right: 0; border: 5px solid transparent; border-top-color: var(--review); border-right-color: var(--review); pointer-events: none; }
.ledgerView .tabulator .tabulator-cell.cell.masked { background-image: repeating-linear-gradient(45deg, transparent 0 6px, rgba(0,0,0,.035) 6px 12px); }
.ledgerView .tabulator .tabulator-cell.cell.masked .mk { display: flex; align-items: center; gap: 8px; padding: 3px 8px; min-height: 30px; }
.ledgerView .tabulator .tabulator-cell.cell.masked .dots { letter-spacing: .18em; color: var(--muted); font-size: 13px; }
.ledgerView .tabulator .tabulator-cell.cell.masked .cv { flex: 1; padding: 0; min-width: 0; }
.ledgerView .tabulator .tabulator-cell.cell.masked .act.sm { padding: 2px 8px; font-size: 11px; white-space: nowrap; }
.ledgerView .tabulator .tabulator-cell.tabulator-editing { border: 0; outline: 2px solid var(--accent); outline-offset: -2px; padding: 0; overflow: visible; }
.ledgerView .tabulator textarea.cellEdit { display: block; width: 100%; min-height: 30px; padding: 5px 8px; border: 0; outline: none; resize: none; font: inherit; font-size: 13px; line-height: 1.45; background: #fff; white-space: pre-wrap; word-break: break-all; box-sizing: border-box; }
.ledgerView .tabulator .tabulator-row.offView .tabulator-cell.rn { background-image: repeating-linear-gradient(-45deg, transparent 0 4px, rgba(191,105,0,.18) 4px 8px); }
.ledgerView .tabulator .tabulator-row.offView .tabulator-cell.cell .cv { color: var(--muted); }
.ledgerView .tabulator .tabulator-footer { background: var(--panel); border-top: 1px solid var(--line); padding: 0; text-align: left; }
.ledgerView .tabulator .tabulator-footer .tabulator-footer-contents { padding: 0; }
.ledgerView .tabulator .tabulator-placeholder .empty { padding: 28px 16px; color: var(--muted); font-size: 13px; white-space: normal; text-align: center; }
.ledgerView .tabulator .tabulator-col-resize-handle:hover { background: var(--accent-soft); }
/* 見方の帯——絞り込み・並び替え・表示列の引き出しと、件数・据え置きの案内 */
/* 関連記録（#145）——表の「関連記録」列（行番号の右・固定）と、その行の小窓（dialog）。関連は行のもので、セルの補助面には置かない */
.ledgerView .tabulator .tabulator-header .tabulator-col.lkc .lkHd { display: block; padding: 6px 8px; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ledgerView .tabulator .tabulator-row .tabulator-cell.lkc { padding: 3px 6px; }
.ledgerView .tabulator .lkBtn { display: block; width: 100%; border: 1px solid transparent; background: none; border-radius: 6px; padding: 2px 6px; font-size: 12px; line-height: 1.5; color: var(--muted); white-space: nowrap; text-align: left; }
.ledgerView .tabulator .lkBtn.has { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.ledgerView .tabulator .lkBtn.dirty { background: #fdf3e3; color: var(--review); border-color: #f0d9ae; }
.ledgerView .tabulator .lkBtn:hover:not(:disabled), .ledgerView .tabulator .lkBtn:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }
.ledgerView .tabulator .lkBtn:disabled { cursor: default; opacity: .5; }
.lkDialog { width: min(640px, calc(100vw - 24px)); max-height: min(86vh, 760px); padding: 0; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--panel); box-shadow: 0 12px 40px rgba(0,0,0,.18); }
.lkDialog::backdrop { background: rgba(26,29,33,.38); }
.lkDialog .lkTop { display: flex; align-items: baseline; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); z-index: 1; }
.lkDialog .lkTop h2 { font-size: 16px; margin: 0; outline: none; overflow-wrap: anywhere; }
.lkDialog .lkRowNo { font-size: 12px; color: var(--muted); white-space: nowrap; }
.lkDialog .lkClose { margin-left: auto; white-space: nowrap; }
.lkDialog .lkBody { padding: 12px 16px 16px; }
.lkDialog h3 { font-size: 13px; margin: 16px 0 6px; }
.lkDialog .lkNone { font-size: 13px; color: var(--muted); padding: 4px 0; }
.lkDialog ul { list-style: none; margin: 0; padding: 0; }
.lkDialog ul.links li { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; background: #fff; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; }
.lkDialog ul.links li.fresh { background: #fffaf0; border-color: #f0d9ae; }
.lkDialog .lkHead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lkDialog .lkHead .pill { margin-left: 0; }
.lkDialog .lkKind { font-size: 12px; padding: 1px 8px; border-radius: 4px; background: #f4f6f8; }
.lkDialog ul.links .lkTitle { grid-column: 1; font-size: 13px; overflow-wrap: anywhere; }
.lkDialog .lkActs { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.lkDialog .lkErr { grid-column: 1 / -1; font-size: 12px; color: var(--review); }
.lkDialog .lkErr:empty, .lkDialog .lkCandNote:empty { display: none; }
.lkDialog select, .lkDialog input[type=search] { padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 13px; background: #fff; max-width: 100%; }
.lkDialog .lkQuery { width: 100%; }
.lkDialog .lkCands { margin-top: 6px; border: 1px solid var(--line); border-radius: 8px; max-height: 232px; overflow-y: auto; }
.lkDialog .lkCands:empty { display: none; }
.lkDialog .lkCands li { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--line); font-size: 13px; }
.lkDialog .lkCands li:last-child { border-bottom: 0; }
.lkDialog .lkCands .lkTitle { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lkDialog .lkCandNote { font-size: 12px; color: var(--muted); padding: 6px 0 0; }
.lkDialog .lkFoot { margin-top: 14px; font-size: 12px; color: var(--muted); }
.lkDialog .lkFoot.dirty { background: #fdf3e3; color: var(--review); padding: 8px 10px; border-radius: 6px; font-weight: 600; }
@media (max-width: 639px) {
  .lkDialog ul.links li { grid-template-columns: minmax(0, 1fr); }
  .lkDialog .lkActs { grid-column: 1; grid-row: auto; justify-content: flex-start; padding-top: 4px; }
  .lkDialog .lkCands li { flex-wrap: wrap; }
  .lkDialog .lkCands .lkTitle { flex-basis: 60%; white-space: normal; }
}
/* 保存ビュー（#144）——見方の帯の上。選択欄・変更あり・最終更新・管理ボタン */
.savedViews [hidden], .svForm[hidden] { display: none !important; }
.savedViews { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; padding: 8px 14px 0; background: #fbfcfd; font-size: 12px; }
.savedViews .svLabel { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink); }
.savedViews .svPick { padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 13px; font-weight: 400; background: #fff; max-width: 260px; }
.savedViews .svMeta { color: var(--muted); padding: 0; }
.savedViews .svManage { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.svForm { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; padding: 8px 14px 0; background: #fbfcfd; font-size: 12px; }
.svForm .svName { padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 13px; flex: 0 1 240px; min-width: 120px; }
.svForm .note { padding: 0; flex-basis: 100%; }
.viewBar [hidden], .viewPanel[hidden] { display: none !important; }
.viewBar { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; padding: 8px 14px; border-bottom: 1px solid var(--line); background: #fbfcfd; font-size: 12px; }
.viewBar .vb { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 4px 11px; font-size: 12px; color: var(--ink); }
.viewBar .vb:hover { border-color: var(--accent); color: var(--accent); }
.viewBar .vb[aria-expanded=true] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.viewBar .vb.active { font-weight: 700; }
.viewBar .vb .cnt:empty { display: none; }
.viewBar .vb .cnt { background: var(--accent); color: #fff; border-radius: 999px; padding: 0 6px; font-size: 11px; line-height: 16px; }
.viewBar .vb.bad .cnt { background: var(--review); }
.viewBar .count { color: var(--muted); }
.viewBar .drift { display: inline-flex; align-items: center; gap: 8px; color: var(--review); background: #fdf3e3; border-radius: 6px; padding: 3px 8px; }
.viewBar .reset { margin-left: auto; }
.viewPanel { border-bottom: 1px solid var(--line); background: #fff; }
.viewPanel .pad { padding: 10px 14px; }
.viewPanel .cond { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 4px 0; }
.viewPanel .cond.bad { background: #fdf3e3; border-radius: 6px; padding: 4px 6px; }
.viewPanel .cond select, .viewPanel .cond input[type=text] { padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 13px; background: #fff; }
.viewPanel .cond input[type=text] { flex: 1 1 160px; min-width: 100px; }
.viewPanel .cond select:disabled option, .viewPanel .cond option:disabled { color: var(--review); }
.viewPanel .cond .pri { color: var(--muted); min-width: 2ch; }
.viewPanel .cond .rm, .viewPanel .cond .mv { border: 0; background: none; color: var(--muted); font-size: 13px; padding: 2px 5px; border-radius: 4px; }
.viewPanel .cond .rm:hover { color: var(--danger); background: #fdeeed; }
.viewPanel .cond .mv:hover:not(:disabled) { color: var(--accent); background: var(--accent-soft); }
.viewPanel .cond .mv:disabled { opacity: .3; }
.viewPanel .cond .check { font-size: 13px; color: var(--ink); flex: 1 1 200px; }
.viewPanel .cond .check .lock { font-size: 11px; color: var(--review); margin-left: 4px; }
.viewPanel .row { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding-top: 8px; }
.viewPanel .note { padding: 6px 0 0; }
.viewPanel .note.bad { color: var(--review); }
.viewPanel .cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 16px; }
@media (max-width: 639px) { .viewBar .reset { margin-left: 0; } .viewPanel .cols { grid-template-columns: 1fr; } }
.menu { position: absolute; z-index: 20; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(20,30,40,.12); min-width: 200px; padding: 6px; }
.menu button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 7px 10px; border-radius: 6px; font-size: 13px; }
.menu button:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent); }
.menu button:disabled { opacity: .38; }
.menu button.danger:hover { background: #fdeeed; color: var(--danger); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.tip { position: absolute; z-index: 30; max-width: 320px; background: #fbf7ee; border: 1px solid #f0e4c8; border-radius: 8px; padding: 8px 10px; font-size: 13px; box-shadow: 0 8px 24px rgba(20,30,40,.12); pointer-events: none; line-height: 1.5; }
.tip .one + .one { margin-top: 6px; padding-top: 6px; border-top: 1px dashed #e6d5ae; }
.tip .by { font-size: 12px; color: var(--muted); display: flex; gap: 8px; align-items: baseline; }
.tip .txt { white-space: pre-wrap; word-break: break-all; }
.cellHead { padding: 12px 16px 0; }
.cellHead .where { font-size: 12px; color: var(--muted); }
.cellHead .val { font-size: 15px; font-weight: 600; word-break: break-all; margin-top: 2px; }
h3.sub { font-size: 12px; letter-spacing: .08em; color: var(--muted); margin: 14px 16px 0; font-weight: 700; }
ul.comments { list-style: none; margin: 0; padding: 8px 16px 0; display: grid; gap: 8px; }
ul.comments li { background: #fbf7ee; border: 1px solid #f0e4c8; border-radius: 8px; padding: 8px 10px; font-size: 13px; }
ul.comments li .by { font-size: 12px; color: var(--muted); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
ul.comments li .by .rm { margin-left: auto; border: 0; background: none; color: var(--muted); font-size: 12px; }
ul.comments li .by .rm:hover { color: var(--danger); }
ul.comments li .txt { white-space: pre-wrap; margin-top: 2px; }
ul.chg { list-style: none; margin: 0; padding: 6px 16px 14px; font-size: 13px; display: grid; gap: 4px; }
ul.chg li { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: baseline; }
ul.chg li .k { font-size: 11px; letter-spacing: .06em; color: var(--muted); white-space: nowrap; padding-top: 3px; }
ul.chg .old { color: var(--muted); text-decoration: line-through; }
ul.chg .new { color: var(--ink); font-weight: 600; }
ul.chg .arrow { color: var(--muted); margin: 0 6px; }
table.verList td { padding: 9px 12px; font-size: 13px; }
table.verList tr.on td { background: var(--accent-soft); }
pre.json { margin: 0 16px 14px; padding: 12px; background: #f3f5f8; border-radius: 8px; font-size: 11px; line-height: 1.5; max-height: 320px; overflow: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-all; }
ol.trail li.save::before { background: var(--accent); }
ol.trail li.close::before { background: var(--approved); }
ol.trail li.reveal::before { background: var(--review); }
ol.trail li.archive::before { background: var(--obsolete); }

/* 表の最小幅でページを押し広げず、表の領域内で横へ移動する。 */
.panel > * { min-width: 0; }
.tableScroll { overflow-x: auto; }
.tableScroll > table { min-width: 560px; }
nav#tabs { overflow-x: auto; }
nav#tabs button { flex-shrink: 0; white-space: nowrap; }
.bar > *, .actions > * { max-width: 100%; }
@media (max-width: 780px) {
  .panel.on { padding: 12px; gap: 0; }
  .who { white-space: normal; overflow-wrap: anywhere; flex-shrink: 1; }
  ul.chg li { grid-template-columns: minmax(0, 1fr); }
}

/* 文書・記録の一覧を入口にする。狭幅では詳細だけに切り替える。 */
.panel.listDetail { grid-template-columns: minmax(0, 1fr); overflow-anchor: none; }
.panel.listDetail.hasDetail { grid-template-columns: minmax(0, 1fr) minmax(380px, 1fr); }
.listDetail:not(.hasDetail) > .right { display: none; }
.listDetail section > h2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.listDetail .rowOpen { border: 0; padding: 0; background: none; color: var(--accent); text-align: left; font: inherit; text-decoration: underline; }
.listDetail .tableScroll .mono, .listDetail .tableScroll .badge { white-space: nowrap; }
.listDetail summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.listDetail section > details > summary { padding: 14px 16px; }
.listDetail .metadata dl { margin-top: 14px; }
.listDetail .backList { margin: 12px 16px 0; }
.listDetail .primarySlots > .actions { border-top: 0; padding-top: 0; }
.listDetail .documentStatus { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.listDetail .metadata { border-top: 1px solid var(--line); }
@media (max-width: 780px) {
  .panel.listDetail.hasDetail { grid-template-columns: minmax(0, 1fr); }
  .listDetail.hasDetail > .left { display: none; }
}

/* スキルマップは評価作業を主面に、管理をその下へ置く。 */
.panel.skillView.on { display: block; overflow-anchor: none; }
.skillWork { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.skillWork.hasCell { grid-template-columns: minmax(0, 1fr) minmax(340px, .7fr); }
.skillWork > section, .skillManagement > section { min-width: 0; }
.skillWork .backList { margin: 12px 16px 0; }
.skillManagement { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.skillManagement summary, .cellHistory summary { padding: 14px 16px; cursor: pointer; font-weight: 600; }
.skillManagement .body { overflow-x: auto; }
.skillManagement table { min-width: 480px; }
.skillManagement .badge, .skillManagement .act.sm { white-space: nowrap; }
.skillFilters { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; padding: 12px 16px; }
.skillFilters label { flex: 1 1 150px; min-width: 0; margin: 0; }
.skillFilters input, .skillFilters select { width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); font: inherit; }
.skillFilters .counts { flex-basis: 100%; padding: 0; }
.skillView .bar select { max-width: 100%; min-width: 0; }
.skillView fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.skillView .ev label { display: block; margin-top: 12px; }
.skillView .ev textarea, .skillView .ev input { display: block; width: 100%; }
.skillView [hidden] { display: none !important; }
.skillView .saveState { padding: 8px 0 0; }
.skillView .cellHistory { border-top: 1px solid var(--line); }
@media (max-width: 780px) {
  .skillWork.hasCell, .skillManagement { grid-template-columns: minmax(0, 1fr); }
  .skillWork.hasCell > section:first-child { display: none; }
  .skillWork:not(.hasCell) > section:nth-child(2) { display: none !important; }
  .skillView table.matrix th.item { width: 140px; min-width: 140px; max-width: 140px; }
  .skillView .bar { align-items: stretch; }
}

/* 社員台帳 */
.skillView .employeeRows { overflow: auto; max-height: 65vh; }
.skillView .employeeRows table { min-width: 1100px; }
.skillView .employeeRows th { white-space: nowrap; }
.skillView .employeeEditor { margin-top: 18px; }
.skillView .employeeEditor form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.skillView .employeeEditor label input, .skillView .employeeEditor label select { width: 100%; }
.skillView .employeeEditor .actions, .skillView .employeeEditor p { grid-column: 1 / -1; }
.skillView summary { cursor: pointer; padding: 14px 16px; }
.skillView .employeeConfirm table { min-width: 900px; }
.skillView .employeeRows input[type=checkbox] { width: 20px; height: 20px; }
.skillView .csv code { overflow-wrap: anywhere; }
@media(max-width:780px) { .skillView .employeeEditor form { grid-template-columns: minmax(0,1fr); } }

/* Optional register search: controls wrap without widening the page. */
.registerSearch fieldset { border: 1px solid var(--line, #ddd); margin: 2px 0; padding: 4px 8px; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.registerSearch fieldset label { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: 13px; }
.registerSearch input[type="checkbox"] { width: auto; margin: 0; }
.registerSearch legend { font-size: 12px; color: var(--muted); }
.searchActions, .searchPaging { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.registerSearch button:disabled, .searchPaging button:disabled { opacity: .45; cursor: default; }
.registerSearch { padding: 6px 16px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 12px; }
.registerSearch > label { display: block; min-width: 0; margin: 0; }
.registerSearch > label:has(select), .searchPaging, .registerSearch > .note { grid-column: 1 / -1; }
.registerSearch input[type="search"] { box-sizing: border-box; display: block; width: 100%; padding: 9px 10px; margin-top: 5px; border: 1px solid var(--line, #ddd); border-radius: 4px; font: inherit; color: inherit; background: white; }
.searchActions { align-self: end; }
@media (max-width: 639px) { .registerSearch { grid-template-columns: minmax(0, 1fr); } }

/* Header search opens above the active register without moving its filters. */
#headerActions:empty { display: none; }
.headerSearch[hidden] { display: none; }
.searchIcon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; }
.headerSearchPopup { position: absolute; z-index: 20; right: 16px; top: 100%; width: min(360px, calc(100vw - 32px)); padding: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 24px #0002; }
.headerSearchPopup label { display: block; font-size: 13px; margin: 0; }
.headerSearchPopup input { width: 100%; margin: 8px 0; }
header { position: relative; }

.registerSearch .types { align-items: center; }
.searchTypeRow { display: flex; align-items: center; gap: 12px; min-width: 0; grid-column: 1 / -1; }
.searchTypeRow .types { flex: 1; }
.searchTypeRow .reset { flex-shrink: 0; }
.searchSummary { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; font-size: 13px; }
.searchSummary[hidden] { display: none; }
.searchTerm { min-width: 0; overflow-wrap: anywhere; }
.searchSummary .clearQuery { flex-shrink: 0; }


.registerSearch select { padding: 5px 9px; margin-top: 2px; }
.registerSearch .act, .searchPaging .act, .headerSearchPopup .act { padding: 5px 10px; min-height: 30px; }
.searchPaging.pad { padding: 6px 16px; margin: 0; }

/* F-1290: the viewport contains long text and wide tables. */
.mirrorDetail, .mirrorPreview { min-width:0; overflow-wrap:anywhere; }
.mirrorBody { max-height:65vh; overflow:auto; line-height:1.8; min-width:0; }
.mirrorBody p { white-space:pre-wrap; }
.mirrorBody pre, pre.mirrorBody, .mirrorDiff { max-height:65vh; overflow:auto; white-space:pre; padding:12px; background:var(--bg); }
.mirrorTable { overflow:auto; max-width:100%; }
.mirrorTable td { white-space:normal; min-width:100px; }
.mirrorPreview { padding:12px 0; border-bottom:1px solid var(--line); }
.mirrorDiff del { display:block; color:#a12622; background:#fff0f0; text-decoration:none; }
.mirrorDiff ins { display:block; color:#14613a; background:#eaf8ee; text-decoration:none; }
.mirrorDetail [hidden] { display:none; }

.mirrorReading { grid-template-columns:minmax(0,1fr) !important; }

.mirrorRowActions { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.mirrorReason { padding:6px 0 0; white-space:normal; }
.mirrorImportTarget { font-weight:600; }
.mirrorDetail .source[aria-pressed="true"] { background:var(--accent); color:white; }

/* Language selection remains available before and after login. */
.languageBar { padding: 8px 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: var(--surface, #fff); border-bottom: 1px solid var(--line, #ddd); }
.languageBar label { display: flex; align-items: center; gap: 8px; margin: 0; }
.languageBar select { width: auto; margin: 0; }
.languageBar span { font-size: 12px; color: var(--muted); max-width: 70ch; }

/* Shared navigation and surface tokens from the dashboard design. */
:root {
  --home-blue: #0574c8;
  --home-ink: #102e50;
  --home-muted: #667e99;
  --home-border: #dce6f0;
  --home-radius: 12px;
}
.uiIcon { flex: 0 0 auto; vertical-align: middle; }
#app > header { min-height: 76px; height: auto; padding: 14px 28px; gap: 20px; }
#app > header .brand { color: var(--home-ink); font-size: 29px; letter-spacing: -.04em; }
#app > header .tenant { border-left: 1px solid var(--home-border); padding-left: 22px; }
.workspace { display: grid; grid-template-columns: 216px minmax(0,1fr); min-height: calc(100vh - 110px); }
.sidebar { background: #f8fbfe; border-right: 1px solid var(--home-border); display: flex; flex-direction: column; padding: 24px 12px; }
.navCaption { font-size: 10px; font-weight: 700; letter-spacing: .16em; color: var(--home-muted); margin: 0 14px 15px; }
nav#tabs { flex-direction: column; gap: 6px; background: transparent; border: 0; padding: 0; }
nav#tabs button { white-space: normal; width: 100%; display: flex; align-items: center; gap: 13px; text-align: left; padding: 13px 14px; border: 0; border-radius: 8px; color: #3e5874; font-size: 14px; letter-spacing: 0; line-height: 1.5; min-height: 48px; }
nav#tabs button > span { min-width: 0; overflow-wrap: anywhere; }
nav#tabs button.on { color: #006bb7; background: #e5f2fd; box-shadow: inset 3px 0 #087ad0; }
nav#tabs button:hover { background: #edf4fb; }
.sidebarFoot { margin: auto 14px 0; padding-top: 36px; color: var(--home-muted); font-weight: 700; font-size: 13px; }
.sidebarFoot span { display: block; font-size: 10px; font-weight: 400; margin-top: 3px; letter-spacing: .04em; }
#panels { min-width: 0; background: #f4f7fb; container: feature-content / inline-size; }
.navToggle { display: none; }
#panels:focus { outline: none; }
@media (max-width: 639px) {
  .workspace { grid-template-columns: minmax(0,1fr); }
  .sidebar { display: none; padding: 12px; border-right: 0; border-bottom: 1px solid var(--home-border); }
  .sidebar.expanded { display: flex; }
  .sidebarFoot, .navCaption { display: none; }
  nav#tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .navToggle { display: inline-block; font-size: 21px; }
}
@media (max-width: 900px) {
  #app > header { padding: 12px 16px; gap: 10px; flex-wrap: wrap; }
  #app > header .brand { font-size: 25px; }
  #app > header .tenant { padding-left: 12px; flex: 1; }
  #app > header .who { white-space: normal; overflow-wrap: anywhere; }
}

@media (min-width: 640px) and (max-width: 1000px) {
  .workspace { grid-template-columns: 168px minmax(0,1fr); }
  .sidebar { padding: 20px 8px; }
  nav#tabs button { gap: 9px; padding: 12px 10px; font-size: 13px; }
}
@media (min-width: 640px) { .sidebar { position: sticky; top: 0; align-self: start; min-height: calc(100vh - 114px); max-height: 100vh; overflow-y: auto; } }

/* Keep the main work area usable after the sidebar takes its share. */
@container feature-content (max-width: 1000px) {
  .panel.auxiliaryPanel.on { grid-template-columns: minmax(0, 1fr); gap: 0; }
}