/* Recreated Halo employer portal (activation walkthrough).
   Reference: halo-app origin/main (src/app/(portal)/employer/halo-pay/*, employees/*,
   components/ui, tokens/customer-portal-v2-tokens.css) and the 30 Sep 2026 recording.
   Everything is scoped under .hp so nothing leaks into the demo page.
   Two AA adjustments: primary sage #7c8b6f -> #6a7a5e (the portal's own hover shade),
   outline terracotta #c4836a -> #a4624a. */
.hp {
  --hp-ink: #2a1f17;
  --hp-heading: #2d3436;
  --hp-purple: #8f4fae;
  --hp-purple-soft: #f4ebf9;
  --hp-purple-tint: rgba(143, 79, 174, 0.04);
  --hp-sage: #6a7a5e;
  --hp-sage-hover: #5b6a50;
  --hp-terracotta: #a4624a;
  --hp-terracotta-soft: #fbf3ef;
  --hp-warm: #faf9f7;
  --hp-gray-200: #e5e7eb;
  --hp-gray-300: #d1d5db;
  --hp-gray-500: #6b7280;
  --hp-gray-600: #4b5563;
  --hp-gray-700: #374151;
  --hp-gray-800: #1f2937;
  --hp-gray-900: #111827;
  --hp-slate-50: #f8fafc;
  --hp-slate-200: #e2e8f0;
  --hp-slate-500: #64748b;
  --hp-slate-600: #475569;
  --hp-slate-700: #334155;
  --hp-slate-900: #0f172a;
  --hp-muted: #756a60;
  --hp-border: rgba(0, 0, 0, 0.06);
  --hp-border-soft: rgba(0, 0, 0, 0.1);
  --hp-success: #3a7049;
  --hp-success-soft: rgba(72, 140, 92, 0.14);
  --hp-amber-border: #fcd34d;
  --hp-amber-bg: #fffbeb;
  --hp-amber-text: #b45309;
  --hp-font-display: "Hubot Sans Variable", Georgia, serif;
  --hp-font-ui: "Mona Sans Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  position: relative;
  container-type: inline-size;
  container-name: hp;
  height: 100%;
  overflow: hidden;
  background: #fff;
  color: var(--hp-ink);
  font-family: var(--hp-font-ui);
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
}
.hp-shell { display: grid; grid-template-columns: 200px minmax(0, 1fr); height: 100%; min-height: 0; }
.hp *, .hp *::before, .hp *::after { box-sizing: border-box; }
:where(.hp) :is(h4, h5, h6, p, ul, ol, dl) { margin: 0; padding: 0; }
:where(.hp) :is(ul, ol) { list-style: none; }
:where(.hp) :is(button, input, select) { font: inherit; color: inherit; }
.hp svg { flex-shrink: 0; }
.hp :focus-visible { outline: 2px solid var(--hp-purple); outline-offset: 2px; box-shadow: none; }
.hp-i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Sidebar ---------- */
.hp-side {
  display: flex; flex-direction: column;
  background: #fff; border-right: 1px solid #f1f0ee;
  min-height: 0;
}
.hp-brand { padding: 16px 16px 12px; border-bottom: 1px solid #f1f0ee; }
.hp-brand-name { font-family: var(--hp-font-display); font-weight: 600; font-size: 17px; line-height: 1.2; color: var(--hp-ink); }
.hp-brand-role { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hp-gray-500); margin-top: 2px; }
.hp-org { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13.5px; font-weight: 600; color: var(--hp-purple); }
.hp-org .hp-i { width: 15px; height: 15px; }
.hp-nav { padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; }
.hp-nav-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 8px 12px; border: 0; border-radius: 8px; background: transparent;
  font-size: 14px; color: var(--hp-gray-700); text-align: left; cursor: default;
}
.hp-nav-item .hp-i { color: var(--hp-gray-600); }
.hp-nav-item.is-active { background: var(--hp-purple-soft); color: var(--hp-ink); font-weight: 500; box-shadow: inset 3px 0 0 var(--hp-purple); }
.hp-nav-item.is-active .hp-i { color: var(--hp-purple); }
.hp-user {
  margin-top: auto; padding: 12px 16px; border-top: 1px solid #f1f0ee;
  display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--hp-gray-600);
  overflow: hidden;
}
.hp-user span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-avatar {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--hp-purple-soft); color: var(--hp-purple); font-size: 10.5px; font-weight: 700;
}
.hp-topbar { display: none; }

/* ---------- Main ---------- */
.hp-main { position: relative; min-width: 0; min-height: 0; overflow-y: auto; background: #fdfcfb; scroll-behavior: smooth; padding-right: 52px; }
.hp-page { max-width: 1060px; margin: 0 auto; padding: 22px 28px 40px; }
.hp-page.is-narrow { max-width: 720px; }
.hp-page.is-centred { max-width: 620px; text-align: center; padding-top: 36px; }
.hp-chat {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--hp-purple-soft); color: var(--hp-purple); cursor: default;
}
.hp-chat .hp-i { width: 17px; height: 17px; }

.hp-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 0 28px 0; padding: 12px 16px; margin-top: 12px;
  border: 1.5px solid var(--hp-purple); border-radius: 12px; background: #fbf5fd;
}
.hp-banner-text { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; color: var(--hp-gray-700); }
.hp-banner-text strong { display: block; font-weight: 600; color: var(--hp-ink); font-size: 13.5px; }
.hp-banner .hp-i { color: var(--hp-purple); width: 18px; height: 18px; margin-top: 1px; }
.hp-banner .hp-btn { min-height: 38px; padding: 6px 18px; font-size: 14px; }

.hp-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.hp-stack > * + * { margin-top: 20px; }

.hp-back { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; color: var(--hp-gray-600); background: none; border: 0; padding: 2px 0; cursor: default; }
.hp-back .hp-i { width: 15px; height: 15px; }
.hp-h1 { font-family: var(--hp-font-display); font-size: 30px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; color: var(--hp-ink); }
.hp-h1.is-semibold { font-weight: 600; font-size: 28px; }
.hp-lede { margin-top: 8px !important; color: var(--hp-gray-700); font-size: 15px; }
.hp-lede.is-lg { font-size: 16.5px; }
.hp-h2 { font-family: var(--hp-font-display); font-size: 19px; font-weight: 500; letter-spacing: -0.01em; color: var(--hp-ink); }
.hp-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px; border-radius: 999px; background: var(--hp-purple-soft);
  font-size: 13px; color: #7a3417;
}
.hp-pill .hp-i { color: var(--hp-purple); }
.hp-eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--hp-purple); }

.hp-card { background: #fff; border: 1px solid var(--hp-gray-200); border-radius: 16px; padding: 22px 24px; }
.hp-card.is-warm { background: var(--hp-warm); }
.hp-card > * + * { margin-top: 14px; }

.hp-bullets { display: flex; flex-direction: column; gap: 10px; color: var(--hp-gray-800); font-size: 14.5px; }
.hp-bullets li { display: flex; gap: 12px; align-items: flex-start; }
.hp-bullets .hp-i { width: 19px; height: 19px; color: var(--hp-purple); margin-top: 1px; }
.hp-numlist li { display: flex; gap: 12px; align-items: flex-start; border-top: 1px solid var(--hp-gray-200); padding-top: 11px; margin-top: 11px; }
.hp-numlist li:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.hp-num {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--hp-purple-soft); color: var(--hp-purple); font-size: 13px; font-weight: 600;
}
.hp-numlist strong { display: block; font-weight: 500; color: var(--hp-gray-900); }
.hp-numlist span.hp-sub { display: block; font-size: 13.5px; color: var(--hp-gray-600); }

