/* ============================================================
   スキルマップ デザインシステム
   Admindek 系の意匠 × OKLCH のチントニュートラル。
   ブランド色相 ≒ 264（藍寄りの青）。純白/純黒は使わず全neutralを微チント。
   ============================================================ */
:root {
    /* ブランド */
    --accent: oklch(0.585 0.176 264);
    --accent-600: oklch(0.515 0.182 264);
    --accent-soft: oklch(0.585 0.176 264 / 0.10);
    /* アクセントを文字色に使う箇所（リンク・選択中タブ）。--accent は白背景で 4.3:1 しか出ないため別に持つ */
    --accent-fg: oklch(0.515 0.182 264);
    --accent-ring: oklch(0.585 0.176 264 / 0.30);

    /* チントニュートラル（青み264をごく薄く） */
    --bg: oklch(0.973 0.006 264);
    --card: oklch(0.996 0.0018 264);
    --text: oklch(0.305 0.026 264);
    /* 説明文・メタ情報用の中間階層。--text-muted（装飾・プレースホルダ用）はAA下限のため本文には使わない */
    --text-2: oklch(0.450 0.024 264);
    --text-muted: oklch(0.565 0.024 264);
    --border: oklch(0.918 0.009 264);
    --border-soft: oklch(0.948 0.006 264);
    --hover-row: oklch(0.972 0.008 264);

    /* サイドバー（深い藍）。レール＝モジュール切替の左端、パネル＝選択中モジュールの項目 */
    --sidebar-bg: oklch(0.305 0.056 266);
    --sidebar-bg-2: oklch(0.258 0.052 268);
    --sidebar-text: oklch(0.79 0.028 264);
    --sidebar-text-dim: oklch(0.605 0.030 264);
    --sidebar-active: var(--accent);
    --rail-bg: oklch(0.235 0.050 268);

    /* ステータス */
    --green: oklch(0.625 0.135 158);
    --orange: oklch(0.715 0.150 65);
    --sky: oklch(0.685 0.115 233);
    --red: oklch(0.605 0.190 25);
    --amber: oklch(0.720 0.140 80);
    --purple: oklch(0.555 0.180 292);
    --slate: oklch(0.620 0.028 264);

    /* 習熟カーブの比較スタッフ線（選択順に割り当て。ステータス色とは別系統にして、
       ダークで橙を落としてもバッジ等の状態表示に影響しないようにする） */
    --curve-1: oklch(0.585 0.176 264);
    --curve-2: oklch(0.715 0.150 65);
    --curve-3: oklch(0.625 0.135 158);

    --radius: 14px;
    --radius-sm: 9px;
    --shadow: 0 1px 2px oklch(0.30 0.06 264 / 0.05), 0 1px 3px oklch(0.30 0.06 264 / 0.045);
    --shadow-md: 0 12px 28px -12px oklch(0.30 0.08 264 / 0.20), 0 3px 8px oklch(0.30 0.08 264 / 0.05);
    --shadow-lg: 0 22px 50px -18px oklch(0.30 0.09 264 / 0.30);
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --sidebar-w: 248px;
    --rail-w: 64px;
    --topbar-h: 64px;
}

* { box-sizing: border-box; }

/* ＃の着地・scrollIntoView を上の帯の下にする。
   ページの長さでスクロールバーの有無が変わっても横幅を変えない。 */
html { scroll-padding-top: calc(var(--topbar-h) + 12px); scrollbar-gutter: stable; }
html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

/* hidden属性はクラス側の display 指定（.btn/.badge 等）に負けるため明示的に優先させる */
[hidden] { display: none !important; }

/* 数値は等幅で桁を揃える */
.table td, .table th, .stat__value, .stat__sub, .unit-row__num, .progress + span, .kpi__value {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* 別の画面への切り替えの演出は入れない（ダークで本文が白く点滅する。2026-10-22）。 */

@keyframes vt-rise-in  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ===== レイアウト ===== */
.app { min-height: 100vh; }

/* レール（左64px）＋パネル（残り）を横に並べる固定コンテナ。
   スクロールと背景グラデーションは内側の .panel が持つ。
   overflow は切らない（レール下端のユーザーメニューのポップが右端3pxほどサイドバー幅を
   はみ出すため、hidden にすると見切れる）。 */
.sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--sidebar-w);
    background: var(--rail-bg);
    color: var(--sidebar-text);
    display: flex;
    z-index: 30;
    overflow: visible;
}

/* ===== モジュールのアイコンレール ===== */
.rail {
    flex: 0 0 var(--rail-w);
    background: var(--rail-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 0 12px;
    gap: 6px;
}
.rail .logo {
    width: 34px; height: 34px;
    border-radius: 10px;
    background: #fff;
    display: grid; place-items: center;
    flex: 0 0 34px;
    margin-bottom: 8px;
    box-shadow: 0 6px 16px -4px oklch(0.585 0.176 264 / 0.6), inset 0 1px 0 oklch(1 0 0 / 0.25);
}
.rail .logo img { width: 28px; height: 28px; object-fit: contain; display: block; }
/* ビューポートが低い環境（横向きスマホ等）でレールが本文へ溢れないよう、ボタン列だけを縦スクロールさせる。
   .rail 自体に overflow を付けると overflow-x も auto になり、レール外へ開くユーザーメニューが切れる。 */
.rail__mods {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    overflow-y: auto;
    scrollbar-width: none;
}
.rail__mods::-webkit-scrollbar { display: none; }
.rail__btn {
    width: 48px; height: 48px;
    border-radius: 12px;
    border: 0;
    background: transparent;
    color: var(--sidebar-text);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px;
    cursor: pointer;
    position: relative;
    flex: 0 0 48px;
    transition: background .2s var(--ease), color .2s var(--ease);
}
.rail__btn svg { width: 20px; height: 20px; }
.rail__btn small { font-size: 9px; letter-spacing: 0; line-height: 1; white-space: nowrap; max-width: 44px; overflow: hidden; text-overflow: ellipsis; }
.rail__btn:hover { background: oklch(1 0 0 / 0.08); color: #fff; }
.rail__btn.is-on { background: linear-gradient(135deg, oklch(0.62 0.17 263), oklch(0.54 0.18 266)); color: #fff; box-shadow: 0 8px 18px -8px oklch(0.585 0.176 264 / 0.75); }
.rail__btn.is-on::before { content: ""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%); width: 3px; height: 22px; border-radius: 0 99px 99px 0; background: oklch(0.99 0.004 264); }
/* モジュール単位の要対応件数 */
.rail__badge {
    position: absolute; top: 2px; right: 2px;
    background: #ef4444; color: #fff;
    font-size: 10px; line-height: 1; font-weight: 700;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
}
.rail__user { margin-top: auto; }
.rail__user .avatar { width: 34px; height: 34px; font-size: 13px; flex: 0 0 34px; }

/* ===== 選択中モジュールのパネル ===== */
.panel {
    flex: 1;
    min-width: 0;
    background: linear-gradient(184deg, var(--sidebar-bg) 0%, var(--sidebar-bg-2) 100%);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: oklch(0.5 0.04 264 / 0.5) transparent;
}
.panel::-webkit-scrollbar { width: 6px; }
.panel::-webkit-scrollbar-thumb { background: oklch(0.5 0.04 264 / 0.45); border-radius: 99px; }
.panel__title {
    padding: 22px 16px 10px;
    color: oklch(0.99 0.004 264);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .01em;
    display: flex; align-items: center; gap: 8px;
}
/* 小ラベル（システム名）を出さないとき、その1行分（10.5px × 1.55 ≒ 16px）を上余白で補って項目の位置を揃える */
.panel__title--flat { padding-top: 38px; }
.panel__title small { font-size: 10.5px; color: var(--sidebar-text-dim); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; display: block; }
.panel .nav { padding: 0 8px; }
.panel .nav__item { font-size: 13px; padding: 9px 10px; gap: 10px; }
.panel .nav__item.nav__item--nowrap { white-space: nowrap; padding-right: 4px; }
.panel .sidebar__section--flat { padding: 14px 18px 4px; }

.sidebar__brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 22px 22px 18px;
    color: oklch(0.99 0.004 264);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: .01em;
}
.sidebar__brand .logo {
    width: 34px; height: 34px;
    border-radius: 10px;
    background: #fff;
    object-fit: contain;
    padding: 3px;
    box-shadow: 0 6px 16px -4px oklch(0.585 0.176 264 / 0.6), inset 0 1px 0 oklch(1 0 0 / 0.25);
}

/* パネル内のカテゴリ小見出し（開閉しない） */
.sidebar__section--flat {
    padding: 16px 22px 6px;
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sidebar-text-dim);
    font-weight: 600;
}

.nav { list-style: none; margin: 0; padding: 0 12px; }
.nav__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    color: var(--sidebar-text);
    font-size: 13.5px;
    font-weight: 500;
    margin: 3px 0;
    position: relative;
    transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.nav__item::before {
    content: "";
    position: absolute;
    left: -4px; top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px; height: 20px;
    border-radius: 0 99px 99px 0;
    background: oklch(0.99 0.004 264);
    transition: transform .22s var(--ease);
}
.nav__item:hover { background: oklch(1 0 0 / 0.07); color: oklch(0.99 0.004 264); }
.nav__item:not(.is-active):hover { transform: translateX(2px); }
.nav__item:active { transform: translateX(1px) scale(.985); }
.nav__item.is-active {
    background: linear-gradient(135deg, oklch(0.62 0.17 263), oklch(0.54 0.18 266));
    color: #fff;
    font-weight: 600;
    box-shadow: 0 8px 18px -8px oklch(0.585 0.176 264 / 0.75);
}
.nav__item.is-active::before { transform: translateY(-50%) scaleY(1); }
.nav__item svg { width: 18px; height: 18px; flex: 0 0 18px; opacity: .9; transition: transform .22s var(--ease); }
.nav__item:hover svg { transform: scale(1.08); }
/* 共通レイアウトを継承しない独立ページ（ビジュアルガイド）への遷移を示す */
.nav__ext { margin-left: auto; width: 13px; height: 13px; opacity: .6; }

/* ===== メイン ===== */
.main { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
    height: var(--topbar-h);
    background: oklch(0.996 0.0018 264 / 0.85);
    backdrop-filter: saturate(1.4) blur(8px);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 20;
}
/* ハンバーガー（狭幅時のみ表示。広幅では display:none） */
.topbar__burger {
    display: none;
    appearance: none; -webkit-appearance: none;
    border: 1px solid var(--border-soft);
    background: var(--card);
    color: var(--text-muted);
    width: 40px; height: 40px;
    border-radius: 10px;
    align-items: center; justify-content: center;
    cursor: pointer; flex: 0 0 auto;
    transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.topbar__burger:hover { color: var(--accent); border-color: var(--accent-ring); }
.topbar__burger svg { width: 20px; height: 20px; }

.topbar__search {
    display: flex; align-items: center; gap: 8px;
    background: var(--bg);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 8px 12px;
    color: var(--text-muted);
    flex: 1;
    max-width: 360px;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.topbar__search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.topbar__search input { border: 0; background: transparent; outline: none; width: 100%; font-size: 13px; color: var(--text); }

/* 機能検索の候補ドロップダウン */
.topbar__search { position: relative; }
.search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: var(--card, #fff);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 12px 32px oklch(0 0 0 / 0.12);
    z-index: 50;
    max-height: 360px;
    overflow-y: auto;
}
.search-results__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 7px;
    cursor: pointer;
    color: var(--text);
}
.search-results__item:hover,
.search-results__item.is-active { background: var(--accent-ring, oklch(0.95 0.03 264)); }
.search-results__label { font-size: 13px; font-weight: 600; }
.search-results__group {
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg);
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    padding: 1px 7px;
    flex: 0 0 auto;
}
.topbar__spacer { flex: 1; }
.topbar__icons { display: flex; align-items: center; gap: 14px; color: var(--text-muted); }
.topbar__icons svg { width: 20px; height: 20px; transition: color .2s var(--ease); }
.topbar__icons svg:hover { color: var(--accent); cursor: pointer; }

.avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: grid; place-items: center;
    font-size: 13px; font-weight: 700;
    flex: 0 0 36px;
    box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.2);
}

/* ユニット別アバター色（事務=青／CS=緑／派遣=橙／インターン=紫） */
.avatar--clerk     { background: oklch(0.62 0.13 250); }
.avatar--cs        { background: oklch(0.65 0.15 160); }
.avatar--dispatch  { background: oklch(0.64 0.15 50); }
.avatar--intern    { background: oklch(0.62 0.10 300); }
.avatar--part-time { background: oklch(0.62 0.15 20); }
.avatar--walkin    { background: oklch(0.62 0.13 200); }

.content { padding: 26px 28px; flex: 1; }

/* ===== ドロワー用オーバーレイ（狭幅時のみ機能。広幅では常に非表示） ===== */
.drawer-overlay {
    position: fixed; inset: 0;
    background: oklch(0.20 0.04 264 / 0.5);
    z-index: 25;
    opacity: 0;
    transition: opacity .25s var(--ease);
    -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
}
.drawer-overlay[hidden] { display: none; }

/* ===== レスポンシブ: サイドバーのドロワー化 =====
   1024px以下では固定サイドバーを画面外へ退避（オフキャンバス）。
   ハンバーガーで .drawer-open を付与するとスライドインし、オーバーレイが背後を覆う。 */
@media (max-width: 1024px) {
    .topbar__burger { display: inline-flex; }

    .sidebar {
        transform: translateX(-100%);
        transition: transform .28s var(--ease);
        box-shadow: none;
    }
    .drawer-open .sidebar {
        transform: translateX(0);
        box-shadow: var(--shadow-lg);
    }
    .drawer-open .drawer-overlay { opacity: 1; }

    /* メインは全幅（固定サイドバー分のマージンを解除） */
    .main { margin-left: 0; }

    /* トップバー左右パディングを詰めて検索欄を確保 */
    .topbar { padding: 0 16px; gap: 12px; }
    .content { padding: 22px 18px; }
}

.page-head { margin-bottom: 22px; }
.page-head h1 { font-size: 21px; margin: 0 0 4px; font-weight: 700; letter-spacing: -.01em; }
.breadcrumb { color: var(--text-muted); font-size: 12.5px; }
.breadcrumb a { transition: color .15s var(--ease); }
.breadcrumb a:hover { color: var(--accent); }

