/* Hallmark · studied-DNA build (source: srcdoc_02.html) · tone: utilitarian SaaS dashboard
 * 従業員向けマイページ モック — 既存HR SaaS画面の忠実再構築
 * tokens は tokens.css 参照。色・フォントは全てトークン経由。
 */

/* ===== reset / base ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-ink);
  background: var(--color-bg);
  overflow-wrap: anywhere;
}
h1, h2, h3, h4, p, dl, dd, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--color-primary); text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--color-primary); color: #fff; padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
}
.skip-link:focus { left: var(--space-2); top: var(--space-2); }

/* ===== icons ===== */
.ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2;
      stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic--sm { width: 18px; height: 18px; }
.ic--xs { width: 15px; height: 15px; }
.ic--ai { color: var(--color-ai); }

/* ===== mock ribbon ===== */
.mock-ribbon {
  background: repeating-linear-gradient(135deg, #fff4cf, #fff4cf 12px, #ffeeb3 12px, #ffeeb3 24px);
  color: #7a5a00; font-size: var(--text-xs); font-weight: var(--fw-medium);
  text-align: center; padding: 4px var(--space-4); letter-spacing: .02em;
  border-bottom: 1px solid #f0dca0;
}

/* ===== app shell: sidebar (アプリ切替) + topbar ===== */
.appshell { display: flex; align-items: stretch; min-height: 100vh; }

.appnav {
  position: sticky; top: 0; align-self: flex-start;
  width: 216px; flex: none; height: 100vh; overflow-y: auto;
  background: var(--color-paper); border-right: 1px solid var(--color-border);
  display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3);
  z-index: 40;
}
.appnav__brand { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2);
  color: var(--color-ink); }
.appnav__brandname { font-weight: var(--fw-bold); font-size: var(--text-md); }
.brand__mark {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  background: linear-gradient(135deg, var(--color-primary), var(--color-teal));
  color: #fff; font-weight: var(--fw-bold); font-size: var(--text-sm);
  border-radius: var(--radius-md); letter-spacing: .02em;
}
.appnav__group { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-2); }
.appnav__item {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3);
  border-radius: var(--radius-md); color: var(--color-muted);
  border-left: 3px solid transparent;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.appnav__item:hover { background: var(--color-bg); color: var(--color-ink); }
.appnav__item.is-active { background: var(--color-tint-blue); color: var(--color-primary); border-left-color: var(--color-primary); }
.appnav__item.is-active .ic { color: var(--color-primary); }
.appnav__label { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.appnav__label b { font-size: var(--text-base); font-weight: var(--fw-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appnav__label small { font-size: 10px; color: var(--color-muted-3); }
.appnav__foot { margin-top: auto; display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3); border-top: 1px solid var(--color-border-soft); }
.appnav__me { display: flex; flex-direction: column; line-height: 1.2; }
.appnav__me b { font-size: var(--text-sm); font-weight: var(--fw-bold); }
.appnav__me small { font-size: var(--text-xs); color: var(--color-muted); }

.appcol { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.apptop {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--space-4);
  min-height: var(--topbar-h); padding: var(--space-2) var(--space-5);
  background: var(--color-paper); border-bottom: 1px solid var(--color-border);
}
.apptop__title { font-size: var(--text-lg); font-weight: var(--fw-bold); line-height: 1.1;
  display: flex; flex-direction: column; }
.apptop__title small { font-size: var(--text-xs); color: var(--color-muted); font-weight: var(--fw-normal); }
.apptop__search {
  display: flex; align-items: center; gap: var(--space-2);
  flex: 0 1 360px; margin-left: auto;
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-pill); padding: 0 var(--space-3); height: 38px; color: var(--color-muted);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.apptop__search:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-tint-blue); }
.apptop__search input { flex: 1; border: 0; background: transparent; font-size: var(--text-base); color: var(--color-ink); padding: var(--space-2) 0; }
.apptop__search input:focus { outline: none; }
.apptop__search input::placeholder { color: var(--color-muted-3); }
.apptop__right { display: flex; align-items: center; gap: var(--space-2); }
.appnav__toggle { display: none; }