/* ---------- Buttons (components/ui/button + globals .btn) ---------- */
.hp-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 24px; border-radius: 8px; border: 0;
  font-size: 15px; font-weight: 600; line-height: 1.4; white-space: nowrap;
  background: var(--hp-sage); color: #fff; cursor: pointer;
  transition: background-color 0.2s ease-in-out, box-shadow 0.2s;
}
.hp-btn:hover:not(:disabled) { background: var(--hp-sage-hover); }
.hp-btn.is-lg { padding: 11px 30px; }
.hp-btn.is-sm { min-height: 38px; padding: 6px 14px; font-size: 14px; }
.hp-btn.is-full { width: 100%; }
.hp-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.hp-btn .hp-i { width: 16px; height: 16px; }
.hp-btn-outline { background: transparent; color: var(--hp-terracotta); box-shadow: inset 0 0 0 1.5px var(--hp-terracotta); }
.hp-btn-outline:hover:not(:disabled) { background: var(--hp-terracotta-soft); color: #8a4f3b; }
.hp-btn-ghost { background: transparent; color: var(--hp-ink); }
.hp-btn-ghost:hover:not(:disabled) { background: rgba(143, 79, 174, 0.08); }
.hp-btn-purple { background: var(--hp-purple); border-radius: 999px; }
.hp-btn-purple:hover:not(:disabled) { background: #7c4198; }
.hp-btn-icon { width: 44px; min-height: 44px; padding: 0; }
.hp-spin { animation: hp-spin 0.9s linear infinite; }
@keyframes hp-spin { to { transform: rotate(360deg); } }

/* The control the presenter should select next */
.hp [data-target] { position: relative; }
.hp.is-hinting [data-target] { animation: hp-pulse 1.4s ease-out 2; }
@keyframes hp-pulse {
  0% { box-shadow: 0 0 0 0 rgba(143, 79, 174, 0.55); }
  100% { box-shadow: 0 0 0 12px rgba(143, 79, 174, 0); }
}

/* ---------- Forms ---------- */
.hp-label { display: block; font-size: 13.5px; font-weight: 500; color: var(--hp-slate-700); margin-bottom: 6px; }
.hp-label .hp-opt { color: var(--hp-muted); font-weight: 400; }
.hp-input, .hp-select {
  display: block; width: 100%; min-height: 44px;
  padding: 9px 14px; border: 1px solid #8b8680; border-radius: 8px; background: #fff;
  font-size: 15px; color: var(--hp-ink);
}
.hp-input::placeholder { color: var(--hp-muted); }
.hp-input:focus-visible, .hp-select:focus-visible { outline: none; border-color: #6a7a5e; box-shadow: 0 0 0 2px #6a7a5e; }
.hp-input[readonly] { background: #fff; }
.hp-select { border-color: var(--hp-gray-300); border-radius: 6px; }
.hp-field + .hp-field { margin-top: 16px; }
.hp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hp-check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--hp-gray-900); cursor: pointer; }
.hp-check input { width: 19px; height: 19px; margin-top: 2px; accent-color: var(--hp-purple); flex-shrink: 0; }
.hp-error { font-size: 12.5px; color: #bd3d17; margin-top: 4px !important; }

.hp-readfield { position: relative; }
.hp-readvalue {
  border: 2px solid var(--hp-slate-200); border-radius: 8px; background: var(--hp-slate-50);
  padding: 10px 52px 10px 14px; color: var(--hp-slate-900); min-height: 46px;
}
.hp-readvalue.is-static { padding-right: 14px; }
.hp-readvalue .hp-notset { color: #64748b; }
.hp-readfield .hp-edit {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border: 0; border-radius: 8px; background: transparent;
  display: inline-flex; align-items: center; justify-content: center; color: var(--hp-slate-600); cursor: pointer;
}
.hp-readfield .hp-edit:hover { background: rgba(143, 79, 174, 0.08); }
.hp-editrow { display: flex; gap: 8px; align-items: center; }
.hp-editrow .hp-input { flex: 1; min-width: 0; }

/* ---------- Agreement ---------- */
.hp-agreement {
  max-height: 260px; overflow-y: auto;
  background: #fff; border: 1px solid var(--hp-gray-200); border-radius: 16px; padding: 22px 24px;
  font-size: 13.5px; line-height: 1.75; color: var(--hp-gray-800);
}
.hp-agreement p + p { margin-top: 10px; }
.hp-agreement .hp-excerpt-note { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--hp-gray-300); font-style: italic; color: var(--hp-gray-600); }
.hp-signhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid #f3f4f6; }
.hp-signhead h5 { font-size: 17px; font-weight: 500; font-family: var(--hp-font-ui); color: var(--hp-gray-900); }
.hp-signhead span { font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--hp-gray-500); }
.hp-meta { font-size: 13.5px; color: var(--hp-gray-700); }
.hp-meta b { font-weight: 500; }

/* ---------- Card headers (shadcn Card) ---------- */
.hp-cardhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hp-cardtitle { display: flex; align-items: center; gap: 8px; font-family: var(--hp-font-display); font-size: 19px; font-weight: 600; color: var(--hp-heading); }
.hp-cardtitle .hp-i { width: 19px; height: 19px; color: var(--hp-purple); }
.hp-kv { display: flex; gap: 8px; font-size: 13.5px; align-items: center; }
.hp-kv + .hp-kv { margin-top: 10px; }
.hp-kv dt { width: 104px; color: var(--hp-slate-500); }
.hp-kv dd { margin: 0; color: var(--hp-slate-900); font-weight: 500; }
.hp-kv dd.is-mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 400; }
.hp-help { font-size: 13.5px; color: var(--hp-slate-600); }

.hp-note { font-size: 13.5px; color: var(--hp-gray-700); }
.hp-note b { font-weight: 500; }
.hp-card.is-amber { border-color: var(--hp-amber-border); background: var(--hp-amber-bg); }
.hp-card.is-amber .hp-cardtitle .hp-i { color: #d97706; }
.hp-amber-text { font-size: 13.5px; color: var(--hp-amber-text); }
.hp-small { font-size: 12px; color: var(--hp-muted); }

/* ---------- Guide rail (components/walkthrough/WalkthroughGuideRail) ---------- */
.hp-rail {
  background: var(--hp-warm); border: 1px solid var(--hp-gray-200); border-radius: 16px; padding: 20px;
}
.hp-rail > * + * { margin-top: 14px; }
.hp-rail-label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--hp-purple); }
.hp-rail-bar { display: flex; gap: 6px; }
.hp-rail-bar span { height: 6px; flex: 1; border-radius: 999px; background: var(--hp-gray-200); }
.hp-rail-bar span.is-done { background: var(--hp-purple); }
.hp-rail h5 { font-family: var(--hp-font-display); font-size: 18px; font-weight: 500; letter-spacing: -0.01em; color: var(--hp-gray-900); }
.hp-rail ol li { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; line-height: 1.6; }
.hp-rail ol li + li { margin-top: 10px; }
.hp-rail-num {
  width: 23px; height: 23px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hp-gray-300); background: #fff; font-size: 11.5px; font-weight: 600; color: var(--hp-gray-600);
}
.hp-rail ol b { font-weight: 500; color: var(--hp-gray-900); }
.hp-rail ol span.hp-body { color: var(--hp-gray-600); }
.hp-rail-skip { font-size: 13px; color: var(--hp-gray-500); border-top: 1px solid var(--hp-gray-200); padding-top: 14px; }
.hp-rail-actions > * + * { margin-top: 8px; }
.hp-rail-status { font-size: 13.5px; color: var(--hp-gray-600); }