/* ===== グリッド ===== */
.grid { display: grid; gap: 20px; }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: 2fr 1fr; }
@media (max-width: 1100px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } .grid--2 { grid-template-columns: 1fr; } .grid--3 { grid-template-columns: 1fr; } }

/* ===== 統計カード ===== */
.stat {
    border-radius: var(--radius);
    padding: 20px 22px;
    color: #fff;
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
    min-height: 122px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.stat::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 100% 0%, oklch(1 0 0 / 0.22), transparent 60%);
    pointer-events: none;
}
.stat:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.stat--blue { background: linear-gradient(135deg, oklch(0.645 0.155 263), oklch(0.545 0.180 267)); }
.stat--green { background: linear-gradient(135deg, oklch(0.685 0.130 160), oklch(0.580 0.140 163)); }
.stat--orange { background: linear-gradient(135deg, oklch(0.765 0.135 72), oklch(0.680 0.150 58)); }
.stat--sky { background: linear-gradient(135deg, oklch(0.720 0.108 235), oklch(0.620 0.128 240)); }
.stat__label { font-size: 13px; opacity: .94; font-weight: 500; }
.stat__value { font-size: 31px; font-weight: 700; margin: 6px 0 2px; letter-spacing: -.02em; }
.stat__sub { font-size: 12px; opacity: .9; }
.stat__spark { position: absolute; right: 14px; bottom: 12px; width: 110px; height: 46px; opacity: .9; }

/* ===== カード ===== */
.card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--border-soft);
    transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover { box-shadow: var(--shadow-md); border-color: var(--border); }
.card__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border-soft); }
.card__head h2 { font-size: 15px; margin: 0; font-weight: 700; letter-spacing: -.005em; }
.card__body { padding: 20px; }
.card__body--tight { padding: 8px 8px; }

/* ===== テーブル ===== */
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th, .table td { padding: 12px 14px; text-align: left; }
.table thead th { color: var(--text-2); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--border); }
.table tbody tr { border-bottom: 1px solid var(--border-soft); transition: background .15s var(--ease); }
.table tbody tr:last-child { border-bottom: 0; }
.table tbody tr:hover { background: var(--hover-row); }

/* R6: 属人化タスクの行強調。色は appearance.attrition_row_bg / _text（layouts/app.blade.php で --attrition-row-* に注入）を参照し、
   変数未定義でも壊れないようフォールバック値を持つ。hover時の背景上書きに勝つよう .table tbody tr.row--attrition:hover も明示する。 */
