/* 楽配便 コンソール共通スタイル（ui.css）。クラス名は rk- 接頭辞。一覧は ui-core.js 冒頭の説明を参照 */
:root {
  color-scheme: light;
  --bg: #f2f4f7;
  --surface: #ffffff;
  --surface-2: #e9edf2;
  --surface-3: #dde3ea;
  --ink: #162029;
  --ink-2: #3f4b5a;
  --muted: #667283;
  --line: #d3d9e1;
  --line-strong: #b7c0cc;
  --row-alt: #f7f9fb;
  --accent: #1b5d8a;
  --accent-ink: #ffffff;
  --accent-strong: #144a6f;
  --accent-soft: #e1edf6;
  --ok: #1d7349;
  --ok-soft: #e0f2e8;
  --warn: #9a5700;
  --warn-soft: #fbeed6;
  --crit: #b0261b;
  --crit-soft: #fae3df;
  --crit-ink: #ffffff;
  --info: #2f59b3;
  --info-soft: #e4ebfa;
  --nc: #5d6977;
  --nc-soft: #eaedf1;
  --demo: #62449f;
  --demo-soft: #eee8fa;
  --demo-stripe: #e0d5f6;
  /* 権限上非表示（開示方針で伏せた。デモ色・未接続色と混同しない青緑系＋斜線） */
  --hold: #2f6a73;
  --hold-soft: #e1eff1;
  --hold-stripe: #c8e2e6;
  --focus: #1b5d8a;
  --backdrop: rgba(12, 18, 26, .48);
  --shadow-1: 0 1px 2px rgba(16, 24, 32, .06), 0 1px 1px rgba(16, 24, 32, .04);
  --shadow-2: 0 4px 14px rgba(16, 24, 32, .10), 0 1px 3px rgba(16, 24, 32, .08);
  --shadow-3: 0 18px 40px rgba(16, 24, 32, .22);
  --radius-s: 4px;
  --radius: 8px;
  --radius-l: 12px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --fs-xs: 12px;
  --fs-s: 13px;
  --fs-m: 14px;
  --fs-l: 16px;
  --fs-xl: 20px;
  --fs-xxl: 26px;
  --font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Consolas, "BIZ UDGothic", monospace;
  --topbar-h: 52px;
  --band-h: 0px;
  --sidenav-w: 224px;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #10161d;
    --surface: #18212b;
    --surface-2: #1f2a36;
    --surface-3: #283544;
    --ink: #e3e8ee;
    --ink-2: #c3ccd6;
    --muted: #93a0ae;
    --line: #2d3a48;
    --line-strong: #3e4e60;
    --row-alt: #1b2530;
    --accent: #6cb0e0;
    --accent-ink: #0b1620;
    --accent-strong: #93c6ec;
    --accent-soft: #173449;
    --ok: #5fcb92;
    --ok-soft: #133526;
    --warn: #f0b35a;
    --warn-soft: #3a2b10;
    --crit: #ff8b7e;
    --crit-soft: #441b17;
    --crit-ink: #1a0b09;
    --info: #92b2f6;
    --info-soft: #1b2a4a;
    --nc: #a6b1be;
    --nc-soft: #252f3a;
    --demo: #bba3f2;
    --demo-soft: #2a2142;
    --demo-stripe: #342955;
    --hold: #84cad3;
    --hold-soft: #13302f;
    --hold-stripe: #1d4447;
    --focus: #93c6ec;
    --backdrop: rgba(0, 0, 0, .6);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-2: 0 4px 14px rgba(0, 0, 0, .45);
    --shadow-3: 0 18px 40px rgba(0, 0, 0, .6);
  }
}

/* ---- 土台 ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-m);
  line-height: 1.6;
  font-feature-settings: "palt" 0;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-strong); }
h1, h2, h3, h4 { line-height: 1.35; color: var(--ink); }
p { margin: 0 0 var(--sp-2); }
code, kbd, samp, pre { font-family: var(--mono); font-size: .95em; }
/* 応答の JSON などの整形済みテキストは器の幅で折り返し、ページ全体を横スクロールさせない（狭い画面） */
pre { max-width: 100%; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
::selection { background: var(--accent-soft); }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-4) 0; }

/* ---- 文字・汎用 ---- */
.rk-h1 { font-size: var(--fs-xl); font-weight: 700; margin: 0; letter-spacing: .01em; }
.rk-h2 { font-size: var(--fs-l); font-weight: 700; margin: 0; }
.rk-h3 { font-size: var(--fs-m); font-weight: 700; margin: 0; color: var(--ink-2); }
.rk-muted { color: var(--muted); }
.rk-small { font-size: var(--fs-xs); }
.rk-strong { font-weight: 700; }
.rk-mono { font-family: var(--mono); font-size: var(--fs-s); letter-spacing: .01em; }
/* 荷物番号（佐川画面の一覧・詳細見出し）。現場で読み合わせるので等幅・大きめ・桁揃え。
   .rk-mono より後に置き、同じ詳細度で文字サイズを上書きする */
