/* The HR interface, scoped to .hr: shared by the lab (index.html) and Minister's Staff tab (lab/04-pms). */

.hr {
  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface-2: #fbfbfd;
  --sidebar: rgba(240, 240, 243, 0.82);
  --fill: rgba(118, 118, 128, 0.12);
  --fill-2: rgba(118, 118, 128, 0.08);
  --hairline: rgba(60, 60, 67, 0.14);
  --label: #1d1d1f;
  --secondary: #6e6e73;
  --tertiary: #a1a1a6;
  --accent: #0071e3;
  --accent-soft: rgba(0, 113, 227, 0.1);
  --green: #28a745;
  --orange: #f08c00;
  --red: #e5383b;
  --yellow: #d4a106;
  --indigo: #5856d6;
  --gray: #8e8e93;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.06);
  --radius: 14px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
  --serif: "New York", "Iowan Old Style", "Charter", Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  .hr, .hr.hr-sheet {
    --bg: #000000; --surface: #1c1c1e; --surface-2: #232325; --sidebar: rgba(28, 28, 30, 0.82);
    --fill: rgba(118, 118, 128, 0.24); --fill-2: rgba(118, 118, 128, 0.16); --hairline: rgba(84, 84, 88, 0.55);
    --label: #f5f5f7; --secondary: #98989d; --tertiary: #636366;
    --accent: #0a84ff; --accent-soft: rgba(10, 132, 255, 0.16);
    --green: #30d158; --orange: #ff9f0a; --red: #ff453a; --yellow: #ffd60a; --indigo: #7d7aff; --gray: #8e8e93;
    --shadow: none; --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}
.hr button { font: inherit; color: inherit; }
.hr [hidden] { display: none !important; }
.hr .i {
  display: inline-block; width: 1.15em; height: 1.15em; flex: none;
  background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat;
}
.hr .badge {
  min-width: 20px; padding: 0 6px; border-radius: 10px; font-size: 12px; font-weight: 600; line-height: 20px; text-align: center;
  background: var(--red); color: #fff;
}
.hr .actor { display: flex; flex-direction: column; gap: 6px; padding: 0 4px; }
.hr .actor .label, .hr .clock .label { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--secondary); }
.hr .seg { display: flex; padding: 2px; border-radius: 9px; background: var(--fill); }
.hr .seg button {
  flex: 1; padding: 5px 8px; border: 0; border-radius: 7px; background: none; cursor: pointer; font-size: 12.5px; white-space: nowrap;
}
.hr .seg button.on { background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); font-weight: 600; }
.hr .clock { padding: 12px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }
.hr .clock .day { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin: 2px 0 8px; }
.hr .clock .row { display: flex; gap: 6px; }
.hr .clock button {
  flex: 1; padding: 5px 0; border: 0; border-radius: 7px; background: var(--fill); cursor: pointer; font-size: 12.5px; font-weight: 500;
}
.hr .clock button:hover { background: var(--accent-soft); color: var(--accent); }
.hr .clock .note { margin: 8px 0 0; font-size: 11.5px; color: var(--secondary); }
.hr .clock .reset { margin-top: 6px; width: 100%; background: none; color: var(--secondary); }
.hr .page { max-width: 1040px; margin: 0 auto; padding: 36px 40px 80px; }
.hr .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.hr .eyebrow { margin: 0; color: var(--secondary); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.hr h1 { margin: 2px 0 0; font-size: 34px; line-height: 1.1; font-weight: 700; letter-spacing: -0.025em; }
.hr h2 { margin: 0 0 10px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px; }
.hr h2 .n { font-size: 15px; color: var(--secondary); font-weight: 500; }
.hr section + section { margin-top: 34px; }
.hr .muted { color: var(--secondary); }
.hr .mono { font-family: var(--mono); font-size: 12px; color: var(--secondary); }
.hr .lede { margin: 6px 0 0; color: var(--secondary); max-width: 46rem; }
.hr .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 14px; border: 0; border-radius: 980px; cursor: pointer; white-space: nowrap;
  font-size: 14px; font-weight: 500; background: var(--fill); color: var(--label);
  transition: background 0.15s, transform 0.05s;
}
.hr .btn:hover { background: var(--fill-2); filter: brightness(0.97); }
.hr .btn:active { transform: scale(0.98); }
.hr .btn.primary { background: var(--accent); color: #fff; }
.hr .btn.primary:hover { filter: brightness(1.08); }
.hr .btn.destructive { background: rgba(229, 56, 59, 0.1); color: var(--red); }
.hr .btn.plain { background: none; color: var(--accent); padding-inline: 8px; }
.hr .btn.small { padding: 5px 11px; font-size: 13px; }
.hr .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.hr .link { border: 0; background: none; padding: 0; color: var(--accent); cursor: pointer; font-weight: 500; }
.hr .link:hover { text-decoration: underline; }
.hr .card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); }
.hr .stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.hr .tile { padding: 14px 16px; }
.hr .tile b { display: block; font-size: 28px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; }
.hr .tile span { font-size: 13px; color: var(--secondary); }
.hr .tile.warn b { color: var(--orange); }
.hr .tasks { display: flex; flex-direction: column; overflow: hidden; }
.hr .task { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; }
.hr .task + .task { border-top: 1px solid var(--hairline); }
.hr .task-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: var(--gray); }
.hr .task-icon .i { width: 19px; height: 19px; }
.hr .task-icon.approval { background: var(--red); }
.hr .task-icon.signature { background: var(--accent); }
.hr .task-icon.reminder { background: var(--orange); }
.hr .task-icon.training { background: var(--indigo); }
.hr .task-title { font-weight: 600; }
.hr .task-who { font-size: 13px; color: var(--secondary); }
.hr .task-who .link { font-size: 13px; }
.hr .task-text { margin: 3px 0 0; font-size: 13.5px; }
.hr .task-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.hr .empty-state { padding: 28px; text-align: center; color: var(--secondary); }
.hr .empty-state .i { width: 34px; height: 34px; color: var(--green); display: block; margin: 0 auto 8px; }
.hr .columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.hr .feed { list-style: none; margin: 0; padding: 6px 0; }
.hr .feed li { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 9px 16px; align-items: baseline; }
.hr .feed li + li { border-top: 1px solid var(--hairline); }
.hr .feed time { font-size: 12.5px; font-weight: 600; color: var(--secondary); font-variant-numeric: tabular-nums; }
.hr .feed .what { font-size: 14px; }
.hr .feed .what small { display: block; color: var(--secondary); font-size: 12.5px; }
.hr .auto-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--green); font-weight: 600; }
.hr .auto-tag .i { width: 13px; height: 13px; }
.hr .split { display: grid; grid-template-columns: 340px 1fr; height: 100%; }
.hr .list-pane { border-right: 1px solid var(--hairline); display: flex; flex-direction: column; min-height: 0; background: var(--surface-2); }
.hr .list-head { padding: 24px 16px 10px; display: flex; flex-direction: column; gap: 12px; }
.hr .list-head .top { display: flex; align-items: center; justify-content: space-between; }
.hr .list-head h1 { font-size: 28px; }
.hr .search { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 10px; background: var(--fill); color: var(--secondary); }
.hr .search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; color: var(--label); }
.hr .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.hr .chip {
  padding: 4px 11px; border-radius: 980px; border: 0; background: var(--fill); cursor: pointer; font-size: 13px; font-weight: 500;
}
.hr .chip.on { background: var(--label); color: var(--surface); }
.hr .chip .n { opacity: 0.6; margin-left: 3px; font-variant-numeric: tabular-nums; }
.hr .list { overflow-y: auto; flex: 1; padding: 0 8px 24px; }
.hr .list h3 {
  position: sticky; top: 0; z-index: 1; margin: 0; padding: 12px 10px 6px; background: var(--surface-2);
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--secondary);
}
.hr .row-btn {
  display: grid; grid-template-columns: auto 1fr auto; gap: 11px; align-items: center; width: 100%;
  padding: 8px 10px; border: 0; border-radius: 10px; background: none; cursor: pointer; text-align: left;
}
.hr .row-btn:hover { background: var(--fill-2); }
.hr .row-btn.on { background: var(--accent); color: #fff; }
.hr .row-btn.on .sub, .hr .row-btn.on .hint { color: rgba(255, 255, 255, 0.82); }
.hr .row-btn.on .pill { background: #fff; }
.hr .row-btn .name { font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr .row-btn .sub { font-size: 12.5px; color: var(--secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr .row-btn .right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.hr .row-btn .hint { font-size: 12px; color: var(--secondary); white-space: nowrap; }
.hr .row-btn > div { min-width: 0; }
.hr .avatar {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none;
  color: #fff; font-weight: 600; font-size: 14px; letter-spacing: 0;
  background: linear-gradient(160deg, var(--a1), var(--a2));
}
.hr .avatar.xl { width: 76px; height: 76px; font-size: 28px; }
.hr .avatar.sm { width: 26px; height: 26px; font-size: 11px; }
.hr .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--gray)); flex: none; }
.hr .pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 980px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  color: var(--c, var(--gray)); background: color-mix(in srgb, var(--c, var(--gray)) 13%, transparent);
}
.hr .pill .dot { width: 7px; height: 7px; }
.hr .pill.sm { padding: 1px 8px 1px 6px; font-size: 11.5px; }
.hr .c-gray { --c: var(--gray); }
.hr .c-indigo { --c: var(--indigo); }
.hr .c-orange { --c: var(--orange); }
.hr .c-green { --c: var(--green); }
.hr .c-yellow { --c: var(--yellow); }
.hr .c-red { --c: var(--red); }
.hr .c-accent { --c: var(--accent); }
.hr .detail-pane { overflow-y: auto; min-width: 0; }
.hr .file { max-width: 760px; margin: 0 auto; padding: 32px 40px 80px; }
.hr .back { display: none; }
.hr .blank { height: 100%; display: grid; place-items: center; color: var(--tertiary); text-align: center; }
.hr .blank .i { width: 46px; height: 46px; display: block; margin: 0 auto 10px; }
.hr .hero { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; }
.hr .hero h1 { font-size: 30px; }
.hr .hero p { margin: 2px 0 0; color: var(--secondary); }
.hr .hero .meta { font-size: 13px; color: var(--tertiary); }
.hr .track { display: flex; align-items: flex-start; margin: 28px 0 8px; }
.hr .step { flex: 1; position: relative; text-align: center; font-size: 11.5px; color: var(--tertiary); font-weight: 500; }
.hr .step::before {
  content: ''; position: absolute; top: 9px; left: -50%; right: 50%; height: 2px; background: var(--fill);
}
.hr .step:first-child::before { display: none; }
.hr .step .node {
  position: relative; z-index: 1; width: 20px; height: 20px; margin: 0 auto 6px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--fill); display: grid; place-items: center;
}
.hr .step.done { color: var(--secondary); }
.hr .step.done::before, .hr .step.now::before { background: var(--c); }
.hr .step.done .node { background: var(--c); border-color: var(--c); color: #fff; }
.hr .step.done .node .i { width: 11px; height: 11px; }
.hr .step.now { color: var(--label); font-weight: 700; }
.hr .step.now .node { border-color: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 20%, transparent); }
.hr .step.now .node::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.hr .track.off { opacity: 0.5; }
.hr .banner {
  display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; margin: 18px 0 0;
  background: color-mix(in srgb, var(--c) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 25%, transparent);
}
.hr .banner .i { color: var(--c); width: 20px; height: 20px; }
.hr .banner > div { flex: 1; }
.hr .banner b { display: block; }
.hr .banner small { color: var(--secondary); }
.hr .next { margin: 18px 0 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.hr .next-item { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.hr .next-item .i { color: var(--green); width: 20px; height: 20px; }
.hr .next-item .when { font-size: 13px; color: var(--secondary); text-align: right; font-variant-numeric: tabular-nums; }
.hr .next-item small { display: block; font-size: 12.5px; color: var(--secondary); }
.hr .progress { height: 6px; border-radius: 3px; background: var(--fill); overflow: hidden; }
.hr .progress div { height: 100%; border-radius: 3px; background: var(--c, var(--orange)); }
.hr .actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 0; }
.hr .locked { display: flex; gap: 8px; align-items: center; margin: 10px 0 0; font-size: 13px; color: var(--secondary); }
.hr .locked .i { width: 14px; height: 14px; color: var(--red); }
.hr .group { margin-top: 30px; }
.hr .group h2 { font-size: 17px; }
.hr .rows { margin: 0; overflow: hidden; }
.hr .rows > div, .hr .rows > button {
  display: grid; grid-template-columns: 180px 1fr auto; gap: 12px; align-items: center; padding: 11px 16px; width: 100%;
  border: 0; background: none; text-align: left;
}
.hr .rows > * + * { border-top: 1px solid var(--hairline); }
.hr .rows > button { cursor: pointer; }
.hr .rows > button:hover { background: var(--fill-2); }
.hr .rows dt { color: var(--secondary); font-size: 14px; }
.hr .rows dd { margin: 0; }
.hr .rows .wide { grid-template-columns: auto 1fr auto; }
.hr .rows .ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--fill); color: var(--secondary); }
.hr .rows .ic .i { width: 16px; height: 16px; }
.hr .rows .t { font-weight: 500; }
.hr .rows .t small { display: block; font-weight: 400; font-size: 12.5px; color: var(--secondary); }
.hr .history { list-style: none; margin: 0; padding: 4px 0 0 4px; }
.hr .history li { position: relative; padding: 0 0 16px 22px; }
.hr .history li::before { content: ''; position: absolute; left: 4px; top: 6px; bottom: -6px; width: 2px; background: var(--fill); }
.hr .history li:last-child::before { display: none; }
.hr .history li::after { content: ''; position: absolute; left: 0; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--gray)); }
.hr .history b { font-weight: 600; }
.hr .history small { display: block; color: var(--secondary); font-size: 12.5px; }
.hr .property { padding: 6px 0 4px; }
.hr .property + .property { margin-top: 22px; }
.hr .property-head { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 18px 6px; }
.hr .property-head h2 { margin: 0; }
.hr .dept { padding: 4px 0; }
.hr .dept h3 { margin: 0; padding: 10px 18px 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--secondary); }
.hr .seat { display: grid; grid-template-columns: 220px 1fr auto; gap: 12px; align-items: center; padding: 8px 18px; }
.hr .seat + .seat { border-top: 1px solid var(--hairline); }
.hr .seat .job { font-size: 14px; }
.hr .seat .job small { display: block; color: var(--secondary); font-size: 12px; }
.hr .who { display: flex; align-items: center; gap: 9px; border: 0; background: none; padding: 0; cursor: pointer; text-align: left; font-weight: 500; }
.hr .who:hover .nm { color: var(--accent); }
.hr .open { color: var(--secondary); font-size: 14px; }
.hr .machine { padding: 22px 18px; }
.hr .flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hr .flow .arrow { color: var(--tertiary); }
.hr .flow .pill { font-size: 13px; padding: 5px 12px 5px 10px; }
.hr .flow-side { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--secondary); }
.hr .state-card { padding: 16px 18px; }
.hr .state-card + .state-card { margin-top: 12px; }
.hr .state-card header { display: flex; align-items: center; gap: 10px; }
.hr .state-card header .mono { margin-left: auto; }
.hr .state-card p { margin: 6px 0 10px; color: var(--secondary); font-size: 14px; }
.hr .tt { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.hr .tt th { text-align: left; font-weight: 600; color: var(--secondary); font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--hairline); }
.hr .tt td { padding: 8px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.hr .tt tr:last-child td { border-bottom: 0; }
.hr .tag { display: inline-block; padding: 1px 7px; border-radius: 6px; font-size: 12px; font-weight: 600; background: var(--fill); color: var(--secondary); white-space: nowrap; }
.hr .tag.auto { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); }
.hr .tag.second { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); }
.hr .law-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hr .law-grid .card { padding: 14px 16px; }
.hr .law-grid h3 { margin: 0 0 6px; font-size: 15px; display: flex; justify-content: space-between; }
.hr .review { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 980px; font-size: 12.5px; font-weight: 600;
  color: var(--orange); background: color-mix(in srgb, var(--orange) 13%, transparent); }