.row--attrition { background: var(--attrition-row-bg, #fdecec); color: var(--attrition-row-text, #b3261e); }
.table tbody tr.row--attrition,
.table tbody tr.row--attrition:hover { background: var(--attrition-row-bg, #fdecec); }

/* 明示的な横スクロールラッパ（個別Viewで必要時に使用） */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ===== バッジ ===== */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: .01em; }
.badge--passed { background: oklch(0.625 0.135 158 / 0.14); color: oklch(0.48 0.13 158); }
.badge--in_progress { background: var(--accent-soft); color: var(--accent-600); }
.badge--not_started { background: oklch(0.62 0.02 264 / 0.13); color: var(--text-muted); }
.badge--mentor { background: oklch(0.555 0.18 292 / 0.14); color: oklch(0.5 0.18 292); }
.badge--high { background: oklch(0.605 0.19 25 / 0.13); color: oklch(0.52 0.19 25); }
.badge--standard { background: oklch(0.72 0.14 80 / 0.18); color: oklch(0.52 0.12 70); }
.badge--low { background: oklch(0.62 0.02 264 / 0.13); color: var(--text-muted); }
/* スキルのリスク区分（5段階・レベル1が低〜レベル5が高）。badge--high/standard/low は
   DutyPriority::badgeClass()（業務優先度）と共用のため残し、リスク用にこの5クラスを別途追加する */
.badge--risk1 { background: oklch(0.62 0.02 264 / 0.13); color: var(--text-muted); }
.badge--risk2 { background: oklch(0.70 0.07 130 / 0.15); color: oklch(0.50 0.10 130); }
.badge--risk3 { background: oklch(0.72 0.14 80 / 0.18); color: oklch(0.52 0.12 70); }
.badge--risk4 { background: oklch(0.66 0.17 45 / 0.16); color: oklch(0.52 0.16 45); }
.badge--risk5 { background: oklch(0.605 0.19 25 / 0.13); color: oklch(0.52 0.19 25); }
.badge--count { background: var(--accent-soft); color: var(--accent-600); }
.badge--observation { background: oklch(0.62 0.16 350 / 0.13); color: oklch(0.52 0.17 350); }
.badge--test { background: oklch(0.65 0.15 160 / 0.13); color: oklch(0.5 0.14 160); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* ===== プログレス ===== */
.progress { background: oklch(0.62 0.02 264 / 0.14); border-radius: 999px; height: 8px; overflow: hidden; min-width: 90px; }
.progress__bar { height: 100%; border-radius: 999px; background: var(--accent); transition: width .5s var(--ease); }

/* ===== ボタン ===== */
.btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px; border-radius: var(--radius-sm);
    font-size: 12.5px; font-weight: 600;
    border: 1px solid transparent; cursor: pointer;
    background: oklch(0.62 0.02 264 / 0.10); color: var(--text);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), filter .2s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--accent); color: #fff; box-shadow: 0 6px 14px -8px var(--accent-ring); }
.btn--primary:hover { background: var(--accent-600); box-shadow: 0 8px 18px -8px var(--accent-ring); }
.btn--success { background: var(--green); color: #fff; }
.btn--danger { background: var(--red); color: #fff; }
.btn--ghost { background: transparent; border-color: var(--border); color: var(--text-2); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--sm { padding: 5px 10px; font-size: 11.5px; }

.inline-form { display: inline-flex; gap: 6px; align-items: center; }

/* 講義登録：30分単位の時刻セレクト（分は 00 / 30 のみ） */
.time-slot { display: flex; align-items: center; gap: 4px; width: 100%; }
.time-slot__part { flex: 1; min-width: 0; padding-right: 28px; }
.time-slot__sep { flex: none; color: var(--text-muted); font-weight: 600; }

/* 日付＋時刻を同一セル内で横並び（1on1実施日時など） */
.datetime-slot {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    flex-wrap: nowrap;
}
.field .datetime-slot__date {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}
.datetime-slot .time-slot {
    flex: 0 0 auto;
    width: auto;
}
.datetime-slot .time-slot__part {
    flex: 0 0 4.25rem;
    width: 4.25rem;
}

/* 7-4 CS QAスコアカード（スタッフ詳細・評価行） */
.scorecard-form { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; margin-top: 6px; }
.scorecard-form__grid { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.scorecard-form__item { display: flex; align-items: center; gap: 6px; font-size: 11.5px; }
.scorecard-form__label { flex: 1; min-width: 0; }
.scorecard-form__input { width: 44px; padding: 2px 5px; border: 1px solid var(--border, #d7dee8); border-radius: 6px; font-size: 12px; }
.input, select.input { padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; background: var(--card); outline: none; color: var(--text); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

/* セレクト共通：開閉カーソル＋枠線/リングの滑らかな遷移（インラインstyleのselectも対象） */
select { cursor: pointer; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
/* .input セレクトは matrix-domain と同じカスタム矢印に昇格（重なり防止に右paddingを確保） */
select.input {
    appearance: none; -webkit-appearance: none;
    padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23647089' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center;
}
select.input:hover { border-color: var(--accent-ring); }

/* ===== 区分別オーバービュー ===== */
.unit-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border-soft); }
.unit-row:last-child { border-bottom: 0; }
.unit-row__name { width: 96px; font-weight: 600; }
.unit-row__bar { flex: 1; display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: oklch(0.62 0.02 264 / 0.13); }
.unit-row__bar span { display: block; height: 100%; transition: width .5s var(--ease); }
.seg--passed { background: var(--green); }
.seg--in_progress { background: var(--accent); }
.seg--not_started { background: oklch(0.82 0.012 264); }
.unit-row__num { width: 120px; text-align: right; color: var(--text-muted); font-size: 12px; }

/* ===== 凡例 ===== */
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); margin-top: 12px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }

.muted { color: var(--text-muted); }
.empty { text-align: center; color: var(--text-muted); padding: 36px 16px; }
.empty svg { width: 40px; height: 40px; opacity: .4; margin-bottom: 8px; }
.section-gap { margin-top: 20px; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }

/* ===== タブ ===== */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); padding: 0 20px; }
.tab { padding: 13px 16px; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; transition: color .2s var(--ease), border-color .2s var(--ease); }
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }
html.is-ready .tab-panel.is-active { animation: fade-in .35s var(--ease); }

@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ===== ログイン ===== */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-side { background: linear-gradient(160deg, oklch(0.305 0.056 266), oklch(0.52 0.18 264)); color: #fff; padding: 56px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; position: relative; overflow: hidden; }
.auth-side .sidebar__brand { justify-content: center; }
.auth-side::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 60% at 80% 10%, oklch(1 0 0 / 0.14), transparent 60%); pointer-events: none; }
.auth-side h2 { font-size: 28px; margin: 0 0 12px; letter-spacing: -.01em; position: relative; }
.auth-side p { opacity: .88; max-width: 360px; position: relative; }
.auth-main { display: grid; place-items: center; padding: 24px; }
.auth-card { width: 100%; max-width: 360px; }
.auth-card h1 { font-size: 22px; margin: 0 0 6px; letter-spacing: -.01em; }
.auth-card .sub { color: var(--text-muted); margin-bottom: 24px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; }
.field input { width: 100%; padding: 11px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; outline: none; background: var(--card); color: var(--text); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.auth-error { background: oklch(0.605 0.19 25 / 0.12); color: oklch(0.52 0.19 25); padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 16px; }
.field--check { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.field--check input { width: 16px; height: 16px; padding: 0; accent-color: var(--accent); cursor: pointer; }
.field--check input:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); border-radius: 3px; }
.field--check label { margin: 0; font-weight: 500; font-size: 13px; color: var(--text-muted); cursor: pointer; user-select: none; }
.btn-block { width: 100%; justify-content: center; padding: 12px; font-size: 14px; }
@media (max-width: 820px) { .auth-wrap { grid-template-columns: 1fr; } .auth-side { display: none; } }

/* ===== 講義ロードマップ ===== */
.roadmap-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.roadmap-stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; text-align: center; }
.roadmap-stat__val { font-size: 22px; font-weight: 700; color: var(--accent); }
.roadmap-stat__lbl { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }
.roadmap-overall { margin-bottom: 24px; }
.roadmap-overall__bar { height: 10px; background: oklch(0.62 0.02 264 / 0.14); border-radius: 999px; overflow: hidden; }
.roadmap-overall__fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--green)); border-radius: 999px; transition: width .5s var(--ease); }
.roadmap-timeline { position: relative; padding-left: 28px; }
.roadmap-timeline::before { content: ''; position: absolute; left: 10px; top: 8px; bottom: 8px; width: 2px; background: var(--border); }
.roadmap-item { position: relative; margin-bottom: 20px; padding: 14px 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
.roadmap-item::before { content: ''; position: absolute; left: -22px; top: 20px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid var(--card); box-shadow: 0 0 0 2px var(--accent-ring); }
.roadmap-item.is-complete::before { background: var(--green); box-shadow: 0 0 0 2px oklch(0.62 0.16 155 / 0.3); }
.roadmap-item__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.roadmap-item__title { font-weight: 600; font-size: 14px; }
.roadmap-item__date { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.roadmap-steps { display: flex; align-items: center; gap: 0; margin-top: 10px; }
.roadmap-step { flex: 1; text-align: center; position: relative; }
.roadmap-step__dot { width: 22px; height: 22px; border-radius: 50%; margin: 0 auto 6px; background: oklch(0.62 0.02 264 / 0.14); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--text-muted); }
.roadmap-step.is-done .roadmap-step__dot { background: var(--green); border-color: var(--green); color: #fff; }
.roadmap-step.is-current .roadmap-step__dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.roadmap-step__lbl { font-size: 10.5px; color: var(--text-muted); }
.roadmap-step__date { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.roadmap-step__line { position: absolute; top: 11px; left: 50%; width: 100%; height: 2px; background: var(--border); z-index: -1; }
.roadmap-step.is-done + .roadmap-step .roadmap-step__line,
.roadmap-step.is-done .roadmap-step__line { background: var(--green); }
@media (max-width: 768px) { .roadmap-summary { grid-template-columns: repeat(2, 1fr); } }

/* ===== 講義カレンダー（日ビュー） ===== */
.tcal {
    display: grid;
    grid-template-columns: 56px repeat(var(--tcal-cols), minmax(120px, 1fr));
    grid-auto-rows: 22px;
    min-width: calc(56px + var(--tcal-cols) * 120px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.tcal__corner { grid-row: 1; grid-column: 1; background: var(--card); border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
.tcal__col-head { grid-row: 1; background: var(--card); border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); padding: 8px 10px; font-size: 12.5px; font-weight: 600; text-align: center; }
.tcal__allday-label { grid-row: 2; grid-column: 1; background: var(--card); border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); font-size: 10.5px; color: var(--text-muted); display: flex; align-items: center; justify-content: center; }
.tcal__allday-cell { grid-row: 2; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); padding: 3px; display: flex; flex-direction: column; gap: 2px; min-height: 26px; }
.tcal__timeaxis { grid-column: 1; display: grid; grid-template-rows: subgrid; border-right: 1px solid var(--border); }
.tcal__time-label { font-size: 10px; color: var(--text-muted); text-align: right; padding-right: 6px; padding-top: 1px; }
.tcal__grid-col { position: relative; display: grid; grid-template-rows: subgrid; border-right: 1px solid var(--border); }
.tcal__slot { all: unset; box-sizing: border-box; display: block; width: 100%; height: 100%; border-bottom: 1px solid var(--border); cursor: pointer; }
.tcal__slot:hover { background: var(--hover-row); }
.tcal-event {
    grid-column: 1 / -1;
    margin: 1px 3px;
    padding: 3px 6px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    overflow: hidden;
    background: var(--accent-soft);
    border-left: 3px solid var(--accent);
    pointer-events: none;
}
.tcal-event--done { background: color-mix(in oklch, var(--green) 14%, transparent); border-left-color: var(--green); }
.tcal-event__time { font-size: 10px; font-weight: 600; color: var(--text-muted); }
.tcal-event__title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcal-event__sub { font-size: 10px; color: var(--text-muted); }

/* ============================================================
   業務対応マトリクス（担当表）
   ============================================================ */
.matrix-tabs { display: flex; gap: 4px; padding: 2px; margin-bottom: 16px; background: var(--bg); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); width: fit-content; }
.matrix-tab {
    padding: 7px 18px; border: 0; background: transparent; cursor: pointer;
    font-size: 13px; font-weight: 600; color: var(--text-muted); border-radius: 7px;
    transition: background .18s var(--ease), color .18s var(--ease);
}
.matrix-tab:hover { color: var(--text); }
.matrix-tab.is-active { background: var(--card); color: var(--accent-600); box-shadow: var(--shadow); }

.matrix-panel { display: none; }
.matrix-panel.is-active { display: block; }

/* 見出し＋凡例を1段目、チップを2段目に置く。凡例と横並びにするとチップ側の幅が頭打ちになり
   行数が減らないため、チップには行全幅を与える（画面の縦占有を約半分に抑える）。 */
.matrix-toolbar { display: block; margin-bottom: 12px; }
.matrix-toolbar__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.matrix-toolbar__label { font-size: 12px; font-weight: 600; color: var(--text-muted); flex: 0 0 auto; }

/* 業務領域チップ：項目数が多くても開かずに一覧でき、選択中が一目で分かる（均等グリッドで整列） */
.domain-chip-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 6px; }
.domain-chip {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
    padding: 4px 10px; font-size: 12px; font-weight: 600; color: var(--text); text-align: left;
    border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); cursor: pointer;
    transition: background-color .12s, border-color .12s, color .12s, transform .12s;
}
.domain-chip:hover { border-color: var(--accent); color: var(--accent-600); transform: translateY(-1px); }
.domain-chip:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); outline: none; }
.domain-chip__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.domain-chip__count { font-size: 11px; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.domain-chip.is-selected { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 6px 14px -8px var(--accent-ring); }
.domain-chip.is-selected:hover { background: var(--accent-600); color: #fff; }
.domain-chip.is-selected .domain-chip__count { color: oklch(1 0 0 / 0.82); }

.matrix-domain {
    padding: 6px 30px 6px 11px; font-size: 13px; color: var(--text); font-weight: 600;
    border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card);
    appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23647089' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 9px center;
}
.matrix-domain:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

.matrix-legend { display: flex; gap: 16px; font-size: 12px; color: var(--text-muted); }
.matrix-legend span { display: inline-flex; align-items: center; gap: 6px; }

.matrix-wrap { display: none; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.matrix-wrap.is-active { display: block; }

.matrix { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.matrix th, .matrix td { padding: 12px 12px; text-align: center; vertical-align: middle; border-bottom: 1px solid var(--border-soft); border-right: 1px solid var(--border-soft); white-space: nowrap; }
.matrix tbody tr:last-child td { border-bottom: 0; }

/* ヘッダー（濃紺） */
.matrix thead th { background: oklch(0.345 0.052 264); color: oklch(0.96 0.01 264); font-weight: 600; font-size: 12px; letter-spacing: .02em; border-bottom: 0; border-right-color: oklch(0.42 0.05 264); position: sticky; top: 0; z-index: 3; }
.matrix th.matrix__skill { width: 112px; min-width: 112px; max-width: 112px; vertical-align: middle; padding: 12px 10px; white-space: normal; word-break: break-word; line-height: 1.42; font-size: 12.5px; font-weight: 600; }
.matrix__skill span { display: block; }

/* 左の固定列群 */
.matrix__staff { text-align: left; font-weight: 700; color: var(--text); background: var(--card); position: sticky; left: 0; z-index: 2; min-width: 132px; padding-left: 14px; box-shadow: 6px 0 10px -7px oklch(0.30 0.06 264 / 0.18); }
.matrix thead .matrix__staff { z-index: 4; color: oklch(0.96 0.01 264); background: oklch(0.345 0.052 264); }
.matrix__role { color: var(--text-muted); background: oklch(0.965 0.009 250); font-size: 12px; min-width: 76px; }
.matrix__count { background: oklch(0.965 0.009 250); color: var(--text-muted); font-variant-numeric: tabular-nums; min-width: 92px; }
/* 業務列が少ないとき、余った幅が左3列に配分されて業務が右へ押し出されるのを防ぐ。
   右端のスペーサー列に width:100% を与えて余白を全部そこへ吸わせる（table-layout:auto ではセルの max-width が
   効かないため、上限を課すのではなく吸収先を明示する）。業務列が多いときはスペーサーが縮み、従来どおり横スクロールになる。 */
.matrix__spacer { width: 100%; min-width: 0; padding: 0; border-right: 0; }
.matrix tbody .matrix__spacer { background: var(--card); }
.matrix__count b { color: var(--accent-600); font-size: 15px; }
.matrix__rate { background: oklch(0.965 0.009 250); color: var(--text-muted); font-variant-numeric: tabular-nums; min-width: 68px; }
.matrix thead .matrix__role, .matrix thead .matrix__count, .matrix thead .matrix__rate { background: oklch(0.345 0.052 264); color: oklch(0.96 0.01 264); }

/* 行の交互チント＆ホバー */
.matrix tbody tr:nth-child(even) td { background: oklch(0.978 0.007 255); }
.matrix tbody tr:nth-child(even) .matrix__staff { background: oklch(0.978 0.007 255); }
.matrix tbody tr:hover td { background: var(--hover-row); }
.matrix tbody tr:hover .matrix__staff { background: var(--hover-row); }

/* 対応可否セル */
.matrix__cell { transition: background .15s var(--ease); }
.matrix__cell.is-ok { background: oklch(0.625 0.135 158 / 0.14); }
.matrix tbody tr:nth-child(even) .matrix__cell.is-ok { background: oklch(0.625 0.135 158 / 0.18); }
.matrix__cell.is-wip { background: oklch(0.720 0.140 80 / 0.13); }
.matrix tbody tr:nth-child(even) .matrix__cell.is-wip { background: oklch(0.720 0.140 80 / 0.16); }

/* マーク：対応可=塗り緑ディスク／育成中=アンバー中抜き／未対応=淡いドット */
.mark { display: inline-block; width: 15px; height: 15px; border-radius: 999px; box-sizing: border-box; vertical-align: middle; }
.mark--ok { background: var(--green); border: 0; box-shadow: 0 0 0 3px oklch(0.625 0.135 158 / 0.18); }
.mark--wip { background: transparent; border: 2.5px solid var(--amber); width: 13px; height: 13px; }
.mark--none { background: oklch(0.86 0.012 264); border: 0; width: 8px; height: 8px; }

.matrix-note { margin: 12px 2px 0; font-size: 11.5px; color: var(--text-muted); }

/* ソート可能な列見出し（クリック/Enterで昇順⇄降順トグル） */
.matrix th[data-sort-key] { cursor: pointer; user-select: none; }
.matrix th[data-sort-key]:hover { background: oklch(0.40 0.055 264); }
.matrix th[data-sort-key]:focus-visible { outline: 2px solid oklch(0.96 0.01 264); outline-offset: -2px; }
.matrix th.is-sorted-asc::after { content: ' ▲'; font-size: 10px; opacity: .85; }
.matrix th.is-sorted-desc::after { content: ' ▼'; font-size: 10px; opacity: .85; }

/* 検索絞込で非該当となった行・列 */
.matrix tbody tr.is-hidden-row { display: none; }
.matrix td.is-hidden-col, .matrix th.is-hidden-col { display: none; }

/* R6: 業務対応マトリクスは行＝スタッフのため、属人化は列（スキル）側の性質として見出し(th)に強調を当てる。
   thead th の紺色背景・hover上書きに勝つ詳細度で明示する。 */
.matrix thead th.row--attrition,
.matrix thead th.row--attrition:hover,
.matrix th[data-sort-key].row--attrition:hover { background: var(--attrition-row-bg, #fdecec); color: var(--attrition-row-text, #b3261e); }
/* 色だけに頼らないための短いラベル（列見出し内の小さなピル） */
.matrix__attrition-tag { display: inline-block; margin-top: 3px; padding: 1px 7px; border-radius: 999px; font-size: 9.5px; font-weight: 700; letter-spacing: .02em; background: var(--attrition-row-text, #b3261e); color: #fff; }

/* 業務対応マトリクスの横断検索欄＋クリアボタン（区分タブごとに1組） */
.matrix-toolbar__search { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.matrix-toolbar__search .sx-search { margin-left: 0; }

/* ===== 配置判断：カテゴリー開閉アコーディオン ===== */
.deploy-acc { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); margin-bottom: 8px; overflow: hidden; }
.deploy-acc__head {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 11px 14px; border: 0; background: transparent; cursor: pointer;
    font-size: 13.5px; font-weight: 700; color: var(--text); text-align: left;
    transition: background .15s var(--ease);
}
.deploy-acc__head:hover { background: var(--hover-row); }
.deploy-acc__head:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--accent-ring); }
.deploy-acc__chevron { display: inline-flex; color: var(--text-muted); transition: transform .2s var(--ease); }
.deploy-acc.is-open .deploy-acc__chevron { transform: rotate(90deg); }
.deploy-acc__title { flex: 1; min-width: 0; }
.deploy-acc__meta { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.deploy-acc__count { font-size: 11.5px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* grid-template-rows 0fr→1fr で高さを滑らかに（高さ計算なし＝カクつかない） */
.deploy-acc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s var(--ease); }
.deploy-acc.is-open .deploy-acc__body { grid-template-rows: 1fr; }
.deploy-acc__inner { overflow: hidden; min-height: 0; }
/* 開いている間だけ横スクロールを許可する（閉時は高さアニメのため hidden のまま）。
   overflow-y は hidden を保つので、縦の畳み込みアニメーションは従来どおり動く。 */
.deploy-acc.is-open .deploy-acc__inner { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.deploy-acc__inner .table { margin: 0; border-top: 1px solid var(--border-soft); }
@media (prefers-reduced-motion: reduce) {
    .deploy-acc__body { transition: none; }
    .deploy-acc__chevron { transition: none; }
}

/* ===== マニュアル管理 ===== */
.manual-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.manual-list__item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.manual-list__item:hover { border-color: var(--accent-ring); box-shadow: var(--shadow); }
.manual-list__icon { font-size: 18px; line-height: 1; }
.manual-list__body { flex: 1; min-width: 0; }
.manual-list__title { font-weight: 600; font-size: 13.5px; word-break: break-all; }
.manual-list__title:hover { color: var(--accent); text-decoration: underline; }

.manual-upload { display: flex; flex-direction: column; gap: 12px; border-top: 1px dashed var(--border); padding-top: 14px; }
.manual-drop__zone { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 16px; border: 2px dashed var(--border); border-radius: 12px; text-align: center; cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease); }
.manual-drop__zone:hover { border-color: var(--accent-ring); background: var(--accent-soft); }
.manual-drop__zone.is-over { border-color: var(--accent); background: var(--accent-soft); }
.manual-drop__icon { font-size: 22px; color: var(--accent); }
.manual-drop__text { font-size: 13px; }
.manual-drop__text u { color: var(--accent); }
.manual-drop__hint { font-size: 11px; color: var(--text-muted); }
.manual-drop__file { font-size: 12px; margin-top: 4px; }
.manual-drop__submit { margin-top: 10px; align-self: flex-start; }
.manual-urlform { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.manual-urlform .input { flex: 1; min-width: 160px; }

.training-manuals { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.training-manuals__link { font-size: 11px; color: var(--accent); white-space: nowrap; }
.training-manuals__link:hover { text-decoration: underline; }

/* ===== 折りたたみセクション ===== */
.collapsible > .card__head { cursor: pointer; user-select: none; transition: background .15s var(--ease); }
.collapsible > .card__head:hover { background: var(--accent-soft); }
.collapsible__toggle { display: inline-flex; align-items: center; gap: 10px; }
.collapsible__chevron { width: 16px; height: 16px; color: var(--text-muted); transition: transform .2s var(--ease); flex-shrink: 0; }
.collapsible.is-open > .card__head .collapsible__chevron { transform: rotate(90deg); }
.collapsible > .collapse-body { display: none; }
.collapsible.is-open > .collapse-body { display: block; }
html.is-ready .collapsible.is-open > .collapse-body { animation: fade-in .25s var(--ease); }
/* 復帰先の行を含むセクションは、JS(localStorage復元)を待たずに描画前から開く。
   閉じたままだと行が display:none でブラウザ標準のアンカー移動が効かず、
   ページ先頭を描画したあとに JS でスクロールする＝縦移動が見えてしまう。
   後から is-open が付いてもフェードし直さないよう animation も止める。 */
.collapsible:has(:target) > .collapse-body { display: block; animation: none; }
/* 入場のアニメ（html.is-ready の規則）は上より強いので、同じ強さで後ろに置いて止める */
html.is-ready .collapsible:has(:target) > .collapse-body { animation: none; }
/* html の scroll-padding-top（上の帯＋12px）と足して、上の帯の下 24px に着地させる */
tr[id^="assessment-"] { scroll-margin-top: 12px; }

/* ===== マニュアル管理：ツールバー＋アコーディオン ===== */
.manual-toolbar { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; padding: 12px 16px; }
.manual-coverage { display: flex; align-items: baseline; gap: 14px; font-size: 12px; color: var(--text-muted); }
.manual-coverage__total { font-weight: 700; color: var(--text); font-size: 13px; }
.manual-coverage__stat b { font-size: 15px; color: var(--text); font-weight: 700; margin-right: 2px; }
.manual-coverage__stat--warn b { color: var(--orange); }
.manual-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.manual-chip { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--text-muted); transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.manual-chip:hover { border-color: var(--accent); color: var(--accent); }
.manual-chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.manual-search { display: flex; gap: 8px; align-items: center; margin-left: auto; }

.acc { display: flex; flex-direction: column; gap: 4px; }
.acc__layer { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--text-muted); padding: 16px 4px 4px; }
.acc__layer:first-child { padding-top: 4px; }

/* カテゴリ（領域）アコーディオン */
.acc-cat { background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); box-shadow: var(--shadow); overflow: hidden; }
.acc-cat[open] { border-color: var(--border); }
.acc-cat__head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; user-select: none; list-style: none; transition: background .15s var(--ease); }
.acc-cat__head::-webkit-details-marker { display: none; }
.acc-cat__head:hover { background: var(--hover-row); }
.acc-cat__name { font-weight: 700; font-size: 13.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-cat__meta { flex: none; }
.acc-cat__cov { font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.acc-cat__cov.is-done { background: oklch(0.625 0.135 158 / 0.14); color: oklch(0.48 0.13 158); }
.acc-cat__cov.is-partial { background: oklch(0.72 0.14 80 / 0.18); color: oklch(0.52 0.12 70); }
/* ダーク：文字色だけをバッジ（.badge--ok／.badge--warn のダーク）と同じ値に上げる。背景は明るいときと共通 */
html[data-theme="dark"] .acc-cat__cov.is-done { color: oklch(0.78 0.13 158); }
html[data-theme="dark"] .acc-cat__cov.is-partial { color: oklch(0.82 0.13 80); }
.acc-cat__body { padding: 4px 8px 10px; border-top: 1px solid var(--border-soft); }

.acc-chev { width: 15px; height: 15px; flex: none; color: var(--text-muted); transition: transform .18s var(--ease); }
details[open] > summary > .acc-chev { transform: rotate(90deg); }

/* スキル（タスク）アコーディオン */
.acc-skill { border-radius: 8px; }
.acc-skill + .acc-skill { margin-top: 2px; }
.acc-skill[open] { background: var(--accent-soft); }
.acc-skill__head { display: flex; align-items: center; gap: 9px; padding: 8px 10px; cursor: pointer; user-select: none; list-style: none; border-radius: 8px; font-size: 13px; color: var(--text); transition: background .15s var(--ease); }
.acc-skill__head::-webkit-details-marker { display: none; }
.acc-skill__head:hover { background: var(--hover-row); }
.acc-skill[open] > .acc-skill__head { color: var(--accent-600); font-weight: 600; }
.acc-skill__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-skill__count { flex: none; min-width: 22px; height: 18px; padding: 0 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-600); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.acc-skill[open] > .acc-skill__head .acc-skill__count { background: var(--card); }
.acc-skill__count--empty { background: transparent; color: var(--text-muted); font-weight: 600; }
.acc-skill__body { padding: 4px 10px 12px 34px; }
.acc-skill__body .manual-list { margin-bottom: 10px; }
.acc-skill__body .empty { text-align: left; }

/* 共有アップロードフォーム（JSで開いたスキルへ移動） */
.manual-upload--shared { margin-top: 12px; border: 1px solid var(--accent-ring); border-radius: var(--radius-sm); padding: 14px; background: var(--card); box-shadow: var(--shadow-md); }
.manual-upload__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }

/* レイヤー外の項目（スキルに紐づかないマニュアルの置き場所）：項目名の変更・削除の行と、項目の追加欄 */
.manual-item-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.manual-item-tools .btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.manual-item-tools__hint { font-size: 11px; color: var(--text-muted); }
.manual-item-add { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px dashed var(--border); border-radius: var(--radius-sm); }
.manual-item-add__lead { font-size: 12px; color: var(--text-2); }

/* トースト（左ストライプ通知の置換） */
.toast { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 16px; font-size: 13px; font-weight: 600; }
.toast--success { background: oklch(0.625 0.135 158 / 0.10); border-color: oklch(0.625 0.135 158 / 0.30); color: oklch(0.46 0.12 158); }

@media (max-width: 860px) {
    .manual-search { margin-left: 0; }
    .acc-skill__body { padding-left: 18px; }
}

/* ===== 開閉カテゴリ（マイスキル 領域別） ===== */
.skill-cat {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.skill-cat__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background .18s var(--ease);
}
.skill-cat__head::-webkit-details-marker { display: none; }
.skill-cat__head:hover { background: var(--hover-row); }
.skill-cat__chevron {
    width: 18px; height: 18px; flex: 0 0 18px;
    color: var(--text-muted);
    transition: transform .22s var(--ease);
}
.skill-cat[open] .skill-cat__chevron { transform: rotate(90deg); }
.skill-cat__title { font-weight: 600; font-size: 14.5px; }
.skill-cat__count {
    font-size: 11.5px;
    color: var(--text-muted);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 99px;
    padding: 1px 9px;
}
.skill-cat__spacer { flex: 1 1 auto; }
.skill-cat__bar {
    width: 120px; height: 6px;
    border-radius: 99px;
    background: var(--border);
    overflow: hidden;
    flex: 0 0 auto;
}
.skill-cat__bar > span {
    display: block; height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--accent), var(--accent-600));
}
.skill-cat__ratio { font-size: 12px; color: var(--text-muted); min-width: 72px; text-align: right; font-variant-numeric: tabular-nums; }
/* .skill-cat は角丸のため overflow:hidden。表がその幅を超えると横に切れて読めなくなるので、
   本体側を横スクロールコンテナにして逃がす。 */
.skill-cat__body { border-top: 1px solid var(--border-soft); overflow-x: auto; -webkit-overflow-scrolling: touch; }
html.is-ready .skill-cat[open] .skill-cat__body { animation: vt-rise-in .26s var(--ease) both; }

@media (max-width: 860px) {
    .skill-cat__bar { display: none; }
    .skill-cat__spacer { flex: 1 1 auto; }
}

/* モーション抑制の尊重 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ===== ユーザーメニュー（アバター/サイドバーから開くドロップダウン） ===== */
.usermenu { position: relative; }
.usermenu--sidebar { margin-top: auto; }
.usermenu__trigger {
    appearance: none; -webkit-appearance: none;
    border: 0; background: transparent; cursor: pointer;
    font: inherit; color: inherit; padding: 0;
    display: flex; align-items: center; gap: 8px;
}
.usermenu--sidebar .usermenu__trigger { width: 100%; text-align: left; }
.usermenu__caret { width: 16px; height: 16px; margin-left: auto; flex: 0 0 16px; color: var(--sidebar-text-dim); }
.usermenu--topbar .usermenu__trigger { border-radius: 50%; }
.usermenu--topbar .usermenu__trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.usermenu__pop {
    position: absolute; z-index: 60; min-width: 236px;
    background: var(--card); border: 1px solid var(--border);
    border-radius: 12px; padding: 6px;
    box-shadow: var(--shadow-lg);
    animation: vt-rise-in .16s var(--ease) both;
}
.usermenu__pop[hidden] { display: none; }
.usermenu--topbar .usermenu__pop { top: calc(100% + 8px); right: 0; }
.usermenu--sidebar .usermenu__pop { bottom: calc(100% + 8px); left: 12px; right: 12px; }
/* レール（64px）からはポップを右へ開く。left/right の指定だけでは 40px に潰れるため上書きする。
   詳細度をタイにするとソース順依存になるので .usermenu--sidebar を含めて確実に勝たせる。 */
.usermenu--sidebar.rail__user .usermenu__pop { left: 0; right: auto; }

.usermenu__head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; border-bottom: 1px solid var(--border-soft); margin-bottom: 4px; }
.usermenu__id { min-width: 0; line-height: 1.3; }
.usermenu__id b { display: block; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usermenu__id span { font-size: 11px; color: var(--text-muted); }

.usermenu__theme { display: flex; gap: 4px; background: var(--bg); border: 1px solid var(--border-soft); border-radius: 10px; padding: 4px; margin: 4px; }
.usermenu__theme-btn {
    flex: 1; appearance: none; -webkit-appearance: none; border: 0; background: transparent; cursor: pointer;
    border-radius: 7px; padding: 7px 0; color: var(--text-muted);
    display: grid; place-items: center;
    transition: background .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease);
}
.usermenu__theme-btn svg { width: 18px; height: 18px; }
.usermenu__theme-btn:hover { color: var(--text); }
.usermenu__theme-btn.is-active { background: var(--card); color: var(--accent); box-shadow: var(--shadow); }

.usermenu__form { margin: 0; }
.usermenu__item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    appearance: none; -webkit-appearance: none; border: 0; background: transparent; cursor: pointer;
    font: inherit; text-align: left; color: var(--text);
    padding: 9px 10px; border-radius: 8px;
}
.usermenu__item svg { width: 18px; height: 18px; color: var(--text-muted); flex: 0 0 18px; }
.usermenu__item:hover { background: var(--hover-row); }
.usermenu__item--danger { color: var(--red); }
.usermenu__item--danger svg { color: var(--red); }

/* ガイド分析：本日ライブカード */
.live-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; }
@media (max-width: 900px) { .live-grid { grid-template-columns: 1fr; } }
.live-h3 { font-size: 12px; font-weight: 700; color: var(--text-muted); margin: 0 0 8px; letter-spacing: .04em; }
.live-row { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 7px 10px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); margin-bottom: 6px; }
.live-row.is-alert { border-color: var(--amber); }
.live-row__name { font-weight: 600; }
.live-row__guide { color: var(--text-muted); font-size: 13px; }
.live-row__meta { margin-left: auto; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.live-today { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.live-stat { font-size: 12px; color: var(--text-muted); }
.live-stat b { font-size: 16px; color: var(--text); margin-right: 4px; font-weight: 700; }
.live-feed { max-height: 168px; overflow-y: auto; }
.live-feed__row { font-size: 12px; color: var(--text-muted); padding: 3px 0; border-bottom: 1px solid var(--border-soft); }
.live-feed__at { display: inline-block; min-width: 40px; font-variant-numeric: tabular-nums; }

/* ガイド分析：サポートキュー */
.sq-row { padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); margin-bottom: 8px; }
.sq-row__head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 5px; }
.sq-row__name { font-weight: 700; }
.sq-row__score { font-size: 12px; }
.sq-row__reason { font-size: 13px; color: var(--text); }
.sq-row__stats { font-size: 12px; color: var(--text-muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
.sq-row__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* ===== 行動評価ボード：区分別セクションの上に置く集計チップ ===== */
.eval-summary { display: flex; flex-wrap: wrap; gap: 8px; }
.eval-chip {
    display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 600; color: var(--text-muted);
    border: 1px solid var(--border); background: var(--card);
}
.eval-chip b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.eval-chip--total { border-color: var(--accent); color: var(--accent-600); background: var(--accent-soft); }

/* ===== ダークテーマ（CSS変数の上書き。html[data-theme="dark"]） ===== */
html[data-theme="dark"] {
    color-scheme: dark;
    --bg: oklch(0.205 0.018 264);
    --card: oklch(0.262 0.020 264);
    --text: oklch(0.928 0.012 264);
    --text-2: oklch(0.800 0.015 264);
    --text-muted: oklch(0.705 0.020 264);
    --border: oklch(0.360 0.020 264);
    --border-soft: oklch(0.318 0.018 264);

    /* ダーク面では橙の明度が高すぎて他2色との分離が崩れるため一段落とす（青・緑は共通で可） */
    --curve-2: oklch(0.66 0.150 65);
    --hover-row: oklch(0.305 0.022 264);
    --accent-soft: oklch(0.585 0.176 264 / 0.20);
    --accent-fg: oklch(0.780 0.140 264);
    --shadow: 0 1px 2px oklch(0 0 0 / 0.40), 0 1px 3px oklch(0 0 0 / 0.35);
    --shadow-md: 0 12px 28px -12px oklch(0 0 0 / 0.55), 0 3px 8px oklch(0 0 0 / 0.40);
    --shadow-lg: 0 22px 50px -18px oklch(0 0 0 / 0.65);
}
/* 変数で吸収できないハードコード面のダーク調整 */
html[data-theme="dark"] .topbar { background: oklch(0.235 0.020 264 / 0.85); }
html[data-theme="dark"] .matrix__role,
html[data-theme="dark"] .matrix__count,
html[data-theme="dark"] .matrix__rate { background: oklch(0.285 0.020 264); }
html[data-theme="dark"] .matrix tbody tr:nth-child(even) td,
html[data-theme="dark"] .matrix tbody tr:nth-child(even) .matrix__staff { background: oklch(0.242 0.020 264); }

/* ===== 育成ロードマップ 横並び分岐マップ（フェーズ＝カラム・達成ゲート） ===== */
.rm-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 4px 4px 14px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}
.rm-col {
    flex: 0 0 300px;
    scroll-snap-align: start;
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
/* カラム間の「→」コネクタ（達成で次フェーズへ進む流れ） */
.rm-col:not(:last-child)::after {
    content: '→';
    position: absolute;
    right: -16px;
    top: 24px;
    width: 16px;
    text-align: center;
    color: var(--text-muted);
    font-weight: 700;
    z-index: 1;
}
.rm-col.is-current {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-ring), var(--shadow);
}
.rm-col.is-locked { opacity: 0.82; }
.rm-col__head { padding: 12px 14px; border-bottom: 1px solid var(--border-soft); }
.rm-col__title { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text); }
.rm-col__meta { margin-top: 6px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); }
.rm-col__gate { font-size: 12px; font-weight: 600; }
.rm-col__gate.is-open { color: var(--green); }
.rm-col__gate.is-closed { color: var(--text-muted); }
.rm-col__bar { height: 5px; border-radius: 999px; background: var(--border-soft); overflow: hidden; margin-top: 8px; }
.rm-col__bar > span { display: block; height: 100%; background: var(--green); border-radius: 999px; transition: width .4s var(--ease); }
.rm-col__body { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
/* 一覧行の中に畳んである編集フォーム。閉じている間は行内に収めたいので inline-block だが、
   開くと shrink-to-fit のまま入力欄が親幅を超えて列の外へはみ出すため、開いたら block に戻す。 */
.rm-editline { display: inline-block; }
.rm-editline[open] { display: block; margin-left: 0; }

/* 目標カード（達成/未達成/進行中/未着手で色分け） */
.goal-card {
    border: 1px solid var(--border);
    border-left: 4px solid var(--slate);
    border-radius: var(--radius-sm);
    background: var(--card);
    padding: 10px 12px;
}
.goal-card--achieved   { border-left-color: var(--green); background: color-mix(in oklch, var(--green) 8%, var(--card)); }
.goal-card--missed     { border-left-color: var(--red);   background: color-mix(in oklch, var(--red) 8%, var(--card)); }
.goal-card--inprogress { border-left-color: var(--amber); background: color-mix(in oklch, var(--amber) 10%, var(--card)); }
.goal-card--notstarted { border-left-color: var(--slate); }
.goal-card__body { font-size: 13px; color: var(--text); line-height: 1.5; }
.goal-card__timing { color: var(--text-muted); font-size: 12px; }
.goal-card__suggest { margin-top: 6px; font-size: 11px; color: var(--green); }
.goal-card__form { margin-top: 8px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* スキル連携チップ（マスタ管理スキルとの紐付け＋本人の合格状況） */
.goal-skill {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 6px;
    font-size: 11px; padding: 2px 8px; border-radius: 999px;
    border: 1px solid var(--border); color: var(--text-muted); background: var(--bg);
}
.goal-skill__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--slate); flex: 0 0 7px; }
.goal-skill--passed { color: var(--green); border-color: color-mix(in oklch, var(--green) 35%, var(--border)); }
.goal-skill--passed .goal-skill__dot { background: var(--green); }
.goal-skill--unpassed .goal-skill__dot { background: var(--amber); }