.iconbtn {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 0; background: transparent; color: var(--color-muted); border-radius: var(--radius-md);
  position: relative; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.iconbtn:hover { background: var(--color-bg); color: var(--color-ink); }
.iconbtn:active { transform: translateY(1px); }
.badge-dot {
  position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--color-danger); color: #fff; font-size: 10px; font-weight: var(--fw-bold);
  border-radius: var(--radius-pill); display: grid; place-items: center; line-height: 1;
}
.userchip {
  display: flex; align-items: center; gap: var(--space-2);
  border: 1px solid transparent; background: transparent; border-radius: var(--radius-pill);
  padding: 4px var(--space-3) 4px 4px; color: var(--color-ink); font-size: var(--text-base);
  transition: background var(--dur-fast) var(--ease-out);
}
.userchip:hover { background: var(--color-bg); }
.userchip__name { font-weight: var(--fw-medium); white-space: nowrap; }

/* ===== avatars ===== */
.avatar { border-radius: 50%; object-fit: cover; background: var(--color-paper-2); flex: none; }
.avatar--sm { width: 32px; height: 32px; }
.avatar--md { width: 48px; height: 48px; }
.avatar--lg { width: 96px; height: 96px; box-shadow: var(--shadow-card); }
/* fallback: data-initials 指定時のイニシャル表示（画像未使用箇所用） */
span.avatar[data-initials] { display: grid; place-items: center; color: #fff;
  background: var(--av, var(--color-primary)); font-weight: var(--fw-bold); }
span.avatar--sm[data-initials]::after { content: attr(data-initials); font-size: var(--text-base); }
span.avatar--md[data-initials]::after { content: attr(data-initials); font-size: var(--text-md); }
span.avatar--lg[data-initials]::after { content: attr(data-initials); font-size: var(--text-2xl); }

/* ===== main ===== */
.main {
  flex: 1 1 auto; min-width: 0;
  max-width: var(--maxw); margin: 0 auto; width: 100%;
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-6);
}

/* ===== profile header ===== */
.profile { display: flex; align-items: center; gap: var(--space-5); }
.profile__kana { color: var(--color-muted); font-size: var(--text-sm); }
.profile__name { font-size: var(--text-2xl); font-weight: var(--fw-bold); line-height: 1.2; }
.taglist { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.tag {
  display: inline-flex; align-items: center; padding: 3px var(--space-3);
  background: var(--color-tint-blue); color: var(--color-primary-deep);
  font-size: var(--text-sm); font-weight: var(--fw-medium); border-radius: var(--radius-sm);
}
.tag--muted { background: var(--color-paper-2); color: var(--color-muted); }

/* ===== cards ===== */
.card {
  background: var(--color-paper); border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-card);
}
.card--ai { background: linear-gradient(180deg, var(--color-tint-blue), var(--color-paper) 64px); }
.card--matching { background: linear-gradient(180deg, var(--color-tint-violet), var(--color-paper) 72px); }
.card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.card__head--col { flex-direction: column; align-items: flex-start; gap: 2px; }
.card__title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-md); font-weight: var(--fw-bold); }
.card__title--ai { color: var(--color-ai-deep); }
.card__meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

.muted { color: var(--color-muted); font-size: var(--text-sm); }
.muted--xs { font-size: var(--text-xs); }
.hint { color: var(--color-muted-2); font-size: var(--text-xs); margin-top: 2px; }
.subhead { font-size: var(--text-base); font-weight: var(--fw-bold); color: var(--color-ink);
  margin-top: var(--space-5); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border-soft); }
.microhead { font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--color-muted); margin-top: var(--space-3); }