.hr.sheet {
  width: min(560px, calc(100vw - 32px)); max-height: min(88dvh, 860px); padding: 0; border: 0; border-radius: 18px;
  background: var(--surface); color: var(--label); box-shadow: var(--shadow-lg); overflow: hidden;
}
.hr.sheet.wide { width: min(980px, calc(100vw - 32px)); }
.hr.sheet::backdrop { background: rgba(0, 0, 0, 0.32); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.hr.sheet[open] { animation: rise 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.1); display: flex; flex-direction: column; }
@keyframes rise { from { transform: translateY(16px) scale(0.98); opacity: 0; } }
.hr.sheet form { display: flex; flex-direction: column; min-height: 0; flex: 1; margin: 0; }
.hr .sheet-head { padding: 20px 22px 12px; border-bottom: 1px solid var(--hairline); display: flex; gap: 12px; align-items: flex-start; }
.hr .sheet-head h2 { margin: 0; font-size: 21px; }
.hr .sheet-head p { margin: 2px 0 0; color: var(--secondary); font-size: 14px; }
.hr .sheet-head > div { flex: 1; }
.hr .sheet-body { padding: 18px 22px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 16px; }
.hr .sheet-foot { padding: 12px 22px; border-top: 1px solid var(--hairline); display: flex; justify-content: flex-end; gap: 8px; align-items: center; }
.hr .sheet-foot .note { margin-right: auto; font-size: 12.5px; color: var(--secondary); }
.hr .x { border: 0; background: var(--fill); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--secondary); }
.hr .field { display: flex; flex-direction: column; gap: 6px; }
.hr .field > span { font-size: 13px; font-weight: 600; color: var(--secondary); }
.hr .field input, .hr .field select, .hr .field textarea {
  font: inherit; color: var(--label); padding: 9px 11px; border-radius: 10px; border: 1px solid var(--hairline); background: var(--surface-2); outline: 0;
}
.hr .field input:focus, .hr .field select:focus, .hr .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.hr .field small { color: var(--secondary); font-size: 12.5px; }
.hr .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hr .options { display: flex; flex-direction: column; gap: 8px; }
.hr .option {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--hairline); cursor: pointer;
}
.hr .option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.hr .option input { margin: 3px 0 0; accent-color: var(--accent); }
.hr .option b { font-weight: 600; }
.hr .option small { display: block; color: var(--secondary); font-size: 12.5px; }
.hr .docs { margin: 0; color: var(--secondary); font-size: 14px; }
.hr .preview { border-radius: 12px; background: var(--fill-2); padding: 4px 14px; }
.hr .preview .pr { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 14px; }
.hr .preview .pr + .pr { border-top: 1px solid var(--hairline); }
.hr .preview .pr span:first-child { color: var(--secondary); }
.hr .preview .pr span:last-child { text-align: right; }
.hr .preview table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.hr .preview td { padding: 3px 0; }
.hr .preview td:last-child { text-align: right; }
.hr .preview tr.total td { font-weight: 700; border-top: 1px solid var(--hairline); padding-top: 6px; }
.hr .preview .cap { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--secondary); padding: 10px 0 2px; }
.hr .warning { display: flex; gap: 8px; padding: 10px 12px; border-radius: 10px; font-size: 13.5px;
  background: color-mix(in srgb, var(--orange) 12%, transparent); }