/* ボード：フェーズ別ミニ進捗（横並びインジケータ） */
.rm-mini { display: inline-flex; gap: 4px; align-items: center; }
.rm-mini__seg { width: 22px; height: 7px; border-radius: 999px; background: var(--border); }
.rm-mini__seg.is-open { background: var(--green); }
.rm-mini__seg.is-partial { background: var(--amber); }
.rm-mini__seg.is-current { box-shadow: 0 0 0 2px var(--accent-ring); }

/* 連携サマリ帯（show 上部） */
.rm-summary { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; font-size: 13px; }
.rm-summary b { color: var(--text); }

/* 目標カード：紐付け講義の3段階ミニバー */
.goal-train { margin-top: 6px; display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-muted); }
.goal-train__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-soft); border: 1px solid var(--border); }
.goal-train__dot.is-on { background: var(--green); border-color: var(--green); }
.goal-train__label { margin-left: 4px; }

/* 目標カード：講義一覧・更新履歴の折りたたみ */
.goal-detail { margin-top: 8px; font-size: 12px; }
.goal-detail summary { cursor: pointer; color: var(--text-muted); font-size: 12px; }
.goal-detail__sec { margin-top: 4px; }
.goal-log { display: flex; gap: 6px; padding: 3px 0; border-top: 1px dashed var(--border-soft); line-height: 1.5; }
.goal-log__date { color: var(--text-muted); white-space: nowrap; }
.goal-log__tag { color: var(--accent); text-decoration: none; }