.rk-track { font-family: var(--mono); font-size: var(--fs-l); font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 詳細見出しは幅の狭い端末で横にはみ出さないよう、長い番号だけ折り返しを許す */
.rk-h1.rk-track { font-size: var(--fs-xxl); white-space: normal; overflow-wrap: anywhere; }
.rk-num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.rk-nowrap { white-space: nowrap; }
.rk-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
/* 表のセルで長い自由記述（商品名など）を 1 行に切り詰める（全体は title と詳細で読む） */
.rk-clip { display: inline-block; max-width: 16em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.rk-right { text-align: right; }
.rk-center { text-align: center; }
.rk-hidden { display: none !important; }
.rk-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- レイアウト ---- */
.rk-page { display: flex; flex-direction: column; gap: var(--sp-5); }
.rk-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); }
.rk-page-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rk-page-sub { color: var(--muted); font-size: var(--fs-s); margin: 0; }
.rk-breadcrumb { font-size: var(--fs-s); color: var(--muted); display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.rk-breadcrumb a { color: var(--muted); }
.rk-stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.rk-stack-s { display: flex; flex-direction: column; gap: var(--sp-2); }
.rk-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.rk-row-l { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
.rk-spacer { flex: 1 1 auto; }
.rk-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.rk-grid-2 { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rk-grid-3 { display: grid; gap: var(--sp-4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rk-grid-4 { display: grid; gap: var(--sp-3); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rk-split { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }

/* ---- アプリ枠（RK.shell） ---- */
.rk-app { min-height: 100vh; display: flex; flex-direction: column; }
.rk-app.rk-has-demo { --band-h: 34px; }
.rk-skip {
  position: absolute; left: var(--sp-2); top: -60px; z-index: 200;
  background: var(--accent); color: var(--accent-ink); border: 0; border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3); font: inherit; font-weight: 700; cursor: pointer;
}
.rk-skip:focus-visible { top: var(--sp-2); }
.rk-topbar {
  position: sticky; top: 0; z-index: 40;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--sp-4);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}
.rk-brand {
  display: inline-flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto;
  color: var(--ink); text-decoration: none; font-weight: 700; font-size: var(--fs-l);
  white-space: nowrap; min-width: 0;
}
.rk-brand:hover { color: var(--ink); }
.rk-brand-mark {
  width: 28px; height: 28px; flex: 0 0 28px; border-radius: 7px;
  background: var(--accent); color: var(--accent-ink);
  display: inline-grid; place-items: center; font-size: var(--fs-s); font-weight: 800;
}
.rk-brand-mark::before { content: "楽"; }
.rk-brand-text { overflow: hidden; text-overflow: ellipsis; }
.rk-topbar-status { display: flex; align-items: center; gap: var(--sp-2); flex: 0 100 auto; flex-wrap: nowrap; overflow: hidden; min-width: 0; }
/* 状態チップが入りきらない幅（760〜900px 程度）では、後ろのチップが枠の外で切れて読めなくなるので、
   2 つ目以降のチップを縮めて省略記号で切る（全文は title。RK.shell の setStatus が添える）。先頭のチップ
   （デモ環境の印、無ければ最初の接続状態）は縮めない。縮めすぎて記号だけにならないよう最小幅を持たせる */
.rk-topbar-status > * { flex: 0 1 auto; min-width: 4.5em; overflow: hidden; }
.rk-topbar-status > :first-child { flex-shrink: 0; min-width: 0; }
.rk-topbar-status .rk-badge { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.rk-topbar-status .rk-badge::before { margin-right: 4px; }
.rk-user { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-s); color: var(--ink-2); min-width: 0; }
.rk-user-id { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-user-scope { max-width: 20rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-weight: 600; }
.rk-topbar .rk-menu-btn { display: none; }
.rk-demo-band {
  position: sticky; top: var(--topbar-h); z-index: 39;
  min-height: var(--band-h);
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 4px var(--sp-4);
  background-color: var(--demo-soft);
  background-image: repeating-linear-gradient(135deg, var(--demo-stripe) 0 10px, transparent 10px 20px);
  border-bottom: 1px solid var(--demo);
  color: var(--demo);
  font-size: var(--fs-s); font-weight: 700;
  text-align: center;
}
.rk-demo-band-text {
  background: var(--surface); border: 1px solid var(--demo); border-radius: 999px;
  padding: 1px var(--sp-3); line-height: 1.5;
}
.rk-demo-band-text::before { content: "◇ "; }
/* デモ環境の前提（帯の直下。固定表示にせず本文と一緒に流す。開閉は details の標準動作で JS 不要） */
.rk-demo-notes {
  background: var(--demo-soft);
  border-bottom: 1px solid var(--demo);
  color: var(--ink);
  font-size: var(--fs-s);
}
.rk-demo-notes-summary {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 28px; padding: 2px var(--sp-4);
  list-style: none; cursor: pointer; user-select: none;
  color: var(--demo); font-weight: 700;
}
.rk-demo-notes-summary::-webkit-details-marker { display: none; }
.rk-demo-notes-summary::before {
  content: ""; flex: 0 0 auto; width: 0; height: 0;
  border-style: solid; border-width: 5px 0 5px 7px; border-color: transparent transparent transparent currentColor;
  transition: transform .15s ease;
}
.rk-demo-notes[open] > .rk-demo-notes-summary::before { transform: rotate(90deg); }
.rk-demo-notes-summary:hover .rk-demo-notes-title { text-decoration: underline; text-underline-offset: 2px; }
.rk-demo-notes-count { font-weight: 400; font-size: var(--fs-xs); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rk-demo-notes-list {
  max-width: 960px; margin: 0 auto;
  padding: 0 var(--sp-4) var(--sp-3) calc(var(--sp-4) + 1.25em);
  display: flex; flex-direction: column; gap: 2px;
  line-height: 1.6;
}
.rk-demo-notes-list li { overflow-wrap: anywhere; }
.rk-demo-notes-list li::marker { color: var(--demo); }
.rk-body { flex: 1 1 auto; display: block; min-width: 0; }
.rk-app-admin .rk-body { display: grid; grid-template-columns: var(--sidenav-w) minmax(0, 1fr); align-items: start; }
.rk-main { width: 100%; min-width: 0; margin: 0 auto; padding: var(--sp-5); }
.rk-main:focus { outline: none; }
.rk-app-admin .rk-main { max-width: 1440px; }
.rk-app-sagawa .rk-main { max-width: 1100px; padding-top: var(--sp-4); }
/* テナント画面（/internal/console/tenant）はキャリア画面と同じ上部タブの枠 */
.rk-app-tenant .rk-main { max-width: 1100px; padding-top: var(--sp-4); }

/* サイドナビ（管理） */
.rk-sidenav {
  position: sticky; top: calc(var(--topbar-h) + var(--band-h));
  height: calc(100vh - var(--topbar-h) - var(--band-h));
  overflow-y: auto;
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: var(--sp-3) var(--sp-2) var(--sp-5);
}
.rk-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.rk-nav-section {
  font-size: var(--fs-xs); font-weight: 700; color: var(--muted); letter-spacing: .06em;
  padding: var(--sp-3) var(--sp-3) var(--sp-1);
}
.rk-nav-link {
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: 36px; padding: 6px var(--sp-3);
  border-radius: var(--radius);
  color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: var(--fs-m);
}
.rk-nav-link:hover { background: var(--surface-2); color: var(--ink); }
.rk-nav-link[aria-current="page"] {
  background: var(--accent-soft); color: var(--accent-strong);
  box-shadow: inset 3px 0 0 var(--accent);
}
.rk-nav-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-nav-count {
  min-width: 22px; padding: 0 6px; border-radius: 999px; text-align: center;
  background: var(--surface-3); color: var(--ink-2); font-size: var(--fs-xs); font-variant-numeric: tabular-nums;
}
.rk-nav-link[aria-current="page"] .rk-nav-count { background: var(--accent); color: var(--accent-ink); }
.rk-nav-external .rk-nav-label::after { content: " ↗"; color: var(--muted); }
.rk-nav-divider { border-top: 1px solid var(--line); margin: var(--sp-2) var(--sp-2); }

/* 上部タブ（佐川） */
.rk-tabnav {
  position: sticky; top: calc(var(--topbar-h) + var(--band-h)); z-index: 30;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.rk-tabnav .rk-nav-list {
  flex-direction: row; gap: var(--sp-1); max-width: 1100px; margin: 0 auto; padding: 0 var(--sp-4);
  overflow-x: auto; scrollbar-width: thin;
}
.rk-tabnav .rk-nav-link {
  min-height: 48px; border-radius: 0; padding: 0 var(--sp-4);
  border-bottom: 3px solid transparent; white-space: nowrap;
}
.rk-tabnav .rk-nav-link:hover { background: var(--surface-2); }
.rk-tabnav .rk-nav-link[aria-current="page"] {
  background: transparent; box-shadow: none; color: var(--accent-strong); border-bottom-color: var(--accent);
}

/* ---- カード・KPI ---- */
.rk-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
  box-shadow: var(--shadow-1); min-width: 0;
}
.rk-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line);
}
.rk-card-title { font-size: var(--fs-l); font-weight: 700; margin: 0; }
.rk-card-sub { font-size: var(--fs-s); color: var(--muted); margin: 0; }
.rk-card-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
/* 中身の並べ方をカードの幅で切り替える（ページ幅ではなく器の幅。狭いカードの中で照合の左右 2 列が潰れないように） */
.rk-card-body { padding: var(--sp-4); min-width: 0; container-type: inline-size; }
/* 幅を中身から決める並び（flex）の中では、器の幅の問い合わせで幅が 0 に潰れないよう基準幅を与える */
.rk-row > .rk-card, .rk-row-l > .rk-card { flex: 1 1 320px; }
.rk-card-body > .rk-table-wrap:only-child { margin: calc(var(--sp-4) * -1); border: 0; border-radius: 0 0 var(--radius-l) var(--radius-l); }
.rk-card-ok { border-left: 4px solid var(--ok); }
.rk-card-warn { border-left: 4px solid var(--warn); }
.rk-card-crit { border-left: 4px solid var(--crit); }
.rk-card-info { border-left: 4px solid var(--info); }
.rk-card-nc { border-left: 4px dashed var(--nc); }
.rk-card-demo { border-left: 4px solid var(--demo); }
.rk-card-hold { border-left: 4px solid var(--hold); }
.rk-card-accent { border-left: 4px solid var(--accent); }
.rk-stat {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
  box-shadow: var(--shadow-1);
  color: var(--ink); text-decoration: none; text-align: left; font: inherit;
}
a.rk-stat, button.rk-stat { cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease; }
a.rk-stat:hover, button.rk-stat:hover { border-color: var(--accent); box-shadow: var(--shadow-2); color: var(--ink); transform: translateY(-1px); }
.rk-stat-label { font-size: var(--fs-s); color: var(--muted); font-weight: 600; }
.rk-stat-value { font-size: var(--fs-xxl); font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.rk-stat-sub { font-size: var(--fs-xs); color: var(--muted); }
.rk-stat[class*="rk-tone-"] { background: var(--surface); color: var(--ink); }
.rk-stat.rk-tone-ok { border-top: 3px solid var(--ok); }
.rk-stat.rk-tone-warn { border-top: 3px solid var(--warn); }
.rk-stat.rk-tone-crit { border-top: 3px solid var(--crit); }
.rk-stat.rk-tone-crit .rk-stat-value { color: var(--crit); }
.rk-stat.rk-tone-info { border-top: 3px solid var(--info); }
.rk-stat.rk-tone-nc { border-top: 3px dashed var(--nc); }
.rk-stat.rk-tone-demo { border-top: 3px solid var(--demo); }
.rk-stat.rk-tone-accent { border-top: 3px solid var(--accent); }

/* ---- バッジ・チップ（文字＋色＋形） ---- */
.rk-badge {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 22px; padding: 1px 8px; max-width: 100%;
  border-radius: 999px; border: 1px solid currentColor;
  font-size: var(--fs-xs); font-weight: 700; line-height: 1.4; white-space: nowrap; vertical-align: middle;
  background: var(--nc-soft); color: var(--ink-2);
}
.rk-badge + .rk-badge { margin-left: 2px; }
.rk-tone-ok { color: var(--ok); background: var(--ok-soft); }
.rk-tone-warn { color: var(--warn); background: var(--warn-soft); }
.rk-tone-crit { color: var(--crit); background: var(--crit-soft); }
.rk-tone-info { color: var(--info); background: var(--info-soft); }
.rk-tone-nc { color: var(--nc); background: var(--nc-soft); }
.rk-tone-demo { color: var(--demo); background: var(--demo-soft); }
.rk-tone-accent { color: var(--accent-strong); background: var(--accent-soft); }
.rk-tone-neutral { color: var(--ink-2); background: var(--surface-2); }
.rk-badge.rk-tone-ok::before { content: "✓"; }
.rk-badge.rk-tone-warn::before { content: "!"; font-weight: 900; }
.rk-badge.rk-tone-crit::before { content: "✕"; }
.rk-badge.rk-tone-info::before { content: "i"; font-style: italic; font-family: Georgia, serif; }
.rk-badge.rk-tone-nc { border-style: dashed; }
.rk-badge.rk-tone-nc::before { content: "○"; }
.rk-badge.rk-tone-demo {
  background-image: repeating-linear-gradient(135deg, var(--demo-stripe) 0 4px, transparent 4px 8px);
}
.rk-badge.rk-tone-demo::before { content: "◇"; }
.rk-badge.rk-tone-hold {
  background-image: repeating-linear-gradient(135deg, var(--hold-stripe) 0 4px, transparent 4px 8px);
}
.rk-badge.rk-tone-hold::before { content: "⊘"; }
.rk-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 24px; padding: 1px 10px 1px 8px; border-radius: 999px;
  font-size: var(--fs-s); font-weight: 700; white-space: nowrap; vertical-align: middle;
  border: 1px solid transparent;
}
.rk-chip-dot { width: 9px; height: 9px; flex: 0 0 9px; background: currentColor; border-radius: 50%; }
.rk-chip.rk-tone-info .rk-chip-dot { background: transparent; border: 2px solid currentColor; }
.rk-chip.rk-tone-warn .rk-chip-dot { border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); width: 10px; flex-basis: 10px; }
.rk-chip.rk-tone-crit .rk-chip-dot { border-radius: 1px; transform: rotate(45deg); width: 8px; height: 8px; flex-basis: 8px; }
.rk-chip.rk-tone-nc { border: 1px dashed currentColor; }
.rk-chip.rk-tone-nc .rk-chip-dot { background: transparent; border: 2px dashed currentColor; }
.rk-chip.rk-tone-demo .rk-chip-dot { border-radius: 1px; transform: rotate(45deg); background: transparent; border: 2px solid currentColor; width: 8px; height: 8px; flex-basis: 8px; }
.rk-chip.rk-tone-accent .rk-chip-dot { border-radius: 2px; }
.rk-markers { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }

/* ---- ボタン・フォーム ---- */
.rk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 0 14px;
  border-radius: var(--radius); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: var(--fs-m); font-weight: 700; line-height: 1.2;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.rk-btn:hover { background: var(--surface-2); color: var(--ink); }
.rk-btn:active { transform: translateY(1px); }
.rk-btn[disabled], .rk-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.rk-btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.rk-btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--accent-ink); }
.rk-btn-danger { background: var(--crit); border-color: var(--crit); color: var(--crit-ink); }
.rk-btn-danger:hover { background: var(--crit); filter: brightness(.92); color: var(--crit-ink); }
.rk-btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.rk-btn-ghost:hover { background: var(--surface-2); }
.rk-btn-demo { background: var(--demo-soft); border-color: var(--demo); color: var(--demo); }
.rk-btn-demo:hover { background: var(--demo-stripe); color: var(--demo); }
.rk-btn-sm { min-height: 28px; padding: 0 10px; font-size: var(--fs-s); }
.rk-btn-lg { min-height: 48px; padding: 0 22px; font-size: var(--fs-l); }
.rk-btn-block { width: 100%; }
.rk-input, .rk-select, .rk-textarea {
  width: 100%; min-height: 36px; padding: 6px 10px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: var(--fs-m);
}
.rk-textarea { min-height: 88px; resize: vertical; line-height: 1.5; }
.rk-input::placeholder, .rk-textarea::placeholder { color: var(--muted); }
.rk-input:hover, .rk-select:hover, .rk-textarea:hover { border-color: var(--ink-2); }
.rk-input[aria-invalid="true"], .rk-select[aria-invalid="true"], .rk-textarea[aria-invalid="true"] { border-color: var(--crit); box-shadow: 0 0 0 1px var(--crit); }
.rk-input[readonly] { background: var(--surface-2); }
.rk-check { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 36px; cursor: pointer; }
.rk-check input { width: 18px; height: 18px; accent-color: var(--accent); }
.rk-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rk-field-label { font-size: var(--fs-s); font-weight: 700; color: var(--ink-2); }
.rk-field-req::after { content: " *"; color: var(--crit); }
.rk-field-hint { font-size: var(--fs-xs); color: var(--muted); }
.rk-field-error { font-size: var(--fs-xs); color: var(--crit); font-weight: 700; }
.rk-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.rk-filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
}
.rk-filters .rk-field { flex: 1 1 160px; max-width: 280px; }
.rk-filters .rk-field-wide { flex: 2 1 240px; max-width: 420px; }
.rk-filter-actions { display: flex; gap: var(--sp-2); align-items: center; margin-left: auto; }