.hr .warning .i { color: var(--orange); margin-top: 2px; }
.hr .viewer { display: grid; grid-template-columns: 1fr; gap: 0; min-height: 0; flex: 1; overflow: hidden; }
.hr .viewer.json { grid-template-columns: 1fr 380px; }
.hr .viewer .stage { overflow-y: auto; padding: 28px; background: var(--bg); }
.hr .viewer pre { margin: 0; overflow: auto; padding: 18px; font: 12px/1.5 var(--mono); background: var(--surface-2); border-left: 1px solid var(--hairline); color: var(--secondary); }
.hr .paper {
  max-width: 680px; margin: 0 auto; padding: 56px 64px; background: #fff; color: #1d1d1f; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 8px 30px rgba(0, 0, 0, 0.06);
  font: 14.5px/1.65 var(--serif); letter-spacing: 0; position: relative;
}
.hr .paper .draft { position: absolute; top: 18px; right: 22px; font: 600 10px/1 var(--font); letter-spacing: 0.08em; text-transform: uppercase; color: #c0392b; }
.hr .paper .doc-head { text-align: center; margin-bottom: 26px; }
.hr .paper .doc-employer { font: 600 11px/1.4 var(--font); letter-spacing: 0.08em; text-transform: uppercase; color: #6e6e73; margin: 0; }
.hr .paper h1 { font: 600 24px/1.25 var(--serif); margin: 10px 0 4px; letter-spacing: 0; }
.hr .paper .doc-sub { margin: 0; font: 13px var(--font); color: #6e6e73; }
.hr .paper p { margin: 0 0 12px; text-align: justify; }
.hr .paper .clauses { padding-left: 20px; margin: 0 0 14px; }
.hr .paper .clauses li { margin-bottom: 8px; text-align: justify; }
.hr .paper .muted { color: #6e6e73; }
.hr .paper table { width: 100%; border-collapse: collapse; margin: 6px 0 16px; font-size: 14px; }
.hr .paper th, .hr .paper td { padding: 7px 0; border-bottom: 1px solid #e5e5ea; text-align: left; vertical-align: top; }
.hr .paper th { width: 40%; font-weight: 600; }
.hr .paper td small { display: block; font: 11.5px var(--font); color: #8e8e93; }
.hr .paper .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hr .paper tr.total td { font-weight: 700; border-top: 2px solid #1d1d1f; border-bottom: 0; }
.hr .paper .signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 56px; text-align: center; font-size: 13.5px; }
.hr .paper .signatures.single { grid-template-columns: minmax(0, 300px); justify-content: center; }
.hr .paper .signatures span { display: block; border-top: 1px solid #1d1d1f; margin-bottom: 6px; }
.hr .paper .signatures small { display: block; font: 12px var(--font); color: #6e6e73; }
.hr .paper .signed { font: 600 12px var(--font); color: var(--green); }
.hr.toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; z-index: 50; pointer-events: none; }
.hr .toast {
  display: flex; gap: 10px; align-items: center; padding: 10px 16px; border-radius: 14px; max-width: min(520px, 92vw);
  background: rgba(30, 30, 32, 0.92); color: #fff; font-size: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  animation: toast-in 0.25s ease-out;
}
.hr .toast .i { color: #30d158; }
.hr .toast small { opacity: 0.7; }
.hr .toast.out { opacity: 0; transform: translateY(8px); transition: 0.3s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 820px) {
  .hr .page { padding: 20px 16px 40px; }
  .hr .stats { grid-template-columns: repeat(2, 1fr); }
  .hr .columns, .hr .law-grid { grid-template-columns: 1fr; }
  .hr .task { grid-template-columns: auto 1fr; }
  .hr .task-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .hr .split { grid-template-columns: 1fr; }
  .hr .split.focus .list-pane { display: none; }
  .hr .split:not(.focus) .detail-pane { display: none; }
  .hr .file { padding: 12px 16px 40px; }
  .hr .back { display: inline-flex; margin: 0 0 8px -8px; }
  .hr .hero { grid-template-columns: auto 1fr; }
  .hr .hero .pill { grid-column: 1 / -1; justify-self: start; }
  .hr .avatar.xl { width: 60px; height: 60px; font-size: 22px; }
  .hr .rows > div, .hr .rows > button { grid-template-columns: 120px 1fr auto; }
  .hr .seat { grid-template-columns: 1fr auto; }
  .hr .seat .job { grid-column: 1 / -1; }
  .hr .fields { grid-template-columns: 1fr; }
  .hr .viewer.json { grid-template-columns: 1fr; }
  .hr .viewer pre { display: none; }
  .hr .paper { padding: 32px 22px; }
  .hr .step span { display: none; }
  .hr .step.now span { display: inline; }
  .hr .mobile-clock { display: block !important; }
}
.hr .mobile-clock { display: none; margin-top: 14px; }
@media print {
  body * { visibility: hidden; }
  .hr .paper, .hr .paper * { visibility: visible; }
  .hr .paper { position: fixed; inset: 0; box-shadow: none; padding: 0; max-width: none; }
}
.hr {
  font: 15px/1.45 var(--font);
  letter-spacing: -0.01em;
  color: var(--label);
  -webkit-font-smoothing: antialiased;
}
.hr *, .hr *::before, .hr *::after { box-sizing: border-box; }


/* Mounted by a host: the HR area paints its own background and fills it. */
.hr-root { background: var(--bg); min-height: 100%; }
.hr-root[data-page="people"] { height: 100%; }

/* Today's lab bar, for hosts without a sidebar: who you act as, and the clock. */
.hr .labbar { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; padding: 12px 16px; margin: -8px 0 22px; }
.hr .labbar .actor { flex-direction: row; align-items: center; gap: 10px; padding: 0; }
.hr .labbar .clock { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 0; background: none; box-shadow: none; flex: 1; }
.hr .labbar .clock .day { margin: 0; font-size: 16px; }
.hr .labbar .clock .note { display: none; }
.hr .labbar .clock .row button { padding: 5px 10px; }
.hr .labbar .clock .reset { width: auto; margin: 0 0 0 auto; }
.hr .labbar .clock .row { flex: none; }
.hr .labbar .clock .row button { flex: none; white-space: nowrap; }

/* ------------------------------------------------------------ Organization: the chart */

.hr-root[data-page="org"] { height: 100%; }
.hr .org { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.hr .org-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 28px 32px 10px; }
.hr .org-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hr .org-tools .search { width: 240px; }
.hr .org-tools .seg { width: 140px; }
.hr .org-legend { display: flex; gap: 6px; flex-wrap: wrap; padding: 4px 32px 12px; }
.hr .chip.dept { display: inline-flex; align-items: center; gap: 6px; }
.hr .swatch { width: 9px; height: 9px; border-radius: 3px; background: var(--d); flex: none; }
.hr .chip.dept.on .swatch { box-shadow: 0 0 0 1.5px var(--surface); }
.hr .org-stage { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--hairline); }
.hr .org-stage.inspecting { grid-template-columns: 1fr 360px; }
.hr .org-canvas {
  min-height: 0; overflow: hidden; cursor: grab; position: relative;
  background-color: var(--bg);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--label) 9%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
}
.hr .org-canvas.panning { cursor: grabbing; }
.hr .org-list { display: none; overflow-y: auto; min-height: 0; }
.hr .org-stage.as-list .org-canvas { display: none; }
.hr .org-stage.as-list .org-list { display: block; }
.hr .org-inspector { display: none; overflow-y: auto; min-height: 0; background: var(--surface-2); border-left: 1px solid var(--hairline); }
.hr .org-stage.inspecting .org-inspector { display: block; }

/* Cards */
.hr .org-body { fill: var(--surface); stroke: var(--hairline); stroke-width: 1; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.06)); }
.hr .org-body.open { fill: var(--surface-2); stroke-dasharray: 5 4; stroke: color-mix(in srgb, var(--label) 22%, transparent); }
.hr .org-title { fill: var(--label); font-family: var(--font); letter-spacing: -0.01em; }
.hr .org-name { fill: var(--secondary); font-family: var(--font); }
.hr .org-name-open { fill: var(--accent); font-weight: 500; }
.hr .org-initials { font-family: var(--font); }
.hr .org-open-avatar { stroke: var(--tertiary); stroke-width: 1.5; }
.hr .org-open-plus { fill: var(--tertiary); font-size: 18px; font-family: var(--font); }
.hr .org-dot { fill: var(--c); }
.hr .org-line { stroke: color-mix(in srgb, var(--label) 22%, transparent); }
.hr .joint-element { cursor: pointer; transition: opacity 0.2s; }
.hr .joint-element:hover .org-body { stroke: color-mix(in srgb, var(--accent) 45%, transparent); }
.hr .joint-element.selected .org-body { stroke: var(--accent); stroke-width: 2; }
.hr .joint-element.drop-target .org-body { stroke: var(--accent); stroke-width: 2.5; fill: var(--accent-soft); }
.hr .joint-element.dim { opacity: 0.22; }

/* Inspector */
.hr .insp { padding: 18px 18px 30px; display: flex; flex-direction: column; gap: 16px; }
.hr .insp-head { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; }
.hr .insp-head .swatch { width: 10px; height: 38px; border-radius: 4px; margin-top: 2px; }
.hr .insp-head h2 { margin: 0; font-size: 19px; }
.hr .insp-head p { margin: 2px 0 0; color: var(--secondary); font-size: 13px; }
.hr .insp-who { display: flex; gap: 12px; align-items: center; padding: 12px 14px; }
.hr .insp-who b { display: block; }
.hr .insp-who small { display: flex; gap: 6px; align-items: center; color: var(--secondary); font-size: 12.5px; margin-top: 2px; }
.hr .insp-who.open { color: var(--secondary); }
.hr .insp-who.open > .i { width: 30px; height: 30px; color: var(--tertiary); }
.hr .insp-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: -6px; }
.hr .insp .rows > div, .hr .insp .rows > button { grid-template-columns: 80px 1fr auto; padding: 9px 12px; }
.hr .insp .rows .wide { grid-template-columns: auto 1fr auto; }
.hr .insp > .btn { align-self: flex-start; }

/* A person's file ends with the one irreversible action. */
.hr .danger { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.hr .destructive-text { color: var(--red); }

@media (max-width: 820px) {
  .hr .org-head { padding: 16px 16px 8px; }
  .hr .org-tools .search { width: 100%; }
  .hr .org-legend { padding: 4px 16px 10px; flex-wrap: nowrap; overflow-x: auto; }
  .hr .org-stage.inspecting { grid-template-columns: 1fr; }
  .hr .org-stage.inspecting .org-inspector {
    position: absolute; left: 0; right: 0; bottom: 0; max-height: 62%; border-left: 0; border-top: 1px solid var(--hairline);
    border-radius: 16px 16px 0 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.12);
  }
}
.hr .org-dot.none { fill: transparent; }
.hr .org-paper { position: absolute; inset: 0; }
.hr .btn.plain.destructive-text { color: var(--red); }