/* ---------- Done page ---------- */
.hp-done-mark { display: inline-flex; padding: 14px; border-radius: 50%; background: var(--hp-purple-soft); color: var(--hp-purple); }
.hp-done-mark .hp-i { width: 42px; height: 42px; stroke-width: 1.75; }
.hp-ledger { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.hp-ledger li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #fff; border: 1px solid var(--hp-gray-200); border-radius: 12px; padding: 13px 18px;
}
.hp-ledger strong { display: block; font-weight: 500; color: var(--hp-gray-900); }
.hp-ledger span.hp-sub { font-size: 13.5px; color: var(--hp-gray-500); }
.hp-badge-done {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 11px; border-radius: 999px; background: #f0fdf4; color: #15803d;
  font-size: 12px; font-weight: 600;
}
.hp-badge-done .hp-i { width: 14px; height: 14px; }
.hp-next { text-align: left; }
.hp-next ul { list-style: disc; padding-left: 20px; color: var(--hp-gray-800); font-size: 14.5px; }
.hp-next li + li { margin-top: 8px; }

/* ---------- Invite overview ---------- */
.hp-steps-cards > li {
  display: flex; gap: 12px; align-items: flex-start;
  background: #fff; border: 1px solid var(--hp-gray-200); border-radius: 12px; padding: 14px 18px;
}
.hp-steps-cards > li + li { margin-top: 10px; }
.hp-steps-cards strong { display: block; font-weight: 500; color: var(--hp-gray-900); }
.hp-steps-cards span.hp-sub { display: block; font-size: 13.5px; color: var(--hp-gray-600); margin-top: 2px; }
.hp-textblock p { color: var(--hp-gray-600); max-width: 42rem; }
.hp-textblock p + p { margin-top: 10px; }