/* スキャン入力（佐川の最上部） */
.rk-scan {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-4); background: var(--surface);
  border: 2px solid var(--accent); border-radius: var(--radius-l); box-shadow: var(--shadow-2);
}
.rk-scan-label { font-size: var(--fs-l); font-weight: 800; }
.rk-scan-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-3); }
.rk-scan-input {
  width: 100%; min-height: 56px; padding: 8px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  font-family: var(--mono); font-size: var(--fs-xxl); letter-spacing: .06em; font-variant-numeric: tabular-nums;
}
.rk-scan-button { min-height: 56px; min-width: 112px; font-size: var(--fs-l); }
.rk-scan-result { font-size: var(--fs-m); }

/* ---- 注意・空・読込中・エラー ---- */
.rk-alert {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--radius);
  background: var(--surface-2); color: var(--ink);
}
.rk-alert-title { font-weight: 800; margin: 0 0 2px; }
.rk-alert-body { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
.rk-alert.rk-tone-ok { border-color: var(--ok); background: var(--ok-soft); color: var(--ink); }
.rk-alert.rk-tone-warn { border-color: var(--warn); background: var(--warn-soft); color: var(--ink); }
.rk-alert.rk-tone-crit { border-color: var(--crit); background: var(--crit-soft); color: var(--ink); }
.rk-alert.rk-tone-info { border-color: var(--info); background: var(--info-soft); color: var(--ink); }
.rk-alert.rk-tone-nc { border-color: var(--nc); border-style: dashed; background: var(--nc-soft); color: var(--ink); }
.rk-alert.rk-tone-demo {
  border-color: var(--demo); color: var(--ink);
  background-color: var(--demo-soft);
  background-image: repeating-linear-gradient(135deg, var(--demo-stripe) 0 10px, transparent 10px 20px);
}
.rk-alert.rk-tone-accent { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.rk-empty {
  padding: var(--sp-6) var(--sp-4); text-align: center; color: var(--muted);
  border: 1px dashed var(--line-strong); border-radius: var(--radius-l); background: var(--surface);
}
.rk-loading { display: flex; align-items: center; gap: var(--sp-2); color: var(--muted); padding: var(--sp-4); }
/* 2026-10-13 R09: 配達証跡の閲覧（data: の画像。ダイアログの幅を超えない） */
.rk-pod-image { display: block; max-width: 100%; height: auto; border: 1px solid var(--line-strong); border-radius: var(--radius-l); background: var(--surface); }
.rk-spinner {
  width: 18px; height: 18px; flex: 0 0 18px; border-radius: 50%;
  border: 2px solid var(--line-strong); border-top-color: var(--accent);
  animation: rk-spin .8s linear infinite;
}
@keyframes rk-spin { to { transform: rotate(360deg); } }
.rk-error { color: var(--crit); font-weight: 700; }

/* ---- 表（横スクロールの器・見出し固定・縞） ---- */
.rk-table-wrap {
  overflow: auto; max-height: min(72vh, 760px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
  -webkit-overflow-scrolling: touch;
}
.rk-table-wrap.rk-table-free { max-height: none; }
.rk-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-m); }
.rk-table caption { text-align: left; padding: var(--sp-2) var(--sp-3); color: var(--muted); font-size: var(--fs-s); }
.rk-table th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-2); color: var(--ink-2);
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .03em; text-align: left; white-space: nowrap;
  padding: 8px 12px; border-bottom: 1px solid var(--line-strong);
}
/* 日本語の語の途中で折り返さない（keep-all）。空白・約物では折り返し、それでも溢れる長い語だけ折る */
.rk-table td { padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; word-break: keep-all; overflow-wrap: break-word; }
.rk-table td.rk-wrap { word-break: normal; min-width: 14em; }
.rk-table tbody tr:nth-child(even) td { background: var(--row-alt); }
.rk-table tbody tr:last-child td { border-bottom: 0; }
.rk-table th.rk-num, .rk-table td.rk-num { text-align: right; }
.rk-table td.rk-mono { white-space: nowrap; }
.rk-table tr.rk-clickable { cursor: pointer; }
.rk-table tr.rk-clickable:hover td { background: var(--accent-soft); }
.rk-table tr.rk-clickable:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.rk-table tr.rk-row-crit td:first-child { box-shadow: inset 4px 0 0 var(--crit); }
.rk-table tr.rk-row-warn td:first-child { box-shadow: inset 4px 0 0 var(--warn); }
.rk-table tr.rk-row-demo td:first-child { box-shadow: inset 4px 0 0 var(--demo); }
.rk-table-empty td { text-align: center; color: var(--muted); padding: var(--sp-5); }
.rk-table-dense td, .rk-table-dense th { padding: 5px 10px; font-size: var(--fs-s); }
.rk-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; font-size: var(--fs-s); color: var(--ink-2); }
.rk-pager-buttons { display: flex; gap: var(--sp-2); }