@media (max-width: 640px) {
    .rm-col { flex-basis: 82vw; }
}

/* ============================================================
   共通レスポンシブ（全画面向け・段階2）
   骨格のドロワー化(≤1024px)は上部で対応済み。ここではコンテンツ密度・
   横溢れ・タッチ操作性を全画面共通で整える。
   ============================================================ */

/* ---- タブレット/スマホ共通（≤1024px） ---- */
@media (max-width: 1024px) {
    /* テーブルは横スクロールで溢れを吸収（カード本体をスクロールコンテナ化）。
       個別Viewを触らず全テーブルに横スクロールを効かせる。 */
    .card__body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table { min-width: max-content; }

    /* grid/flexアイテムは初期 min-width:auto のため内容(テーブル)で押し広がる。
       0に落として親の overflow-x:auto を有効化し、documentレベルの横溢れを断つ。 */
    .grid > *, .card { min-width: 0; }

    /* トップバー検索欄は上限を撤廃して可変に */
    .topbar__search { max-width: none; }

    /* 3カラム系のグリッドを1カラムに寄せる（1100pxの既存指定を補完） */
    .grid--2, .grid--3 { grid-template-columns: 1fr; }
}

/* ---- スマホ（≤640px） ---- */
@media (max-width: 640px) {
    /* 見出し・余白の圧縮 */
    .content { padding: 18px 14px; }
    .page-head { margin-bottom: 16px; }
    .page-head h1 { font-size: 18px; }

    /* 4カラム統計カードも1カラムへ（1100pxで2カラム→640で1カラム） */
    .grid--4 { grid-template-columns: 1fr; }

    /* カードの内側パディングを詰める */
    .card__head { padding: 14px 16px; flex-wrap: wrap; gap: 8px; }
    .card__body { padding: 16px; }

    /* タッチターゲット確保：主要ボタンの最小高44px */
    .btn { min-height: 40px; padding: 9px 14px; }
    .btn--sm { min-height: 34px; }
    .btn-block { min-height: 46px; }

    /* フォーム入力はズーム抑止のため16px（iOS Safariの自動ズーム対策） */
    .field input, .field select, .field textarea,
    .input, input[type="text"], input[type="password"],
    input[type="date"], input[type="datetime-local"], select, textarea {
        font-size: 16px;
    }

    /* トップバー：ハンバーガー＋検索＋アイコンを1行に収める */
    .topbar { padding: 0 12px; gap: 10px; }
    .topbar__icons { gap: 10px; }

    /* ユーザーメニューのポップは画面幅に収める */
    .usermenu--topbar .usermenu__pop { right: -8px; min-width: min(236px, 88vw); }

    /* 統計カードの数値サイズを少し抑える */
    .stat { padding: 16px 18px; }
}

/* ===== システム設定ページ：タブ + アコーディオン + 検索 + sticky保存 ===== */
/* カテゴリ切替はセグメンテッドコントロール。.tab の下線型ベースを上書きし、button既定装飾を打ち消す */
.settings-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 5px;
    margin-bottom: 20px;
    max-width: 100%;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--bg);
    box-shadow: var(--shadow);
    flex-wrap: wrap;
}
.settings-tabs .tab {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: color .18s var(--ease), background-color .18s var(--ease), box-shadow .18s var(--ease);
}
.settings-tabs .tab:hover { color: var(--text); background: var(--card); }
.settings-tabs .tab.is-active {
    color: var(--accent-fg);
    background: var(--card);
    border-color: var(--border-soft);
    box-shadow: var(--shadow);
}
.settings-tabs .tab:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 1px; }
.settings-hide { display: none !important; }
.settings-savebar {
    position: sticky; bottom: 0; z-index: 5;
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; margin-top: 8px;
    background: var(--card); border-top: 1px solid var(--border);
    /* 影がないとスクロール中の入力欄がバーに切れて見えるため、上向きに落とす */
    box-shadow: 0 -10px 24px -14px oklch(0.30 0.08 264 / 0.35);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
html[data-theme="dark"] .settings-savebar { box-shadow: 0 -10px 24px -14px oklch(0 0 0 / 0.70); }
.settings-savebar__count { font-size: 13px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.settings-savebar__count b { color: var(--text); }
.settings-savebar__spacer { flex: 1; }

/* ===== システム設定：ツールバー（タブ＋一括開閉＋横断検索） ===== */
.sx-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.sx-toolbar .settings-tabs { margin-bottom: 0; }
.sx-toolbar .settings-tabs .tab { color: var(--text-2); padding: 9px 14px; }
.sx-toolbar .settings-tabs .tab.is-active { color: var(--accent-fg); }
.sx-toolbar__actions { display: inline-flex; gap: 6px; }
.sx-search { margin-left: auto; position: relative; display: inline-flex; align-items: center; }
.sx-search__icon { position: absolute; left: 10px; width: 14px; height: 14px; color: var(--text-2); pointer-events: none; }
.sx-search input { width: 240px; max-width: 100%; padding-left: 30px; padding-right: 56px; }
.sx-search__count { position: absolute; right: 10px; font-size: 11.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* ===== システム設定：設定グループ（見出し＋2カラムの行） ===== */
.sx-group { margin-bottom: 14px; }
.sx-head {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 13px 20px; background: none; border: 0; text-align: left;
    font-family: inherit; color: var(--text); cursor: pointer;
    border-radius: var(--radius) var(--radius) 0 0;
    transition: background .15s var(--ease);
}
.sx-head:hover { background: var(--accent-soft); }
.sx-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sx-group.is-open > .sx-head { border-bottom: 1px solid var(--border-soft); }
.sx-head__title { font-size: 14px; font-weight: 700; white-space: nowrap; }
/* 閉じたままでも中身が分かるよう項目名を並べる（開いたら畳んだ内容と重複するので隠す） */
.sx-head__sum { flex: 1; min-width: 0; font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-group.is-open .sx-head__sum { visibility: hidden; }
.sx-head__meta { display: inline-flex; gap: 6px; align-items: center; margin-left: auto; }
.sx-body { display: none; }
.sx-group.is-open > .sx-body { display: block; }
html.is-ready .sx-group.is-open > .sx-body { animation: fade-in .25s var(--ease); }

/* 設定グループの見出し直下に置く「関連画面への導線」。折りたたみ（.sx-body）の外に置くため、
   グループを閉じていても消えない。設定項目ではなく作業画面へ移動させる用途にだけ使う */
.sx-linkbar {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 12px 16px; border-top: 1px solid var(--border-soft);
    background: var(--accent-soft);
}
.sx-linkbar__body { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 2px; }
.sx-linkbar__title { font-size: 13px; font-weight: 700; }
.sx-linkbar__meta { font-size: 12px; color: var(--text-2); line-height: 1.55; }
.sx-linkbar__stat { color: var(--text); font-variant-numeric: tabular-nums; margin-left: 6px; }

.sx-row {
    display: grid; grid-template-columns: minmax(280px, 460px) 1fr;
    gap: 6px 28px; padding: 12px 20px;
    border-top: 1px solid var(--border-soft); align-items: start;
}
.sx-row:first-child { border-top: 0; }
.sx-row.is-dirty { background: oklch(0.585 0.176 264 / 0.04); }
html[data-theme="dark"] .sx-row.is-dirty { background: oklch(0.585 0.176 264 / 0.10); }
.sx-label { font-size: 13px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 7px; line-height: 1.4; }
.sx-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; display: none; }
.is-dirty .sx-dot { display: inline-block; }
.sx-help { font-size: 12px; color: var(--text-2); line-height: 1.55; max-width: 60ch; margin-top: 3px; }
.sx-default { font-size: 12px; color: var(--text-2); display: inline-flex; gap: 10px; align-items: center; margin-left: 10px; }
.sx-default a { color: var(--accent-fg); font-weight: 600; cursor: pointer; }
.sx-ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.sx-ctl > textarea + .sx-default { width: 100%; margin-left: 0; }
.sx-unit { font-size: 12px; color: var(--text-2); }
.sx-state { font-size: 12px; color: var(--text-2); min-width: 2.6em; font-weight: 600; }
.sx-inline { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.sx-inline label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-2); }
.sx-note {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 12px 16px; margin-bottom: 14px;
    border: 1px dashed var(--border); border-radius: var(--radius-sm);
    font-size: 12.5px; color: var(--text-2); line-height: 1.55; background: var(--card);
}
.sx-result { display: none; font-size: 13px; font-weight: 600; }

/* 入力欄：型ごとに幅を決める（値の桁数に対して伸びすぎるのを防ぐ） */
.sx-input {
    padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-size: 13px; font-family: inherit; background: var(--card); color: var(--text);
    outline: none; transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.sx-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.sx-input--num { width: 120px; font-variant-numeric: tabular-nums; text-align: right; }
.sx-input--str { width: 320px; max-width: 100%; }
.sx-input--sel { width: 240px; max-width: 100%; }
.sx-input--area { width: 100%; max-width: 640px; resize: vertical; line-height: 1.5; }

/* 複数選択（multi_select）：内部IDを入力させず、スタッフ名のチェックボックスで選ばせる */
.sx-checks { display: flex; flex-wrap: wrap; gap: 6px; max-width: 640px; }
.sx-check {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px; border: 1px solid var(--border); border-radius: 999px;
    font-size: 12.5px; color: var(--text-2); cursor: pointer; background: var(--card);
    transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
}
.sx-check:hover { border-color: var(--accent); }
.sx-check input { accent-color: var(--accent); margin: 0; }
.sx-check:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-fg); font-weight: 600; }
.sx-ctl > .sx-checks + .sx-default { width: 100%; margin-left: 0; margin-top: 6px; }
.sx-input--color { width: 46px; height: 32px; padding: 2px; cursor: pointer; }

/* AI機能ごとの利用設定：機能=行／利用する・モデル=列 */
.sx-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sx-table th { text-align: left; font-size: 11.5px; font-weight: 600; color: var(--text-2); letter-spacing: .04em; padding: 8px 20px; border-bottom: 1px solid var(--border-soft); background: var(--hover-row); }
.sx-table td { padding: 8px 20px; border-top: 1px solid var(--border-soft); vertical-align: middle; }
.sx-table tbody tr:first-child td { border-top: 0; }
.sx-table tr.is-dirty { background: oklch(0.585 0.176 264 / 0.04); }
html[data-theme="dark"] .sx-table tr.is-dirty { background: oklch(0.585 0.176 264 / 0.10); }
.sx-table td:first-child .sx-help { max-width: 52ch; margin-top: 2px; }
.sx-table td:nth-child(2) { white-space: nowrap; }
.sx-table .sx-ctl { flex-wrap: nowrap; }
.sx-table .sx-input--str { width: 260px; }
/* AI機能ごとの利用設定：一括変更バー（対象＝すべて／機能グループ／実行タイミング）。
   41機能を1つずつ操作すると41回かかるため、表の見出し直上にまとめて書き換える操作を置く。 */
.sx-bulk { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; padding: 12px 20px; background: var(--hover-row); border-bottom: 1px solid var(--border-soft); }
.sx-bulk__field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sx-bulk__label { font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--text-2); }
.sx-bulk__sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 4px; }
.sx-bulk__count { margin-left: auto; font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; padding-bottom: 7px; }
.sx-bulk__count b { color: var(--accent-fg); font-weight: 700; }
.sx-bulk .sx-input--sel { width: 210px; }
/* 一括変更の対象になっている行（対象＝すべて のときは全行なので付けない） */
.settings-field.is-target > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.sx-timing { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 5px; font-size: 11px; font-weight: 600; letter-spacing: .02em; background: var(--hover-row); color: var(--text-2); }

@media (max-width: 900px) {
    .sx-row { grid-template-columns: 1fr; }
    .sx-search { margin-left: 0; }
    .sx-search input { width: 100%; }
    /* 折り返し時にボタンが半端な幅で残らないよう、行いっぱいのタップ領域にする */
    .sx-linkbar .btn { width: 100%; justify-content: center; }
}

