@charset "utf-8";
/* HDS 画面別：ログイン・人物 */

/* ---- ログイン ---- */
body.page-login { background: var(--canvas); }
.login { flex: 1; min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.login__brand {
  background: linear-gradient(160deg, var(--primary-tint) 0%, #d9eedf 60%, var(--primary-soft) 100%);
  display: flex; flex-direction: column; justify-content: center; padding: var(--sp-7);
  position: relative; overflow: hidden;
}
.login__brand::after {            /* うっすら緑の輪。ロゴのラインの気分 */
  content: ''; position: absolute; right: -120px; bottom: -160px; width: 420px; height: 420px;
  border: 28px solid rgba(24, 146, 61, .10); border-radius: 50%;
}
.login__logo { width: min(360px, 80%); margin-bottom: var(--sp-5); }
.login__tagline { font-size: var(--fs-lg); color: var(--primary-deep); font-weight: 600; margin-bottom: var(--sp-2); }
.login__lead { color: var(--ink-2); font-size: var(--fs-sm); max-width: 38em; }
.login__panel { display: flex; align-items: center; justify-content: center; padding: var(--sp-6) var(--sp-4); }
.login__card { width: 100%; max-width: 400px; }
.login__panel { flex-direction: column; }
.login__credit { margin-top: var(--sp-6); font-size: var(--fs-xs); color: var(--muted); }
.login__credit a, .login__credit .linkbtn { color: var(--muted); font-size: inherit; }
.login__card h1 { font-size: var(--fs-xl); margin-bottom: var(--sp-1); }
.login__card .sub { color: var(--muted); font-size: var(--fs-sm); margin-bottom: var(--sp-5); }
.login__form { display: flex; flex-direction: column; gap: var(--sp-3); }
.login__row { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-sm); }
.divider { display: flex; align-items: center; gap: var(--sp-3); color: var(--muted); font-size: var(--fs-xs); margin: var(--sp-4) 0; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
/* 組織を選ぶ（hds/companies.py） */
.company-pick { display: flex; flex-direction: column; gap: var(--sp-2); }
.company-pick__item { display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: var(--sp-3); text-align: left;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); font: inherit; color: var(--ink); cursor: pointer; }
.company-pick__item:hover, .company-pick__item:focus-visible { border-color: var(--primary); background: var(--primary-tint); }
.company-pick__item.is-last { border-color: var(--primary); }
.company-pick__mark { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px;
  background: var(--company-color); color: #fff; font-weight: 700; }
.mark-preview { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }   /* 自社情報の「画面での目印」 */
.company-pick__text { display: flex; flex-direction: column; min-width: 0; }
.company-pick__name { font-weight: 700; }
.company-pick__formal { color: var(--muted); font-size: var(--fs-xs); }
.company-pick__last { margin-left: auto; font-size: var(--fs-xs); color: var(--primary-dark); }
.login__foot { margin-top: var(--sp-5); font-size: var(--fs-xs); color: var(--muted); }
@media (max-width: 860px) {
  .login { grid-template-columns: 1fr; }
  .login__brand { padding: var(--sp-5) var(--sp-4); min-height: 0; }
  .login__brand::after { display: none; }
  .login__logo { width: min(260px, 70%); margin-bottom: var(--sp-3); }
  .login__lead { display: none; }
}

/* ---- 人物：一覧 ---- */
.person-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.person-name { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; max-width: 300px; }
.person-name > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-name .kana { font-size: var(--fs-xs); color: var(--muted); }
.avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--paper-alt); border: 1px solid var(--line); }
.avatar--initial { display: grid; place-items: center; background: var(--primary-tint); color: var(--primary-deep); font-weight: 700; font-size: 15px; border-color: var(--primary-soft); }
.avatar--square { border-radius: 8px; }
.person-hero__photo--square, .person-hero__avatar--square { border-radius: 12px; }
.aff .avatar { margin-top: 2px; }