/* ---- 定義リスト ---- */
.rk-kv { display: grid; grid-template-columns: fit-content(13rem) minmax(0, 1fr); gap: 6px var(--sp-4); margin: 0; }
.rk-kv dt { color: var(--muted); font-size: var(--fs-s); font-weight: 600; padding-top: 1px; }
.rk-kv dd { margin: 0; min-width: 0; overflow-wrap: break-word; }
/* 狭い器の中の印は折り返してよい（はみ出してページ全体を横スクロールさせない） */
.rk-kv dd .rk-badge, .rk-compare-mid .rk-badge, .rk-attn-item .rk-badge, .rk-card-actions .rk-badge,
.rk-compare-side .rk-badge, .rk-legend .rk-badge { white-space: normal; }

/* ---- タブ（画面内） ---- */
.rk-tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: thin; }
.rk-tab {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; padding: 0 var(--sp-4);
  border: 0; border-bottom: 3px solid transparent; background: transparent;
  color: var(--ink-2); font: inherit; font-weight: 700; white-space: nowrap; cursor: pointer;
}
.rk-tab:hover { background: var(--surface-2); color: var(--ink); }
.rk-tab[aria-selected="true"], .rk-tab[aria-current="page"] { color: var(--accent-strong); border-bottom-color: var(--accent); }
.rk-tab-count {
  min-width: 24px; padding: 0 7px; border-radius: 999px; text-align: center;
  background: var(--surface-3); color: var(--ink-2); font-size: var(--fs-xs); font-variant-numeric: tabular-nums;
}
.rk-tab[aria-selected="true"] .rk-tab-count { background: var(--accent); color: var(--accent-ink); }
.rk-tab-crit .rk-tab-count { background: var(--crit); color: var(--crit-ink); }