/* ===== buttons (8 states) ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid transparent; border-radius: var(--radius-md);
  font-size: var(--text-base); font-weight: var(--fw-medium); line-height: 1;
  padding: var(--space-3) var(--space-4); white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.btn--sm { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }
.btn--block { width: 100%; }

.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover, .btn--primary.is-hover { background: var(--color-primary-hover); }
.btn--primary:active, .btn--primary.is-active { transform: translateY(1px); }
.btn--primary:focus-visible { box-shadow: 0 0 0 3px var(--color-tint-blue); }

.btn--ai { background: var(--color-ai); color: #fff; }
.btn--ai:hover, .btn--ai.is-hover { background: var(--color-ai-deep); }
.btn--ai:active, .btn--ai.is-active { transform: translateY(1px); }
.btn--ai:focus-visible { box-shadow: 0 0 0 3px var(--color-tint-violet); }

.btn--ghost { background: var(--color-paper); color: var(--color-primary); border-color: var(--color-border-strong); }
.btn--ghost:hover, .btn--ghost.is-hover { background: var(--color-tint-blue); border-color: var(--color-primary); }
.btn--ghost:active, .btn--ghost.is-active { transform: translateY(1px); }

.btn--text { background: transparent; color: var(--color-primary); padding: var(--space-2) 0; }
.btn--text:hover { text-decoration: underline; }

.btn[disabled], .btn.is-disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  color: #fff; animation: spin .7s linear infinite;
}
.btn--ghost.is-loading::after, .btn--text.is-loading::after { color: var(--color-primary); }
@keyframes spin { to { transform: rotate(360deg); } }

.link-toggle {
  background: transparent; border: 0; color: var(--color-primary);
  font-size: var(--text-sm); padding: var(--space-2) 0; text-align: left;
}
.link-toggle:hover { text-decoration: underline; }

/* ===== tabs ===== */
.tabs { display: flex; gap: var(--space-1); margin-top: var(--space-4);
  border-bottom: 1px solid var(--color-border); overflow-x: auto; }
.tab {
  border: 0; background: transparent; color: var(--color-muted);
  font-size: var(--text-base); font-weight: var(--fw-medium); white-space: nowrap;
  padding: var(--space-3) var(--space-3); border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.tab:hover { color: var(--color-ink); }
.tab.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: var(--fw-bold); }
.tabpanels { margin-top: var(--space-4); }
.tabpanel { color: var(--color-ink-2); }
.tabpanel[hidden] { display: none; }
.tabpanel.is-active { animation: fade var(--dur-mid) var(--ease-out); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.clamp.is-open { -webkit-line-clamp: unset; }
.bullets { display: flex; flex-direction: column; gap: var(--space-2); }
.bullets li { position: relative; padding-left: var(--space-4); }
.bullets li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 6px; height: 6px;
  border-radius: 50%; background: var(--color-primary); }

/* ===== grid (3 columns) ===== */
.grid3 { display: grid; gap: var(--space-5); grid-template-columns: 280px minmax(0, 1fr) 320px; align-items: start; }

/* ===== chips ===== */
.chiplist { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.chiplist--tight { margin-top: var(--space-2); }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--color-paper-2); border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-pill); padding: 5px var(--space-3); font-size: var(--text-sm);
}
.chip--xs { padding: 3px var(--space-3); font-size: var(--text-xs); }
.chip--ai { background: var(--color-tint-violet); border-color: transparent; color: var(--color-ai-deep); font-weight: var(--fw-medium); }
.chip__lv { font-size: var(--text-xs); color: var(--color-muted); }

/* ===== timeline ===== */
.timeline { margin-top: var(--space-4); position: relative; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--color-border); }
.tl { position: relative; padding-left: var(--space-6); padding-bottom: var(--space-5); }
.tl:last-child { padding-bottom: 0; }
.tl__dot { position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--color-primary-deep); border: 3px solid var(--color-paper); box-shadow: 0 0 0 1px var(--color-primary-deep); }
.tl__dot--future { background: var(--color-ai); box-shadow: 0 0 0 1px var(--color-ai); }
.tl__when { display: inline-block; color: var(--color-muted); font-size: var(--text-xs); font-weight: var(--fw-medium); }
.tl__role { font-size: var(--text-base); font-weight: var(--fw-bold); margin-top: 2px; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 2px var(--space-3); margin-top: var(--space-2); font-size: var(--text-sm); }
.kv dt { color: var(--color-muted); }
.kv dd { color: var(--color-ink-2); }

.pill { display: inline-block; margin-top: var(--space-2); padding: 2px var(--space-3);
  font-size: var(--text-xs); font-weight: var(--fw-medium); border-radius: var(--radius-sm); }
.pill--move { background: var(--color-tint-blue); color: var(--color-primary-deep); }

.callout { background: var(--color-paper); border: 1px solid var(--color-border-soft); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); margin-top: var(--space-2); }
.callout--ai { background: linear-gradient(180deg, var(--color-tint-violet), var(--color-paper) 50%); }
.callout__title { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--color-ai-deep); }

.members { display: flex; align-items: center; margin-top: var(--space-2); }
.members li { margin-left: -8px; }
.members li:first-child { margin-left: 0; }
.members img { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--color-paper); object-fit: cover; }
.members__more { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--color-paper-2); border: 2px solid var(--color-paper); color: var(--color-muted);
  font-size: var(--text-xs); font-weight: var(--fw-bold); }