/* ---------- Employees ---------- */
.hp-pagehead h4 { font-family: var(--hp-font-display); font-size: 27px; font-weight: 600; letter-spacing: -0.02em; }
.hp-pagehead p { color: var(--hp-gray-600); font-size: 14px; margin-top: 2px; }
.hp-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hp-kpi { background: #fff; border: 1px solid var(--hp-border-soft); border-radius: 14px; padding: 14px 16px; }
.hp-kpi dt { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hp-muted); }
.hp-kpi dd { margin: 4px 0 0; font-family: var(--hp-font-display); font-size: 26px; font-weight: 500; }
.hp-list { background: #fff; border: 1px solid var(--hp-border-soft); border-radius: 16px; padding: 18px; }
.hp-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hp-list-head h5 { font-family: var(--hp-font-ui); font-size: 14.5px; font-weight: 600; }
.hp-empty {
  margin-top: 18px; padding: 30px 16px; text-align: center;
  background: var(--hp-purple-tint); border: 1px solid var(--hp-border); border-radius: 14px;
}
.hp-empty > .hp-i { width: 30px; height: 30px; color: var(--hp-gray-600); stroke-width: 1.6; }
.hp-empty strong { display: block; font-size: 14px; font-weight: 500; margin-top: 8px; }
.hp-empty p { font-size: 13.5px; color: var(--hp-gray-600); margin: 6px 0 14px; }
.hp-tablewrap { margin-top: 14px; overflow-x: auto; }
.hp-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.hp-table th { text-align: left; padding: 10px 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hp-muted); background: var(--hp-purple-tint); border-bottom: 1px solid var(--hp-border); white-space: nowrap; }
.hp-table td { padding: 12px; border-bottom: 1px solid var(--hp-border); vertical-align: middle; }
.hp-table tr:last-child td { border-bottom: 0; }
.hp-person { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.hp-initials { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--hp-purple-soft); color: var(--hp-purple); font-size: 10.5px; font-weight: 700; }
.hp-status-invited { display: inline-block; padding: 2px 10px; border-radius: 999px; background: #fff7ed; color: #c2410c; font-size: 12px; font-weight: 600; }
.hp-status-pending { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--hp-terracotta); color: #fff; font-size: 12px; font-weight: 600; }
.hp-cta-bar {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  min-height: 44px; padding: 10px 16px; border: 0; border-radius: 10px;
  background: #3f37f0; color: #fff; font-size: 14px; font-weight: 600; cursor: default;
}
.hp-walk-card { background: var(--hp-warm); border: 1px solid var(--hp-gray-200); border-radius: 16px; padding: 16px 18px; display: flex; gap: 12px; align-items: flex-start; }

/* ---------- Toast (sonner) ---------- */
.hp-toast {
  position: absolute; top: 12px; right: 12px; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; border-radius: 8px; background: #6a7a5e; color: #fff;
  font-size: 14px; box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.3);
  animation: hp-toast-in 0.25s ease-out;
}
.hp-toast .hp-i { width: 17px; height: 17px; }
@keyframes hp-toast-in { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- Overlay, sheet (drawer) and dialog ---------- */
.hp-overlay { position: absolute; inset: 0; z-index: 30; background: rgba(0, 0, 0, 0.45); animation: hp-fade 0.2s ease-out; }
@keyframes hp-fade { from { opacity: 0; } }
.hp-sheet {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 31;
  width: min(460px, 100%); display: flex; flex-direction: column;
  background: #fff; box-shadow: -10px 0 30px -12px rgba(0, 0, 0, 0.25);
  animation: hp-slide 0.28s ease-out;
}
@keyframes hp-slide { from { transform: translateX(100%); } }
.hp-sheet-head { padding: 20px 22px 14px; }
.hp-sheet-head h5 { font-family: var(--hp-font-display); font-size: 21px; font-weight: 600; color: var(--hp-ink); }
.hp-sheet-head p { font-size: 13.5px; color: var(--hp-muted); margin-top: 4px; }
.hp-sheet-body { flex: 1; overflow-y: auto; padding: 0 22px 22px; }
.hp-close {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; border: 0; border-radius: 6px; background: transparent;
  display: inline-flex; align-items: center; justify-content: center; color: var(--hp-gray-600); cursor: pointer;
}
.hp-close:hover { background: #f3f4f6; }
.hp-invite-form { padding: 18px; background: var(--hp-purple-tint); border-radius: 20px; }
.hp-invite-form > * + * { margin-top: 14px; }
.hp-invite-form h6 { display: flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 600; }
.hp-invite-form h6 .hp-i { width: 19px; height: 19px; color: var(--hp-purple); }
.hp-sent { padding: 16px; text-align: center; background: var(--hp-success-soft); border: 1px solid var(--hp-border); border-radius: 20px; }
.hp-sent > * + * { margin-top: 10px; }
.hp-sent .hp-btn-outline { background: #fff; }
.hp-sent .hp-tick { width: 24px; height: 24px; color: var(--hp-success); }
.hp-sent p { font-size: 14px; font-weight: 500; color: var(--hp-success); }
.hp-invited { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--hp-border); }
.hp-invited h6 { font-size: 15.5px; font-weight: 600; margin-bottom: 10px; }
.hp-invited .hp-none { text-align: center; padding: 12px 0; font-size: 14px; color: var(--hp-muted); }
.hp-invited .hp-table-box { border: 1px solid var(--hp-border); border-radius: 16px; overflow-x: auto; }

.hp-dialog {
  position: absolute; left: 50%; top: 50%; z-index: 31;
  width: min(480px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow-y: auto;
  transform: translate(-50%, -50%);
  background: #fff; border-radius: 16px; padding: 24px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.4);
  animation: hp-fade 0.2s ease-out;
}
.hp-dialog > * + * { margin-top: 14px; }
.hp-dialog h5 { font-family: var(--hp-font-display); font-size: 20px; font-weight: 600; padding-right: 36px; }
.hp-sim-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px; background: #eef2ff; color: #3730a3;
  font-size: 11.5px; font-weight: 600;
}
.hp-dd-summary { border: 1px solid var(--hp-gray-200); border-radius: 12px; padding: 14px 16px; }
.hp-dd-summary .hp-kv dt { width: 128px; }
.hp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hp-split > div { border-radius: 12px; padding: 12px 14px; font-size: 13px; line-height: 1.5; }
.hp-split strong { display: block; font-size: 13.5px; margin-bottom: 2px; }
.hp-split .is-halo { background: var(--hp-purple-soft); color: #4a2560; }
.hp-split .is-nursery { background: #f3f4f6; color: var(--hp-gray-700); }

/* ---------- Container-query layouts (mirror the portal's lg / @4xl breakpoints) ---------- */
@container hp (min-width: 900px) {
  .hp-layout.has-rail { grid-template-columns: minmax(0, 1fr) 290px; }
  .hp-layout.has-rail-sm { grid-template-columns: minmax(0, 1fr) 280px; }
  .hp-rail { position: sticky; top: 16px; }
}
@container hp (max-width: 1040px) {
  .hp-shell { grid-template-columns: 64px minmax(0, 1fr); }
}
@container hp (max-width: 1040px) and (min-width: 681px) {
  .hp-brand { padding: 14px 8px; text-align: center; }
  .hp-brand-name { font-size: 14px; }
  .hp-brand-role, .hp-org span, .hp-nav-item span, .hp-user span:last-child { display: none; }
  .hp-org { justify-content: center; }
  .hp-nav-item { justify-content: center; padding: 10px 0; }
  .hp-user { justify-content: center; padding: 12px 0; }
}
@container hp (max-width: 680px) {
  .hp-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .hp-side { display: none; }
  .hp-side.is-open {
    display: flex; position: absolute; top: 52px; left: 0; bottom: 0; z-index: 35; width: 240px;
    box-shadow: 10px 0 30px -12px rgba(0, 0, 0, 0.3);
  }
  .hp-side.is-open .hp-brand { display: none; }
  .hp-topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    height: 52px; padding: 0 10px 0 14px; background: #fff; border-bottom: 1px solid #f1f0ee;
  }
  .hp-topbar .hp-brand-name { font-size: 15px; }
  .hp-topbar .hp-brand-role { margin: 0; }
  .hp-menu-btn {
    display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px;
    border: 1px solid var(--hp-gray-200); border-radius: 8px; background: #fff; font-size: 13.5px; font-weight: 500; cursor: pointer;
  }
  .hp-page { padding: 18px 16px 32px; }
  .hp-banner { margin: 12px 16px 0; flex-direction: column; align-items: stretch; }
  .hp-h1 { font-size: 25px; }
  .hp-card, .hp-agreement { padding: 18px; }
  .hp-actions { flex-direction: column; align-items: stretch; }
  .hp-actions .hp-btn { width: 100%; }
  .hp-kpis { grid-template-columns: 1fr; }
  .hp-grid2, .hp-split { grid-template-columns: 1fr; }
  .hp-list-head { flex-direction: column; align-items: flex-start; }
  .hp-chat { display: none; }
  .hp-main { padding-right: 0; }
  .hp-sheet { width: 100%; }
  .hp-page.is-centred { padding-top: 22px; }
}

/* =====================================================================
   Employer portal walkthrough components (Home, Employees, Arrangements,
   Payments, Compliance, Audit log, Settings). cp-v2 tokens from
   halo-app tokens/customer-portal-v2-tokens.css; text colours darkened
   where the originals miss AA (muted #8A7D71 -> #756a60, warn #E8662F
   text -> #b4501f, success #488C5C text -> #3a7049).
   ===================================================================== */
.hp-page.is-wide { max-width: 1180px; }
.hp-mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; color: var(--hp-slate-500); }
.hp-amount { font-variant-numeric: tabular-nums; font-weight: 500; font-size: 14px; }
.hp-nowrap { white-space: nowrap; }
.hp-muted-cell { color: #6b5d52; }
.hp-upper { text-transform: uppercase; }
.hp-xs { font-size: 12px; color: var(--hp-slate-500); }
.hp-xs-muted { font-size: 12px; color: var(--hp-slate-500); margin-top: 4px !important; }
.hp-req { color: #bd3d17; }

/* Chips (cp-v2 StatusChip) and badges */
.hp-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.hp-chip.is-good { background: rgba(72, 140, 92, 0.14); color: #3a7049; }
.hp-chip.is-warn { background: rgba(232, 102, 47, 0.14); color: #a8481b; }
.hp-chip.is-info { background: rgba(38, 89, 138, 0.14); color: #26598a; }
.hp-chip.is-muted { background: rgba(58, 43, 30, 0.08); color: #6b5f55; }
.hp-chip.is-error { background: rgba(189, 61, 23, 0.14); color: #a3351a; }
.hp-chip.is-accent { background: rgba(143, 79, 174, 0.15); color: #7a3f96; }
.hp-sbadge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 10px; border: 1px solid transparent; font-size: 12px; font-weight: 600; white-space: nowrap; }
.hp-sbadge.is-sage { background: #6a7a5e; color: #fff; }
.hp-sbadge.is-terracotta { background: #a4624a; color: #fff; }
.hp-sbadge.is-gray { background: #e8e2d8; color: #5f5a55; }
.hp-sbadge.is-emerald { background: #d1fae5; color: #047857; }
.hp-sbadge.is-green { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.hp-sbadge.is-outline { background: #fff; color: var(--hp-ink); border-color: var(--hp-gray-200); }
.hp-sbadge.is-amber-outline { background: #fffbeb; color: #b45309; border-color: #fcd34d; }
.hp-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 10px; border: 1px solid; font-size: 12px; font-weight: 600; }
.hp-badge.is-green { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.hp-avatar-sm { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; background: rgba(143, 79, 174, 0.15); color: #7a3f96; }
.hp-avatar-sm.is-success { background: rgba(72, 140, 92, 0.14); color: #3a7049; }
.hp-avatar-sm.is-warning { background: rgba(232, 102, 47, 0.14); color: #a8481b; }

/* Tabs (shadcn pill tabs) */
.hp-tabs { display: inline-flex; align-items: center; gap: 2px; min-height: 38px; padding: 4px; border-radius: 12px; background: var(--hp-purple-soft); max-width: 100%; overflow-x: auto; }
.hp-tabs.is-full { display: flex; }
.hp-tab { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 0; border-radius: 10px; background: transparent; font-size: 14px; font-weight: 500; color: #6b5f55; cursor: pointer; white-space: nowrap; }
.hp-tab:hover { color: var(--hp-ink); }
.hp-tab.is-active { background: #fff; color: var(--hp-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); }
.hp-tabs.is-underline { display: flex; background: transparent; padding: 0; border-radius: 0; border-bottom: 1px solid var(--hp-gray-200); gap: 0; }
.hp-tabs.is-underline .hp-tab { border-radius: 0; padding: 10px 16px; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--hp-slate-500); }
.hp-tabs.is-underline .hp-tab.is-active { background: transparent; box-shadow: none; color: #c2410c; border-bottom-color: #c4836a; }
.hp-tabs.is-underline .hp-tab .hp-i { width: 15px; height: 15px; }
.hp-tabpanel { margin-top: 8px; }

/* KPI tiles (cp-v2 KPITile) */
.hp-kpis.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hp-kpis.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hp-kpis.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hp-kpis.is-1 { grid-template-columns: 1fr; }
.hp-kpis.is-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.hp-kpis .hp-kpi { border-radius: 20px; border-color: rgba(0, 0, 0, 0.08); }
.hp-kpi dd.is-accent { color: var(--hp-purple); }
.hp-kpis .hp-kpi dd.hp-kpi-sub { font-family: var(--hp-font-ui); font-size: 12px; font-weight: 400; color: #6b5d52; margin-top: 6px; }
.hp-kpis.is-auto .hp-kpi dd, .hp-kpis.is-1 .hp-kpi dd { font-size: 20px; font-weight: 600; }

/* Panels, sections */
.hp-panel { background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 20px; padding: 20px 22px; }
.hp-panel.is-flush { padding: 0; overflow: hidden; }
.hp-panel-title { font-family: var(--hp-font-ui); font-size: 14px; font-weight: 600; }
.hp-panel-sub { font-size: 13px; color: #6b5d52; margin: 2px 0 16px !important; }
.hp-limb { background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 20px; overflow: hidden; }
.hp-limb-head { padding: 12px 16px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
.hp-limb-head h5 { font-family: var(--hp-font-ui); font-size: 14px; font-weight: 600; }
.hp-limb-head p { font-size: 13px; color: #6b5d52; margin-top: 2px; }
.hp-limb-body { padding: 20px 16px; }
.hp-limb-foot { padding: 12px 16px; border-top: 1px solid rgba(0, 0, 0, 0.06); }
.hp-subhead { font-family: var(--hp-font-ui); font-size: 13px; font-weight: 600; color: var(--hp-ink); }
.hp-caption { font-size: 12px; line-height: 1.45; color: #6b5d52; margin-top: 4px !important; }
.hp-mini-label { font-size: 12px; font-weight: 600; color: #6b5d52; margin-top: 10px !important; }
.hp-disclaimer { background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 20px; padding: 14px 16px; font-size: 12.5px; line-height: 1.5; color: #6b5d52; }
.hp-illustrative { display: flex; gap: 8px; align-items: center; font-size: 12px; color: #6b5d52; }
.hp-illustrative .hp-i { width: 14px; height: 14px; color: var(--hp-purple); }
.hp-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.hp-gap { height: 4px; }
.hp-center { text-align: center; color: var(--hp-slate-500); font-size: 14px; }
.hp-center .hp-i { width: 36px; height: 36px; color: #cbd5e1; margin-bottom: 6px; }

/* Tables: cp-v2 look, boxed variant, mobile cards */
.hp-tablewrap { overflow-x: auto; }
.hp-tablewrap.is-boxed { border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 12px; }
.hp-tablewrap.is-cp .hp-table th { background: transparent; padding: 10px 8px; }
.hp-tablewrap.is-cp .hp-table td { padding: 11px 8px; font-size: 13px; }
.hp-table th.is-right, .hp-table td.is-right { text-align: right; }
.hp-table th.is-center, .hp-table td.is-center { text-align: center; }
.hp-table tr.is-invite { background: rgba(58, 43, 30, 0.02); }
.hp-panel .hp-tablewrap { margin-top: 0; }
.hp-list .hp-tablewrap { margin-top: 14px; }
.hp-emp-cell { display: flex; flex-direction: column; }
.hp-is-portal-person, .is-portal .hp-person { white-space: nowrap; }
.hp-emp-cell strong { font-weight: 500; font-size: 14px; }
.hp-emp-cell span { font-size: 12px; color: var(--hp-slate-500); }
.hp-placeholder { color: #94a3b8; }
.hp-doc-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.hp-doc-name .hp-i { color: #94a3b8; }
.hp-sorthead { display: inline-flex; align-items: center; gap: 2px; border: 0; background: none; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.hp-sort-i { width: 12px; height: 12px; }
.hp-sort-i.is-asc { transform: rotate(-90deg); }

/* Buttons and inline controls */
.hp-btn.is-xs { min-height: 32px; padding: 4px 10px; font-size: 12.5px; }
.hp-btn.is-xs .hp-i { width: 13px; height: 13px; }
.hp-btn-green { background: linear-gradient(#22c55e, #16a34a); background: #15803d; }
.hp-btn-green:hover:not(:disabled) { background: #166534; }
.hp-btn-outline-orange { background: #fff; color: #c2410c; box-shadow: inset 0 0 0 1.5px #fdba74; }
.hp-btn-outline-orange:hover:not(:disabled) { background: #fff7ed; }
.hp-btn-purple-sq { background: var(--hp-purple); }
.hp-btn-purple-sq:hover:not(:disabled) { background: #6e3a8c; }
.hp-btn-red { background: #bd3d17; border-radius: 12px; }
.hp-btn-red:hover:not(:disabled) { background: #a3351a; }
.hp-push { margin-left: auto; }
.hp-iconbtn { width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; display: inline-flex; align-items: center; justify-content: center; color: #756a60; cursor: pointer; }
.hp-iconbtn:hover { background: rgba(143, 79, 174, 0.08); color: var(--hp-ink); }
.hp-iconbtn.is-orange { color: #c2410c; }
.hp-textbtn { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 4px 2px; font-size: 12.5px; font-weight: 500; cursor: pointer; }
.hp-textbtn.is-accent { color: #7a3f96; }
.hp-textbtn.is-error { color: #a3351a; }
.hp-textbtn.is-muted { color: #756a60; }
.hp-rowactions { display: flex; gap: 8px; align-items: center; }
.hp-viewlink { border: 0; background: none; padding: 0; color: #7a3f96; text-decoration: underline; text-underline-offset: 2px; font-size: 13.5px; cursor: pointer; }
.hp-namebtn { border: 0; background: none; padding: 0; font: inherit; font-weight: 500; color: inherit; cursor: pointer; text-align: left; }
.hp-namebtn:hover { color: var(--hp-purple); }
.hp-subdued { font-size: 12px; padding: 4px 10px; border-radius: 8px; border: 1px solid rgba(0, 0, 0, 0.1); background: transparent; color: #6b5d52; cursor: pointer; }
.hp-subdued[data-strong] { border-color: #6b5d52; color: var(--hp-ink); }
.hp-pilllink { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(0, 0, 0, 0.1); background: transparent; font-size: 13px; font-weight: 500; color: var(--hp-ink); cursor: pointer; }
.hp-pilllink .hp-i { width: 14px; height: 14px; }
.hp-pilllink:hover { background: var(--hp-purple-tint); }
.hp-link-quiet { border: 0; background: none; padding: 0; font-size: 12px; font-weight: 500; color: var(--hp-slate-600); cursor: pointer; }

/* Search / filter toolbars */
.hp-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hp-search { position: relative; flex: 1 1 220px; max-width: 380px; }
.hp-search.is-grow { max-width: none; }
.hp-search .hp-i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #94a3b8; z-index: 1; pointer-events: none; }
.hp-search .hp-input { padding-left: 36px; }
.hp-select-sm { width: 200px; min-height: 44px; border-color: #8b8680; border-radius: 12px; font-size: 14px; }
.hp-select-xs { width: 140px; min-height: 44px; border-color: #8b8680; border-radius: 12px; font-size: 14px; }
.hp-count { font-size: 14px; color: #6b5d52; white-space: nowrap; }

/* Home */
.hp-home-head .hp-live { font-size: 12px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: #047857; }
.hp-home-head h4 { font-family: var(--hp-font-ui); font-size: 24px; font-weight: 600; color: var(--hp-slate-900); margin-top: 4px; }
.hp-home-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 24px; align-items: start; }
.hp-eyebrow-grey { font-size: 12px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--hp-slate-500); }
.hp-home-h2 { font-family: var(--hp-font-ui); font-size: 20px; font-weight: 600; color: var(--hp-slate-900); margin-top: 4px; }
.hp-limbs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.hp-limbcard { background: #fff; border: 1px solid var(--hp-slate-200); border-radius: 12px; padding: 20px; }
.hp-limbcard-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.hp-limbcard-top h6 { font-family: var(--hp-font-ui); font-size: 16px; font-weight: 600; color: var(--hp-slate-900); }
.hp-limbcard-top p { font-size: 12.5px; color: var(--hp-slate-500); margin-top: 2px; }
.hp-pill-badge { flex-shrink: 0; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; }
.hp-pill-badge.is-green { background: #ecfdf5; color: #047857; }
.hp-pill-badge.is-amber { background: #fffbeb; color: #b45309; }
.hp-progress { height: 6px; margin-top: 16px; border-radius: 999px; background: #f1f5f9; overflow: hidden; }
.hp-progress span { display: block; height: 100%; border-radius: 999px; }
.hp-progress .is-green { background: #10b981; }
.hp-progress .is-amber { background: #f59e0b; }
.hp-limb-list { margin-top: 16px !important; display: flex; flex-direction: column; gap: 8px; }
.hp-limb-list li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--hp-slate-700); }
.hp-limb-list li.is-clear { font-size: 12.5px; color: var(--hp-slate-500); }
.hp-dot { width: 6px; height: 6px; border-radius: 50%; background: #cbd5e1; flex-shrink: 0; }
.hp-sidecar { display: flex; flex-direction: column; background: var(--hp-slate-50); border: 1px solid var(--hp-slate-200); border-radius: 12px; }
.hp-sidecar-head { padding: 12px 16px; border-bottom: 1px solid var(--hp-slate-200); }
.hp-sidecar-head h5 { font-family: var(--hp-font-ui); font-size: 14px; font-weight: 600; color: var(--hp-slate-900); }
.hp-sidecar-head p { font-size: 12px; color: var(--hp-slate-500); }
.hp-sidecar-body { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.hp-sidecar-foot { padding: 12px 16px; border-top: 1px solid var(--hp-slate-200); }
.hp-need { display: flex; gap: 8px; align-items: flex-start; padding: 12px; border: 1px solid var(--hp-slate-200); border-radius: 10px; background: #fff; }
.hp-need.is-lead { border-color: #fcd34d; background: #fffbeb; }
.hp-need strong { display: block; font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--hp-slate-900); }
.hp-need span:not(.hp-sev) { display: block; font-size: 12px; color: var(--hp-slate-500); margin-top: 2px; }
.hp-sev { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
.hp-sev.is-warning { background: #f59e0b; }
.hp-sev.is-critical { background: #ef4444; }
.hp-sev.is-info { background: #cbd5e1; }
.hp-need-link { margin-top: 8px; border: 0; background: none; padding: 0; font-size: 12.5px; font-weight: 600; color: #047857; cursor: pointer; }
.hp-need-clear { padding: 24px 4px; text-align: center; font-size: 12.5px; color: var(--hp-slate-500); }

/* Employees */
.hp-walk-icon { color: var(--hp-purple); margin-top: 2px; }
.hp-walk-icon .hp-i { width: 19px; height: 19px; }
.hp-walk-text { flex: 1; min-width: 200px; }
.hp-walk-text strong { font-weight: 500; }
.hp-walk-text p { font-size: 13.5px; color: var(--hp-gray-600); margin-top: 4px; }
.hp-walk-card { flex-wrap: wrap; align-items: center; }
.hp-list-head h5 { font-family: var(--hp-font-ui); font-size: 14.5px; font-weight: 600; }

/* Dialog content */
.hp-dialog.is-wide { width: min(600px, calc(100% - 32px)); }
.hp-dialog-actions { padding-top: 16px; border-top: 1px solid var(--hp-gray-200); }
.hp-dlg-alert { display: inline-flex; vertical-align: -3px; margin-right: 8px; color: #e8662f; }
.hp-dlg-alert.is-red { color: #dc2626; }
.hp-profile { display: flex; flex-direction: column; gap: 14px; }
.hp-flabel { font-size: 11.5px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--hp-slate-500); }
.hp-fvalue { font-size: 14px; color: var(--hp-slate-900); margin-top: 3px !important; }
.hp-fvalue.is-strong { font-size: 16px; font-weight: 600; }
.hp-salary { border-radius: 12px; background: var(--hp-slate-50); padding: 14px 16px; }
.hp-salary > * + * { margin-top: 12px; }
.hp-salary-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hp-salary-label { display: block; font-size: 13.5px; font-weight: 500; color: var(--hp-slate-600); }
.hp-salary-value { display: block; font-size: 18px; font-weight: 600; margin-top: 2px; }
.hp-benefit { display: inline-block; padding: 2px 10px; border-radius: 10px; border: 1px solid #bfdbfe; background: #eff6ff; color: #1d4ed8; font-size: 12px; font-weight: 600; }
.hp-prefix { position: relative; }
.hp-prefix span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--hp-slate-500); }
.hp-prefix .hp-input { padding-left: 26px; }
.hp-textarea { min-height: 0; resize: vertical; line-height: 1.5; }
.hp-warnbox { display: flex; gap: 10px; padding: 14px 16px; border-radius: 14px; background: rgba(232, 102, 47, 0.12); border: 1px solid rgba(0, 0, 0, 0.06); font-size: 14px; color: #6b5d52; }
.hp-warnbox > .hp-i { color: #c2410c; margin-top: 2px; }
.hp-warnbox strong { color: #a8481b; font-weight: 500; }
.hp-warnbox ul, .hp-redbox ul { list-style: disc; padding-left: 18px; margin-top: 4px; }
.hp-redbox { padding: 12px 14px; border-radius: 12px; border: 1px solid #fecaca; background: #fef2f2; font-size: 13.5px; color: #991b1b; }
.hp-amberbox { padding: 12px 14px; border-radius: 12px; border: 1px solid #fde68a; background: #fffbeb; font-size: 13.5px; color: #92400e; }
.hp-amberline { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 10px; background: #fffbeb; border: 1px solid #fde68a; font-size: 13px; color: #92400e; }
.hp-infobox { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 14px; background: rgba(38, 89, 138, 0.12); font-size: 14px; color: #26598a; }
.hp-infobox-sub { font-size: 12px; color: #6b5d52; }
.hp-accentbox { padding: 12px; border-radius: 14px; background: rgba(143, 79, 174, 0.12); font-size: 14px; }
.hp-demo-note { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: #3730a3; background: #eef2ff; border-radius: 10px; padding: 8px 12px; }
.hp-demo-note .hp-i { width: 15px; height: 15px; }
.hp-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.hp-scrollbox { max-height: 300px; overflow-y: auto; padding: 2px; }

/* Arrangements */
.hp-arrgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.hp-arrcard { display: flex; flex-direction: column; gap: 12px; width: 100%; text-align: left; background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 16px; padding: 18px 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); cursor: pointer; font: inherit; color: inherit; transition: box-shadow 0.15s; }
.hp-arrcard:hover { box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.18); }
.hp-arrcard-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.hp-arrcard-head > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hp-arrcard-child { font-size: 16px; font-weight: 600; color: var(--hp-slate-900); }
.hp-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 13.5px; color: var(--hp-slate-600); }
.hp-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.hp-foot-line { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.hp-foot-line .hp-i { width: 14px; height: 14px; }
.hp-foot-line.is-green { color: #047857; }
.hp-empty-dashed { max-width: 440px; margin: 16px auto; padding: 28px 20px; text-align: center; border: 1px dashed var(--hp-slate-200); border-radius: 12px; background: var(--hp-slate-50); color: var(--hp-slate-700); }
.hp-stepper { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hp-stepper.is-compact { gap: 10px; }
.hp-step { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: #a4624a; }
.hp-step.is-done { color: #5b6a50; }
.hp-step-dot { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(196, 131, 106, 0.12); }
.hp-step.is-done .hp-step-dot { background: rgba(124, 139, 111, 0.14); }
.hp-step-dot .hp-i { width: 15px; height: 15px; }
.hp-stepper.is-compact .hp-step-dot { width: 20px; height: 20px; }
.hp-stepper.is-compact .hp-step-dot .hp-i { width: 12px; height: 12px; }
.hp-step-line { display: inline-block; width: 24px; height: 1px; background: rgba(196, 131, 106, 0.35); }
.hp-step-line.is-done { background: rgba(124, 139, 111, 0.45); }
.hp-stepper.is-compact .hp-step-line { width: 12px; }
.hp-detail-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: flex-start; }
.hp-detail-title { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 8px; }
.hp-cardtitle.is-plain { font-family: var(--hp-font-display); font-size: 17px; font-weight: 600; color: var(--hp-ink); }
.hp-cardtitle.is-plain .hp-i { color: #c2410c; }
.hp-add-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; }
.hp-add-state { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.hp-add-state strong { font-weight: 500; }
.hp-add-state p { font-size: 13px; color: var(--hp-slate-500); }
.hp-add-state.is-green > .hp-i { color: #15803d; }
.hp-add-state.is-amber > .hp-i { color: #b45309; }
.hp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hp-stats > div { background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 16px; padding: 14px 16px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); }
.hp-stats dt { font-size: 12px; color: var(--hp-slate-500); }
.hp-stats dd { margin: 2px 0 0; font-size: 19px; font-weight: 700; }
.hp-info-row { display: flex; gap: 12px; align-items: flex-start; }
.hp-info-row > .hp-i { width: 19px; height: 19px; color: #94a3b8; margin-top: 2px; }
.hp-info-row strong { font-weight: 500; }
.hp-info-row p { font-size: 13.5px; color: var(--hp-slate-500); display: flex; gap: 6px; align-items: center; }
.hp-info-row p .hp-i { width: 13px; height: 13px; }
.hp-notes { border-top: 1px solid #f1f5f9; }
.hp-notes li { padding: 10px 0; border-bottom: 1px solid #f1f5f9; font-size: 14px; }
.hp-notes span { font-size: 12px; color: var(--hp-slate-500); }
.hp-timeline { position: relative; display: flex; flex-direction: column; gap: 16px; padding-top: 8px; }
.hp-timeline::before { content: ""; position: absolute; left: 16px; top: 8px; bottom: 0; width: 1px; background: var(--hp-slate-200); }
.hp-timeline li { position: relative; display: flex; gap: 14px; }
.hp-tl-dot { position: relative; width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: #f1f5f9; color: var(--hp-slate-600); }
.hp-tl-body { flex: 1; min-width: 0; }
.hp-tl-top { display: flex; justify-content: space-between; gap: 12px; }
.hp-tl-top strong { font-size: 14px; font-weight: 500; color: var(--hp-slate-900); }
.hp-tl-top span { font-size: 12px; color: var(--hp-slate-500); white-space: nowrap; }
.hp-tl-body p { font-size: 13.5px; color: var(--hp-slate-600); }
.hp-tl-role { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; margin-top: 2px; }
.hp-tl-role .hp-i { width: 12px; height: 12px; }
.hp-tl-role.is-employer { color: #c2410c; }
.hp-tl-role.is-employee { color: #15803d; }
.hp-tl-role.is-nursery { color: #7e22ce; }
.hp-tl-role.is-system { color: var(--hp-slate-500); }

/* Payments */
.hp-pay-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.hp-pay-child { font-family: var(--hp-font-ui); font-size: 15px; font-weight: 600; }
.hp-pay-top p { font-size: 13px; color: #6b5d52; }
.hp-allconfirmed { display: flex; gap: 8px; align-items: center; font-size: 13px; color: #7a3f96; }
.hp-fee-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.06); margin-top: 8px; }
.hp-fee-period { font-size: 13px; font-weight: 500; }
.hp-fee-right { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hp-inline-confirm { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hp-inline-confirm p { font-size: 12px; color: #6b5d52; max-width: 300px; }
.hp-inline-confirm div { display: flex; gap: 6px; }
.hp-prev-title { font-size: 12px; font-weight: 600; color: #6b5d52; margin-top: 10px !important; }

/* Compliance */
.hp-checklist li { border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
.hp-checklist li:last-child { border-bottom: 0; }
.hp-check-row { display: flex; align-items: center; gap: 12px; padding: 11px 16px; }
.hp-check-row > div { flex: 1; min-width: 0; }
.hp-check-row strong { display: block; font-size: 14px; font-weight: 500; }
.hp-check-row span:not(.hp-chip):not(.hp-avatar-sm) { display: block; font-size: 12px; color: #6b5d52; }
.hp-pagehead.is-sub h5 { font-family: var(--hp-font-display); font-size: 24px; font-weight: 500; letter-spacing: -0.02em; }
.hp-pagehead.is-sub p { font-size: 14px; color: #6b5d52; margin-top: 2px; }
.hp-sechead { display: flex; gap: 8px; align-items: center; font-family: var(--hp-font-ui); font-size: 14px; font-weight: 500; }
.hp-sechead.is-green { color: #15803d; }
.hp-quota { display: flex; align-items: center; gap: 12px; justify-content: flex-end; margin-left: auto; width: fit-content; border: 1px solid var(--hp-slate-200); border-radius: 12px; padding: 8px 16px; background: #fff; font-size: 13.5px; color: var(--hp-slate-600); }
.hp-quota-bar { width: 120px; height: 8px; border-radius: 999px; background: #f1f5f9; overflow: hidden; }
.hp-quota-bar span { display: block; width: 0; height: 100%; background: #c4836a; }
.hp-chat-panel { display: flex; flex-direction: column; min-height: 380px; border: 1px solid var(--hp-slate-200); border-radius: 12px; background: #fff; }
.hp-chat-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; }
.hp-chat-empty > .hp-i { width: 44px; height: 44px; color: #cbd5e1; stroke-width: 1.6; }
.hp-chat-empty strong { font-size: 17px; font-weight: 600; color: var(--hp-slate-700); margin-top: 8px; }
.hp-chat-empty p { font-size: 13.5px; color: var(--hp-slate-500); max-width: 28rem; margin-top: 4px; }
.hp-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.hp-chipbtn { border: 1px solid var(--hp-slate-200); border-radius: 999px; background: #fff; padding: 6px 16px; font-size: 13.5px; color: var(--hp-slate-700); cursor: pointer; }
.hp-chipbtn:hover { border-color: #fdba74; background: #fff7ed; }
.hp-chat-input { display: flex; gap: 8px; align-items: flex-end; padding: 14px; border-top: 1px solid var(--hp-slate-200); }
.hp-chat-input .hp-textarea { flex: 1; }
.hp-areas { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.hp-area { font-size: 13px; font-weight: 600; color: #6b5d52; }
.hp-ev-row { padding: 10px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
.hp-ev-top { display: flex; justify-content: space-between; gap: 16px; align-items: center; font-size: 13px; font-weight: 500; }

/* Audit log */
.hp-empty-plain { padding: 48px 0; text-align: center; font-size: 14px; color: #6b5d52; }
.hp-empty-plain .hp-i { width: 38px; height: 38px; color: #756a60; margin-bottom: 8px; }

/* Settings */
.hp-card.is-green-border { border-color: #a7f3d0; }
.hp-card.is-flat { border: 0; padding: 0; }
.hp-summary { border-radius: 14px; background: #f8fafc; padding: 14px 16px; font-size: 14px; color: var(--hp-slate-600); }
.hp-mandate { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; border: 1px solid var(--hp-slate-200); border-radius: 14px; background: rgba(248, 250, 252, 0.7); padding: 14px 16px; }
.hp-mandate strong { font-size: 14px; font-weight: 600; color: var(--hp-slate-900); }
.hp-mandate p { font-size: 14px; color: var(--hp-slate-600); margin-top: 4px; }
.hp-note-box { display: flex; gap: 8px; align-items: flex-start; border: 1px solid #d8dee8; border-radius: 14px; padding: 14px 16px; font-size: 14px; color: var(--hp-slate-600); }
.hp-note-box .hp-i { color: #c4836a; margin-top: 3px; }
.hp-ok-line { display: flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 500; color: #15803d; }
.hp-card .hp-cardhead + .hp-field { margin-top: 18px; }
.hp-invite-team { border: 1px solid var(--hp-slate-200); border-radius: 12px; background: var(--hp-slate-50); padding: 16px; }
.hp-invite-team > * + * { margin-top: 12px; }
.hp-form-title { font-size: 14px; font-weight: 500; color: var(--hp-slate-700); }
.hp-roles { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hp-roles legend { width: 100%; }
.hp-role { flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--hp-slate-200); border-radius: 12px; background: #fff; padding: 12px; cursor: pointer; position: relative; }
.hp-role input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.hp-role:focus-within { outline: 2px solid var(--hp-purple); outline-offset: 2px; }
.hp-role.is-on { border-color: #fb923c; background: #fff7ed; }
.hp-role strong { font-size: 14px; font-weight: 600; }
.hp-role span { font-size: 12px; color: var(--hp-slate-600); }
.hp-members { display: flex; flex-direction: column; gap: 8px; margin-top: 14px !important; }
.hp-member { display: flex; justify-content: space-between; gap: 12px; align-items: center; border: 1px solid var(--hp-slate-200); border-radius: 12px; padding: 12px 16px; }
.hp-member-id { display: flex; gap: 12px; align-items: center; min-width: 0; }
.hp-member-id strong { display: block; font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.hp-member-id > div > span { display: block; font-size: 12px; color: var(--hp-slate-500); }
.hp-member-icon { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: #f1f5f9; color: #94a3b8; }
.hp-you { color: #64748b; font-weight: 400; }
.hp-member-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.hp-role-select { height: 32px; border: 1px solid var(--hp-slate-200); border-radius: 8px; background: #fff; padding: 0 8px; font-size: 12.5px; font-weight: 500; color: var(--hp-slate-700); }
.hp-nudge { margin-top: 12px; border: 1px dashed #cbd5e1; border-radius: 12px; background: rgba(248, 250, 252, 0.6); padding: 16px; }
.hp-nudge strong { font-size: 14px; font-weight: 500; color: var(--hp-slate-700); }
.hp-nudge p { font-size: 12.5px; color: var(--hp-slate-500); margin: 2px 0 10px; }
.hp-acct-email { display: flex; gap: 8px; align-items: center; font-size: 14px; color: #6b5d52; }

/* Container layouts */
@container hp (min-width: 760px) {
  .hp-limbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container hp (min-width: 980px) {
  .hp-home-grid { grid-template-columns: minmax(0, 1fr) 300px; }
}
@container hp (max-width: 900px) {
  .hp-kpis.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container hp (max-width: 680px) {
  .hp-kpis.is-2, .hp-kpis.is-3, .hp-kpis.is-4 { grid-template-columns: 1fr; }
  .hp-grid3 { grid-template-columns: 1fr; }
  .hp-search, .hp-select-sm, .hp-select-xs { flex: 1 1 100%; width: 100%; max-width: none; }
  .hp-toolbar .hp-btn { flex: 1 1 auto; }
  .hp-detail-head .hp-actions { flex-direction: row; flex-wrap: wrap; }
  .hp-detail-head .hp-actions .hp-btn { width: auto; flex: 1 1 auto; }
  .hp-member { flex-direction: column; align-items: flex-start; }
  .hp-quota { width: 100%; justify-content: space-between; }
}
@container hp (max-width: 760px) {
  /* tables become stacked cards */
  .is-portal .hp-tablewrap { overflow: visible; }
  .is-portal .hp-tablewrap .hp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .is-portal .hp-tablewrap .hp-table, .hp-tablewrap .hp-table tbody, .hp-tablewrap .hp-table tr, .hp-tablewrap .hp-table td { display: block; width: 100%; }
  .is-portal .hp-tablewrap .hp-table tr { border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 12px; padding: 8px 12px; margin-bottom: 10px; background: #fff; }
  .is-portal .hp-tablewrap .hp-table td { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 6px 0 !important; border: 0; text-align: right !important; }
  .is-portal .hp-tablewrap .hp-table td::before { content: attr(data-label); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #756a60; text-align: left; flex-shrink: 0; }
  .is-portal .hp-tablewrap .hp-table td[data-label=""]::before { content: none; }
  .is-portal .hp-tablewrap.is-boxed { border: 0; }
  .is-portal .hp-panel.is-flush { padding: 10px; }
}

/* Arrangement journey walkthrough */
.hp.is-guided [data-target]:not(:disabled) { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #8f4fae; }
.hp.is-guided input[type="checkbox"][data-target] { outline: 3px solid #8f4fae; outline-offset: 2px; box-shadow: none; }
.hp-sbadge.is-sand { background: #e8d5a3; color: #2d3436; }
.hp-sechead.is-amber { color: #b45309; }
.hp-stepper.is-journey { gap: 12px 14px; }
.hp-step-text { display: flex; flex-direction: column; line-height: 1.25; }
.hp-step-sub { font-size: 11.5px; font-weight: 400; color: var(--hp-slate-600); }
.aj-intro { text-align: center; padding: 36px 8px; }
.aj-intro > * + * { margin-top: 14px; }
.aj-intro-mark { display: inline-flex; padding: 14px; border-radius: 50%; background: var(--hp-purple-soft); color: var(--hp-purple); }
.aj-intro-mark .hp-i { width: 30px; height: 30px; }
.aj-intro h4 { font-family: var(--hp-font-display); font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.aj-intro p { color: var(--hp-gray-700); max-width: 34rem; margin-left: auto; margin-right: auto; }
.aj-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; font-size: 13px; color: var(--hp-gray-600); }
.aj-legend li { display: inline-flex; gap: 6px; align-items: center; }
.aj-who { padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.aj-who.is-employer { background: #fff7ed; color: #c2410c; }
.aj-who.is-employee { background: #f0fdf4; color: #15803d; }
.aj-who.is-nursery { background: #faf5ff; color: #7e22ce; }
.aj-who.is-halo { background: #f1f5f9; color: var(--hp-slate-700); }
.aj-notrated { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 6px; background: #f1f5f9; color: var(--hp-slate-600); font-size: 11.5px; font-weight: 500; }
.aj-pending { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; padding: 16px 18px; border: 1px solid #fde68a; border-radius: 16px; background: rgba(255, 251, 235, 0.6); }
.aj-pending-doc { display: flex; gap: 12px; align-items: flex-start; }
.aj-pending-doc > .hp-i { width: 20px; height: 20px; color: #d97706; margin-top: 2px; }
.aj-pending-doc strong { display: block; font-size: 14px; font-weight: 500; color: var(--hp-slate-900); }
.aj-pending-doc span { display: block; font-size: 12px; color: var(--hp-slate-500); }
.aj-pending-actions { display: flex; gap: 10px; align-items: center; }
.aj-records li { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid #f1f5f9; }
.aj-records li:last-child { border-bottom: 0; }
.aj-records li > div { flex: 1; min-width: 0; }
.aj-records strong { display: block; font-size: 14px; font-weight: 500; }
.aj-records span:not(.aj-rec-icon) { display: block; font-size: 12.5px; color: var(--hp-slate-500); }
.aj-rec-icon { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: #f0fdf4; color: #15803d; }
.aj-doc { max-height: 280px; overflow-y: auto; padding: 16px 18px; border: 1px solid var(--hp-gray-200); border-radius: 12px; font-size: 13.5px; line-height: 1.6; color: var(--hp-gray-800); }
.aj-doc h6 { font-family: var(--hp-font-ui); font-size: 13.5px; font-weight: 600; margin-top: 12px; color: var(--hp-ink); }
.aj-doc-flag { padding: 8px 10px; border-radius: 8px; background: #eef2ff; color: #3730a3; font-size: 12.5px; }
@container hp (max-width: 680px) {
  .aj-pending-actions { width: 100%; justify-content: space-between; }
  .aj-records li { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .hp *, .hp *::before, .hp *::after { animation: none !important; transition: none !important; }
}