/* ---- 要対応の一覧 ---- */
.rk-attn { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.rk-attn-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center;
  padding: 10px var(--sp-3); background: var(--surface);
  border: 1px solid var(--line); border-left: 4px solid var(--line-strong); border-radius: var(--radius);
  color: var(--ink); text-decoration: none;
}
a.rk-attn-item:hover { border-color: var(--accent); color: var(--ink); }
.rk-attn-item.rk-tone-crit { border-left-color: var(--crit); background: var(--surface); color: var(--ink); }
.rk-attn-item.rk-tone-warn { border-left-color: var(--warn); background: var(--surface); color: var(--ink); }
.rk-attn-item.rk-tone-info { border-left-color: var(--info); background: var(--surface); color: var(--ink); }
.rk-attn-count { font-size: var(--fs-xl); font-weight: 800; font-variant-numeric: tabular-nums; min-width: 2.5ch; text-align: right; }
.rk-attn-label { font-weight: 700; }
.rk-attn-hint { font-size: var(--fs-s); color: var(--muted); }

/* ---- 照合（左右 2 列） ---- */
.rk-compare { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--sp-3); align-items: stretch; }
.rk-compare-side {
  border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-3);
  background: var(--surface); min-width: 0;
}
.rk-compare-side-title { font-size: var(--fs-s); font-weight: 800; color: var(--ink-2); margin: 0 0 var(--sp-2); }
.rk-compare-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); text-align: center; max-width: 14rem; }
.rk-compare-mid::before, .rk-compare-mid::after { content: ""; flex: 1 1 auto; width: 2px; min-height: 12px; background: var(--line); }
@container (max-width: 620px) {
  .rk-compare { grid-template-columns: minmax(0, 1fr); }
  .rk-compare-mid { flex-direction: row; max-width: none; }
  .rk-compare-mid::before, .rk-compare-mid::after { width: auto; height: 2px; min-height: 0; min-width: 12px; }
}
@container (max-width: 340px) {
  .rk-kv { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rk-kv dd { margin-bottom: var(--sp-2); }
}

/* ---- 履歴 ---- */
.rk-timeline { list-style: none; margin: 0; padding: 0 0 0 var(--sp-4); border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: var(--sp-3); }
.rk-timeline-item { position: relative; padding-left: var(--sp-2); }
.rk-timeline-item::before {
  content: ""; position: absolute; left: calc(var(--sp-4) * -1 - 6px); top: 6px;
  width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent);
}
.rk-timeline-time { font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted); }
.rk-timeline-body { font-size: var(--fs-m); }