/* ===== people / courses (matching) ===== */
.people { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); }
.person { display: flex; align-items: center; gap: var(--space-3); }
.person__name { font-weight: var(--fw-bold); font-size: var(--text-base); }
.person__dept { color: var(--color-muted); font-size: var(--text-xs); }

.courses { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.course { border: 1px solid var(--color-border-soft); border-radius: var(--radius-md);
  padding: var(--space-3); transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.course:hover { border-color: var(--color-primary); background: var(--color-bg); }
.course__cat { font-size: var(--text-xs); color: var(--color-ai-deep); font-weight: var(--fw-medium); }
.course__title { font-size: var(--text-sm); margin-top: 2px; }

/* ===== toast ===== */
.toast-host { position: fixed; left: 50%; bottom: var(--space-6); transform: translateX(-50%);
  z-index: 60; display: flex; flex-direction: column; gap: var(--space-2); align-items: center; pointer-events: none; }
.toast {
  background: var(--color-primary-deep); color: #fff; font-size: var(--text-sm);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-pill); box-shadow: var(--shadow-pop);
  animation: toast-in var(--dur-mid) var(--ease-out);
}
.toast--ok { background: var(--color-primary); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ===== modal ===== */
.modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: var(--space-4); }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(40, 90, 137, .35); animation: fade var(--dur-mid) var(--ease-out); }
.modal__box { position: relative; width: min(520px, 100%); background: var(--color-paper);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); animation: modal-in var(--dur-mid) var(--ease-out); }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.modal__head { display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border-soft); }
.modal__title { font-size: var(--text-md); font-weight: var(--fw-bold); }
.modal__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.modal__note { background: #fff7e0; color: #7a5a00; font-size: var(--text-xs); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); }
.modal__foot { display: flex; justify-content: flex-end; gap: var(--space-2);
  padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border-soft); }
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field__label { font-size: var(--text-sm); font-weight: var(--fw-medium); }
.field__input { font-family: inherit; font-size: var(--text-base); padding: var(--space-3);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); resize: vertical; }
.field__input:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-tint-blue); }

/* ===== shared: section title / sub-nav / period ===== */
.sectiontitle { font-size: var(--text-md); font-weight: var(--fw-bold); margin-bottom: var(--space-3);
  display: flex; align-items: center; gap: var(--space-2); }
.subnav { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.subnav__item { padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
  color: var(--color-muted); font-weight: var(--fw-medium); font-size: var(--text-sm);
  border: 1px solid var(--color-border); background: var(--color-paper);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.subnav__item:hover { background: var(--color-bg); color: var(--color-ink); }
.subnav__item.is-active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

.periodbar { display: flex; align-items: center; gap: var(--space-3); }
.period { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-paper);
  font-size: var(--text-base); font-weight: var(--fw-medium); color: var(--color-ink); }
.period:hover { border-color: var(--color-primary); }

/* ===== KPI stat cards ===== */
.statgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.stat { background: var(--color-paper); border: 1px solid var(--color-border-soft); border-radius: var(--radius-lg);
  padding: var(--space-4); box-shadow: var(--shadow-card); }
.stat__label { font-size: var(--text-sm); color: var(--color-muted); }
.stat__value { font-size: var(--text-2xl); font-weight: var(--fw-bold); color: var(--color-primary); line-height: 1.1; margin-top: 4px; }
.stat__value small { font-size: var(--text-md); font-weight: var(--fw-medium); margin-left: 2px; }
.stat__sub { font-size: var(--text-xs); color: var(--color-muted); margin-top: 2px; }
.delta { font-weight: var(--fw-bold); }
.delta--up { color: var(--color-primary); }
.delta--down { color: var(--color-danger); }
.delta--flat { color: var(--color-muted); }

/* ===== charts ===== */
.chartrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.chartcard { background: var(--color-paper); border: 1px solid var(--color-border-soft); border-radius: var(--radius-lg);
  padding: var(--space-5); box-shadow: var(--shadow-card); }
.donutwrap { display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-3); }
.donut { --size: 132px; width: var(--size); height: var(--size); border-radius: 50%; flex: none; position: relative;
  background: conic-gradient(var(--slices)); }