/* ===== スタッフ詳細：一括合格承認のチェックボックス列・操作行のフォーカス表示 ===== */
.assess-name { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.assess-name > div { min-width: 0; }
.assess-check { width: 15px; height: 15px; flex: 0 0 15px; margin: 3px 0 0; accent-color: var(--accent); cursor: pointer; }
.assess-name__spacer { width: 15px; flex: 0 0 15px; }
.table thead .assess-name { align-items: center; }
.table thead .assess-check { margin: 0; }

/* 一括合格：選択中アクションバー（画面下端に固定）。
   章を開いてチェックした位置から最上部のボタンまで最大約6,500pxあり、
   選択したまま合格させられなかったため、選択中だけ下端に出す。 */
.bulkbar {
    position: fixed; left: var(--sidebar-w); right: 0; bottom: 0; z-index: 40;
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 12px 28px;
    background: var(--card); border-top: 1px solid var(--border); box-shadow: var(--shadow-lg);
    transform: translateY(120%); opacity: 0; pointer-events: none;
    transition: transform .22s var(--ease), opacity .22s var(--ease);
}
.bulkbar--on { transform: translateY(0); opacity: 1; pointer-events: auto; }
.bulkbar__count { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.bulkbar__num { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; }
.bulkbar__actions { display: flex; align-items: center; gap: 8px; }
/* バー表示中は最下部の行がバーに隠れないよう本文に余白を足す */
.has-bulkbar .content { padding-bottom: 92px; }
@media (max-width: 1024px) { .bulkbar { left: 0; padding: 10px 16px; } }
@media (prefers-reduced-motion: reduce) { .bulkbar { transition: none; } }
/* 操作直後にリダイレクトで戻ってきた行を一時的に強調する（#assessment-{id}） */
.assess-row--focus > td { background: var(--accent-soft); }
.assess-row--focus > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

/* ============================================================
   スタッフ個別設定（システム設定）2ペインUI
   左=区分アコーディオンでスタッフ選択 / 右=その1人の機能をON/OFF
   色は既存トークンのみを使うためダークテーマは自動で追従する。
   ============================================================ */
.sfx { display: grid; grid-template-columns: 280px 1fr; gap: 14px; align-items: start; }
@media (max-width: 900px) { .sfx { grid-template-columns: 1fr; } }

.sfx__pane {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: var(--card);
    overflow: hidden;
}
.sfx__filters { display: flex; flex-direction: column; gap: 7px; padding: 10px; border-bottom: 1px solid var(--border-soft); }
.sfx__row { display: flex; gap: 6px; }
.sfx__row .input { flex: 1; min-width: 0; }
.sfx__check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }
.sfx__list { max-height: 560px; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; }
.sfx__empty { padding: 14px 10px; font-size: 12px; color: var(--text-2); }

/* 区分アコーディオン */
.sfx-group__head {
    display: flex; align-items: center; gap: 7px; width: 100%;
    padding: 7px 10px; margin-top: 2px;
    border: 0; border-radius: var(--radius-sm);
    background: var(--hover-row); color: var(--text);
    font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: .02em;
    cursor: pointer; text-align: left;
}
.sfx-group__head:hover { background: var(--accent-soft); }
.sfx-group__head:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sfx-group__caret { width: 10px; height: 10px; flex: none; transition: transform .18s var(--ease); }
.sfx-group__head[aria-expanded="false"] .sfx-group__caret { transform: rotate(-90deg); }
.sfx-group__name { flex: 1; }
.sfx-group__n { font-size: 12px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.sfx-group__body { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 4px 8px; }
.sfx-group__head[aria-expanded="false"] + .sfx-group__body { display: none; }

/* スタッフ行 */
.sfx-row {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 7px 9px; border: 0; border-radius: var(--radius-sm);
    background: transparent; color: var(--text);
    font-family: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.sfx-row:hover { background: var(--hover-row); }
.sfx-row.is-active { background: var(--accent-soft); color: var(--accent-600); font-weight: 700; }
.sfx-row__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sfx-row__meta { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.sfx-row.is-active .sfx-row__meta { color: var(--accent-fg); }

/* 右ペイン */
.sfx__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--border-soft); }
.sfx__head h3 { margin: 0; font-size: 15px; }
.sfx__head-meta { font-size: 12px; color: var(--text-2); }
.sfx__spacer { flex: 1; }
.sfx__section { padding: 10px 14px 4px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--text-2); }
.sfx-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--border-soft); }
.sfx-item:first-of-type { border-top: 0; }
.sfx-item__main { flex: 1; min-width: 0; }
.sfx-item__label { font-size: 13px; font-weight: 600; }
.sfx-item__help { margin-top: 2px; font-size: 12px; color: var(--text-2); line-height: 1.55; }
.sfx-item__state { flex: none; align-self: center; }
.sfx-item__ctl { flex: none; align-self: center; }

/* トグル */
.tgl { display: inline-flex; position: relative; width: 38px; height: 22px; flex: none; }
.tgl input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.tgl span {
    position: absolute; inset: 0; border-radius: 999px;
    background: var(--border); transition: background .18s var(--ease);
}
.tgl span::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
    border-radius: 50%; background: var(--card); box-shadow: var(--shadow);
    transition: transform .18s var(--ease);
}
.tgl input:checked + span { background: var(--accent); }
.tgl input:checked + span::after { transform: translateX(16px); }
.tgl input:disabled { cursor: not-allowed; }
.tgl input:disabled + span { opacity: .45; }

/* スタッフ個別設定：画面の中の操作（入れ子）・全員に表示の画面の見出し行・危険度・本人/管理者の保護 */
.sfx-item--head { background: var(--hover-row); }
.sfx-risk { margin-left: 6px; padding: 1px 6px; border-radius: 999px; font-size: 10.5px; font-weight: 700; vertical-align: 1px;
    background: oklch(0.605 0.190 25 / 0.13); color: oklch(0.52 0.19 25); }
html[data-theme="dark"] .sfx-risk { color: oklch(0.75 0.15 25); }
.sfx-ops-toggle { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 0; border: 0; background: transparent;
    font-family: inherit; font-size: 12px; font-weight: 600; color: var(--accent-fg); cursor: pointer; }
.sfx-ops-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.sfx-ops-toggle[aria-expanded="false"] .sfx-group__caret { transform: rotate(-90deg); }
.sfx-ops { margin: 0 14px 8px 30px; border-left: 2px solid var(--accent-soft); }
.sfx-ops .sfx-item { padding: 7px 10px 7px 12px; }
.sfx-ops .sfx-ops { margin: 0 0 4px 22px; }
.sfx-ops__note { padding: 4px 12px 6px; font-size: 11.5px; color: var(--text-2); }
.sfx-guard { margin: 10px 14px 0; padding: 9px 12px; border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 600;
    background: oklch(0.720 0.140 80 / 0.14); color: oklch(0.56 0.14 70); }
html[data-theme="dark"] .sfx-guard { color: oklch(0.80 0.13 82); }
.tgl input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 状態バッジ（既定／個別に付与／個別に除外／固定） */
.badge--muted { background: var(--hover-row); color: var(--text-2); }
.badge--amber { background: oklch(0.720 0.140 80 / 0.18); color: oklch(0.56 0.14 70); }
html[data-theme="dark"] .badge--amber { color: oklch(0.80 0.13 82); }
html[data-theme="dark"] .badge--count,
html[data-theme="dark"] .badge--in_progress,
html[data-theme="dark"] .sfx-row.is-active { color: var(--accent-fg); }

/* ===== ガイド分析：概況KPI（量ではなく率と変化を読む） ===== */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}
.kpi {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--border-soft);
    border-left: 3px solid var(--slate);
    border-radius: var(--radius-sm);
}
.kpi--bad { border-left-color: var(--red); }
.kpi--warn { border-left-color: var(--amber); }
.kpi__label { font-size: 12px; color: var(--text-muted); }
.kpi__value { font-size: 26px; font-weight: 700; line-height: 1.15; }
.kpi__value small { font-size: 14px; font-weight: 600; margin-left: 1px; color: var(--text-muted); }
.kpi__sub { font-size: 11.5px; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }

/* 前期間比。放置率のように「増えると悪い」指標は呼び出し側でクラスを反転させる */
.delta { font-weight: 700; font-variant-numeric: tabular-nums; }
.delta--up { color: oklch(0.48 0.13 158); }
.delta--down { color: oklch(0.52 0.19 25); }
.delta--flat { color: var(--text-muted); }
html[data-theme="dark"] .delta--up { color: oklch(0.74 0.13 158); }
html[data-theme="dark"] .delta--down { color: oklch(0.72 0.17 25); }

/* ===== ガイド分析：母集団中央値との比較（1.00×を基準線として偏りを帯で示す） ===== */
.ratio { display: flex; align-items: center; gap: 8px; min-width: 130px; }
.ratio__track {
    position: relative;
    flex: 1;
    height: 8px;
    min-width: 64px;
    background: var(--border-soft);
    border-radius: 999px;
    overflow: hidden;
}
.ratio__fill { position: absolute; top: 0; bottom: 0; border-radius: 999px; }
.ratio__base { position: absolute; top: -2px; bottom: -2px; width: 1.5px; background: var(--text-muted); }
.ratio__num { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ===== ガイド分析：ガイド別ドリルダウン（行クリックでステップ別詳細を開閉） ===== */
.gu-row { cursor: pointer; }
.gu-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.gu-chev { width: 20px; color: var(--text-muted); transition: transform .15s var(--ease); }
.gu-row.is-open .gu-chev { transform: rotate(90deg); color: var(--accent); }
.gu-detail-body { padding: 12px 4px; }
.gu-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.gu-detail-grid h4 { margin: 0 0 8px; font-size: 12px; color: var(--text-muted); font-weight: 600; }
.gu-steps { display: flex; flex-direction: column; gap: 4px; }
.gu-step-row { display: grid; grid-template-columns: 56px 1fr 28px; align-items: center; gap: 8px; font-size: 12px; }
.gu-step-label { color: var(--text-muted); }
.gu-step-track { height: 6px; background: var(--border-soft); border-radius: 999px; overflow: hidden; }
.gu-step-fill { height: 100%; background: var(--accent); border-radius: 999px; }
.gu-step-count { text-align: right; font-variant-numeric: tabular-nums; }
.gu-branch-row { font-size: 12.5px; padding: 3px 0; }
.gu-trans { margin: 0; padding-left: 18px; font-size: 12.5px; }
.gu-trans li { padding: 2px 0; }

/* ===== AI利用履歴 ===== */
/* 見出し下のツール行（共通レイアウトの .page-head は見出しとパンくずが入るため、説明文と操作はここに置く） */
.aiu-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.head-tools { display: flex; align-items: center; gap: 8px; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }

/* 月間上限メーター */
.meter { position: relative; height: 30px; background: oklch(0.62 0.02 264 / 0.12); border-radius: 999px; overflow: hidden; }
.meter__fill { height: 100%; background: linear-gradient(90deg, oklch(0.645 0.155 263), oklch(0.545 0.180 267)); border-radius: 999px; transition: width .6s var(--ease); }
.meter__mark { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--amber); }
.meter__mark span { position: absolute; top: -19px; left: 50%; transform: translateX(-50%); font-size: 10.5px; color: var(--amber); font-weight: 700; white-space: nowrap; }
.meter-legend { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12.5px; color: var(--text-muted); }
.meter-legend b { color: var(--text); font-size: 15px; }