/* ---- 凡例 ---- */
.rk-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: center; font-size: var(--fs-xs); color: var(--muted); padding-top: var(--sp-2); border-top: 1px solid var(--line); }
.rk-legend-item { display: inline-flex; gap: var(--sp-1); align-items: center; min-width: 0; max-width: 100%; }

/* ---- ログイン ---- */
.rk-login {
  min-height: 100vh; display: grid; place-items: center; padding: var(--sp-5) var(--sp-4);
  background: linear-gradient(180deg, var(--accent-soft) 0, var(--bg) 280px);
}
.rk-login-card {
  width: min(600px, 100%); min-width: 0; overflow-wrap: anywhere; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-l); box-shadow: var(--shadow-2); padding: var(--sp-6) var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.rk-login-head { display: flex; align-items: center; gap: var(--sp-3); }
.rk-login-title { font-size: var(--fs-xl); font-weight: 800; margin: 0; }
.rk-login-sub { color: var(--muted); font-size: var(--fs-s); margin: 0; }
.rk-login-foot { font-size: var(--fs-xs); color: var(--muted); border-top: 1px solid var(--line); padding-top: var(--sp-3); }
.rk-personas { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
/* 2026-10-31 ⑤: メールのログイン（確認コードは等幅・字間を広く） */
.rk-email-login { border-top: 1px solid var(--line); padding-top: var(--sp-3); }
.rk-code-input { font-family: var(--mono); font-size: var(--fs-l); letter-spacing: 0.3em; max-width: 12em; }
.rk-persona {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 72px;
  padding: var(--sp-3) var(--sp-4); text-align: left;
  border: 1px solid var(--line-strong); border-radius: var(--radius-l); background: var(--surface); color: var(--ink);
  font: inherit; cursor: pointer; transition: border-color .12s ease, background-color .12s ease;
}
.rk-persona:hover { border-color: var(--accent); background: var(--accent-soft); }
.rk-persona[disabled] { opacity: .55; cursor: progress; }
.rk-persona-label { font-weight: 800; font-size: var(--fs-l); display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.rk-persona-desc { font-size: var(--fs-s); color: var(--muted); }

/* ---- モーダル・トースト ---- */
.rk-modal-backdrop {
  position: fixed; inset: 0; z-index: 100; background: var(--backdrop);
  display: grid; place-items: center; padding: var(--sp-4);
  animation: rk-fade .12s ease-out;
}
.rk-modal {
  width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius-l); box-shadow: var(--shadow-3);
  animation: rk-rise .14s ease-out;
}
.rk-modal-head { padding: var(--sp-4) var(--sp-5) 0; }
.rk-modal-title { font-size: var(--fs-l); font-weight: 800; margin: 0; }
.rk-modal-body { padding: var(--sp-3) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.rk-modal-foot {
  padding: var(--sp-3) var(--sp-5) var(--sp-4); display: flex; justify-content: flex-end; gap: var(--sp-2); flex-wrap: wrap;
  border-top: 1px solid var(--line);
}
.rk-modal-crit .rk-modal-head { border-top: 4px solid var(--crit); border-radius: var(--radius-l) var(--radius-l) 0 0; }
.rk-modal-demo .rk-modal-head { border-top: 4px solid var(--demo); border-radius: var(--radius-l) var(--radius-l) 0 0; }
.rk-toasts {
  position: fixed; right: var(--sp-4); bottom: var(--sp-4); z-index: 120;
  display: flex; flex-direction: column; gap: var(--sp-2); width: min(420px, calc(100vw - 32px));
}
.rk-toast {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  padding: 10px var(--sp-3); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-left: 4px solid var(--line-strong); box-shadow: var(--shadow-2);
  animation: rk-rise .16s ease-out;
}
.rk-toast.rk-tone-ok { border-left-color: var(--ok); background: var(--surface); color: var(--ink); }
.rk-toast.rk-tone-warn { border-left-color: var(--warn); background: var(--surface); color: var(--ink); }
.rk-toast.rk-tone-crit { border-left-color: var(--crit); background: var(--surface); color: var(--ink); }
.rk-toast.rk-tone-info { border-left-color: var(--info); background: var(--surface); color: var(--ink); }
.rk-toast.rk-tone-demo { border-left-color: var(--demo); background: var(--surface); color: var(--ink); }
.rk-toast-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.rk-toast-close { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: var(--fs-l); line-height: 1; cursor: pointer; padding: 0 2px; }
@keyframes rk-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rk-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- 表示の状態（RK.viewStatus。2026-09-30 指示書 §7.1）----
   正常・未発行・未取得・連携待ち・権限上非表示・要確認・未接続・結果不明を「文字＋色＋形」で区別する。
   空欄を正常に見せない・デモの成功を本番接続に見せないための印（形: ✓ 実線 / － 破線 / ？ 破線 / … 点線 /
   ⊘ 斜線 / ! 実線 / ○ 破線 / ？ 二重線）。未知の状態は「要確認」側（rk-vs-unknown）に倒す */
.rk-vs {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 22px; padding: 1px 8px; max-width: 100%;
  border-radius: var(--radius-s); border: 1px solid currentColor;
  font-size: var(--fs-xs); font-weight: 700; line-height: 1.4; white-space: nowrap; vertical-align: middle;
}
.rk-vs::before { font-weight: 900; }
.rk-vs + .rk-vs { margin-left: 2px; }
.rk-vs-ok { color: var(--ok); background: var(--ok-soft); }
.rk-vs-ok::before { content: "✓"; }
.rk-vs-not_issued { color: var(--nc); background: var(--nc-soft); border-style: dashed; }
.rk-vs-not_issued::before { content: "－"; }
.rk-vs-not_obtained { color: var(--nc); background: var(--surface); border-style: dashed; }
.rk-vs-not_obtained::before { content: "？"; }
.rk-vs-awaiting_sync { color: var(--info); background: var(--info-soft); border-style: dotted; border-width: 2px; }
.rk-vs-awaiting_sync::before { content: "…"; }
.rk-vs-withheld_by_policy {
  color: var(--hold); background-color: var(--hold-soft);
  background-image: repeating-linear-gradient(135deg, var(--hold-stripe) 0 4px, transparent 4px 8px);
}
.rk-vs-withheld_by_policy::before { content: "⊘"; }
.rk-vs-needs_review { color: var(--warn); background: var(--warn-soft); }
.rk-vs-needs_review::before { content: "!"; }
.rk-vs-not_connected { color: var(--nc); background: var(--nc-soft); border-style: dashed; }
.rk-vs-not_connected::before { content: "○"; }
.rk-vs-outcome_unknown { color: var(--warn); background: var(--warn-soft); border-style: double; border-width: 3px; padding: 0 7px; }
.rk-vs-outcome_unknown::before { content: "？"; }
.rk-vs-unknown { color: var(--warn); background: var(--warn-soft); border-style: dashed; }
.rk-vs-unknown::before { content: "!"; }
.rk-tone-hold { color: var(--hold); background: var(--hold-soft); }

/* ---- 情報の来歴（RK.provenance）: 提供元・取込経路・時刻（・根拠）。開示範囲（誰に見せるか）とは別の印 ---- */
.rk-prov { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: var(--fs-xs); min-width: 0; }
.rk-prov-item {
  display: inline-flex; align-items: baseline; gap: 4px; max-width: 100%;
  padding: 1px 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-s);
  background: var(--surface-2); color: var(--ink-2); overflow-wrap: anywhere;
}
.rk-prov-key { color: var(--muted); font-weight: 600; white-space: nowrap; }
.rk-prov-val { color: var(--ink); font-weight: 700; }
.rk-prov-source { border-left: 3px solid var(--accent); }
.rk-prov-channel { border-left: 3px solid var(--info); }
.rk-prov-time { border-left: 3px solid var(--line-strong); }
.rk-prov-time .rk-prov-val { font-family: var(--mono); font-weight: 400; font-variant-numeric: tabular-nums; }
.rk-prov-basis { border-style: dashed; }
.rk-prov-missing .rk-prov-val { color: var(--muted); font-weight: 400; }

/* ---- 詳細の中のタブ（RK.tabs ＋ RK.tabPanel）: 楽配・テナント・キャリア・デリバリーの切替。
   見出しに「誰に見える内容か」（rk-audience）を必ず添え、統合情報・情報源・開示範囲を混同させない ---- */
.rk-detail-tabs { display: flex; flex-direction: column; min-width: 0; }
.rk-detail-tabs > .rk-tabs {
  background: var(--surface-2); border: 1px solid var(--line); border-bottom: 0;
  border-radius: var(--radius-l) var(--radius-l) 0 0; padding: 0 var(--sp-2);
}
.rk-tab-sub { font-weight: 400; font-size: var(--fs-xs); color: var(--muted); }
.rk-tab[aria-selected="true"] .rk-tab-sub { color: var(--ink-2); }
.rk-tabpanel {
  display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0;
  padding: var(--sp-4); background: var(--surface);
  border: 1px solid var(--line); border-radius: 0 0 var(--radius-l) var(--radius-l);
}
.rk-tabpanel:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.rk-tabpanel-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line); }
.rk-tabpanel-title { font-size: var(--fs-l); font-weight: 800; margin: 0; }
.rk-audience {
  margin: 0; padding: var(--sp-2) var(--sp-3);
  border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--accent-soft); color: var(--ink); font-size: var(--fs-s);
}
.rk-section-title { font-size: var(--fs-s); font-weight: 800; color: var(--ink-2); letter-spacing: .02em; margin: 0 0 var(--sp-2); }
/* 平文表示した値（購入者・届け先。目的を記録して表示したもの）と伏せた値 */
.rk-revealed {
  padding: 0 4px; border: 1px dashed var(--warn); border-radius: var(--radius-s);
  background: var(--warn-soft); color: var(--ink); overflow-wrap: anywhere;
}
.rk-revealed-box { border: 1px solid var(--warn); border-left-width: 4px; border-radius: var(--radius); background: var(--surface); padding: var(--sp-3); }
.rk-masked { font-family: var(--mono); color: var(--muted); letter-spacing: .08em; }