.donut::after { content: ""; position: absolute; inset: 22%; background: var(--color-paper); border-radius: 50%; }
.donut__center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; z-index: 1; line-height: 1.1; }
.donut__center b { font-size: var(--text-lg); font-weight: var(--fw-bold); }
.donut__center small { display: block; font-size: 10px; color: var(--color-muted); }
.legend { display: flex; flex-direction: column; gap: 6px; font-size: var(--text-sm); }
.legend li { display: flex; align-items: center; gap: var(--space-2); }
.legend .sw { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.legend .lv { margin-left: auto; color: var(--color-muted); font-variant-numeric: tabular-nums; }

/* ===== data table ===== */
.dtable-wrap { overflow-x: auto; margin-top: var(--space-3); }
.dtable { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.dtable th, .dtable td { text-align: left; padding: var(--space-3); border-bottom: 1px solid var(--color-border-soft); white-space: nowrap; }
.dtable thead th { color: var(--color-muted); font-weight: var(--fw-medium); background: var(--color-paper-2); position: sticky; top: 0; }
.dtable tbody tr:hover { background: var(--color-bg); }
.dtable td.num, .dtable th.num { text-align: right; font-variant-numeric: tabular-nums; }
.cell-person { display: flex; align-items: center; gap: var(--space-2); }
.cell-person img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; }
.cell-person small { color: var(--color-muted); font-size: var(--text-xs); }

/* ===== HR: plan cards / org chart ===== */
.planlist { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
.plancard { display: flex; align-items: center; gap: var(--space-3); background: var(--color-paper);
  border: 1px solid var(--color-border-soft); border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.plancard:hover { box-shadow: var(--shadow-pop); }
.plancard__main { flex: 1; min-width: 0; }
.plancard__title { font-size: var(--text-md); font-weight: var(--fw-bold); }
.plancard__meta { font-size: var(--text-xs); color: var(--color-muted); margin-top: 2px; }
.plancard__upd { font-size: var(--text-xs); color: var(--color-muted); white-space: nowrap; }

.orgchart { margin-top: var(--space-5); overflow-x: auto; padding: var(--space-4); }
.orgtree, .orgtree ul { display: flex; gap: var(--space-5); justify-content: center; position: relative; }
.orgtree { flex-direction: column; align-items: center; }
.orgnode { display: flex; flex-direction: column; align-items: center; }
.orgbox { background: var(--color-paper); border: 1px solid var(--color-border-strong); border-top: 3px solid var(--color-primary);
  border-radius: var(--radius-md); padding: var(--space-2) var(--space-4); text-align: center; box-shadow: var(--shadow-card);
  min-width: 120px; }
.orgbox b { font-size: var(--text-sm); }
.orgbox small { display: block; font-size: var(--text-xs); color: var(--color-muted); }
.orgbox--root { border-top-color: var(--color-primary-deep); background: var(--color-tint-blue); }
.orgchildren { display: flex; gap: var(--space-4); margin-top: var(--space-5); position: relative; }
.orgchildren::before { content: ""; position: absolute; top: calc(-1 * var(--space-4)); left: 50%; width: 2px; height: var(--space-4); background: var(--color-border-strong); }
.orgchild { position: relative; }
.orgchild::before { content: ""; position: absolute; top: calc(-1 * var(--space-4)); left: 50%; width: 2px; height: var(--space-4); background: var(--color-border-strong); }

/* ===== Exec: board hub / tiles / dashboard ===== */
.hubhead { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.boardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); }
.boardtile { display: flex; flex-direction: column; gap: var(--space-2); background: var(--color-paper);
  border: 1px solid var(--color-border-soft); border-radius: var(--radius-lg); padding: var(--space-4);
  box-shadow: var(--shadow-card); text-align: left;
  transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.boardtile:hover { box-shadow: var(--shadow-pop); transform: translateY(-2px); border-color: var(--color-primary); }
.boardtile__ic { width: 34px; height: 34px; border-radius: var(--radius-md); display: grid; place-items: center;
  background: var(--color-tint-blue); color: var(--color-primary); }
.boardtile--preset .boardtile__ic { background: var(--color-tint-blue); color: var(--color-primary); }
.boardtile--custom .boardtile__ic { background: var(--color-tint-violet); color: var(--color-ai-deep); }
.boardtile__title { font-size: var(--text-base); font-weight: var(--fw-bold); }
.boardtile__sub { font-size: var(--text-xs); color: var(--color-muted); }

.barchart { display: flex; align-items: flex-end; gap: var(--space-3); height: 160px; margin-top: var(--space-4);
  padding-top: var(--space-4); border-bottom: 1px solid var(--color-border); }
.bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); height: 100%; justify-content: flex-end; }
.bar__fill { width: 60%; max-width: 48px; background: linear-gradient(180deg, var(--color-primary), var(--color-teal));
  border-radius: var(--radius-sm) var(--radius-sm) 0 0; min-height: 4px; }
.bar__val { font-size: var(--text-xs); font-weight: var(--fw-bold); color: var(--color-primary); }
.bar__lab { font-size: var(--text-xs); color: var(--color-muted); }

/* ===== responsive ===== */
@media (max-width: 1180px) {
  .grid3 { grid-template-columns: minmax(0, 1fr); }
  .statgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chartrow { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  /* サイドバーをスライドインのドロワーに */
  .appshell { flex-direction: column; }
  .appnav {
    position: fixed; top: 0; left: 0; bottom: 0; height: 100vh; width: 248px;
    transform: translateX(-100%); transition: transform var(--dur-mid) var(--ease-out);
    box-shadow: var(--shadow-pop);
  }
  .appnav.is-open { transform: translateX(0); }
  .appnav__toggle { display: grid; }
  .apptop { padding: var(--space-2) var(--space-4); }
  .apptop__search { flex-basis: 200px; }
  .main { padding: var(--space-4); gap: var(--space-4); }
}
@media (max-width: 560px) {
  .apptop__search { display: none; }
  .apptop__title { font-size: var(--text-md); }
  .userchip__name { display: none; }
  .profile { flex-direction: row; align-items: center; }
  .avatar--lg { width: 64px; height: 64px; }
  .profile__name { font-size: var(--text-xl); }
}

/* ===== 人員配置シミュレーション ===== */
/* ---- ランクバッジ（S〜C） ---- */
.rank { display: inline-grid; place-items: center; min-width: 46px; height: 46px; padding: 0 var(--space-2);
  border-radius: var(--radius-md); font-weight: var(--fw-bold); font-size: var(--text-xl); line-height: 1;
  color: #fff; letter-spacing: .02em; box-shadow: var(--shadow-card);
  transition: background var(--dur-mid) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.rank--s    { background: linear-gradient(135deg, #f0a500, #e07b00); }
.rank--a    { background: var(--color-primary); }
.rank--b    { background: var(--color-teal); }
.rank--c    { background: var(--color-muted-3); }
.rank--none { background: var(--color-border-strong); color: var(--color-paper); }
.rank--sm   { min-width: 30px; height: 30px; font-size: var(--text-md); border-radius: var(--radius-sm); box-shadow: none; }
.rank.is-bump { animation: rankbump 360ms var(--ease-out); }
@keyframes rankbump { 0% { transform: scale(1); } 38% { transform: scale(1.2); } 100% { transform: scale(1); } }

/* ---- ランク基準の凡例（細い1行） ---- */
.simhint { margin-top: var(--space-4); }
.simlegend { display: flex; gap: var(--space-3); align-items: center; font-size: var(--text-xs); color: var(--color-muted); flex-wrap: wrap; }
.simlegend__item { display: inline-flex; align-items: center; gap: var(--space-1); }
.simlegend__dot { width: 10px; height: 10px; border-radius: var(--radius-sm); }

/* ---- ボード（チーム列を横並び） ---- */
.simboard { display: flex; gap: var(--space-4); margin-top: var(--space-4); overflow-x: auto;
  padding-bottom: var(--space-3); align-items: flex-start; }
.simteam { flex: 1 1 0; min-width: 252px; background: var(--color-bg-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); display: flex; flex-direction: column;
  transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.simteam--pool { background: var(--color-paper-2); }
.simteam.is-dragover { outline: 2px dashed var(--color-primary); outline-offset: -3px; background: var(--color-tint-blue); box-shadow: var(--shadow-pop); }
.simteam__head { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
.simteam__topline { display: flex; align-items: center; gap: var(--space-3); }
.simteam__name { font-size: var(--text-md); font-weight: var(--fw-bold); flex: 1; min-width: 0; }
.simteam__count { font-size: var(--text-xs); color: var(--color-muted); white-space: nowrap; }
.simteam__new { font-size: var(--text-xs); color: var(--color-primary-deep); background: var(--color-tint-blue);
  border-radius: var(--radius-pill); padding: 1px var(--space-2); margin-left: var(--space-2); white-space: nowrap; }

/* ---- コンピテンシーの平均バー ---- */
.compset { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-3); }
.comp { display: grid; grid-template-columns: 80px 1fr 26px; align-items: center; gap: var(--space-2); }
.comp__lab { font-size: var(--text-xs); color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comp__track { display: block; height: 6px; background: var(--color-border-soft); border-radius: var(--radius-pill); overflow: hidden; }
.comp__fill { display: block; height: 100%; background: linear-gradient(90deg, var(--color-primary), var(--color-teal));
  border-radius: inherit; transition: width var(--dur-mid) var(--ease-out); }
.comp__val { font-size: var(--text-xs); font-weight: var(--fw-bold); color: var(--color-ink-2); text-align: right; }

/* ---- メンバーカード（ドロップリスト） ---- */
.simlist { list-style: none; padding: var(--space-3); margin: 0; display: flex; flex-direction: column;
  gap: var(--space-2); min-height: 72px; flex: 1; }
.simlist:empty::after { content: "ここにドラッグして配置"; display: grid; place-items: center; min-height: 64px;
  font-size: var(--text-xs); color: var(--color-muted-3); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); }
.simcard { display: flex; align-items: center; gap: var(--space-3); background: var(--color-paper);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3);
  cursor: grab; box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.simcard:hover { box-shadow: var(--shadow-pop); transform: translateY(-1px); }
.simcard:active { cursor: grabbing; }
.simcard.is-dragging { opacity: .4; }
.simcard__main { flex: 1; min-width: 0; }
.simcard__name { font-size: var(--text-sm); font-weight: var(--fw-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.simcard__role { font-size: var(--text-xs); color: var(--color-muted); }
.simcard__pwr { font-size: var(--text-xs); font-weight: var(--fw-bold); color: var(--color-primary-deep); white-space: nowrap; }
.simcard__move { flex: none; }

/* ---- 移動メニュー（タッチ／キーボード代替） ---- */
.simmenu { position: fixed; z-index: 60; background: var(--color-paper); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-pop); padding: var(--space-1); min-width: 200px; }
.simmenu__lab { font-size: var(--text-xs); color: var(--color-muted); padding: var(--space-2) var(--space-2) var(--space-1); }
.simmenu__item { display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font: inherit; font-size: var(--text-sm);
  color: var(--color-ink); cursor: pointer; }
.simmenu__item:hover, .simmenu__item:focus-visible { background: var(--color-tint-blue); outline: none; }
.simmenu__item[disabled] { color: var(--color-muted-3); cursor: default; background: none; }

/* メンバー名はクリックで個別詳細へ */
.simcard__name { color: inherit; text-decoration: none; }
.simcard__name:hover { color: var(--color-primary); text-decoration: underline; }
.simcard__name:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); }

@media (max-width: 860px) {
  .simboard { flex-direction: column; }
  .simteam { width: 100%; min-width: 0; }
}

/* ===== メンバー個別詳細（member.html） ===== */
.statrows { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
.statrow { display: grid; grid-template-columns: 116px 34px 40px 1fr; align-items: center; gap: var(--space-3); }
.statrow__lab { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--color-ink); white-space: nowrap; }
.statrow__opt { display: inline-block; margin-left: var(--space-2); font-size: var(--text-xs); font-weight: var(--fw-normal);
  color: var(--color-muted); background: var(--color-paper-2); border-radius: var(--radius-sm); padding: 0 var(--space-2); }
.statrow__val { font-size: var(--text-md); font-weight: var(--fw-bold); color: var(--color-ink); text-align: right; }
.statrow .comp__track { height: 8px; }

.abilities { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.abichip { display: inline-flex; align-items: center; padding: 4px var(--space-3); border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: var(--fw-medium); cursor: default; }
.abichip--good { background: var(--color-tint-blue); color: var(--color-primary-deep); }
.abichip--bad  { background: var(--color-danger-tint); color: var(--color-danger-deep); }

/* ===== reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; }
  .btn.is-loading::after { animation: none; }
}