/* iSync HR design system — layered on the self-hosted Bootstrap 5 build. No external fonts/CDNs; system font stack.
   Palette chosen for WCAG AA contrast: primary #3446c4 on white = 7.0:1, sidebar text #d5dcf0 on #101a3a = 12:1. */
:root {
  --hr-primary: #3446c4; --hr-primary-rgb: 52, 70, 196; --hr-primary-dark: #26369f; --hr-primary-soft: #eef0fc;
  --hr-accent: #0d7c72; --hr-ink: #1c2333; --hr-muted: #5b6478; --hr-line: #e3e6ee; --hr-bg: #f5f6fa; --hr-card: #fff;
  --hr-side-bg: #101a3a; --hr-side-ink: #d5dcf0; --hr-side-active: #ffffff; --hr-side-hover: #1d2a55;
  --hr-radius: .6rem; --hr-shadow: 0 1px 2px rgba(16, 26, 58, .06), 0 1px 3px rgba(16, 26, 58, .08);
  --hr-side-w: 15.5rem;
  --bs-primary: var(--hr-primary); --bs-primary-rgb: var(--hr-primary-rgb);
  --bs-link-color: var(--hr-primary); --bs-link-color-rgb: var(--hr-primary-rgb); --bs-link-hover-color: var(--hr-primary-dark);
  --bs-body-color: var(--hr-ink); --bs-body-bg: var(--hr-bg); --bs-border-color: var(--hr-line); --bs-secondary-color: var(--hr-muted);
  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --bs-border-radius: .5rem; --bs-focus-ring-color: rgba(52, 70, 196, .35);
}
html { font-size: 15px; }
body { min-height: 100vh; background: var(--hr-bg); -webkit-font-smoothing: antialiased; }
h1, .h1 { font-size: 1.6rem; font-weight: 650; letter-spacing: -.01em; }
h2, .h2 { font-size: 1.25rem; font-weight: 620; }
h3, .h3 { font-size: 1.08rem; font-weight: 620; }
a { text-underline-offset: .15em; }
.text-muted { color: var(--hr-muted) !important; }
.pre-wrap { white-space: pre-wrap; }
.w-6r { width: 6rem; } .w-12r { width: 12rem; } .w-14r { width: 14rem; } .mw-40r { max-width: 40rem; } .mw-28r { max-width: 28rem; }
:focus-visible { outline: 3px solid rgba(var(--hr-primary-rgb), .55); outline-offset: 2px; }
.skip-link { position: absolute; left: -999px; top: .5rem; z-index: 2000; background: #fff; padding: .5rem 1rem; border-radius: var(--hr-radius); }
.skip-link:focus { left: .5rem; }

/* Buttons */
.btn { font-weight: 550; border-radius: .5rem; }
.btn-primary { --bs-btn-bg: var(--hr-primary); --bs-btn-border-color: var(--hr-primary); --bs-btn-hover-bg: var(--hr-primary-dark); --bs-btn-hover-border-color: var(--hr-primary-dark);
  --bs-btn-active-bg: var(--hr-primary-dark); --bs-btn-active-border-color: var(--hr-primary-dark); --bs-btn-disabled-bg: var(--hr-primary); --bs-btn-disabled-border-color: var(--hr-primary); }
.btn-outline-primary { --bs-btn-color: var(--hr-primary); --bs-btn-border-color: var(--hr-primary); --bs-btn-hover-bg: var(--hr-primary); --bs-btn-hover-border-color: var(--hr-primary);
  --bs-btn-active-bg: var(--hr-primary-dark); --bs-btn-disabled-color: var(--hr-primary); --bs-btn-disabled-border-color: var(--hr-primary); }
.btn-link { --bs-btn-color: var(--hr-primary); }
.btn.is-busy { pointer-events: none; opacity: .8; }
.btn.is-busy::before { content: ""; display: inline-block; width: .85em; height: .85em; margin-right: .45em; vertical-align: -.1em; border: .15em solid currentColor; border-right-color: transparent; border-radius: 50%; animation: hr-spin .7s linear infinite; }
@keyframes hr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.is-busy::before { animation: none; } }