/* ---- ファイルの選択（RK.fileInput）: CSV の取込。ドロップ領域全体が input（ネイティブのドロップで選べる） ---- */
.rk-file {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1);
  min-height: 132px; padding: var(--sp-5) var(--sp-4); text-align: center; cursor: pointer;
  border: 2px dashed var(--line-strong); border-radius: var(--radius-l);
  background: var(--surface); color: var(--ink-2);
  transition: border-color .12s ease, background-color .12s ease;
}
.rk-file:hover, .rk-file.rk-file-over { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.rk-file:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.rk-file.rk-file-has { border-style: solid; border-color: var(--accent); }
.rk-file.rk-file-error { border-style: solid; border-color: var(--crit); background: var(--crit-soft); }
.rk-file.rk-file-disabled { cursor: not-allowed; opacity: .6; }
.rk-file-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rk-file.rk-file-disabled .rk-file-input { cursor: not-allowed; }
.rk-file-title { font-size: var(--fs-l); font-weight: 800; color: var(--ink); }
.rk-file-hint { font-size: var(--fs-s); color: var(--muted); }
.rk-file-name { font-family: var(--mono); font-size: var(--fs-s); color: var(--ink); overflow-wrap: anywhere; }
.rk-file-meta { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.rk-file-error-text { font-size: var(--fs-s); color: var(--crit); font-weight: 700; }
.rk-progress { display: block; width: 100%; height: 8px; accent-color: var(--accent); }
/* 手順（選ぶ → 確認 → 登録）。aria-current="step" が現在の手順 */
.rk-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); counter-reset: rk-step; }
.rk-step {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 3px var(--sp-3) 3px 3px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--muted); font-size: var(--fs-s); font-weight: 700; counter-increment: rk-step;
}
.rk-step::before {
  content: counter(rk-step); display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface-3); color: var(--ink-2); font-size: var(--fs-xs);
}
.rk-step[aria-current="step"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.rk-step[aria-current="step"]::before { background: var(--accent); color: var(--accent-ink); }
.rk-step.rk-step-done { color: var(--ok); }
.rk-step.rk-step-done::before { content: "✓"; background: var(--ok-soft); color: var(--ok); }
.rk-step.rk-step-error { border-color: var(--crit); color: var(--crit); }

/* ---- 複数選択のチェックボックス（RK.checklist）: テナントの選択可能キャリア等 ---- */
.rk-checklist { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.rk-checklist-legend { padding: 0; font-size: var(--fs-s); font-weight: 700; color: var(--ink-2); }
.rk-checklist-grid { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.rk-checklist-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 2px var(--sp-2);
  min-height: 44px; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); cursor: pointer;
}
.rk-checklist-item input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--accent); grid-row: span 2; }
.rk-checklist-item:hover { border-color: var(--accent); }
.rk-checklist-item.rk-checked { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.rk-checklist-item.rk-disabled { cursor: not-allowed; opacity: .6; background: var(--surface-2); box-shadow: none; }
.rk-checklist-label { font-weight: 700; display: flex; flex-wrap: wrap; gap: 4px var(--sp-2); align-items: center; min-width: 0; }
.rk-checklist-note { grid-column: 2; font-size: var(--fs-xs); color: var(--muted); }

/* ---- キャリア連携の状態（RK.integrationBadge。2026-10-06）: 業務の配送状態（rk-chip）とは別の軸。
   軸の名前（キャリア連携）を添えた破線の枠に入れ、配送状態のチップと並んでも同じ種類の印に見せない ---- */
.rk-axis {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0;
  padding: 1px 2px 1px 8px; border: 1px dashed var(--line-strong); border-radius: 999px;
  background: var(--surface); color: var(--ink-2); vertical-align: middle;
}
.rk-axis-key { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); white-space: nowrap; }
.rk-axis .rk-badge { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* 満たしていない条件の一覧（API 連携の準備状態など）。✕ と文で示し、条件コードは小さく添える */
.rk-gaps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.rk-gaps li { display: grid; grid-template-columns: 1.25em minmax(0, 1fr); gap: 2px var(--sp-2); align-items: baseline; min-width: 0; }
.rk-gaps li::before { content: "✕"; color: var(--crit); font-weight: 900; }
.rk-gaps li.rk-gap-pending::before { content: "…"; color: var(--warn); }
.rk-gap-code { grid-column: 2; font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted); overflow-wrap: anywhere; }