/* ---- 人物：詳細 ---- */
.person-hero { display: flex; gap: var(--sp-4); align-items: center; }
.person-hero__photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--primary-soft), var(--shadow); display: block; }
.person-hero__avatar {
  width: 56px; height: 56px; border-radius: 50%; flex: 0 0 auto;
  background: var(--primary-tint); color: var(--primary-deep); display: grid; place-items: center;
  font-size: 22px; font-weight: 700; border: 1px solid var(--primary-soft);
}
.person-hero__kana { font-size: var(--fs-sm); color: var(--muted); }
.person-hero__meta { display: flex; gap: var(--sp-3); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--ink-2); margin-top: 2px; }
.aff { display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); align-items: flex-start; }
.aff:last-child { border-bottom: 0; }
.aff--past { color: var(--muted); }
.aff__org { font-weight: 700; }
.aff--past .aff__org { font-weight: 500; }
.aff__unit { font-size: var(--fs-sm); color: var(--ink-2); }
.aff__main { min-width: 0; flex: 1 1 auto; }
.aff__side { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; }
.aff__side--row { flex-direction: row; align-items: center; gap: 0; }
.aff__period { text-align: right; font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.aff__contact { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: 2px; }
.aff__contact .fa-solid { font-size: 11px; opacity: .7; }
.avatar--card { width: 58px; height: 36px; border-radius: 6px; }
.avatar--card-tall { width: 36px; height: 58px; margin: 0 11px; }   /* 縦型の名刺。横型と同じ幅の場所に置き、文字の位置をそろえる */

/* ---- 所属モーダル（左に項目、右に名刺）---- */
.aff-edit { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.aff-edit__fields { min-width: 0; }
.aff-edit__cards { min-width: 0; }
.aff-edit__cards .photo img, .aff-edit__cards .photo--primary img { aspect-ratio: 91 / 55; }
.aff-edit__cards .photo--portrait img, .aff-edit__cards .photo--primary.photo--portrait img { aspect-ratio: 55 / 91; width: 100%; }
.aff-edit__cards .photo--primary.photo--portrait { grid-column: auto; }   /* 縦型の名刺は表・裏を横に並べる */
.aff-edit__cards .photo-grid { padding: var(--sp-3); gap: var(--sp-2); }
@media (max-width: 860px) { .aff-edit { grid-template-columns: 1fr; } }
.contact { display: flex; gap: var(--sp-2); align-items: baseline; padding: 6px var(--sp-4); border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.contact:last-child { border-bottom: 0; }
.contact__kind { width: 60px; flex: 0 0 auto; color: var(--muted); font-size: var(--fs-xs); }
.contact__value { font-weight: 500; }
.contact__label { color: var(--muted); font-size: var(--fs-xs); }
.contact__via { margin-left: auto; color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }
details.adder { border-top: 1px dashed var(--line); }
details.adder summary { cursor: pointer; padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); color: var(--primary-dark); font-weight: 600; list-style: none; }
details.adder summary::-webkit-details-marker { display: none; }
details.adder summary::before { content: '＋ '; }
details.adder[open] summary::before { content: '－ '; }
details.adder .adder__body { padding: 0 var(--sp-4) var(--sp-4); }

/* ---- 組織設定：部署のツリー表示 ---- */
.page-head__note { font-size: var(--fs-sm); color: var(--muted); margin: 2px 0 0; }
.tree { display: inline-flex; align-items: center; gap: 6px; padding-left: calc(var(--depth, 0) * 22px); }
.tree__branch { width: 12px; height: 9px; flex: 0 0 auto; border-left: 1px solid var(--line-strong);
                border-bottom: 1px solid var(--line-strong); border-radius: 0 0 0 3px; margin: -8px 2px 0 0; }

/* ---- 人物：写真 ---- */
.photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); padding: var(--sp-4); }
.photo { margin: 0; position: relative; min-width: 0; }
.photo--primary { grid-column: span 2; }
.photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); background: var(--paper-alt); display: block; }
.photo--primary img { aspect-ratio: 4 / 3; }
.photo--primary.photo--portrait img { aspect-ratio: 3 / 4; width: 75%; margin: 0 auto; }   /* 縦の写真を横長に切らない */
.photo__badge { position: absolute; top: 8px; left: 8px; }
.photo__memo summary { cursor: pointer; list-style: none; font-size: var(--fs-xs); color: var(--ink-2); padding: 6px 2px 0; display: flex; gap: 6px; align-items: baseline; }
.photo__memo summary::-webkit-details-marker { display: none; }
.photo__date { font-weight: 600; color: var(--primary-deep); white-space: nowrap; }
.photo__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photo__memo[open] .photo__text { white-space: normal; }
.photo__edit { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.photo__edit .input { font-size: var(--fs-sm); padding: 6px 8px; }
.photo__actions { display: flex; gap: 6px; align-items: center; margin-top: 6px; flex-wrap: wrap; }

/* 伝票の詳細: No.・日付・期限・合計を見出しの下に 1 行で大きく */
.doc-facts { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin: var(--sp-2) 0 var(--sp-2); }
.doc-facts > div { display: flex; flex-direction: column; min-width: 0; }
.doc-facts dt { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.doc-facts dd { margin: 0; font-size: var(--fs-lg); font-weight: 700; color: var(--ink); white-space: nowrap; }
.doc-facts dd small { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); }
.doc-facts__danger dt, .doc-facts__danger dd { color: var(--danger); }
.doc-facts dd.doc-facts__weak { color: var(--muted); font-weight: 500; }

/* ---- 組織図（org/chart.html）: 部署の木を線でつなぐ。「図」は上から下へ、「一覧」は字下げ ---- */
body.page-wide .wrap { max-width: none; }
.oc-tools { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.oc-tools__filter { margin-right: auto; }
.oc-tools__filter .select { width: auto; }
.oc-tools button.seg__item { background: var(--paper); border-top: 0; border-bottom: 0; border-right: 0; font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.oc-tools button.seg__item:first-child { border-left: 0; }
.oc-tools button.seg__item.is-on { background: var(--primary); color: #fff; }
.oc-scroll { overflow: auto; padding: var(--sp-4); background: var(--paper-alt); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.oc-canvas { width: max-content; min-width: 100%; }
.oc-tree, .oc-children { list-style: none; margin: 0; padding: 0; }

/* 図: 子を横に並べ、親の下から縦線・子の上に横線 */
.oc-tree { display: flex; justify-content: center; }
.oc-children { display: flex; justify-content: center; padding-top: 22px; position: relative; }
.oc-children::before { content: ''; position: absolute; top: 0; left: 50%; height: 22px; border-left: 2px solid var(--line-strong); }
.oc-item { position: relative; display: flex; flex-direction: column; align-items: center; padding: 22px 8px 0; }
.oc-tree > .oc-item { padding-top: 0; }
.oc-children > .oc-item::before, .oc-children > .oc-item::after {
  content: ''; position: absolute; top: 0; width: 50%; height: 22px; border-top: 2px solid var(--line-strong); }
.oc-children > .oc-item::before { right: 50%; }
.oc-children > .oc-item::after { left: 50%; border-left: 2px solid var(--line-strong); }
.oc-children > .oc-item:first-child::before, .oc-children > .oc-item:last-child::after { border-top: 0; }
.oc-children > .oc-item:last-child::after { border-left: 0; }
.oc-children > .oc-item:last-child::before { border-right: 2px solid var(--line-strong); border-top-right-radius: 8px; }
.oc-children > .oc-item:first-child::after { border-top-left-radius: 8px; }
.oc-children > .oc-item:only-child::before { display: none; }
.oc-children > .oc-item:only-child::after { border-top: 0; border-radius: 0; }
.oc-item.is-folded > .oc-children { display: none; }
.oc-item.is-folded > .oc-node { box-shadow: 4px 4px 0 -1px var(--paper), 4px 4px 0 0 var(--line-strong), var(--shadow); }
.oc-item.is-folded > .oc-node .oc-fold i { transform: rotate(180deg); }

.oc-node { background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--primary); border-radius: var(--radius);
  box-shadow: var(--shadow); min-width: 190px; max-width: 250px; text-align: left; padding: var(--sp-2) var(--sp-3) var(--sp-3); }
.oc-node--root { border-color: var(--primary-deep); background: var(--primary-deep); color: #fff; min-width: 220px; }
.oc-node--root .oc-node__count { color: var(--primary-soft); }
.oc-item.is-empty > .oc-node { opacity: .55; border-top-color: var(--line-strong); }
.oc-node__head { display: flex; align-items: baseline; gap: var(--sp-2); }
.oc-node__name { font-weight: 700; font-size: var(--fs-base); flex: 1 1 auto; line-height: 1.35; }
.oc-node__name a { color: inherit; }
.oc-node__name a:hover { color: var(--primary-dark); }
.oc-node__count { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.oc-fold { border: 1px solid var(--line); background: var(--paper); border-radius: 6px; width: 22px; height: 22px; padding: 0; cursor: pointer;
  color: var(--muted); font-size: 11px; align-self: center; flex: 0 0 auto; }
.oc-fold:hover { color: var(--primary-dark); border-color: var(--primary-soft); }
.oc-node__manager, .oc-node__empty { margin-top: var(--sp-1); }

.oc-people { list-style: none; margin: 0; padding: 0; }
.oc-people--heads { margin-top: var(--sp-2); display: grid; gap: var(--sp-2); }
.oc-people--staff { margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px dashed var(--line); display: grid; gap: 6px; }
.oc-people--flat { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-2); }
.oc-person { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.oc-person__link { display: inline-flex; flex: 0 0 auto; }
.oc-person__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.oc-person__name { font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-person__name a { color: var(--ink); }
.oc-person__name a:hover { color: var(--primary-dark); }
.oc-person__role { font-size: var(--fs-xs); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-person--head .oc-person__name { font-size: var(--fs-base); }
.oc-person--head .oc-person__role { color: var(--primary-deep); font-weight: 600; }
.oc-avatar { width: 26px; height: 26px; font-size: 12px; }
.oc-avatar--lg { width: 42px; height: 42px; font-size: 16px; border: 2px solid var(--primary-soft); }
.oc-chip { padding: 0 6px; font-size: 10px; margin-left: 2px; }
.oc-warn { color: var(--danger); font-weight: 600; }
.oc--heads .oc-people--staff { display: none; }

/* 一覧: 字下げして縦に。線は左に */
.oc--list .oc-canvas { width: auto; }
.oc--list .oc-tree, .oc--list .oc-children { display: block; }
.oc--list .oc-children { padding: 0 0 0 28px; }
.oc--list .oc-children::before { display: none; }
.oc--list .oc-item { display: block; padding: 10px 0 0 0; }
.oc--list .oc-children > .oc-item::before { display: block; content: ''; position: absolute; left: -16px; right: auto; top: 0; bottom: 0; width: 0; height: auto;
  border: 0; border-left: 2px solid var(--line-strong); border-radius: 0; }
.oc--list .oc-children > .oc-item:last-child::before { bottom: auto; height: 32px; }
.oc--list .oc-children > .oc-item::after { display: block; content: ''; position: absolute; left: -16px; top: 32px; width: 14px; height: 0;
  border: 0; border-top: 2px solid var(--line-strong); border-radius: 0; }
.oc--list .oc-node { max-width: none; min-width: 0; display: grid; grid-template-columns: minmax(180px, 240px) 1fr; column-gap: var(--sp-4); align-items: start; }
.oc--list .oc-node__head { grid-column: 1; grid-row: 1 / span 3; }
.oc--list .oc-people--heads, .oc--list .oc-people--staff, .oc--list .oc-node__manager, .oc--list .oc-node__empty { grid-column: 2; }
.oc--list .oc-people--heads, .oc--list .oc-people--staff { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.oc--list .oc-people--heads { margin-top: 0; }
.oc--list .oc-people--staff { margin-top: var(--sp-2); }
.oc--list .oc-people--heads + .oc-people--staff { border-top: 1px dashed var(--line); }
.oc--list .oc-node--root { display: block; }
@media (max-width: 760px) {
  .oc--list .oc-node { display: block; }
  .oc--list .oc-children { padding-left: 18px; }
  .oc--list .oc-children > .oc-item::before, .oc--list .oc-children > .oc-item::after { left: -12px; }
  .oc--list .oc-children > .oc-item::after { width: 10px; }
  .oc-tools__filter { margin-right: 0; width: 100%; }
  .oc-scroll { padding: var(--sp-2); }
}

/* ---- 行動記録の欄: 関係した組織の札（マウスを載せると参加者）---- */
.act-orgs { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0 2px; }
.chip--org { background: var(--paper); color: var(--ink-2); border-color: var(--line-strong); font-weight: 500; cursor: pointer; }
.chip--org i { color: var(--primary-dark); font-size: 10px; }
.chip--org:hover { background: var(--primary-tint); border-color: var(--primary-soft); color: var(--primary-deep); text-decoration: none; }
.chip__n { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.act-people { cursor: help; border-bottom: 1px dotted var(--line-strong); }
/* 所属従業員の表: 顔写真と名前を 1 行に（「主」の札をその右に）*/
.table .person-cell { display: inline-flex; vertical-align: middle; }

/* 伝票のメール送信: 添付のファイルと、置くと添付される枠（document-mail.js） */
.mail-files { display: flex; flex-direction: column; }
.mail-file { display: flex; align-items: center; gap: 2px; }
.mail-file .check { flex: 1; min-width: 0; }
.mail-file.is-new .check { color: var(--primary-dark); }
.mail-drop { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); padding: var(--sp-3);
  border: 2px dashed var(--line); border-radius: 8px; color: var(--muted); font-size: var(--fs-sm); cursor: pointer; }
.mail-drop:hover, .mail-drop.is-over { border-color: var(--primary); color: var(--primary-dark); background: var(--primary-tint); }
.mail-drop.is-busy { opacity: .6; pointer-events: none; }

/* ---- マイポータル（portal/my.html）---- */
.my { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.my__main > .card + .card, .my__side > .card + .card { margin-top: var(--sp-4); }
.my-req + .my-req { margin-top: var(--sp-4); }
.my-req__head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.my-req__head .fa-solid { color: var(--primary); }
.my-req__head a { margin-left: auto; }
.my-req__on { width: 7em; color: var(--muted); }
.my-req__done td { color: var(--muted); }
.my-req__note { color: var(--danger); margin-top: 2px; }
.my-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.my-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.my-perms__group th { background: var(--primary-tint); color: var(--primary-deep); font-size: var(--fs-xs); text-align: left; }
@media (max-width: 960px) { .my { grid-template-columns: 1fr; } }

/* ---- 掲示板（board/list.html・board/_panel.html）---- */
.notice-list { list-style: none; margin: 0; padding: 0; }
.notice { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line); }
.notice:first-child { border-top: 0; }
.notice__head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px var(--sp-2); margin-bottom: 4px; }
.notice__from { font-weight: 700; color: var(--primary-deep); }
.notice__from .fa-solid { color: var(--primary); }
.notice__actions { margin-left: auto; display: flex; gap: 4px; }
.notice__body { line-height: 1.7; overflow-wrap: anywhere; }
.notice--off .notice__body, .notice--off .notice__from { color: var(--muted); }
.board-panel.is-folded .card__head { border-bottom: 0; }

/* ---- ログインと認証（二要素の登録・リカバリーコード。doc/DB設計/25）---- */
.mfa-steps { padding-left: 1.4em; margin: 0 0 var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-sm); }
.mfa-qr { margin: var(--sp-2) 0; }
.mfa-qr svg { width: 220px; height: 220px; display: block; background: #fff; }   /* 周りの白（静かな余白）は QR に含まれる */
.mfa-secret { word-break: break-all; padding: var(--sp-2); background: var(--paper-alt); border-radius: var(--radius); margin-top: var(--sp-1); letter-spacing: .08em; }
.recovery-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; padding: var(--sp-3) var(--sp-3) var(--sp-3) 2.2em;
                  background: var(--paper-alt); border-radius: var(--radius); font-size: var(--fs-md, 1rem); }
.login__sso summary { cursor: pointer; color: var(--muted); }
.sec-scroll { max-height: 360px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); }   /* ログイン中の端末・最近のログイン */
.sec-scroll .table { margin: 0; }
.mfa-trust { display: flex; flex-direction: column; gap: 4px; }
.trust-name { display: flex; gap: 4px; align-items: center; margin-bottom: 2px; }
.trust-name .input { max-width: 240px; }

/* ---- 金庫（vault/box.html）---- */
.vault-table td:first-child { min-width: 16em; }
.vault-secret { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.vault-secret .mono { max-width: 18em; overflow: hidden; text-overflow: ellipsis; }
.vault-note { white-space: pre-wrap; margin-top: 4px; padding: 4px 8px; background: var(--paper-alt); border-radius: var(--radius); }
.vault-mfa-help { margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3); background: var(--paper-alt); border: 1px solid var(--line); border-radius: var(--radius); }
.vault-mfa-help p, .vault-mfa-help ul { margin: 4px 0; }
.vault-mfa-help ul { padding-left: 1.4em; }

/* ---- テナント管理: 組織を作るアンケート（tenant_admin/new.html・confirm.html）---- */
.onb { max-width: 860px; }
.onb-steps { display: flex; gap: var(--sp-2); list-style: none; padding: 0; margin: 0 0 var(--sp-4); counter-reset: onb; flex-wrap: wrap; }
.onb-steps li { counter-increment: onb; padding: 4px 14px; border-radius: 999px; background: var(--paper-alt); color: var(--muted); font-size: var(--fs-sm); }
.onb-steps li::before { content: counter(onb) ". "; }
.onb-steps li.is-on { background: var(--primary); color: #fff; font-weight: 600; }
.onb-section { margin-bottom: var(--sp-4); }
.onb-section__key { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--primary-tint); color: var(--primary-deep); font-size: var(--fs-sm); margin-right: 4px; }
.onb-q { margin-bottom: var(--sp-4); }
.onb-q:last-child { margin-bottom: 0; }
.onb-q[hidden] { display: none; }
.onb-choices { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.onb-actions { display: flex; justify-content: space-between; gap: var(--sp-3); margin: var(--sp-5) 0; }
.onb-role { padding: var(--sp-3) 0; border-top: 1px solid var(--line); }
.onb-role:first-of-type { border-top: 0; }
.onb-role__head { margin-bottom: 6px; }
.onb-role__perms { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.onb-perm { padding: 1px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.company-banner { background: #fbf1dd; color: #7a5410; border-bottom: 1px solid #f0dcae; padding: 6px 0; font-size: var(--fs-sm); text-align: center; }