/* Forms */
.form-control, .form-select { border-radius: .5rem; border-color: #cfd4e0; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--hr-primary); box-shadow: 0 0 0 .2rem rgba(var(--hr-primary-rgb), .2); }
.form-check-input:checked { background-color: var(--hr-primary); border-color: var(--hr-primary); }
.form-label { font-weight: 550; margin-bottom: .3rem; }
.form-text { color: var(--hr-muted); }
.input-validation-error { border-color: #b02a37 !important; }
.field-validation-error, .validation-summary-errors { color: #b02a37; font-size: .9rem; }

/* Cards / surfaces */
.card { border: 1px solid var(--hr-line); border-radius: var(--hr-radius); box-shadow: var(--hr-shadow); }
.card-header { background: transparent; border-bottom-color: var(--hr-line); font-weight: 620; }
.surface { background: var(--hr-card); border: 1px solid var(--hr-line); border-radius: var(--hr-radius); box-shadow: var(--hr-shadow); padding: 1.25rem; }
.list-group { border-radius: var(--hr-radius); box-shadow: var(--hr-shadow); }
.list-group-item { border-color: var(--hr-line); }
.list-group-item-action:hover { background: var(--hr-primary-soft); }

/* Tables */
.table { --bs-table-bg: var(--hr-card); --bs-table-hover-bg: #f4f6fd; margin-bottom: 0; vertical-align: middle; }
.table > thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--hr-muted); font-weight: 650; background: #f8f9fc; border-bottom-width: 1px; white-space: nowrap; }
.table-wrap { background: var(--hr-card); border: 1px solid var(--hr-line); border-radius: var(--hr-radius); box-shadow: var(--hr-shadow); overflow-x: auto; margin-bottom: 1rem; }
.table-wrap .table > :last-child > tr:last-child > * { border-bottom: 0; }

/* Badges / status */
.badge { font-weight: 600; letter-spacing: .01em; padding: .38em .6em; border-radius: 999px; }
.badge-soft { background: var(--hr-primary-soft); color: var(--hr-primary-dark); }
.badge.bg-secondary { background: #e8ebf2 !important; color: #3a4357 !important; }
.badge.bg-success { background: #dcf3e6 !important; color: #11643a !important; }
.badge.bg-warning { background: #fff1cc !important; color: #6b4e00 !important; }
.badge.bg-danger { background: #fde2e2 !important; color: #9b1c1c !important; }
.badge.bg-info { background: #ddf2f7 !important; color: #0b5567 !important; }
.badge.bg-primary { background: var(--hr-primary-soft) !important; color: var(--hr-primary-dark) !important; }
.badge.bg-dark { background: #2a3146 !important; color: #fff !important; }
.alert { border-radius: var(--hr-radius); border-width: 1px; }
.alert-success { --bs-alert-bg: #e7f6ee; --bs-alert-border-color: #b9e2cb; --bs-alert-color: #0f5132; }
.alert-danger { --bs-alert-bg: #fdecec; --bs-alert-border-color: #f3c2c2; --bs-alert-color: #842029; }

/* App shell */
.app { display: flex; min-height: 100vh; }
.sidebar { width: var(--hr-side-w); flex: 0 0 var(--hr-side-w); background: var(--hr-side-bg); color: var(--hr-side-ink); position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: .6rem; padding: 1.1rem 1.25rem; color: #fff; text-decoration: none; font-weight: 700; font-size: 1.12rem; letter-spacing: -.01em; }
.brand:hover { color: #fff; }
.brand-mark { width: 2rem; height: 2rem; flex: 0 0 auto; }
.brand small { display: block; font-weight: 500; font-size: .72rem; color: #9fb0dd; letter-spacing: .02em; }
.nav-section { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: #8e9cc6; padding: 1rem 1.25rem .35rem; }
.side-nav { list-style: none; margin: 0; padding: 0 .6rem; }
.side-nav a { display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border-radius: .5rem; color: var(--hr-side-ink); text-decoration: none; font-weight: 520; }
.side-nav a:hover { background: var(--hr-side-hover); color: #fff; }
.side-nav a[aria-current="page"] { background: var(--hr-primary); color: var(--hr-side-active); }
.side-nav .ico { width: 1.15rem; height: 1.15rem; opacity: .9; }
.sidebar-foot { margin-top: auto; padding: 1rem 1.25rem; font-size: .78rem; color: #8e9cc6; }
.ico { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; vertical-align: -.18em; }
.main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: .75rem; padding: .6rem 1.5rem; background: rgba(255, 255, 255, .92); backdrop-filter: blur(6px); border-bottom: 1px solid var(--hr-line); min-height: 3.6rem; }
.topbar .crumbs { flex: 1 1 auto; min-width: 0; }
.breadcrumb { margin: 0; font-size: .88rem; flex-wrap: nowrap; overflow: hidden; }
.breadcrumb-item { white-space: nowrap; }
.breadcrumb-item.active { color: var(--hr-ink); font-weight: 560; overflow: hidden; text-overflow: ellipsis; }
.icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: .6rem; color: var(--hr-ink); border: 1px solid transparent; background: transparent; }
.icon-btn:hover { background: var(--hr-primary-soft); color: var(--hr-primary-dark); }
.icon-btn .ico { width: 1.3rem; height: 1.3rem; }
.icon-btn .count { position: absolute; top: .15rem; right: .1rem; min-width: 1.15rem; height: 1.15rem; padding: 0 .25rem; border-radius: 999px; background: #c42b2b; color: #fff; font-size: .68rem; font-weight: 700; line-height: 1.15rem; text-align: center; }
.user-btn { display: inline-flex; align-items: center; gap: .55rem; border: 1px solid var(--hr-line); background: #fff; border-radius: 999px; padding: .2rem .7rem .2rem .2rem; color: var(--hr-ink); }
.user-btn:hover { border-color: #c5cbe0; }
.user-btn .who { font-weight: 560; font-size: .9rem; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.content { padding: 1.5rem; max-width: 82rem; width: 100%; }
.footer { padding: 1rem 1.5rem; color: var(--hr-muted); font-size: .8rem; margin-top: auto; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem; margin-bottom: 1.25rem; }
.page-head h1 { margin: 0; }
.page-head .sub { color: var(--hr-muted); margin: .25rem 0 0; }
@media (max-width: 991.98px) {
  .sidebar { position: fixed; z-index: 1045; left: 0; top: 0; transform: translateX(-100%); transition: transform .2s ease; visibility: hidden; }
  .sidebar.open { transform: none; visibility: visible; box-shadow: 0 0 2rem rgba(0, 0, 0, .3); }
  .sidebar-backdrop { position: fixed; inset: 0; background: rgba(16, 26, 58, .45); z-index: 1040; }
  .content { padding: 1rem; }
  .topbar { padding: .5rem 1rem; }
  .user-btn .who { display: none; }
}
@media (min-width: 992px) { .nav-toggle { display: none !important; } .sidebar-backdrop { display: none !important; } }

.empty-line { display: flex; align-items: center; gap: .5rem; margin: 0 0 1rem; padding: .5rem .85rem; background: var(--hr-card); border: 1px solid var(--hr-line); border-radius: var(--hr-radius); color: var(--hr-muted); font-size: .9rem; }
.empty-line .ico { color: #1c8a4e; }

/* Reviews by year */
.year-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: .9rem; margin-bottom: 1.5rem; }
.year-card { display: flex; flex-direction: column; gap: .45rem; padding: .95rem 1.05rem; background: var(--hr-card); border: 1px solid var(--hr-line); border-radius: var(--hr-radius); box-shadow: var(--hr-shadow); color: inherit; text-decoration: none; }
a.year-card:hover { border-color: #c5cbe0; box-shadow: 0 4px 14px rgba(16, 26, 58, .08); color: inherit; }
.year-card.active { border-color: var(--hr-primary); box-shadow: 0 0 0 2px rgba(var(--hr-primary-rgb), .18); }
.year-card .year { font-size: 1.45rem; font-weight: 700; line-height: 1.1; }
.year-card .meta { color: var(--hr-muted); font-size: .85rem; }
.year-card .chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 600; background: #eef0f5; color: var(--hr-muted); }
.chip.ok { background: #e3f4ea; color: #17673b; } .chip.open { background: #fff3d6; color: #8a5a00; }
.year-head { display: flex; align-items: baseline; gap: .6rem; margin: 1.5rem 0 .6rem; }
.year-head h3 { margin: 0; font-size: 1.1rem; }
.nav-tabs .nav-link { color: var(--hr-muted); font-weight: 600; } .nav-tabs .nav-link.active { color: var(--hr-ink); }
.nav-tabs .count { margin-left: .35rem; font-weight: 600; font-size: .75rem; color: var(--hr-muted); }

/* Review: question by question */
.qa { margin-bottom: 1rem; }
.qa .card-header { font-weight: 650; background: var(--hr-card); }
.qa .card-header .qn { color: var(--hr-muted); font-weight: 600; margin-right: .4rem; }
.qa-resp { padding: .75rem 1rem; border-top: 1px solid var(--hr-line); }
.qa-resp:first-child { border-top: 0; }
.qa-resp.self { background: var(--hr-primary-soft); border-left: 3px solid var(--hr-primary); }
.qa-who { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .3rem; font-size: .85rem; color: var(--hr-muted); }
.qa-who .role { font-weight: 650; color: var(--hr-ink); text-transform: uppercase; font-size: .72rem; letter-spacing: .04em; }
.rating { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; font-size: .85rem; }
.rating .num { display: inline-flex; align-items: center; justify-content: center; min-width: 1.75rem; height: 1.75rem; padding: 0 .35rem; border-radius: 999px; background: var(--hr-primary); color: #fff; font-weight: 700; }
.view-switch { display: inline-flex; gap: .25rem; }
@media print { .qa-resp.self { background: none; } .rating .num { background: none; color: inherit; border: 1px solid #888; } }

/* Avatars */
.avatar { --size: 2.25rem; width: var(--size); height: var(--size); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 650; font-size: calc(var(--size) * .4); color: #fff; background: var(--hr-primary); flex: 0 0 auto; letter-spacing: .02em; }
.avatar-sm { --size: 1.9rem; } .avatar-lg { --size: 3.5rem; } .avatar-xl { --size: 4.5rem; }
.av-0 { background: #3446c4; } .av-1 { background: #0d7c72; } .av-2 { background: #8a3fb8; } .av-3 { background: #b4532a; } .av-4 { background: #2b6cb0; } .av-5 { background: #a12f5e; } .av-6 { background: #4a6b1f; } .av-7 { background: #5a4fcf; }
.person { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.person .name { font-weight: 580; color: var(--hr-ink); text-decoration: none; }
a.name:hover { color: var(--hr-primary); text-decoration: underline; }
.person .meta { color: var(--hr-muted); font-size: .85rem; }

/* Dashboard */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat { display: flex; gap: .9rem; align-items: center; padding: 1rem 1.1rem; background: var(--hr-card); border: 1px solid var(--hr-line); border-radius: var(--hr-radius); box-shadow: var(--hr-shadow); color: inherit; text-decoration: none; }
a.stat:hover { border-color: #c5cbe0; box-shadow: 0 4px 14px rgba(16, 26, 58, .08); color: inherit; }
.stat .stat-ico { width: 2.6rem; height: 2.6rem; border-radius: .7rem; display: inline-flex; align-items: center; justify-content: center; background: var(--hr-primary-soft); color: var(--hr-primary); flex: 0 0 auto; }
.stat .stat-ico.teal { background: #e0f3f1; color: var(--hr-accent); } .stat .stat-ico.amber { background: #fff3d6; color: #8a5a00; } .stat .stat-ico.rose { background: #fde7ec; color: #a12f5e; }
.stat .value { font-size: 1.55rem; font-weight: 700; line-height: 1.1; }
.stat .label { color: var(--hr-muted); font-size: .85rem; }
.task-list .list-group-item { display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem; }
.due { font-size: .82rem; white-space: nowrap; }

/* Empty states */
.empty { text-align: center; padding: 2.5rem 1rem; color: var(--hr-muted); background: var(--hr-card); border: 1px dashed #cdd3e2; border-radius: var(--hr-radius); }
.empty .ico { width: 2.4rem; height: 2.4rem; color: #9aa5c4; margin-bottom: .5rem; }
.empty .title { font-weight: 620; color: var(--hr-ink); margin-bottom: .2rem; }

/* Toolbar (search/filter) + pagination */
.toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.toolbar .search { position: relative; flex: 1 1 16rem; max-width: 26rem; }
.toolbar .search .ico { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--hr-muted); }
.toolbar .search input { padding-left: 2.2rem; }
.pagination { --bs-pagination-active-bg: var(--hr-primary); --bs-pagination-active-border-color: var(--hr-primary); --bs-pagination-color: var(--hr-primary); margin: 0; }
.pager { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; color: var(--hr-muted); font-size: .88rem; }

/* Progress */
.progress { height: .55rem; border-radius: 999px; background: #e7eaf3; }
.progress-bar { background: var(--hr-primary); }
progress.bar { appearance: none; width: 100%; height: .55rem; border: 0; border-radius: 999px; background: #e7eaf3; overflow: hidden; vertical-align: middle; }
progress.bar::-webkit-progress-bar { background: #e7eaf3; border-radius: 999px; }
progress.bar::-webkit-progress-value { background: var(--hr-primary); border-radius: 999px; }
progress.bar::-moz-progress-bar { background: var(--hr-primary); border-radius: 999px; }
progress.bar.done::-webkit-progress-value { background: #1c8a4e; } progress.bar.done::-moz-progress-bar { background: #1c8a4e; }
.steps { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0 0 1rem; }
.steps li { display: flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 999px; background: #eef0f6; color: var(--hr-muted); font-size: .82rem; font-weight: 560; }
.steps li.done { background: #dcf3e6; color: #11643a; } .steps li.current { background: var(--hr-primary); color: #fff; }

/* Org chart */
.org-tree, .org-tree ul { list-style: none; margin: 0; padding: 0; }
.org-tree ul { margin-left: 1.2rem; padding-left: 1.1rem; border-left: 2px solid #dfe3ee; }
.org-tree li { position: relative; padding: .3rem 0; }
.org-tree ul > li::before { content: ""; position: absolute; left: -1.1rem; top: 1.55rem; width: 1rem; border-top: 2px solid #dfe3ee; }
.org-node { display: inline-flex; align-items: center; gap: .6rem; background: var(--hr-card); border: 1px solid var(--hr-line); border-radius: .7rem; padding: .45rem .8rem .45rem .5rem; box-shadow: var(--hr-shadow); min-width: 15rem; max-width: 100%; }
.org-node .name { font-weight: 600; } .org-node .name a { color: var(--hr-ink); text-decoration: none; } .org-node .name a:hover { color: var(--hr-primary); text-decoration: underline; }
.org-node .meta { color: var(--hr-muted); font-size: .82rem; }
.org-node.is-me { border-color: var(--hr-primary); box-shadow: 0 0 0 2px rgba(var(--hr-primary-rgb), .2); }
.org-toggle { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid var(--hr-line); background: #fff; display: inline-flex; align-items: center; justify-content: center; color: var(--hr-muted); padding: 0; flex: 0 0 auto; }
.org-toggle:hover { color: var(--hr-primary); border-color: var(--hr-primary); }
.org-toggle .ico { width: .9rem; height: .9rem; transition: transform .15s; }
.org-toggle[aria-expanded="false"] .ico { transform: rotate(-90deg); }
.org-count { font-size: .75rem; color: var(--hr-muted); background: #eef0f6; border-radius: 999px; padding: .05rem .5rem; }
.org-spacer { width: 1.6rem; flex: 0 0 auto; }

/* Auth pages */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; background: radial-gradient(1200px 600px at 10% -10%, #dfe5ff 0, transparent 60%), radial-gradient(900px 500px at 110% 110%, #d9f1ee 0, transparent 55%), var(--hr-bg); }
.auth-card { width: 100%; max-width: 27rem; background: #fff; border: 1px solid var(--hr-line); border-radius: 1rem; box-shadow: 0 10px 40px rgba(16, 26, 58, .1); padding: 2rem; }
.auth-card.wide { max-width: 34rem; }
.auth-brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.2rem; color: var(--hr-ink); margin-bottom: 1.5rem; text-decoration: none; }
.auth-card h1 { font-size: 1.4rem; margin-bottom: .35rem; }
.auth-card .lead-text { color: var(--hr-muted); margin-bottom: 1.25rem; }
.auth-foot { text-align: center; color: var(--hr-muted); font-size: .8rem; margin-top: 1.25rem; }
.otp-input { font-size: 1.5rem; letter-spacing: .5em; text-align: center; font-variant-numeric: tabular-nums; }
.qr { display: inline-block; background: #fff; padding: .75rem; border: 1px solid var(--hr-line); border-radius: .7rem; }
.qr svg { width: 11rem; height: 11rem; display: block; }
.secret, #shared-key { display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: #f3f4f9; border: 1px solid var(--hr-line); border-radius: .5rem; padding: .4rem .6rem; word-break: break-all; color: var(--hr-ink); }
.step-list { counter-reset: s; list-style: none; padding: 0; }
.step-list > li { counter-increment: s; position: relative; padding-left: 2.3rem; margin-bottom: 1rem; }
.step-list > li::before { content: counter(s); position: absolute; left: 0; top: -.05rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--hr-primary-soft); color: var(--hr-primary-dark); font-weight: 700; font-size: .85rem; display: flex; align-items: center; justify-content: center; }
.pw-rules { font-size: .85rem; color: var(--hr-muted); padding-left: 1.1rem; margin-bottom: 1rem; }

/* Definition lists / profile */
.kv dt { color: var(--hr-muted); font-weight: 560; font-size: .88rem; }
.kv dd { margin-bottom: .6rem; }
.profile-panel { --bs-offcanvas-width: min(34rem, 100vw); }
.profile-panel .offcanvas-header { border-bottom: 1px solid var(--hr-line); }
.panel-list .list-group-item { display: flex; align-items: center; gap: .6rem; font-weight: 560; }
.panel-list .list-group-item .chev { margin-left: auto; color: var(--hr-muted); transform: rotate(-90deg); }
.panel-list .list-group-item .hint { font-weight: 400; color: var(--hr-muted); font-size: .8rem; }
.profile-head { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }

/* Error pages */
.error-page { text-align: center; padding: 4rem 1rem; }
.error-page .code { font-size: 4rem; font-weight: 800; color: var(--hr-primary); line-height: 1; letter-spacing: -.03em; }

/* Print: reviews and other detail pages print cleanly */
@media print {
  .sidebar, .topbar, .footer, .no-print, button.btn, a.btn, .sidebar-backdrop, .toolbar, .pager { display: none !important; }
  .app { display: block; background: none !important; }
  body, .content { background: #fff !important; padding: 0 !important; max-width: none; }
  .card, .surface, .table-wrap, .list-group { box-shadow: none !important; border-color: #bbb !important; break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
  .print-only { display: block !important; }
}
.print-only { display: none; }
.min-w-0 { min-width: 0; }
@media (min-width: 992px) { .app { background: linear-gradient(to right, var(--hr-side-bg) var(--hr-side-w), transparent 0); } }
fieldset.card > .card-body > legend, .card legend { float: none; width: auto; padding: 0; }
fieldset.card { min-width: 0; }
/* Plain tables placed directly on a page get the same surface as wrapped ones. */
.content > .table, .content > form > .table, .content > div > .table:not(.table-wrap .table) { background: var(--hr-card); border: 1px solid var(--hr-line); box-shadow: var(--hr-shadow); }
.content h2 { margin-top: .5rem; }
.page-head + p.text-muted { margin-top: -.75rem; margin-bottom: 1.25rem; }
/* template builder */
.scope-card { cursor: pointer; }
.scope-card:has(input:checked) { border-color: var(--bs-primary); }
.q-summary span { margin-right: .35rem; }
.timeline { border-left: 2px solid var(--bs-border-color); margin-left: .9rem; padding-left: 1.25rem; }
.timeline-step { padding-bottom: 1rem; }
.timeline-num { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--bs-light); border: 1px solid var(--bs-border-color); font-size: .8rem; margin-left: -2.15rem; margin-right: .5rem; }
/* score radar (inline SVG, colours via classes only) */
.radar-svg { width: 100%; max-width: 820px; height: auto; display: block; margin: 0 auto; }
.radar-ring { fill: none; stroke: #dfe3ea; stroke-width: 1; }
.radar-axis { stroke: #e5e8ee; stroke-width: 1; }
.radar-label { font-size: 12px; fill: #5b6475; }
.radar-area { fill-opacity: .12; stroke-width: 2.5; }
.radar-dot { stroke: #fff; stroke-width: 1.5; }
.radar-self .radar-area { fill: #6f63e8; stroke: #6f63e8; } .radar-self .radar-dot, .radar-key.radar-self rect { fill: #6f63e8; }
.radar-manager .radar-area { fill: #2f7d6d; stroke: #2f7d6d; } .radar-manager .radar-dot, .radar-key.radar-manager rect { fill: #2f7d6d; }
.radar-additionalmanagers .radar-area { fill: #6aa6c8; stroke: #6aa6c8; } .radar-additionalmanagers .radar-dot, .radar-key.radar-additionalmanagers rect { fill: #6aa6c8; }
.radar-directreports .radar-area { fill: #d98a2b; stroke: #d98a2b; } .radar-directreports .radar-dot, .radar-key.radar-directreports rect { fill: #d98a2b; }
.radar-peers .radar-area { fill: #c2477a; stroke: #c2477a; } .radar-peers .radar-dot, .radar-key.radar-peers rect { fill: #c2477a; }
.radar-anonymous .radar-area { fill: #7a8291; stroke: #7a8291; } .radar-anonymous .radar-dot, .radar-key.radar-anonymous rect { fill: #7a8291; }
.radar-legend { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; align-items: center; }
.radar-key { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; }
.radar-swatch { width: 12px; height: 12px; }
/* level selector tooltips (CSS only; also exposed via aria-describedby) */
.level-pick { position: relative; display: inline-block; }
.level-tip { display: none; position: absolute; z-index: 20; left: 0; top: calc(100% + 6px); width: 18rem; padding: .5rem .65rem; border-radius: .4rem; background: #1f2433; color: #fff; font-size: .8rem; line-height: 1.35; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.level-pick:hover .level-tip, .level-pick .btn-check:focus-visible ~ .level-tip { display: block; }
.capability-desc { font-style: italic; }
.level-list dt { font-weight: 600; } .level-list dd { margin-bottom: .35rem; }
/* review results: capability text, score table, response cards (classes only; CSP forbids inline styles) */
.cap { display: flex; flex-direction: column; gap: .15rem; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.cap-group { font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--hr-muted); }
.cap-heading { font-weight: 650; color: var(--hr-ink); line-height: 1.35; }
.cap-points { margin-top: .2rem; font-size: .85rem; font-weight: 400; }
.cap-points summary { cursor: pointer; color: var(--hr-primary); font-weight: 600; font-size: .8rem; width: max-content; }
.cap-points ul { margin: .35rem 0 0; padding-left: 1.1rem; color: var(--hr-muted); line-height: 1.45; }
.cap-points li { margin-bottom: .15rem; }
.cap-points li::marker { color: #b3b9c7; }
.score-table-wrap { border: 1px solid var(--hr-line); border-radius: var(--hr-radius); }
.score-table { --bs-table-bg: transparent; margin: 0; }
.score-table caption { caption-side: bottom; padding: .5rem .75rem; }
.score-table thead th { position: sticky; top: 0; z-index: 1; background: #f7f8fb; border-bottom: 1px solid var(--hr-line); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--hr-muted); padding: .6rem .75rem; vertical-align: bottom; }
.score-table th.cap-col { width: 100%; min-width: 16rem; }
.score-table th.persp-col { text-align: center; white-space: nowrap; }
.persp-key { display: inline-flex; align-items: center; gap: .3rem; }
.persp-key.radar-self rect { fill: #6f63e8; } .persp-key.radar-manager rect { fill: #2f7d6d; } .persp-key.radar-additionalmanagers rect { fill: #6aa6c8; }
.persp-key.radar-directreports rect { fill: #d98a2b; } .persp-key.radar-peers rect { fill: #c2477a; } .persp-key.radar-anonymous rect { fill: #7a8291; }
.score-table tbody th, .score-table tbody td { padding: .75rem; border-bottom: 1px solid var(--hr-line); vertical-align: top; }
.score-table tbody tr:nth-child(even) { background: #fafbfd; }
.score-table tbody tr:hover { background: var(--hr-primary-soft); }
.score-table .cap-cell { font-weight: 400; }
.score-table .score-col { text-align: center; white-space: nowrap; padding-top: .8rem; }
.score-pill { display: inline-flex; align-items: baseline; justify-content: center; gap: .05rem; min-width: 3.1rem; padding: .2rem .55rem; border-radius: 999px; font-weight: 700; font-size: .85rem; font-variant-numeric: tabular-nums; background: #eef0f5; color: var(--hr-ink); }
.score-pill .of { font-weight: 500; font-size: .72rem; opacity: .75; }
.score-pill.tone-hi { background: #dff3e7; color: #135c34; } .score-pill.tone-good { background: #e1effa; color: #17507a; }
.score-pill.tone-mid { background: #fff1d1; color: #7a4f00; } .score-pill.tone-low { background: #fde3e3; color: #9b1c1c; }
.score-pill.strong { font-size: .95rem; min-width: 3.4rem; box-shadow: inset 0 0 0 1.5px currentColor; }
.score-none { color: var(--hr-muted); }
.score-table .overall-row th, .score-table .overall-row td { background: #f2f4fb; border-top: 2px solid #d5daea; padding: .75rem; font-weight: 700; }
.score-table .overall-row .of { font-weight: 500; color: var(--hr-muted); font-size: .85rem; }
@media (max-width: 575.98px) {
  .score-table thead { display: none; }
  .score-table, .score-table tbody, .score-table tfoot, .score-table tr { display: block; width: 100%; }
  .score-table tr { padding: .6rem .75rem; border-bottom: 1px solid var(--hr-line); }
  .score-table tbody th, .score-table tbody td, .score-table .overall-row th, .score-table .overall-row td { display: flex; justify-content: space-between; align-items: center; border: 0; padding: .25rem 0; background: transparent; }
  .score-table .cap-cell { display: block; padding-bottom: .5rem; }
  .score-table td[data-label]::before { content: attr(data-label); font-size: .78rem; font-weight: 600; color: var(--hr-muted); }
  .score-table th.cap-col { min-width: 0; }
}
.qa-head { display: flex; align-items: flex-start; gap: .25rem; font-weight: 400 !important; }
.qa-head .qn { padding-top: 0; }
.qa-head:has(.cap-group) .qn { padding-top: 1.05rem; }
.qa-head .cap { flex: 1; }
.resp-list { display: flex; flex-direction: column; gap: .6rem; padding: .75rem; }
.resp { border: 1px solid var(--hr-line); border-left: 4px solid #c3c8d4; border-radius: .5rem; background: #fff; padding: .7rem 1rem .8rem; }
.resp-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.resp-name { font-weight: 600; font-size: .9rem; color: var(--hr-ink); }
.resp-score { display: inline-flex; align-items: center; gap: .4rem; }
.resp-score-label { font-size: .8rem; font-weight: 600; color: var(--hr-muted); }
.resp-body { max-width: 80ch; line-height: 1.55; overflow-wrap: anywhere; word-break: break-word; }
.resp-body p { margin: 0 0 .5rem; white-space: pre-wrap; } .resp-body p:last-child { margin-bottom: 0; }
.resp-body.muted { color: var(--hr-muted); font-style: italic; }
.role-chip { display: inline-flex; align-items: center; padding: .12rem .55rem; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: #eef0f5; color: #4a5263; }
.role-chip.role-self { background: #ecebfd; color: #4b3fc4; } .resp.role-self { border-left-color: #6f63e8; background: #faf9ff; }
.role-chip.role-manager { background: #e2f1ed; color: #1f5f52; } .resp.role-manager { border-left-color: #2f7d6d; }
.role-chip.role-addmanager { background: #e5f0f7; color: #2f6a8c; } .resp.role-addmanager { border-left-color: #6aa6c8; }
.role-chip.role-direct { background: #fcefdf; color: #8a4f0b; } .resp.role-direct { border-left-color: #d98a2b; }
.role-chip.role-peer { background: #f9e4ed; color: #962f5a; } .resp.role-peer { border-left-color: #c2477a; }
.role-chip.role-anon { background: #eceef2; color: #4f5664; } .resp.role-anon { border-left-color: #7a8291; }
@media print {
  .score-table thead th { position: static; }
  .resp { break-inside: avoid; background: none; }
  .score-pill, .role-chip { background: none !important; border: 1px solid #888; color: inherit !important; }
}
/* template builder: question cards and calibration scope */
.question-list { display: flex; flex-direction: column; gap: .6rem; }
.qcard { margin: 0; }
.qcard-body { display: flex; gap: .85rem; align-items: flex-start; padding: .85rem 1rem; }
.qnum { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--hr-primary-soft); color: var(--hr-primary); font-weight: 700; font-size: .85rem; }
.qnum.sm { width: 1.6rem; height: 1.6rem; font-size: .78rem; }
.qcard-main { flex: 1; min-width: 0; }
.qtext { display: flex; flex-direction: column; gap: .15rem; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.qtext-title { font-weight: 650; font-size: 1rem; color: var(--hr-ink); line-height: 1.35; }
.qtext-desc { color: var(--hr-muted); font-size: .88rem; line-height: 1.45; max-width: 80ch; }
.qtext-full { white-space: pre-line; line-height: 1.45; }
.qtext-levels { margin-top: .4rem; font-size: .85rem; }
.qtext-levels summary, .cal-body .cap-points summary { cursor: pointer; color: var(--hr-primary); font-weight: 600; font-size: .8rem; width: max-content; }
.level-rows { list-style: none; margin: .45rem 0 0; padding: 0; border: 1px solid var(--hr-line); border-radius: .5rem; overflow: hidden; }
.level-rows li { display: grid; grid-template-columns: 1.6rem 10rem 1fr; gap: .6rem; align-items: start; padding: .45rem .65rem; border-top: 1px solid var(--hr-line); line-height: 1.4; }
.level-rows li:first-child { border-top: 0; }
.level-rows li:nth-child(even) { background: #fafbfd; }
.level-num { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #eef0f5; font-weight: 700; font-size: .75rem; color: var(--hr-ink); }
.level-rows li:nth-child(1) .level-num { background: #fde3e3; color: #9b1c1c; } .level-rows li:nth-child(2) .level-num { background: #fff1d1; color: #7a4f00; }
.level-rows li:nth-child(3) .level-num { background: #fdf6d8; color: #6b5800; } .level-rows li:nth-child(4) .level-num { background: #e1effa; color: #17507a; }
.level-rows li:nth-child(5) .level-num { background: #dff3e7; color: #135c34; } .level-rows li:nth-child(6) .level-num { background: #d3ecdf; color: #0e4a29; }
.level-name { font-weight: 650; padding-top: .1rem; }
.level-desc { color: #3d4557; overflow-wrap: anywhere; }
@media (max-width: 575.98px) { .level-rows li { grid-template-columns: 1.6rem 1fr; } .level-desc { grid-column: 2; } }
.qmeta { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; }
.meta-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 550; background: #f1f3f7; color: var(--hr-muted); border: 1px solid var(--hr-line); }
.meta-chip .meta-k { font-weight: 700; color: var(--hr-ink); }
.meta-chip.req { background: var(--hr-primary-soft); color: var(--hr-primary-dark); border-color: #d5dbf5; }
.meta-chip.ok { background: #e3f4ea; color: #17673b; border-color: #c9e8d5; }
.meta-chip.warn { background: #fff3d6; color: #7a4f00; border-color: #f2dfae; }
.meta-chip .ico { width: .85rem; height: .85rem; }
.qactions { flex: none; display: flex; gap: .3rem; }
.qactions form { margin: 0; }
.btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: .45rem; border: 1px solid var(--hr-line); background: #fff; color: var(--hr-muted); padding: 0; text-decoration: none; }
.btn-icon:hover, .btn-icon:focus-visible { color: var(--hr-primary); border-color: var(--hr-primary); background: var(--hr-primary-soft); }
.btn-icon .ico { width: 1rem; height: 1rem; }
@media (max-width: 575.98px) { .qcard-body { flex-wrap: wrap; } .qactions { width: 100%; justify-content: flex-end; } }
.cal-toggle { padding: .85rem 1rem; display: flex; flex-direction: column; gap: .35rem; }
.cal-toggle .form-check-input { width: 2.4em; height: 1.3em; }
.cal-list { display: flex; flex-direction: column; gap: .5rem; }
.cal-item { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem 1rem; border: 1px solid var(--hr-line); border-radius: .55rem; background: #fff; }
.cal-item:has(.cal-check:checked) { border-color: #b9c2ef; background: #f8f9ff; }
.cal-check.form-check-input { flex: none; width: 1.3rem; height: 1.3rem; margin: .2rem 0 0; cursor: pointer; }
.cal-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; align-items: flex-start; }
.cal-label { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; width: 100%; }
.cal-off-note { display: none; }
.builder-section:has(#CalibrationEnabled:not(:checked)) .cal-off-note { display: block; }
.builder-section:has(#CalibrationEnabled:not(:checked)) .cal-settings { display: none; }
.qpreview { padding: .6rem .8rem; border: 1px dashed var(--hr-line); border-radius: .5rem; background: #fafbfd; }
.qpreview-k { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--hr-muted); margin-bottom: .25rem; }
.cal-scope-legend { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .85rem; }
.cal-scope-legend li { display: inline-flex; align-items: center; gap: .4rem; overflow-wrap: anywhere; }
.cal-scope-legend .qnum.sm { width: auto; padding: 0 .45rem; border-radius: 999px; }
/* review admin sub-navigation */
.admin-subnav { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; padding: .3rem; background: #fff; border: 1px solid var(--hr-line); border-radius: .65rem; width: max-content; max-width: 100%; }
.admin-subnav-link { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .9rem; border-radius: .45rem; font-weight: 600; color: var(--hr-muted); text-decoration: none; }
.admin-subnav-link:hover { background: var(--hr-primary-soft); color: var(--hr-primary); }
.admin-subnav-link.active { background: var(--hr-primary); color: #fff; }
.admin-subnav-link .ico { width: 1rem; height: 1rem; }
.danger-zone { border-color: #f1c7c7; }
.delete-confirm > summary { list-style: none; width: max-content; }
.delete-confirm > summary::-webkit-details-marker { display: none; }
.delete-confirm[open] > summary { opacity: .7; }
/* participant picker */
.pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .4rem; max-height: 28rem; overflow-y: auto; padding: .15rem; }
.pick-item { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border: 1px solid var(--hr-line); border-radius: .5rem; background: #fff; }
.pick-item:has(.pick-check:checked) { border-color: #b9c2ef; background: #f8f9ff; }
.pick-check.form-check-input { flex: none; width: 1.15rem; height: 1.15rem; margin: 0; cursor: pointer; }
.pick-label { display: flex; align-items: center; gap: .55rem; cursor: pointer; min-width: 0; flex: 1; }
.pick-name { font-weight: 600; }
.pick-meta { display: block; font-size: .78rem; color: var(--hr-muted); overflow-wrap: anywhere; }
/* write review */
.wq { border-left: 4px solid var(--hr-line); }
.wq.is-done { border-left-color: #8fd0a9; }
.wq-head { display: flex; gap: .75rem; align-items: flex-start; float: none; width: 100%; margin-bottom: .5rem; font-size: 1rem; }
.wq-titles { display: flex; flex-direction: column; gap: .2rem; min-width: 0; flex: 1; overflow-wrap: anywhere; }
.wq-title { font-weight: 650; font-size: 1.05rem; line-height: 1.35; color: var(--hr-ink); }
.wq-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.wq-desc { color: var(--hr-muted); line-height: 1.5; max-width: 80ch; margin: 0 0 .75rem 2.65rem; overflow-wrap: anywhere; }
.wq .cap-points { margin-left: 2.65rem; }
.rate { margin: .25rem 0 .5rem; }
.rate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: .4rem; }
.rate-opt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; min-height: 3.6rem; padding: .45rem .4rem; border: 1.5px solid var(--hr-line);
  border-radius: .55rem; background: #fff; cursor: pointer; text-align: center; line-height: 1.2; transition: border-color .12s, background-color .12s; }
.rate-opt:hover { border-color: var(--hr-primary); background: var(--hr-primary-soft); }
.rate-num { font-weight: 800; font-size: 1.05rem; color: var(--hr-primary); }
.rate-label { font-size: .76rem; font-weight: 600; color: var(--hr-ink); overflow-wrap: anywhere; }
.rate-opt.na .rate-num { color: var(--hr-muted); font-size: .9rem; }
.btn-check:checked + .rate-opt { border-color: var(--hr-primary); background: var(--hr-primary); box-shadow: 0 0 0 3px rgba(var(--hr-primary-rgb), .18); }
.btn-check:checked + .rate-opt .rate-num, .btn-check:checked + .rate-opt .rate-label { color: #fff; }
.btn-check:focus-visible + .rate-opt { outline: 3px solid rgba(var(--hr-primary-rgb), .55); outline-offset: 2px; }
.btn-check:disabled + .rate-opt { cursor: default; opacity: .75; }
.rate-selected { margin-top: .5rem; padding: .55rem .75rem; border-radius: .5rem; background: #f7f8fb; border: 1px solid var(--hr-line); font-size: .88rem; line-height: 1.45; }
.rate-selected p { margin: 0; }
.sel-desc { display: none; }
.rate:has(.btn-check:checked) .rate-hint { display: none; }
.rate:has(.btn-check[value="1"]:checked) .sel-desc-1, .rate:has(.btn-check[value="2"]:checked) .sel-desc-2, .rate:has(.btn-check[value="3"]:checked) .sel-desc-3,
.rate:has(.btn-check[value="4"]:checked) .sel-desc-4, .rate:has(.btn-check[value="5"]:checked) .sel-desc-5, .rate:has(.btn-check[value="6"]:checked) .sel-desc-6,
.rate:has(.btn-check[value="7"]:checked) .sel-desc-7, .rate:has(.btn-check[value="8"]:checked) .sel-desc-8, .rate:has(.btn-check[value="9"]:checked) .sel-desc-9,
.rate:has(.btn-check[value="10"]:checked) .sel-desc-10 { display: block; }
.rate-hint { color: var(--hr-muted); font-style: italic; }
.wq-comment { field-sizing: content; min-height: 6rem; max-height: 30rem; line-height: 1.5; }
.write-bar { z-index: 5; box-shadow: 0 -4px 12px rgba(16, 26, 58, .06); }
@media (max-width: 575.98px) { .rate-grid { grid-template-columns: repeat(2, 1fr); } .wq-desc, .wq .cap-points { margin-left: 0; } }
/* review progress dashboards (SVG/CSS only; colours follow the radar scheme) */
.dash-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.dash-card { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; }
.dash-card .value { font-size: 1.35rem; font-weight: 700; line-height: 1.2; }
.dash-card .label { color: var(--hr-muted); font-size: .85rem; }
.dash-card.dash-alert .value { color: #b8323b; }
.donut { width: 92px; height: 92px; flex: none; }
.donut-track { fill: none; stroke: #e6e9f0; stroke-width: 14; }
.donut-value { fill: none; stroke: #2f7d6d; stroke-width: 14; stroke-linecap: butt; }
.donut-text { font-size: 22px; font-weight: 700; fill: var(--hr-ink); }
.hbars { width: 100%; max-width: 660px; height: auto; display: block; }
.hbar-label, .hbar-count { font-size: 12px; fill: #4b5466; }
.hbar-track { fill: #eceff5; }
.hbar-value.bar-done { fill: #2f7d6d; }
.trend { width: 100%; max-width: 640px; height: auto; display: block; }
.trend-grid { stroke: #e5e8ee; stroke-width: 1; }
.trend-axis { font-size: 11px; fill: #6b7385; }
.trend-line { fill: none; stroke: #6f63e8; stroke-width: 2.5; }
.trend-prev { fill: none; stroke: #7a8291; stroke-width: 2; stroke-dasharray: 5 4; }
.trend-dot { fill: #6f63e8; stroke: #fff; stroke-width: 1.5; }
.trend-legend { display: flex; gap: 1rem; margin-top: .35rem; }
.trend-legend .key::before { content: ""; display: inline-block; width: 18px; height: 0; border-top: 3px solid #6f63e8; vertical-align: middle; margin-right: .35rem; }
.trend-legend .key-prev::before { border-top: 2px dashed #7a8291; }
.steps { display: flex; flex-wrap: wrap; gap: .25rem .6rem; list-style: none; margin: 0; padding: 0; }
.step { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; color: var(--hr-ink); white-space: nowrap; }
.step-dot { width: .7rem; height: .7rem; border-radius: 50%; display: inline-block; border: 2px solid #c5cad6; background: #fff; }
.st-done .step-dot { background: #2f7d6d; border-color: #2f7d6d; }
.st-progress .step-dot { background: #fff; border-color: #6f63e8; box-shadow: inset 0 0 0 2px #6f63e8; }
.st-overdue .step-dot { background: #b8323b; border-color: #b8323b; }
.st-overdue .step-name { color: #b8323b; font-weight: 600; }
.st-hidden .step-dot { background: repeating-linear-gradient(45deg, #c5cad6 0 2px, #fff 2px 4px); border-color: #9aa1b1; }
.st-todo .step-name { color: var(--hr-muted); }
.steps-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.team-tree { padding: .5rem 1rem; }
.team-node { margin: .25rem 0 .25rem .25rem; }
.team-node .team-node { margin-left: 1.5rem; border-left: 2px solid var(--hr-line); padding-left: .75rem; }
.team-node > summary { display: flex; align-items: center; gap: .75rem; cursor: pointer; padding: .35rem 0; }
.team-name { font-weight: 650; min-width: 12rem; }
.team-meta { color: var(--hr-muted); font-size: .85rem; min-width: 14rem; }
.team-bar { width: 12rem; }
.team-pct { font-weight: 650; font-size: .85rem; }
.team-people { list-style: none; margin: .25rem 0 .5rem 1.25rem; padding: 0; }
.team-people li { display: grid; grid-template-columns: 12rem 1fr auto; gap: .75rem; align-items: center; padding: .3rem 0; border-bottom: 1px solid #f0f2f6; }
.team-people li.late .person-name { color: #b8323b; }