/* ---- 狭い画面（< 760px） ---- */
@media (max-width: 1100px) {
  .rk-user-id { display: none; }
  .rk-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rk-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rk-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 759px) {
  :root { --sidenav-w: 100%; }
  .rk-app.rk-has-demo { --band-h: 0px; }
  .rk-demo-band { position: static; }
  .rk-demo-notes-summary { min-height: 44px; }
  .rk-demo-notes-list { padding-left: calc(var(--sp-3) + 1.25em); padding-right: var(--sp-3); }
  .rk-topbar { padding: 0 var(--sp-3); gap: var(--sp-2); }
  /* 狭い幅では主体 ID・担当範囲を隠すので、.rk-user に残るのは役割の印とログアウトだけ（縮める余地が無い）。
     .rk-user が縮むと中身（ログアウト）が枠の外へはみ出して横スクロールになるため縮ませず、
     足りない幅は題字（.rk-brand。文字は省略記号で切れる）だけで吸収する */
  .rk-brand { flex-shrink: 1; }
  .rk-user { flex-shrink: 0; }
  .rk-topbar-status { display: none; }
  .rk-user-id, .rk-user-scope { display: none; }
  .rk-topbar .rk-menu-btn { display: inline-flex; }
  .rk-app-admin .rk-body { display: block; }
  .rk-sidenav { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 0 var(--sp-2); }
  .rk-sidenav .rk-nav-list { display: none; padding: var(--sp-2) 0; }
  .rk-app.rk-nav-open .rk-sidenav .rk-nav-list { display: flex; }
  .rk-tabnav { position: static; }
  .rk-main { padding: var(--sp-4) var(--sp-3); }
  .rk-grid-2, .rk-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .rk-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rk-kv { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rk-kv dd { margin-bottom: var(--sp-2); }
  .rk-compare { grid-template-columns: minmax(0, 1fr); }
  .rk-compare-mid { flex-direction: row; }
  .rk-compare-mid::before, .rk-compare-mid::after { width: auto; height: 2px; min-height: 0; min-width: 12px; }
  .rk-scan-row { grid-template-columns: minmax(0, 1fr); }
  .rk-scan-input { font-size: var(--fs-xl); }
  .rk-filters .rk-field, .rk-filters .rk-field-wide { max-width: none; flex-basis: 100%; }
  .rk-filter-actions { margin-left: 0; }
  .rk-login-card { padding: var(--sp-5) var(--sp-4); }
  .rk-btn { min-height: 44px; }
  .rk-btn-sm { min-height: 36px; }
  .rk-tab { min-height: 48px; }
  .rk-tabpanel { padding: var(--sp-3); }
  .rk-checklist-grid { grid-template-columns: minmax(0, 1fr); }
  .rk-file { min-height: 112px; padding: var(--sp-4) var(--sp-3); }
}

/* ---- 動きを減らす設定・強制配色 ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  a.rk-stat:hover, button.rk-stat:hover, .rk-btn:active { transform: none; }
}
@media (forced-colors: active) {
  .rk-badge, .rk-chip, .rk-card, .rk-stat, .rk-alert, .rk-vs, .rk-prov-item, .rk-checklist-item, .rk-file { border: 1px solid CanvasText; }
  .rk-axis { border: 1px dashed CanvasText; }
  .rk-chip-dot { forced-color-adjust: none; background: CanvasText; }
}