/* 日別（CSS幅の簡易棒） */
.bars { display: flex; align-items: flex-end; gap: 6px; height: 168px; padding: 0 2px; }
.bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; height: 100%; }
.bar__col { width: 100%; max-width: 34px; background: var(--accent); border-radius: 4px 4px 0 0; min-height: 2px; transition: opacity .15s var(--ease); }
.bar:hover .bar__col { opacity: .75; }
.bar__day { font-size: 10.5px; color: var(--text-muted); }
.bar__val { font-size: 10.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* グラフ⇄表の切替（.bars の display:flex が hidden 属性の既定を上書きするため、この2要素だけ明示的に消す） */
#daily-chart[hidden], #daily-table[hidden] { display: none !important; }

/* 数値列・USD併記・合計行（この画面の表でのみ使う修飾） */
.table .r { text-align: right; }
.table .usd { color: var(--text-muted); }
.table tfoot td { padding: 12px 14px; border-top: 1px solid var(--border); }

/* 機能別の横棒（表の中に細い比率バーを持たせる） */
.inbar { height: 6px; border-radius: 999px; background: var(--accent); min-width: 3px; }
.inbar--t { background: oklch(0.62 0.02 264 / 0.18); border-radius: 999px; height: 6px; width: 120px; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* 表示形式の切替（.seg 単独は端末在庫の棒グラフが既に使っているため、修飾子側に定義する） */
.seg--switch { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.seg--switch button { border: 0; background: transparent; padding: 6px 12px; font-size: 12.5px; font-family: inherit; color: var(--text-muted); cursor: pointer; }
.seg--switch button.is-active { background: var(--accent-soft); color: var(--accent-600); font-weight: 700; }
html[data-theme="dark"] .seg--switch button.is-active { color: oklch(0.80 0.12 264); }

.pager { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-top: 1px solid var(--border-soft); font-size: 12.5px; color: var(--text-muted); }

.badge--ok { background: oklch(0.625 0.135 158 / 0.14); color: oklch(0.48 0.13 158); }
.badge--warn { background: oklch(0.72 0.14 80 / 0.18); color: oklch(0.52 0.12 70); }
.badge--danger { background: oklch(0.605 0.19 25 / 0.13); color: oklch(0.52 0.19 25); }
html[data-theme="dark"] .badge--ok { color: oklch(0.78 0.13 158); }
html[data-theme="dark"] .badge--warn { color: oklch(0.82 0.13 80); }
html[data-theme="dark"] .badge--danger { color: oklch(0.76 0.17 25); }
/* 色を直書きした状態のバッジのダークの文字色。.badge--ok・--warn・--danger の上書きと同じ値（承認済みモック docs/design-mocks/20261022_visit-kintone-visual-fixes.html の③） */
html[data-theme="dark"] .badge--passed,
html[data-theme="dark"] .badge--goal-self,
html[data-theme="dark"] .badge--goal-achieved { color: oklch(0.78 0.13 158); }
html[data-theme="dark"] .badge--high,
html[data-theme="dark"] .badge--risk5,
html[data-theme="dark"] .badge--goal-none { color: oklch(0.76 0.17 25); }
html[data-theme="dark"] .badge--standard,
html[data-theme="dark"] .badge--risk3 { color: oklch(0.82 0.13 80); }
html[data-theme="dark"] .badge--risk2 { color: oklch(0.80 0.10 130); }
html[data-theme="dark"] .badge--risk4 { color: oklch(0.78 0.14 45); }
html[data-theme="dark"] .badge--mentor,
html[data-theme="dark"] .badge--ai { color: oklch(0.78 0.13 292); }
html[data-theme="dark"] .badge--observation { color: oklch(0.78 0.14 350); }
html[data-theme="dark"] .badge--test { color: oklch(0.78 0.12 160); }
html[data-theme="dark"] .badge--goal-assigned,
html[data-theme="dark"] .badge--goal-active { color: var(--accent-fg); }

@media (max-width: 900px) {
    .stats { grid-template-columns: repeat(2, 1fr); }
    .grid2 { grid-template-columns: 1fr; }
}

/* ============================================================
   アプリ内ヘルプ（/help）
   機能一覧は config/features.php のレジストリから描画するため、
   ここでは「見出し＋説明」の並びだけを整える。
   ============================================================ */
.help-lead { font-size: 14.5px; line-height: 1.75; margin: 0 0 14px; }
.help-lead strong { color: var(--accent-fg); }

/* 概念の3枚組・機能カード・FAQ で共通に使う自動折返しグリッド。
   auto-fit なので幅が足りなくなった時点で自然に段数が減る（個別のメディアクエリを持たない）。 */
.help-cols { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.help-tile {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: var(--bg);
    padding: 14px 16px;
}
.help-tile h3 { margin: 0 0 6px; font-size: 13.5px; font-weight: 700; }
.help-tile p { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.7; }

/* 用語・操作の説明（見出し＋説明の2列。狭幅では1列に落ちる） */
.help-dl { display: grid; grid-template-columns: 160px 1fr; gap: 10px 18px; margin: 0; }
.help-dl dt { font-weight: 700; font-size: 13px; }
.help-dl dd { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.7; }
@media (max-width: 640px) {
    .help-dl { grid-template-columns: 1fr; gap: 2px; }
    .help-dl dd { margin-bottom: 10px; }
}

/* 習熟度の流れ（未着手 → 実践中 → 合格 → 合格＋指導可） */
.help-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.help-flow__arrow { color: var(--text-muted); font-weight: 700; }

/* 「あなたが使える機能」の1件。レジストリの label をリンク、guide を説明として出す */
.help-feat {
    display: block;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: var(--bg);
    padding: 12px 14px;
    transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.help-feat:hover { border-color: var(--accent-ring); background: var(--card); transform: translateY(-1px); }
.help-feat__name { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13.5px; color: var(--accent-fg); }
.help-feat__name svg { width: 15px; height: 15px; flex: 0 0 15px; opacity: .85; }
.help-feat__desc { margin: 5px 0 0; font-size: 12.5px; color: var(--text-2); line-height: 1.65; }
.help-group { margin-top: 16px; }
.help-group:first-child { margin-top: 0; }
.help-group__label {
    font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--text-muted); font-weight: 600; margin-bottom: 8px;
}

/* よくある質問（details。開閉状態は共通スクリプトが data-acc で保存する） */
.help-faq { border-top: 1px solid var(--border-soft); }
.help-faq:first-of-type { border-top: 0; }
.help-faq > summary {
    cursor: pointer; list-style: none;
    padding: 12px 2px; font-weight: 600; font-size: 13.5px;
    display: flex; align-items: center; gap: 8px;
}
.help-faq > summary::-webkit-details-marker { display: none; }
.help-faq > summary::before { content: "Q"; color: var(--accent-fg); font-weight: 800; flex: 0 0 auto; }
.help-faq > summary:hover { color: var(--accent-fg); }
.help-faq__a { padding: 0 2px 14px 20px; font-size: 13px; color: var(--text-2); line-height: 1.8; }
.help-faq__a p { margin: 0 0 8px; }
.help-faq__a p:last-child { margin-bottom: 0; }

/* 左に固定幅の一覧、右に本文の2カラム（スタッフ詳細など）。
   固定幅のままだと狭い画面で右カラムが押し出されるため、900px以下で1カラムに落とす。 */
.cols-side { display: grid; grid-template-columns: 340px 1fr; gap: 28px; align-items: start; }
/* 固定ピクセルで描く図（スタッフ詳細のレーダー・ダッシュボードのドーナツ）は、
   狭い画面で親幅を超えないよう表示だけ縮める（描画解像度は変えないので線は粗くならない）。 */
#layer1Radar, #statusDonut { max-width: 100%; height: auto; }
@media (max-width: 900px) {
    .cols-side { grid-template-columns: 1fr; gap: 18px; }
}

/* ============================================================
   スマホ（≤640px）で画面幅に収まらない表の扱い
   ------------------------------------------------------------
   案A: 行が独立して読める一覧表は「1行＝1カード」に積む（.is-stacked）。
        列名は共通スクリプト（layouts/app.blade.php）が thead から
        各セルへ data-label として写すため、Blade 側の変更は要らない。
   案B: 行と列の交点に意味がある表（週間予定表・各カレンダー・マトリクス）は
        並びを崩さず横スクロールのままにし、続きがあることを明示する（右端のぼかし（.is-x-fade）・案内文 .scroll-x-note）。
   どちらも 641px 以上には一切効かない（PC表示は従来どおり）。
   ============================================================ */

/* --- 案B: 横スクロールできることの明示 --- */
.scroll-x-note {
    display: none;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 8px 16px 12px;
    font-size: 11.5px;
    color: var(--text-muted);
}
.scroll-x-note svg { width: 14px; height: 14px; flex: 0 0 14px; }

@media (max-width: 640px) {
    .scroll-x-note { display: flex; }

    /* 横一列の小フォーム（絞り込み・行内編集）は折り返す。
       入力欄に付いた min-width が親幅を超える原因になるので合わせて外す。 */
    .inline-form { flex-wrap: wrap; }
    .inline-form > select, .inline-form > input, .inline-form > .input {
        min-width: 0 !important;
        max-width: 100%;
    }

    /* 右端まで送り切ったら案内を引っ込める（スクリプトが付け外しする） */
    .scroll-x-note.is-at-end { display: none; }

    /* 続きがある間だけ、スクロールの箱の右端 34px を透明にぼかす（案内文と同じ時にスクリプトが付け外しする）。
       箱そのものの端を抜くので、カードの上でもページの地の上でも同じに溶ける。
       ぼかしの間は箱の外へはみ出して描くもの（影・outline・position:fixed の子）が切れる。ぼかす箱の中に固定位置の部品を置かない */
    .is-x-fade {
        -webkit-mask-image: linear-gradient(to left, transparent, #000 34px);
        mask-image: linear-gradient(to left, transparent, #000 34px);
    }

    /* --- 案A: 1行＝1カードに積む --- */
    /* ≤1024px の `.table { min-width: max-content }` と、画面ごとの <style> が持つ min-width
       （例: devices/index.blade.php の `table.dx-stock { min-width:560px }`）を打ち消す。
       積んだ表は必ず親幅に収まる必要があり、後勝ちの画面別スタイルより強い指定が要るため !important を使う。 */
    table.is-stacked { min-width: 0 !important; width: 100% !important; }
    table.is-stacked thead { display: none; }
    table.is-stacked,
    table.is-stacked tbody,
    table.is-stacked tfoot,
    table.is-stacked tr,
    table.is-stacked td { display: block; }

    table.is-stacked tbody tr,
    table.is-stacked tfoot tr {
        border: 1px solid var(--border-soft);
        border-radius: var(--radius-sm);
        background: var(--card);
        padding: 10px 12px;
        margin-bottom: 8px;
    }
    table.is-stacked tbody tr:last-child,
    table.is-stacked tfoot tr:last-child { margin-bottom: 0; }
    table.is-stacked tbody tr:hover { background: var(--card); }
    /* 属人化行など、行そのものに色が付く指定は積んでも保つ */
    table.is-stacked tbody tr.row--attrition,
    table.is-stacked tbody tr.row--attrition:hover { background: var(--attrition-row-bg, #fdecec); }

    table.is-stacked td {
        display: grid;
        grid-template-columns: minmax(64px, 88px) 1fr;
        gap: 10px;
        align-items: start;
        padding: 5px 0;
        border: 0;
        white-space: normal;
    }
    table.is-stacked td::before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 600;
        color: var(--text-muted);
        line-height: 1.5;
        padding-top: 1px;
    }
    /* 先頭列はその行の見出しとして1行使う（列名は出さない） */
    table.is-stacked td.is-stack-title {
        grid-template-columns: 1fr;
        font-weight: 700;
        font-size: 13.5px;
        padding-bottom: 8px;
    }
    /* thead の th に data-stack-title を付けた表は、その列をカードの先頭に出す（付けない表は先頭の列のまま） */
    table.is-stacked.has-stack-title tbody tr { display: flex; flex-direction: column; }
    table.is-stacked.has-stack-title td.is-stack-title { order: -1; }
    /* 列名が無い列（操作列など）はラベル欄を作らない。
       中身が複数の form/button に分かれていることが多いので、縦に割れないよう横並びで折り返す。 */
    table.is-stacked td.is-stack-title::before,
    table.is-stacked td.is-stack-plain::before { display: none; }
    table.is-stacked td.is-stack-plain {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding-top: 9px;
        margin-top: 4px;
        border-top: 1px dashed var(--border-soft);
    }
    table.is-stacked td.is-stack-plain > form { display: inline-flex; margin: 0; }
    /* 値が空のセルは行を作らない（操作列の空欄で隙間が空くのを防ぐ） */
    table.is-stacked td.is-stack-empty { display: none; }
    /* 「該当なし」など1セルで全幅を占める行は枠を付けずそのまま出す */
    table.is-stacked tbody tr.is-stack-message {
        border: 0; padding: 0; margin: 0; background: transparent;
    }
    table.is-stacked tbody tr.is-stack-message td { padding: 10px 2px; }

    /* 積んだ表の中の操作ボタンは横に並べて押しやすくする */
    table.is-stacked td .btn { min-height: 36px; }
    table.is-stacked td form.inline-form { display: inline-flex; }
}

/* ===== AI月次報告ドラフト（D1）: 報告書詳細の各欄に出す下書きブロック ===== */
.aidraft { border: 1px solid var(--border); border-left: 3px solid var(--purple); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 10px; background: var(--bg); }
.aidraft__text { white-space: pre-wrap; font-size: 13px; border: 1px solid var(--border-soft); border-radius: 7px; padding: 10px; background: var(--card); margin: 8px 0; }
.aidraft__ev { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 8px 0 0; }
.aidraft__acts { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.evchip { font-size: 11.5px; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--border); background: var(--hover-row); color: var(--text-muted); }
.badge--ai { background: oklch(0.555 0.180 292 / 0.12); border-color: transparent; color: var(--purple); font-weight: 600; }
html[data-theme="dark"] .badge--ai { background: oklch(0.555 0.180 292 / 0.22); }

/* ===== AI数値突合（I11）: 承認者ビューの本文と記録の突合パネル ===== */
.fcrow { display: grid; grid-template-columns: 20px 1fr; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
.fcrow:last-of-type { border-bottom: 0; }
.fcrow .mark { font-weight: 700; text-align: center; }
.fcrow .mark--ng { color: var(--red); }
.fcrow .mark--ok { color: var(--green); }
.fcrow .mark--na { color: var(--orange); }
.fcrow .rec { color: var(--text-muted); font-size: 12.5px; margin-top: 2px; }
.fcfacts { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* ===== AI 評価の参考情報（I19） ===== */
.evfact { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border-soft); font-size: 12.5px; }
.evfact:last-of-type { border-bottom: 0; }
.evfact__k { color: var(--text-muted); font-size: 11.5px; padding-top: 1px; }
.evfact__date { color: var(--text-muted); font-size: 11.5px; margin-left: 6px; }

/* ===== AI書類の分類チェック（D5）: 書類保管庫の一覧で、種別が食い違った行の下に差し込む確認行 ===== */
tr.airow > td { background: oklch(0.555 0.180 292 / 0.10); }
html[data-theme="dark"] tr.airow > td { background: oklch(0.555 0.180 292 / 0.20); }
.aibox { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; }
.aibox dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; font-size: 13px; }
.aibox dt { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.aibox dd { margin: 0; }
.aibox .why { margin: 8px 0 0; font-size: 12.5px; color: var(--text-2); }
.aibox .aidraft__acts { margin-top: 0; }

/* ===== 目標管理(S-12) 対象月ビュー。対象者ごとに付与目標と自己目標を左右に並べて相互確認する ===== */
.monthnav { display: flex; align-items: center; gap: 8px; }
.monthnav__label { font-size: 15px; font-weight: 700; min-width: 128px; text-align: center; font-variant-numeric: tabular-nums; }
.monthnav__btn { width: 30px; height: 30px; padding: 0; justify-content: center; }

.goalgrid { display: grid; gap: 12px; }
.staffrow { border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.staffrow__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border-soft); background: oklch(0.62 0.02 264 / 0.04); flex-wrap: wrap; }
.staffrow__name { font-weight: 700; font-size: 13.5px; display: flex; align-items: baseline; gap: 8px; }
.staffrow__name small { font-weight: 500; font-size: 11.5px; color: var(--text-muted); }
.staffrow__cols { display: grid; grid-template-columns: 1fr 1fr; }
.goalcell { padding: 12px 14px; display: grid; gap: 10px; align-content: start; }
.goalcell + .goalcell { border-left: 1px solid var(--border-soft); }
.goalcell__label { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; color: var(--text-muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.goalcell--empty { color: var(--text-muted); font-size: 12.5px; display: grid; gap: 8px; }
.goalitem { display: grid; gap: 5px; }
.goalitem__title { font-size: 13px; font-weight: 600; line-height: 1.45; }
.goalitem__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.goalitem__detail { font-size: 12px; color: var(--text-2); line-height: 1.5; white-space: pre-wrap; }
.goalitem__actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.goalrate { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-2); font-weight: 600; }
/* 目標の達成度（5段階・Sが最も良い）。配色は既存バッジの式を流用（S=メンター紫／A=合格緑／B=藍／C=琥珀／D=赤） */
.grade--S, .gradepick__opt--S { --grade-bg: oklch(0.555 0.18 292 / 0.14); --grade-fg: oklch(0.50 0.18 292); --grade-line: oklch(0.555 0.18 292 / 0.55); }
.grade--A, .gradepick__opt--A { --grade-bg: oklch(0.625 0.135 158 / 0.14); --grade-fg: oklch(0.48 0.13 158); --grade-line: oklch(0.625 0.135 158 / 0.55); }
.grade--B, .gradepick__opt--B { --grade-bg: oklch(0.585 0.176 264 / 0.10); --grade-fg: oklch(0.515 0.182 264); --grade-line: oklch(0.585 0.176 264 / 0.50); }
.grade--C, .gradepick__opt--C { --grade-bg: oklch(0.72 0.14 80 / 0.18); --grade-fg: oklch(0.52 0.12 70); --grade-line: oklch(0.72 0.14 80 / 0.65); }
.grade--D, .gradepick__opt--D { --grade-bg: oklch(0.605 0.19 25 / 0.13); --grade-fg: oklch(0.52 0.19 25); --grade-line: oklch(0.605 0.19 25 / 0.55); }
html[data-theme="dark"] .grade--S, html[data-theme="dark"] .gradepick__opt--S { --grade-bg: oklch(0.555 0.18 292 / 0.26); --grade-fg: oklch(0.80 0.12 292); }
html[data-theme="dark"] .grade--A, html[data-theme="dark"] .gradepick__opt--A { --grade-bg: oklch(0.625 0.135 158 / 0.24); --grade-fg: oklch(0.78 0.13 158); }
html[data-theme="dark"] .grade--B, html[data-theme="dark"] .gradepick__opt--B { --grade-bg: oklch(0.585 0.176 264 / 0.24); --grade-fg: oklch(0.78 0.14 264); }
html[data-theme="dark"] .grade--C, html[data-theme="dark"] .gradepick__opt--C { --grade-bg: oklch(0.72 0.14 80 / 0.24); --grade-fg: oklch(0.84 0.13 80); }
html[data-theme="dark"] .grade--D, html[data-theme="dark"] .gradepick__opt--D { --grade-bg: oklch(0.605 0.19 25 / 0.24); --grade-fg: oklch(0.78 0.15 25); }
.grade { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; font-size: 12.5px; font-weight: 800; letter-spacing: .02em; line-height: 1; background: var(--grade-bg); color: var(--grade-fg); }
.gradeline { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); font-weight: 600; }
/* 報告書の達成度入力（ラジオを隠してラベルをボタン表示にする。JSなしでも選択できる） */
.gradepick { border: 0; margin: 0; padding: 0; min-width: 0; }
.gradepick legend { padding: 0; margin-bottom: 6px; }
.gradepick__opts { display: flex; flex-wrap: wrap; gap: 4px; }
.gradepick__opt { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; background: var(--card); white-space: nowrap; transition: border-color .2s var(--ease), background .2s var(--ease); }
.gradepick__opt:hover { border-color: var(--accent); }
.gradepick__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.gradepick__opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.gradepick__letter { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; font-size: 12.5px; font-weight: 800; line-height: 1; color: var(--text-2); background: oklch(0.62 0.02 264 / 0.10); }
.gradepick__desc { font-size: 11.5px; line-height: 1.3; color: var(--text-muted); }
.gradepick__opt:has(input:checked) { background: var(--grade-bg); border-color: var(--grade-line); }
.gradepick__opt:has(input:checked) .gradepick__letter { background: transparent; color: var(--grade-fg); }
.gradepick__opt:has(input:checked) .gradepick__desc { color: var(--text-2); font-weight: 600; }
/* 目標の種別・未設定のバッジ（badge--high/low 等はスキルのリスク区分と共用のため専用クラスを持つ） */
.badge--goal-assigned { background: var(--accent-soft); color: var(--accent-600); }
.badge--goal-self { background: oklch(0.625 0.135 158 / 0.14); color: oklch(0.48 0.13 158); }
.badge--goal-none { background: oklch(0.605 0.19 25 / 0.13); color: oklch(0.52 0.19 25); }
.goalform { display: grid; gap: 12px; max-width: 560px; }
.goalform > label > div:first-child { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.goalform__row { display: flex; gap: 12px; flex-wrap: wrap; }
.goalform__row > label { flex: 1; min-width: 150px; }
/* 期間・種別の切替（ラジオを隠してラベルをセグメント表示にする。JSなしでも選択できる） */
.segment { display: inline-flex; gap: 4px; padding: 3px; background: oklch(0.62 0.02 264 / 0.10); border-radius: var(--radius-sm); }
.segment label { font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 6px; cursor: pointer; color: var(--text-2); transition: background .2s var(--ease), color .2s var(--ease); }
.segment input { position: absolute; opacity: 0; width: 0; height: 0; }
.segment input:checked + span { color: var(--text); }
.segment label:has(input:checked) { background: var(--card); color: var(--text); box-shadow: var(--shadow); }
.segment label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 720px) {
    .staffrow__cols { grid-template-columns: 1fr; }
    .goalcell + .goalcell { border-left: 0; border-top: 1px solid var(--border-soft); }
}
.badge--goal-active { background: var(--accent-soft); color: var(--accent-600); }
.badge--goal-achieved { background: oklch(0.625 0.135 158 / 0.14); color: oklch(0.48 0.13 158); }
.badge--goal-closed { background: oklch(0.62 0.02 264 / 0.13); color: var(--text-muted); }
/* 登録フォームの入力欄は選んだ種別・期間だけを出す（:has() でJSなしに切り替える） */
.goalform:has(input[name="kind"][value="self"]:checked) .goalform__target { display: none; }
.goalform:has(input[name="period_type"][value="long"]:checked) .goalform__month { display: none; }
.goalform:has(input[name="period_type"][value="monthly"]:checked) .goalform__range { display: none; }

/* ===== 保存トースト（S-共通） =====
   保存の成功・エラーは全画面でこのトーストだけが知らせる（各画面の先頭に帯を書かない＝本文を押し下げない）。
   上の帯の下・本文の横中央に重ねる。成功は 2.8秒で消え、エラーは × か本体を押すまで残る。
   幅は文の長さで決め、最大 560px（狭い画面は画面の幅 − 32px）。幅を決めないと、左の位置（50%）から右端までしか広がらず、
   長い文が本文の領域の半分で折り返す（承認済みモック docs/design-mocks/20261022_toast-width.html）。
   発送のドロワーの通知〔is-front〕も同じ見た目を使う。 */
.save-toast {
    position: fixed; left: calc(50% + var(--sidebar-w) / 2); top: calc(var(--topbar-h) + 12px);
    transform: translate(-50%, -14px);
    display: flex; align-items: flex-start; gap: 8px;
    width: max-content; max-width: min(560px, calc(100vw - var(--sidebar-w) - 32px));
    padding: 10px 14px 10px 16px;
    background: var(--card); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    font-size: 12.5px; font-weight: 600; line-height: 1.5;
    opacity: 0; pointer-events: none;
    transition: opacity .2s var(--ease), transform .2s var(--ease);
    z-index: 70;
}
.save-toast[hidden] { display: none; }   /* display:flex が UA の [hidden] を打ち消すため明示する */
.save-toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; cursor: pointer; }
.save-toast.is-error { border-color: var(--red); color: var(--red); }
.save-toast__dot { width: 9px; height: 9px; flex: 0 0 9px; margin-top: 5px; border-radius: 50%; background: var(--green); }
.save-toast.is-error .save-toast__dot { background: var(--red); }
.save-toast__body { min-width: 0; max-height: 50vh; overflow-y: auto; }
.save-toast__msg { margin: 0; }
.save-toast__msg + .save-toast__msg { margin-top: 4px; }
.save-toast.is-error .save-toast__msg--ok { color: var(--text); }
.save-toast__close { flex: 0 0 auto; margin: -2px -6px 0 2px; padding: 2px 6px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; font-size: 15px; line-height: 1; cursor: pointer; }
.save-toast__close:hover { background: oklch(0.605 0.190 25 / 0.10); }
@media (max-width: 1024px) {
    .save-toast { left: 50%; max-width: min(560px, calc(100vw - 32px)); }
}

/* ===== 待ちの線（S-共通） =====
   リンク・送信から 0.15秒たっても次の画面に入れ替わらないときだけ、上の帯の下に出す。 */
.nav-progress {
    position: fixed; top: var(--topbar-h); left: var(--sidebar-w); right: 0;
    height: 2px; z-index: 21; pointer-events: none;
    background: var(--accent);
    transform-origin: 0 50%; transform: scaleX(0); opacity: 0;
}
.nav-progress.is-on { opacity: 1; animation: nav-progress 8s cubic-bezier(.1, .7, .2, 1) forwards; }
@keyframes nav-progress { from { transform: scaleX(.08); } to { transform: scaleX(.92); } }
@media (max-width: 1024px) { .nav-progress { left: 0; } }
@media (prefers-reduced-motion: reduce) { .nav-progress.is-on { animation: none; transform: scaleX(1); opacity: .55; } }

/* 印刷では、上に重ねて出すお知らせと待ちの線を刷らない（position: fixed の要素は全ページに刷られ、週間予定表などの表の上に重なる） */
@media print { .save-toast, .nav-progress { display: none !important; } }

/* ===== 報告機能（S-11〜S-13）：モックの部品（rp-） ===== */
.rp-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rp-line__label { font-size: 11px; font-weight: 700; color: var(--text-2); letter-spacing: .05em; }
.rp-line__node { background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 3px 12px; font-weight: 700; font-size: 12px; box-shadow: var(--shadow); }
.rp-line__node--mgr { border-color: var(--accent); color: var(--accent-fg); }
.rp-line__node--pres { border-color: var(--purple); color: var(--purple); }
html[data-theme="dark"] .rp-line__node--pres { color: oklch(0.80 0.12 292); }
.rp-line__node--dual { border-style: dashed; border-color: var(--amber); }
.rp-line__arrow { color: var(--text-2); font-size: 11px; font-weight: 600; }
.rp-line__note { font-size: 11.5px; color: var(--text-2); margin-top: 7px; }
.rp-kv { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-2); margin-top: 4px; }
.rp-kv b { color: var(--text); font-weight: 600; }
.rp-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--text-2); margin: 20px 0 10px; }
.rp-trend { font-size: 11.5px; color: var(--text-2); margin: 4px 0 0; font-variant-numeric: tabular-nums; }
.rp-meta .muted { color: var(--text-2); }
.rp-wrap { overflow-wrap: anywhere; }
.rp-nowrap { white-space: nowrap; }
.rp-docform { display: flex; gap: 14px; flex-wrap: wrap; align-items: stretch; }
.rp-drop { flex: 1 1 320px; border: 1.5px dashed var(--border); border-radius: var(--radius-sm); padding: 22px; text-align: center; color: var(--text-2); font-size: 12.5px; display: flex; flex-direction: column; justify-content: center; gap: 7px; cursor: pointer; }
.rp-drop b { color: var(--text); }
.rp-drop svg { width: 26px; height: 26px; margin: 0 auto; }
.rp-drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
.rp-drop__file { font: inherit; font-size: 12px; color: var(--text-2); max-width: 100%; }
.rp-drop__file::file-selector-button { font: inherit; font-size: 11.5px; font-weight: 600; padding: 5px 10px; margin-right: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; color: var(--text-2); cursor: pointer; }
.rp-drop__file::file-selector-button:hover { border-color: var(--accent); color: var(--accent); }
.rp-docform__fields { flex: 1 1 300px; display: flex; flex-direction: column; gap: 8px; }
.rp-docform__foot { display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; }
.rp-docform__foot .muted { color: var(--text-2); }

/* ===== 定期処理の状態（システム設定のカード・管理者の画面の帯。承認済みモック docs/design-mocks/20261026_scheduler-heartbeat.html） ===== */
.hb-card { margin-bottom: 16px; }
.hb-card .card__head { flex-wrap: wrap; gap: 10px; }
.hb-card .card__head h2 { display: flex; align-items: center; gap: 10px; }
.hb-card .card__head .muted { font-size: 12px; }
.hb-grid { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0; font-size: 13px; }
.hb-grid dt { color: var(--text-2); white-space: nowrap; }
.hb-grid dd { margin: 0; min-width: 0; font-variant-numeric: tabular-nums; }
.hb-note { margin-top: 14px; padding: 12px 14px; border: 1px dashed var(--border); border-radius: var(--radius-sm); font-size: 12.5px; color: var(--text-2); line-height: 1.6; }
.hb-note p { margin: 0 0 6px; }
.hb-note p:last-child { margin-bottom: 0; }
.hb-note strong { color: var(--text); }
.hb-code { display: block; margin: 6px 0; padding: 8px 10px; border-radius: 7px; background: var(--border-soft); color: var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; overflow-x: auto; white-space: nowrap; }
.hb-strip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 16px; border: 1px solid oklch(0.605 0.19 25 / 0.35); background: oklch(0.605 0.19 25 / 0.08); border-radius: var(--radius-sm); font-size: 13px; }
.hb-strip--warn { border-color: oklch(0.72 0.14 80 / 0.45); background: oklch(0.72 0.14 80 / 0.10); }
.hb-strip__text { flex: 1; min-width: 220px; text-wrap: pretty; }
/* 帯の淡い地の上でも文字のコントラストを 4.5:1 以上に（ライトだけ濃くする。ダークは html[data-theme="dark"] .badge--* が勝つ） */
.hb-strip .badge--danger { color: oklch(0.47 0.19 25); }
.hb-strip .badge--warn { color: oklch(0.46 0.12 70); }
.hb-strip .btn { background: var(--card); }
html[data-theme="dark"] .hb-strip { background: oklch(0.605 0.19 25 / 0.16); }
html[data-theme="dark"] .hb-strip--warn { background: oklch(0.72 0.14 80 / 0.16); }
@media (max-width: 560px) {
    .hb-grid { grid-template-columns: 1fr; gap: 2px 0; }
    .hb-grid dd { margin-bottom: 6px; }
}

/* 「Kintoneで開く」ボタン（kintone/_open_button）。色はトークンだけで決める */
.kt-open { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--accent); border-radius: var(--radius-sm); color: var(--accent-fg); background: var(--accent-soft); font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.kt-open:hover { background: var(--accent); color: #fff; }
.kt-open:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.kt-open svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sh-field .kt-open { margin-top: 6px; }
.sh-fresh .kt-open, .cs-person .kt-open { margin-left: 8px; }