:root {
  --orange: #2563eb;
  --green: #0f766e;
  --cream: #fff8ed;
  --ink: #2e3326;
  --muted: #6b705f;
  --line: #e5e6d7;
  --white: #ffffff;
  --shadow: 0 14px 34px rgba(46, 51, 38, .08);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 16px/1.55 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: #687333; }
.site-header { background: var(--white); border-bottom: 1px solid var(--line); }
.header-inner { max-width: 1180px; margin: auto; padding: 15px 20px; display: flex; gap: 20px; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.brand-logo { display: block; width: 164px; height: auto; max-height: 64px; object-fit: contain; }
.brand-context strong, .brand-context small { display: block; }
.brand-context strong { font-size: 15px; }
.brand-context small { color: var(--muted); font-size: 12px; }
.nav { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.nav a { color: var(--ink); text-decoration: none; font-size: 13px; padding: 6px 7px; border-radius: 8px; }
.nav a:hover { background: #f1f2e7; }
.page { max-width: 1180px; margin: auto; padding: 24px 20px 55px; }
.footer { padding: 24px 20px; text-align: center; color: var(--muted); font-size: 13px; }
.notice, .alert { border-radius: var(--hub-radius-row, 14px); padding: 13px 16px; margin-bottom: 22px; background: #f8eadc; border: 1px solid #f1cba6; }
.alert.warning { background: #f8f5df; border-color: #e0dca8; }
.alert ul { margin: 8px 0 0; }
.eyebrow { color: #687333; font-size: 12px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
h1, h2, h3 { line-height: 1.15; margin: 7px 0 12px; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.35rem, 3vw, 2rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 14px; }
.lead { color: var(--muted); font-size: 1.08rem; max-width: 650px; }
.muted { color: var(--muted); font-size: .9rem; }
.hero { display: flex; gap: 28px; align-items: flex-end; justify-content: space-between; padding: 24px 0 35px; }
.tier-card { min-width: 190px; padding: 18px; border-radius: 18px; background: var(--green); color: var(--white); box-shadow: var(--shadow); }
.tier-card span, .tier-card small { display: block; opacity: .85; }
.tier-card strong { display: block; font-size: 1.5rem; margin: 5px 0; }
.section { margin: 20px 0 34px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 16px; }
.card-grid, .split-grid, .doc-grid, .admin-grid { display: grid; gap: 8px; }
.card-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.split-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.doc-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.admin-grid { grid-template-columns: minmax(260px, .8fr) minmax(400px, 1.2fr); }
.action-card, .card, .success-card, .auth-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--hub-radius-card, 18px); padding: 22px; box-shadow: var(--shadow); }
.action-card { display: flex; flex-direction: column; align-items: flex-start; }
.action-card .button { margin-top: auto; }
.tag, .status { display: inline-block; border-radius: 999px; padding: 4px 9px; background: #eef0dc; color: #697234; font-size: 12px; font-weight: 700; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--hub-control-height, 44px);
  min-height: var(--hub-control-height, 44px);
  border: 1px solid transparent;
  border-radius: var(--hub-radius-control, 10px);
  padding: 10px var(--hub-control-padding-x, 14px);
  color: var(--ink);
  background: #eef0dc;
  font: inherit;
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.button.primary { background: var(--orange); color: var(--white); }
.button.secondary { background: #eef0dc; color: var(--ink); border-color: color-mix(in srgb, var(--line) 70%, transparent); }
.button.ghost { background: transparent; border-color: var(--hub-border, var(--line)); }
.button.small { padding: 8px 12px; font-size: 14px; }
.button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--forest) 42%, transparent);
  outline-offset: 2px;
}
.button:disabled,
.button[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}
.button.icon-only {
  width: var(--hub-control-height, 44px);
  padding-inline: 0;
}
.button-row, .form-actions { display: flex; gap: var(--hub-space-2, 8px); flex-wrap: wrap; margin-top: var(--hub-space-4, 16px); }

.form-admin-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.form-admin-actions form { margin: 0; }
.form-admin-actions .button { margin: 0; }
.clean-list, .doc-list { list-style: none; padding: 0; margin: 0; }
.clean-list li, .doc-list li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.clean-list li:last-child, .doc-list li:last-child { border-bottom: 0; }
.clean-list span, .doc-list .status { text-align: right; }
.metric { font-size: 3rem; color: var(--orange); font-weight: 800; margin: 10px 0; }
.text-link { font-weight: 750; text-decoration: none; }
.auth-card { max-width: 500px; margin: 8vh auto; padding: clamp(24px, 6vw, 52px); }

.first-login-password-overlay {
  position: fixed;
  inset: 0;
  z-index: 170;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  overflow-y: auto;
  background: rgba(23, 28, 20, .68);
  backdrop-filter: blur(3px);
}
.first-login-password-dialog {
  box-sizing: border-box;
  width: min(480px, 100%);
  max-height: calc(100dvh - 36px);
  overflow-y: auto;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--hub-radius-dialog, 22px);
  background: var(--white);
  box-shadow: 0 24px 70px rgba(20, 24, 22, .3);
}
.first-login-password-dialog h2 {
  margin: 4px 0 8px;
  color: var(--deep-forest);
}
.first-login-password-dialog > .lead {
  margin: 0 0 18px;
  font-size: .98rem;
}
.first-login-password-form {
  gap: 12px;
}
.first-login-password-form input {
  min-height: 46px;
  box-sizing: border-box;
}
.first-login-password-form .button {
  width: 100%;
  margin-top: 2px;
}
.first-login-password-switch {
  display: inline-block;
  margin-top: 16px;
}
@media (max-width: 600px) {
  .first-login-password-overlay {
    align-items: center;
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  }
  .first-login-password-dialog {
    max-height: calc(100dvh - 24px);
    padding: 20px;
    border-radius: var(--hub-radius-dialog, 22px);
  }
}

/* HR step-up verification appears over Home rather than replacing the page.
   When a passkey is available, the fallback stays hidden while Android/Samsung
   handles verification so no compressed intermediate card is visible. */
.hr-unlock-overlay[hidden] {
  display: none !important;
}
.hr-unlock-overlay {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  background: rgba(24, 28, 25, .52);
  backdrop-filter: blur(2px);
  overflow-y: auto;
}
.hr-unlock-dialog {
  box-sizing: border-box;
  width: min(520px, 100%);
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--hub-radius-dialog, 22px);
  background: var(--white);
  box-shadow: 0 24px 70px rgba(20, 24, 22, .28);
}
.hr-unlock-dialog-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.hr-unlock-dialog-heading h2 {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: clamp(1.55rem, 6vw, 2rem);
}
.hr-unlock-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--muted);
  background: var(--white);
  font-size: 1.55rem;
  line-height: 1;
  text-decoration: none;
}
.hr-unlock-explanation {
  margin: 0 0 16px;
  padding: 13px 14px;
  border: 1px solid color-mix(in srgb, var(--forest) 20%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--sage-pale) 55%, var(--white));
}
.hr-unlock-explanation strong {
  display: block;
  margin-bottom: 4px;
  color: var(--deep-forest);
}
.hr-unlock-explanation p {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.45;
}
.hr-passkey-option {
  display: grid;
  gap: 9px;
  margin: 14px 0 0;
}
.hr-passkey-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
}
.hr-passkey-status-row p {
  margin: 0;
}
.hr-passkey-mark {
  position: relative;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border: 2px solid var(--forest);
  border-radius: 50%;
}
.hr-passkey-mark::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 2px solid var(--forest);
  border-radius: 50%;
}
.hr-unlock-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 13px;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.hr-unlock-divider::before,
.hr-unlock-divider::after {
  content: "";
  height: 1px;
  flex: 1 1 auto;
  background: var(--line);
}
.hr-unlock-password-form {
  gap: 12px;
}
html.dark-mode .hr-unlock-dialog,
html.dark-mode .hr-unlock-close {
  background: #20261f;
  border-color: #46503f;
}
html.dark-mode .hr-unlock-explanation {
  background: #293127;
  border-color: #46503f;
}
@media (max-width: 600px) {
  .hr-unlock-overlay {
    align-items: center;
    padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
  }
  .hr-unlock-dialog {
    width: 100%;
    min-height: min(500px, calc(100vh - 28px));
    max-height: calc(100vh - 28px);
    padding: 24px 22px;
    border-radius: var(--hub-radius-dialog, 22px);
    -webkit-overflow-scrolling: touch;
  }
}
.remember-login { display: flex; align-items: center; min-height: 44px; gap: 9px; color: var(--muted); font-size: .92rem; font-weight: 650; }
.remember-login input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--forest); }
.narrow { max-width: 650px; margin: 40px auto; }
.stack { display: grid; gap: var(--hub-space-3, 12px); }
label { display: grid; gap: 6px; font-weight: 700; }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea {
  width: 100%;
  min-height: var(--hub-control-height, 44px);
  border: 1px solid var(--hub-control-border, #ccd0bc);
  border-radius: var(--hub-radius-control, 10px);
  padding: 10px 12px;
  background: var(--hub-surface, #fff);
  color: var(--ink);
  font: inherit;
  line-height: 1.35;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--forest) 34%, transparent);
  outline-offset: 1px;
  border-color: color-mix(in srgb, var(--forest) 58%, var(--hub-control-border, #ccd0bc));
}
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):disabled,
select:disabled,
textarea:disabled {
  opacity: .62;
  cursor: not-allowed;
}
textarea { min-height: 110px; resize: vertical; }

.hub-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.hub-field-label {
  color: var(--ink);
  font-size: .9rem;
  font-weight: 750;
  line-height: 1.3;
}
.hub-field-help {
  margin: 0;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 500;
  line-height: 1.4;
}
.required { color: #c95e22; }
.form-shell { max-width: 800px; margin: auto; }
.back-link,
.breadcrumb-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-weight: 700;
}
.back-link {
  margin-bottom: 24px;
}
.back-link::before,
.breadcrumb-link::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: block;
  background: url("/assets/icons/week-navigation.svg") center / contain no-repeat;
  transform: scaleX(-1);
  opacity: .78;
}
html.dark-mode .back-link::before,
html.dark-mode .breadcrumb-link::before {
  filter: invert(1);
  opacity: .86;
}
.form-heading { margin-bottom: 20px; }
.form-grid { display: grid; gap: var(--hub-space-4, 16px); padding: var(--hub-space-6, 24px); border-radius: var(--hub-radius-card, 18px); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); }
.form-actions { grid-column: 1 / -1; }
.filter-bar { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; margin: 22px 0; padding: 16px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; }
.filter-bar label { min-width: 150px; flex: 1; }
.table-wrap { overflow-x: auto; background: var(--white); border: 1px solid var(--line); border-radius: 14px; }
table { width: 100%; min-width: 760px; border-collapse: collapse; }
th, td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); }
th { background: #f1f2e7; font-size: 13px; }
.empty { text-align: center; color: var(--muted); padding: 30px; }
.success-card { max-width: 650px; margin: 8vh auto; text-align: center; padding: 48px 25px; }
.success-icon { width: 60px; height: 60px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: var(--white); font-size: 2rem; font-weight: 800; }

.drive-publish-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 250px; }
.drive-publish-form select { width: auto; min-width: 130px; padding: 8px 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 700px) {
  .form-builder-grid { grid-template-columns: 1fr; }
  .header-inner, .hero { align-items: flex-start; flex-direction: column; }
  .nav { justify-content: flex-start; }
  .tier-card { width: 100%; }
  .clean-list li, .doc-list li { display: block; }
  .clean-list span, .doc-list .status { display: block; text-align: left; margin-top: 3px; }
}


html.modal-open,
body.modal-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}
body.webview-modal-scroll-locked {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
}

/* Shared Android/WebView modal hardening.
   Popups are moved directly under <body> and use an explicit inset sheet on
   phone-sized viewports, matching the proven document-viewer approach. */
.webview-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: rgba(23, 28, 20, .72);
  isolation: isolate;
  overflow: hidden;
}
.webview-modal[hidden] { display: none !important; }

.browser-passkey-prompt {
  z-index: 145;
}
.browser-passkey-prompt-card {
  width: min(460px, calc(100vw - 32px));
  padding: 24px;
  border-radius: 22px;
}
.browser-passkey-prompt-card h2 {
  margin: 4px 0 8px;
}
.browser-passkey-prompt-card p {
  margin: 0;
}
.browser-passkey-prompt-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.browser-passkey-prompt-actions .button {
  flex: 1 1 160px;
}
.browser-passkey-prompt-status {
  margin-top: 14px !important;
}

.hr-device-gate-modal {
  z-index: 155;
}
.hr-device-gate-card {
  width: min(540px, calc(100vw - 32px));
  max-height: min(88vh, 760px);
  overflow: auto;
  padding: 24px;
  border-radius: 22px;
}
.hr-device-gate-card h2 {
  margin: 4px 0 8px;
}
.hr-device-gate-card > p {
  margin: 0 0 14px;
}
.hr-device-gate-file {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}
.hr-device-gate-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.hr-device-gate-actions .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  text-align: center;
}
.hr-device-exit-form {
  margin: 0;
  min-width: 0;
}
.hr-device-exit-form .button {
  width: 100%;
  height: 100%;
}
.hr-device-authorise-button {
  background: #b42318;
  color: #fff;
}
.hr-device-authorise-button:hover,
.hr-device-authorise-button:focus-visible {
  background: #8f1c14;
  color: #fff;
}
.hr-device-authorise-button:disabled {
  opacity: .58;
  cursor: not-allowed;
}
.hr-device-exit-button {
  background: var(--forest);
  color: #fff;
}
.hr-device-exit-button:hover,
.hr-device-exit-button:focus-visible {
  background: var(--deep-forest);
  color: #fff;
}
.hr-device-gate-help {
  margin-top: 14px !important;
  font-size: .9rem;
}
@media (max-width: 700px) {
  .browser-passkey-prompt-card,
  .hr-device-gate-card {
    top: auto !important;
    bottom: max(8px, env(safe-area-inset-bottom));
    height: auto !important;
    min-height: 0;
  }

  .hr-device-gate-card {
    max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
  }
}

.webview-modal-sheet {
  position: relative;
  z-index: 1;
  min-width: 0;
  visibility: visible !important;
  opacity: 1 !important;
}
@media (max-width: 700px) {
  .webview-modal {
    display: block;
    padding: 0;
  }
  .webview-modal-sheet {
    position: absolute !important;
    z-index: 1;
    top: max(8px, env(safe-area-inset-top));
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    left: 8px;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}
.document-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; background: rgba(27, 31, 21, .72); }
.document-modal[hidden] { display: none !important; }
.document-dialog { width: min(1080px, 100%); height: min(88vh, 900px); min-width: 0; min-height: 0; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: 18px; background: var(--white); box-shadow: 0 24px 70px rgba(0,0,0,.35); }
.document-dialog:focus { outline: none; }
.document-toolbar { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.document-toolbar h2 { margin: 0 auto 0 0; font-size: 1rem; }
.document-toolbar [data-close-document] { flex: 0 0 auto; }
@media (max-width: 600px) { .document-modal { padding: 0; } .document-dialog { width: 100%; height: 100vh; height: 100dvh; border-radius: 0; } .document-toolbar { flex-wrap: wrap; } .document-toolbar h2 { width: 100%; } }

/* Document lightbox mobile motion: match the HuBAi/manual bottom-sheet entrance. */
@media (max-width: 700px) {
  .document-dialog {
    animation: hubAiSheetUp .28s cubic-bezier(.22, .72, .28, 1) both;
    transform-origin: bottom center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .document-dialog {
    animation: none !important;
  }
}

.document-viewer { min-width: 0; min-height: 0; overflow: auto; padding: 12px; background: #f4f4f4; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.pdf-page { display: block; width: 100%; height: auto; max-width: 100%; margin: 0 auto 14px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.document-loading, .document-error { margin: 20px auto; max-width: 34rem; padding: 18px; text-align: center; color: var(--muted); }

/* Visual refresh: Community Hub */
:root {
  --forest: #15543a;
  --deep-forest: #123b2c;
  --leaf: #aebd63;
  --sage-pale: #eaf1dc;
  --mint: #eef7ee;
  --peach: #fff0e2;
}
html, body { max-width: 100%; overflow-x: hidden; }
body { background: linear-gradient(180deg, #fffaf1 0%, var(--cream) 55%, #fffaf1 100%); }
.site-header { position: sticky; top: 0; z-index: 40; box-shadow: 0 4px 18px rgba(46,51,38,.06); }
.header-inner { max-width: 1240px; padding: 14px 24px; min-width: 0; }
.brand { min-width: 0; }
.brand-logo { width: 190px; max-width: 48vw; }
.brand-context strong { color: var(--forest); font-size: 14px; }
.nav { align-items: center; gap: 4px; }
.nav a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 10px; font-weight: 700; white-space: nowrap; }
.nav a:hover { background: var(--sage-pale); color: var(--forest); }
.nav-icon { color: var(--forest); font-size: 18px; line-height: 1; }
.page { max-width: 1240px; padding: 28px 24px 64px; min-width: 0; }
.notice { font-size: .88rem; margin-bottom: 22px; }
.dashboard-hero { position: relative; isolation: isolate; min-height: 112px; align-items: center; padding: 18px 24px; margin: 8px 0 20px; border-radius: 28px; overflow: hidden; background: linear-gradient(120deg, #fffdf7 0%, #f7f6df 56%, #e8efd3 100%); border: 1px solid #e4e8cf; }
.hero-copy { position: relative; z-index: 2; }
.dashboard-hero h1 { max-width: 650px; color: var(--deep-forest); margin-top: 5px; font-size: clamp(1.8rem, 4vw, 2.55rem); }
.dashboard-hero .lead { color: #536050; font-size: 1rem; margin-bottom: 0; }
.hero-art { position: absolute; inset: 0 18% 0 48%; z-index: 1; pointer-events: none; }
.hero-leaf { position: absolute; display: block; width: 92px; height: 46px; border-radius: 100% 0 100% 0; background: var(--leaf); opacity: .8; transform: rotate(22deg); }
.hero-leaf-one { top: 48px; right: 120px; }
.hero-leaf-two { top: 28px; right: 58px; transform: rotate(-42deg) scale(.78); background: #79a55e; }
.hero-wave { position: absolute; right: -12%; bottom: -48px; width: 72%; height: 130px; border-radius: 50% 0 0 0; background: rgba(174,189,99,.55); transform: rotate(-8deg); }
.profile-card { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 11px; min-width: 185px; padding: 12px 15px; border-radius: var(--hub-radius-card, 18px); background: rgba(255,255,255,.88); border: 1px solid rgba(210,219,183,.9); box-shadow: var(--shadow); }
.profile-card strong, .profile-card small { display: block; }
.profile-card strong { color: var(--deep-forest); }
.profile-card small { color: var(--muted); font-size: .8rem; }
.avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--forest); color: #fff; font-weight: 800; }
.section { margin: 22px 0 34px; }
.section-heading { align-items: center; }
.action-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.action-card { min-width: 0; min-height: 255px; padding: 22px 20px 18px; border-radius: var(--hub-radius-card, 18px); position: relative; overflow: hidden; border-color: #e2e7d7; color: var(--ink); text-decoration: none; transition: transform .16s ease, box-shadow .16s ease; }
.action-card:hover, .action-card:focus-visible { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(46,51,38,.14); }
.action-card:focus-visible { outline: 3px solid rgba(237,118,36,.55); outline-offset: 3px; }
.action-card::after { content: ""; position: absolute; right: -28px; bottom: -34px; width: 105px; height: 105px; border-radius: 50%; background: rgba(174,189,99,.18); }
.action-card.accent-orange { background: linear-gradient(150deg, #fff 0%, #fff8ef 100%); }
.action-card.accent-green { background: linear-gradient(150deg, #fff 0%, #f3f8ef 100%); }
.action-icon { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 14px; border-radius: 17px; background: var(--mint); color: var(--forest); font-size: 30px; line-height: 1; }
.accent-orange .action-icon { background: var(--peach); color: #e87520; }
.action-card .tag { order: 0; align-self: flex-start; }
.action-card h3 { max-width: 230px; color: var(--deep-forest); }
.action-card p { color: #657063; font-size: .94rem; }
.action-link { position: relative; z-index: 2; display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: auto; padding-top: 10px; color: var(--forest); font-weight: 800; text-decoration: none; }
.action-arrow { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--forest); color: #fff; font-size: 22px; }
.accent-orange .action-arrow { background: #ed7624; }
.dashboard-overview, .dashboard-lower { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 8px; margin-top: 8px; min-width: 0; }
.dashboard-lower { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.card, .overview-card, .documents-panel, .records-panel { min-width: 0; border-radius: var(--hub-radius-card, 18px); }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--hub-space-3, 12px); }
.panel-heading h2 { margin-bottom: 0; color: var(--deep-forest); }
.check-list, .location-list, .document-list { list-style: none; padding: 0; margin: 8px 0 0; }
.check-list li, .location-list li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid #edf0e6; }
.check-list li:last-child, .location-list li:last-child { border-bottom: 0; }
.check-list strong, .check-list small, .location-list strong, .location-list small { display: block; }
.check-list small, .location-list small { color: var(--muted); font-size: .82rem; }
.check-icon { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: var(--forest); color: #fff; font-weight: 800; }
.location-dot { flex: 0 0 12px; width: 12px; height: 12px; border-radius: 50%; background: var(--forest); }
.location-dot.orange { background: #ed7624; }
.location-dot.sage { background: var(--leaf); }
.document-list li { border-bottom: 1px solid #edf0e6; }
.document-list li:last-child { border-bottom: 0; }
.document-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 0; color: var(--ink); text-decoration: none; }
.document-item strong, .document-item small { display: block; overflow-wrap: anywhere; }
.document-item small { color: var(--muted); font-size: .8rem; }
.document-icon { display: grid; place-items: center; width: 38px; height: 42px; border: 2px solid var(--forest); border-radius: 8px; color: var(--forest); font-size: 21px; }
.document-status { border-radius: 999px; padding: 4px 9px; background: #dcebc8; color: var(--forest); font-size: .75rem; font-weight: 800; white-space: nowrap; }
.metric { color: #e87520; }
.mobile-nav { display: none; }
.card-grid, .split-grid, .doc-grid, .admin-grid { min-width: 0; }
.table-wrap { max-width: 100%; overflow-x: auto; }
input, select, textarea { max-width: 100%; }
@media (max-width: 980px) {
  .action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-overview, .dashboard-lower { grid-template-columns: 1fr; }
  .admin-grid { grid-template-columns: 1fr; }
  .hero-art { left: 42%; }
}
@media (max-width: 700px) {
  .site-header { position: relative; }
  .header-inner { padding: 12px 16px; }
  .brand-logo { width: 178px; max-width: 62vw; }
  .brand-context { display: none; }
  .nav { display: none; }
  .page { padding: 16px 14px 96px; }
  .notice { margin-bottom: 16px; padding: 11px 13px; font-size: .8rem; }
  .dashboard-hero { display: block; min-height: 108px; padding: 14px 16px 12px; margin-top: 2px; margin-bottom: 16px; border-radius: 18px; }
  .dashboard-hero h1 { font-size: clamp(1.7rem, 8vw, 2.2rem); margin-top: 3px; }
  .dashboard-hero .lead { font-size: .9rem; }
  .profile-card { margin-top: 14px; }
  .hero-art { inset: 20% -12% 0 48%; opacity: .5; transform: scale(.72); transform-origin: right center; }
  .action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .action-card { min-height: 184px; padding: 14px 12px 12px; }
  .action-icon { width: 42px; height: 42px; margin-bottom: 8px; font-size: 22px; }
  .action-card h3 { margin-bottom: 5px; font-size: 1rem; }
  .action-card p { margin-bottom: 5px; font-size: .78rem; line-height: 1.35; }
  .form-catalogue-tools { align-items: stretch; flex-direction: column; gap: 8px; }
  .form-catalogue-tools label { width: 100%; max-width: none; flex: 0 0 auto; }
  .document-catalogue-tools { margin-bottom: 18px; }
  .document-catalogue-tools label { max-width: none; }
  .document-search-form .button { padding-left: 13px; padding-right: 13px; }
  .document-category-heading { align-items: center; }
  .document-catalogue-list { grid-template-columns: 1fr; gap: 8px; }
  .document-catalogue-card { padding: 14px 16px 13px; }
  .records-results-heading { align-items: stretch; flex-direction: column; gap: 10px; }
  .records-results-heading .button { align-self: flex-start; }
  .forms-catalogue .section-heading { margin-bottom: 14px; }
  .forms-catalogue .section-heading h1 { font-size: 1.9rem; margin-bottom: 8px; }
  .forms-catalogue .section-heading .lead { font-size: .98rem; }
  .forms-catalogue .form-catalogue-tools label { display: block; width: 100%; flex: 0 0 auto; }
  .dashboard-overview, .dashboard-lower { gap: 8px; margin-top: 8px; }
  .card { padding: 18px; }
  .panel-heading h2 { font-size: 1.25rem; }
  .document-item { grid-template-columns: auto minmax(0, 1fr); }
  .document-status { grid-column: 2; justify-self: start; }
  .mobile-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: grid; width: 100%; max-width: 100vw; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); overflow-x: hidden; background: rgba(255,255,255,.97); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(46,51,38,.12); }
  .mobile-nav a { display: grid; min-width: 0; justify-items: center; gap: 2px; padding: 5px 2px; color: var(--muted); font-size: .75rem; font-weight: 800; text-decoration: none; }
  .mobile-nav a:hover,\n  .mobile-nav a:focus-visible,\n  .mobile-nav a.active,\n  .mobile-nav a[aria-current="page"] { color: var(--forest); }
  .mobile-nav-icon { font-size: 21px; line-height: 1; }
  .footer { padding-bottom: 96px; }
}


/* Training */ 

.training-progress-panel {
  margin: 2px 0 28px;
  padding: 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--hub-radius-card, 18px);
  box-shadow: var(--shadow);
}
.training-progress-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.training-progress-item {
  min-width: 0;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 10px;
  padding: 12px 8px 10px;
  text-align: center;
}
.training-progress-ring {
  position: relative;
  width: clamp(92px, 9vw, 118px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.training-progress-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.training-progress-ring circle {
  fill: none;
  stroke-width: 9;
}
.training-progress-track {
  stroke: var(--line);
}
.training-progress-value {
  stroke: var(--forest);
  stroke-linecap: round;
}
.training-progress-ring strong {
  position: relative;
  z-index: 1;
  color: var(--deep-forest);
  font-size: clamp(1.15rem, 2.3vw, 1.6rem);
  line-height: 1;
  letter-spacing: -.03em;
}
.training-progress-copy h3 {
  margin: 0 0 4px;
  color: var(--deep-forest);
  font-size: .98rem;
}
.training-progress-copy p {
  margin: 0;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.3;
}
@media (max-width: 700px) {
  .training-progress-panel { padding: 12px 6px; }
  .training-progress-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .training-progress-item { padding: 6px 1px; gap: 7px; }
  .training-progress-ring { width: clamp(58px, 18vw, 76px); }
  .training-progress-ring circle { stroke-width: 8; }
  .training-progress-ring strong { font-size: clamp(.9rem, 4.2vw, 1.15rem); }
  .training-progress-copy h3 { font-size: clamp(.75rem, 2.8vw, .82rem); line-height: 1.08; }
  .training-progress-copy p { font-size: .75rem; line-height: 1.18; }
}

.training-section { margin-top: 22px; }
.training-list { display: grid; gap: 8px; min-width: 0; }
.training-card { min-width: 0; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.training-document { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 16px 18px; color: var(--ink); text-decoration: none; }
.training-document:hover, .training-document:focus-visible { background: #fbfcf6; }
.training-document:focus-visible { outline: 3px solid rgba(237,118,36,.5); outline-offset: -3px; }
.training-state { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; font-size: 1.35rem; font-weight: 900; }
.training-card.outstanding .training-state { background: #ed7624; }
.training-card.completed .training-state { background: var(--forest); }
.training-copy { min-width: 0; }
.training-copy strong, .training-copy small { display: block; overflow-wrap: anywhere; }
.training-copy strong { color: var(--deep-forest); font-size: 1rem; }
.training-copy small { color: var(--muted); font-size: .82rem; }
.training-completed-at { color: var(--forest) !important; font-weight: 750; margin-top: 4px; }
.training-record-date { display: block; margin-top: 2px; color: var(--forest); font-size: .75rem; font-weight: 650; white-space: nowrap; }
.training-status { border-radius: 999px; padding: 5px 10px; font-size: .75rem; font-weight: 800; white-space: nowrap; }
.training-card.outstanding .training-status { background: var(--peach); color: #b95717; }
.training-card.completed .training-status { background: #dcebc8; color: var(--forest); }
.training-controlled-card .training-document,
.training-course-assignment .training-document {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 10px;
}
.training-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.training-kind {
  min-width: 0;
  color: var(--forest);
  font-size: .75rem;
  font-weight: 800;
  line-height: 1.15;
  text-align: right;
}
.training-controlled-card .training-copy strong,
.training-course-assignment .training-copy strong {
  font-size: .96rem;
  line-height: 1.18;
}
.training-controlled-card .training-copy small,
.training-course-assignment .training-copy small {
  margin-top: 3px;
}

.training-empty { margin: 0; }
.training-empty h3 { color: var(--deep-forest); }
.training-category + .training-category { margin-top: 26px; }
.training-carousel-card {
  margin: 0;
  padding: 18px;
  overflow: hidden;
}
.training-carousel-toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.training-carousel-toolbar-copy {
  min-width: 0;
  text-align: center;
}
.training-carousel-toolbar-copy h3 {
  margin: 1px 0 3px;
  color: var(--deep-forest);
  font-size: clamp(1.25rem, 4.5vw, 1.7rem);
}
.training-carousel-toolbar-copy .muted {
  display: block;
  white-space: nowrap;
}
.training-carousel-nav {
  min-width: 44px;
  min-height: 44px;
  display: inline-grid;
  place-items: center;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.training-carousel-nav:hover:not(:disabled),
.training-carousel-nav:focus-visible:not(:disabled) {
  border-color: var(--orange);
  outline: none;
}
.training-carousel-nav:disabled {
  cursor: default;
  opacity: .34;
}
.training-carousel-nav-icon {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
  opacity: .72;
  pointer-events: none;
}
.training-carousel-nav-icon.is-previous {
  transform: scaleX(-1);
}
.training-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 2px 2px 8px;
}
.training-carousel::-webkit-scrollbar { display: none; }
.training-carousel-page {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  gap: 8px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.training-carousel-page .training-card {
  min-width: 0;
  min-height: 112px;
  height: 100%;
}
.training-carousel-page .training-document {
  height: 100%;
  align-content: start;
  gap: 9px;
  padding: 12px;
}
.training-carousel-page .training-copy strong {
  font-size: .88rem;
  line-height: 1.18;
}
.training-carousel-page .training-copy small {
  font-size: .75rem;
  line-height: 1.22;
}
.training-carousel-page .training-completed-at {
  font-size: .75rem;
}
.training-carousel-page .training-status {
  padding: 4px 8px;
  font-size: .75rem;
}
.training-carousel-page .training-kind {
  font-size: .75rem;
}

/* Training carousels keep their existing paging and swipe behaviour while
   each card uses a document-style single-column row. */
.training-category-outstanding .training-carousel-page,
.training-category-complete .training-carousel-page {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: none;
  grid-auto-rows: auto;
}
.training-category-outstanding .training-carousel-page .training-card,
.training-category-complete .training-carousel-page .training-card {
  min-height: 0;
  height: auto;
  border-radius: 14px;
  box-shadow: none;
}
.training-category-outstanding .training-carousel-page .training-document,
.training-category-complete .training-carousel-page .training-document {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  align-content: center;
  gap: 12px;
  height: auto;
  min-height: 52px;
  padding: 10px 14px;
}
.training-row-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.training-row-type {
  min-width: 0;
  overflow: hidden;
  color: #c84f47;
  font-size: .75rem;
  font-weight: 850;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.training-row-title {
  min-width: 0;
  overflow: hidden;
  color: var(--deep-forest);
  font-size: .88rem;
  font-weight: 750;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.training-row-due {
  display: inline-flex;
  align-items: baseline;
  align-self: end;
  justify-content: flex-end;
  gap: 4px;
  padding-bottom: 1px;
  white-space: nowrap;
  font-size: .75rem;
  line-height: 1.1;
}
.training-row-due-label {
  color: #c84f47;
  font-weight: 850;
  letter-spacing: .02em;
}
.training-row-due-date {
  color: var(--muted);
  font-weight: 700;
}
.training-row-completed {
  display: grid;
  justify-items: end;
  align-self: center;
  gap: 4px;
  min-width: 0;
  white-space: nowrap;
}
.training-row-completed-line {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px;
  font-size: .75rem;
  line-height: 1.1;
}
.training-row-completed-label {
  color: var(--forest);
  font-weight: 850;
  letter-spacing: .02em;
}
.training-row-completed-date {
  color: var(--muted);
  font-weight: 700;
}
.training-row-renewal {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.05;
}
.training-row-renewal-date {
  color: inherit;
}

.training-acknowledgement { max-width: 720px; margin: 18px auto 8px; padding: 18px; border: 1px solid #dfe7cf; border-radius: var(--hub-radius-card, 18px); background: #fffaf1; color: var(--ink); }
.training-acknowledgement strong { display: block; color: var(--deep-forest); font-size: 1.05rem; }
.training-acknowledgement p { margin: 4px 0 12px; color: var(--muted); }
.training-acknowledgement label { display: flex; align-items: center; min-height: 44px; gap: 10px; font-weight: 700; }
.training-acknowledgement input[type="checkbox"] { flex: 0 0 auto; width: 20px; height: 20px; margin: 2px 0 0; }
.training-acknowledgement button { margin-top: 13px; min-height: 44px; }
.document-toolbar button:disabled { opacity: .55; cursor: not-allowed; }
.training-admin { margin-top: 18px; }
.training-assignment-form { padding: 16px 0 2px; border-top: 1px solid var(--line); }
.training-assignment-form fieldset { margin: 0; padding: 0; border: 0; }
.training-assignment-form legend { display: block; width: 100%; color: var(--deep-forest); font-weight: 800; }
.training-assignment-form legend small { display: block; margin-top: 3px; color: var(--muted); font-size: .78rem; font-weight: 500; }
.training-admin-docs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 13px 0; }
.training-admin-docs label { display: flex; align-items: flex-start; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-weight: 700; }
.training-admin-docs label:has(input:checked) { border-color: #b7d092; background: var(--sage-pale); }
.training-admin-docs input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; }
.training-admin-docs label span, .training-admin-docs label small { display: block; }
.training-admin-docs label small { margin-top: 2px; color: var(--muted); font-size: .76rem; font-weight: 500; }
@media (max-width: 700px) {
  .training-carousel-card { padding: 16px; }
  .training-carousel-toolbar { gap: 7px; margin-bottom: 14px; }
  .training-carousel-toolbar-copy h3 { font-size: 1.35rem; }
  .training-carousel-nav { min-width: 44px; min-height: 44px; padding: 7px 9px; }
  .training-carousel-nav-icon { width: 28px; height: 28px; }
  .training-document { grid-template-columns: auto minmax(0, 1fr); padding: 14px; }
  .training-status { grid-column: 2; justify-self: start; }
  .training-carousel { gap: 8px; }
  .training-carousel-page { gap: 8px; }
  .training-carousel-page .training-card { min-height: 108px; }
  .training-carousel-page .training-document { padding: 10px 9px; }
  .training-carousel-page .training-copy strong { font-size: .82rem; }
  .training-carousel-page .training-copy small { font-size: .75rem; }
  .training-carousel-page .training-status { font-size: .75rem; padding: 3px 7px; }
  .training-carousel-page .training-kind { font-size: .75rem; }
  .training-category-outstanding .training-carousel-page .training-card,
  .training-category-complete .training-carousel-page .training-card { min-height: 0; }
  .training-category-outstanding .training-carousel-page .training-document,
  .training-category-complete .training-carousel-page .training-document {
    min-height: 50px;
    padding: 9px 11px;
  }
  .training-row-main { gap: 3px; }
  .training-row-type { font-size: .75rem; }
  .training-row-title { font-size: .8rem; }
  .training-row-due,
  .training-row-completed-line { gap: 3px; font-size: .75rem; }
  .training-row-renewal { font-size: .75rem; }
  .training-category-heading { align-items: center; }
  .training-admin-docs { grid-template-columns: 1fr; }
  .training-acknowledgement { margin-left: 0; margin-right: 0; padding: 15px; }
}



html.dark-mode .training-carousel-nav-icon {
  filter: invert(1);
  opacity: .86;
}
html.dark-mode .training-carousel-nav {
  background: #2a2f2c;
  color: #f0f2eb;
  border-color: #444b46;
}


/* Training administration */
.training-admin-page {
  display: grid;
  gap: 8px;
}
.training-admin-page > .back-link,
.training-admin-page > .page-intro { margin-bottom: 0; }
.training-admin-card { margin: 0; }

.training-admin-document-browser {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.training-admin-document-tools {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.training-admin-search {
  flex: 1 1 260px;
  min-width: 0;
  margin: 0;
}
.training-admin-search input {
  min-height: 44px;
  padding: 9px 10px;
  font-size: .82rem;
}
.training-admin-document-count {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 750;
  white-space: nowrap;
}
.training-admin-document-scroller {
  max-height: 520px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 2px 4px 2px 0;
}
.training-admin-document-list {
  display: grid;
  gap: 6px;
}
.training-admin-document {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--hub-radius-row, 14px);
  background: color-mix(in srgb, var(--white) 94%, var(--sage-pale));
}
.training-admin-document[hidden] { display: none; }
.training-admin-document-main {
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: 8px;
  min-width: 0;
  margin: 0;
  cursor: pointer;
}
.training-admin-document-main input[type="checkbox"] {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  padding: 0;
  accent-color: var(--green);
}
.training-admin-document-main > span {
  min-width: 0;
}
.training-admin-document-main strong,
.training-admin-document-main small {
  display: block;
  overflow-wrap: anywhere;
}
.training-admin-document-main strong {
  font-size: .82rem;
  line-height: 1.2;
}
.training-admin-document-main small {
  margin-top: 2px;
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.15;
  font-weight: 650;
}
.training-admin-refresh {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: end;
  gap: 5px;
  margin: 0;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 750;
}
.training-admin-refresh select {
  width: auto;
  min-width: 150px;
  max-width: 180px;
  min-height: 44px;
  padding: 9px 28px 9px 9px;
  font-size: .75rem;
  line-height: 1.1;
}
.training-admin-document-empty {
  margin: 0;
  padding: 22px 10px;
}

.training-admin-resource {
  align-items: center;
  gap: 12px;
}
.training-admin-resource-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.training-admin-refresh-form {
  display: flex;
  align-items: end;
  gap: 7px;
}
.training-admin-refresh-form label {
  margin: 0;
  min-width: 180px;
}
.training-admin-refresh-form select {
  padding: 7px 9px;
}
.training-admin-user {
  align-items: center;
}
.training-admin-user small {
  display: block;
  color: var(--muted);
}
.training-refresh-due {
  color: #b95717 !important;
  font-weight: 750;
}
@media (max-width: 700px) {
  .training-admin-document-tools {
    align-items: center;
    gap: 7px;
  }
  .training-admin-search input {
    min-height: 34px;
    padding: 6px 9px;
    font-size: .78rem;
  }
  .training-admin-document-count {
    font-size: .75rem;
  }
  .training-admin-document-scroller {
    max-height: 430px;
    padding-right: 2px;
  }
  .training-admin-document {
    grid-template-columns: minmax(0, 1fr) minmax(116px, 138px);
    gap: 7px;
    padding: 7px 8px;
    border-radius: 10px;
  }
  .training-admin-document-main {
    gap: 7px;
  }
  .training-admin-document-main input[type="checkbox"] {
    flex-basis: 17px;
    width: 17px;
    height: 17px;
  }
  .training-admin-document-main strong {
    font-size: .77rem;
  }
  .training-admin-document-main small {
    font-size: .75rem;
  }
  .training-admin-refresh {
    grid-template-columns: 1fr;
    gap: 2px;
    justify-items: stretch;
    font-size: .75rem;
    line-height: 1;
  }
  .training-admin-refresh > span {
    text-align: right;
  }
  .training-admin-refresh select {
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 44px;
    padding: 9px 24px 9px 8px;
    font-size: .75rem;
  }
  .training-admin-resource-actions,
  .training-admin-refresh-form {
    width: 100%;
    justify-content: stretch;
  }
  .training-admin-refresh-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .training-admin-refresh-form label { min-width: 0; }
}

/* User administration */
.user-link { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; color: var(--deep-forest); }
.user-link::after { content: "→"; color: var(--forest); font-weight: 900; }
.user-row:hover { background: #fbfcf6; }
.user-admin-list { display: grid; gap: 8px; }
.user-admin-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.user-admin-row strong, .user-admin-row small { display: block; }
.user-admin-row small { color: var(--muted); font-size: .8rem; }
.user-admin-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.user-admin-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.user-admin-header h1 { margin-bottom: 5px; color: var(--deep-forest); }
.user-admin-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); gap: 8px; align-items: start; }
.user-admin-subheading { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--deep-forest); }
.external-training-upload { background: linear-gradient(150deg, #fff 0%, #fffaf1 100%); }
.external-training-assignments { background: linear-gradient(150deg, #fff 0%, #f8fbf3 100%); }
.external-training-admin-list li,
.external-training-assignments .clean-list li {
  align-items: flex-start;
  gap: 12px;
}
.external-training-admin-list li > span:first-child,
.external-training-assignments .clean-list li > span:first-child {
  min-width: 0;
  flex: 1 1 auto;
}
.external-training-admin-list strong,
.external-training-admin-list small,
.external-training-assignments .clean-list strong,
.external-training-assignments .clean-list small {
  display: block;
}
.external-training-admin-list small,
.external-training-assignments .clean-list small {
  margin-top: 3px;
  color: var(--muted);
}
.training-external-assignment > .training-document {
  cursor: default;
}
.training-external-assignment > a.training-document {
  cursor: pointer;
}
.checkbox-line { display: flex; align-items: center; min-height: 44px; gap: 9px; font-weight: 700; }
.checkbox-line input[type="checkbox"] { flex: 0 0 auto; width: 19px; height: 19px; margin: 3px 0 0; }
@media (max-width: 700px) {
  .user-admin-grid { grid-template-columns: 1fr; }
  .user-admin-header { align-items: flex-start; }
  .user-admin-row { align-items: flex-start; flex-direction: column; }
  .user-admin-row .button { width: 100%; text-align: center; }
}


/* External certificates */
.external-training-section { margin-top: 12px; }
.training-card.certificate { background: linear-gradient(150deg, #fff 0%, #f7f7e9 100%); }
.certificate-state { background: var(--leaf); color: var(--deep-forest); font-size: 1.1rem; }
.training-delete-form { display: inline-flex; margin-left: auto; }
.button.danger { background: #f8eadc; color: #a94e19; border: 1px solid #efc39d; }
.button.danger:hover, .button.danger:focus-visible { background: #f5d8bf; color: #8b3d12; }
.clean-list li:has(.training-delete-form) { align-items: center; }
@media (max-width: 700px) {
  .clean-list li:has(.training-delete-form) { align-items: flex-start; flex-wrap: wrap; }
  .training-delete-form { margin-left: 0; }
  .training-delete-form .button { min-height: 44px; }
}


.form-builder-fields { display: grid; gap: 14px; padding-top: 8px; }
.form-builder-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(150px, .75fr); gap: 12px; }
.form-builder-row { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #fbfcf5; }
.form-builder-row > .button { justify-self: start; }
.form-builder-fields > .panel-heading { margin-bottom: 0; }

.field-help { display: block; margin-top: -2px; color: var(--muted); font-size: .8rem; font-weight: 500; line-height: 1.4; }

.account-settings { margin-top: 16px; }
.account-danger { margin-top: 24px; padding-top: 20px; border-top: 1px solid #efc39d; }
.account-danger h3 { color: #a94e19; margin-bottom: 6px; }

.training-section-note { margin: 4px 0 0; max-width: 38rem; font-size: .88rem; }


/* Volunteer and staff shift management */
.my-shifts-section { margin-top: 16px; }
.my-shifts-card { background: linear-gradient(145deg, #fff 0%, #fffaf1 100%); }
.my-shifts-list { display: grid; gap: 8px; margin-top: 14px; }
.my-shift-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.my-shift-row:hover, .my-shift-row:focus-visible { background: #fffdf8; }
.my-shift-date { color: var(--forest); font-weight: 900; }
.my-shift-main strong, .my-shift-main small { display: block; overflow-wrap: anywhere; }
.my-shift-main small { margin-top: 3px; color: var(--muted); }
.status { display: inline-flex; align-items: center; border-radius: 999px; padding: 5px 10px; font-size: .75rem; font-weight: 800; white-space: nowrap; }
.status-success { background: #dcebc8; color: var(--forest); }
.status-warning { background: #fff0d9; color: #a65319; }
.shift-empty { padding: 18px 0 4px; }
.shift-empty strong { display: block; color: var(--deep-forest); }
.shift-empty p { margin: 4px 0 13px; color: var(--muted); }

.shift-calendar-card { margin-top: 16px; }
.shift-calendar-toolbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.shift-calendar-toolbar > div { text-align: center; }
.shift-calendar-toolbar h2 { margin: 1px 0 0; color: var(--deep-forest); }
.shift-legend { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 16px 0 12px; color: var(--muted); font-size: .8rem; font-weight: 700; }
.shift-legend span { display: inline-flex; align-items: center; gap: 6px; }
.shift-key, .calendar-status-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #d9dfd0; }
.shift-key.available, .calendar-status-dot.available { background: #4d8b52; }
.shift-key.partial, .calendar-status-dot.partial { background: #e88a2b; }
.shift-key.full, .calendar-status-dot.full { background: #ba5d40; }
.shift-key.none, .calendar-status-dot.none { background: #cbd2c5; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.calendar-head { color: var(--muted); font-size: .75rem; font-weight: 800; text-align: center; }
.calendar-days { margin-top: 6px; }
.calendar-day { position: relative; display: grid; align-content: start; min-height: 76px; padding: 9px 7px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); text-decoration: none; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.calendar-day:hover, .calendar-day:focus-visible { border-color: var(--orange); box-shadow: 0 4px 12px rgba(46,51,38,.09); transform: translateY(-1px); }
.calendar-day.blank { border-color: transparent; background: transparent; }
.calendar-day.available { border-color: #b9d0ad; background: #f7fbf2; }
.calendar-day.partial { border-color: #f1c38b; background: #fffaf2; }
.calendar-day.full { border-color: #e2b6a6; background: #fff8f5; }
.calendar-date { color: var(--deep-forest); font-size: 1rem; font-weight: 900; }
.calendar-day-label { margin-top: 6px; color: var(--muted); font-size: .75rem; line-height: 1.2; }
.calendar-status-dot { position: absolute; top: 10px; right: 9px; }
.shift-list-card { margin-top: 16px; }
.shift-date-group + .shift-date-group { margin-top: 22px; }
.shift-date-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.shift-date-heading h3 { margin: 0; color: var(--deep-forest); }
.shift-item { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 0; border-top: 1px solid var(--line); }
.shift-item-main { min-width: 0; }
.shift-item-top { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 7px; }
.shift-status-badge, .shift-training-badge, .shift-requirement { display: inline-flex; align-items: center; border-radius: 999px; padding: 5px 9px; font-size: .75rem; font-weight: 800; }
.shift-status-badge.available { background: #dcebc8; color: var(--forest); }
.shift-status-badge.partial { background: #fff0d9; color: #a65319; }
.shift-status-badge.full { background: #f7dfd6; color: #9d4c35; }
.shift-status-badge.past, .shift-status-badge.cancelled { background: #edf0e6; color: var(--muted); }
.shift-training-badge { background: #e8e8d3; color: #626a35; }
.shift-requirement { background: #fff0d9; color: #a65319; }
.shift-item h4 { margin: 0; color: var(--deep-forest); font-size: 1.05rem; }
.shift-meta, .shift-description, .shift-capacity { margin: 4px 0 0; color: var(--muted); }
.shift-description { white-space: normal; }
.shift-capacity { font-size: .82rem; font-weight: 700; }
.shift-item-actions { flex: 0 0 auto; }
.inline-form { display: inline-flex; }
.shift-admin-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.admin-shift-layout { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); gap: 8px; align-items: start; }
.admin-shift-layout > div { min-width: 0; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.training-options { margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #fbfcf5; }
.training-options legend { padding: 0 5px; color: var(--deep-forest); font-weight: 800; }
.training-options legend small { display: block; margin-top: 3px; color: var(--muted); font-size: .78rem; font-weight: 500; }
.training-option { display: flex; align-items: flex-start; gap: 9px; padding: 9px 0; border-top: 1px solid #e8ecdf; }
.training-option:first-of-type { margin-top: 7px; }
.training-option input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; }
.training-option span, .training-option small { display: block; }
.training-option small { margin-top: 2px; color: var(--muted); font-size: .76rem; font-weight: 500; }

@media (max-width: 900px) {
  .admin-shift-layout { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .my-shift-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .my-shift-date { grid-column: 1 / -1; }
  .shift-calendar-toolbar { grid-template-columns: 1fr 1fr; }
  .shift-calendar-toolbar > div { grid-column: 1 / -1; grid-row: 1; }
  .shift-calendar-toolbar > a:first-child { grid-column: 1; grid-row: 2; }
  .shift-calendar-toolbar > a:last-child { grid-column: 2; grid-row: 2; text-align: right; }
  .calendar-day { min-height: 60px; padding: 7px 5px; }
  .calendar-day-label { font-size: .75rem; }
  .calendar-status-dot { top: 8px; right: 7px; }
  .shift-item { align-items: flex-start; flex-direction: column; gap: 11px; }
  .shift-item-actions { width: 100%; }
  .shift-item-actions .button, .shift-admin-actions .button { min-height: 44px; }
  .shift-admin-actions { justify-content: flex-start; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
}


/* Shift form assignments and the forms catalogue */
.form-catalogue-grid { margin-top: 4px; }
.form-catalogue-tools { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 0 0 18px; }
.form-catalogue-tools label { width: 100%; min-width: 0; flex: 1 1 420px; max-width: 680px; color: var(--deep-forest); font-weight: 800; }
.form-catalogue-tools input { display: block; box-sizing: border-box; width: 100%; max-width: none; height: 48px; min-height: 48px; margin-top: 7px; }
.form-catalogue-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.form-catalogue-card { min-height: 0; padding: 16px 18px 15px; }
.form-catalogue-card p { margin: 0; }
.document-catalogue-tools { display: flex; margin: 0 0 22px; }
.document-catalogue-tools label { display: block; width: 100%; max-width: 680px; color: var(--deep-forest); font-weight: 800; }
.document-catalogue-tools input { display: block; box-sizing: border-box; width: 100%; max-width: none; height: 48px; min-height: 48px; margin-top: 7px; }
.document-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  width: 100%;
}
.document-search-form label {
  width: 100%;
  max-width: none;
  min-width: 0;
}
.document-search-form .button {
  min-height: 48px;
  margin: 0;
}
.document-category-section + .document-category-section { margin-top: 28px; }
.document-category-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.document-category-heading h2 { margin: 4px 0 0; color: var(--deep-forest); font-size: 1.2rem; }
.document-category-heading .muted { white-space: nowrap; }
.document-catalogue-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; }
.document-catalogue-card { min-width: 0; padding: 16px 18px 15px; }
.document-catalogue-card h2 { margin: 6px 0 7px; color: var(--deep-forest); font-size: 1.2rem; line-height: 1.2; }
.document-catalogue-card h2 a { color: var(--deep-forest); text-decoration: none; }
.document-catalogue-card h2 a:hover, .document-catalogue-card h2 a:focus-visible { text-decoration: underline; }
.document-catalogue-card .status { margin-top: 2px; }

/* Documents library: compact full-width rows inside dashboard sections. */
.document-summary-panel {
  margin: 0;
  padding: 16px 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--hub-radius-card, 18px);
  box-shadow: var(--shadow);
}
.document-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.document-summary-item {
  min-width: 0;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 8px;
  padding: 8px 4px;
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  border-radius: 14px;
}
a.document-summary-item:hover,
a.document-summary-item:focus-visible {
  background: color-mix(in srgb, var(--sage-pale) 34%, transparent);
}
a.document-summary-item:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--forest) 38%, transparent);
  outline-offset: 1px;
}
.document-summary-item.is-empty {
  opacity: .62;
}
.document-summary-ring {
  position: relative;
  width: clamp(84px, 9vw, 108px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.document-summary-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.document-summary-ring circle {
  fill: none;
  stroke-width: 9;
}
.document-summary-track {
  stroke: var(--line);
}
.document-summary-value {
  stroke: var(--leaf);
  stroke-linecap: round;
  stroke-dasharray: 78 22;
}
.document-summary-ring strong {
  position: relative;
  z-index: 1;
  color: var(--deep-forest);
  font-size: clamp(1.2rem, 2.5vw, 1.65rem);
  line-height: 1;
}
.document-summary-copy h3 {
  margin: 0 0 3px;
  color: var(--deep-forest);
  font-size: .88rem;
}
.document-summary-copy p {
  margin: 0;
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.2;
}
.document-summary-copy p.is-due {
  color: #d85f54;
  font-weight: 800;
}
html.dark-mode .document-summary-copy p.is-due {
  color: #ff8f82;
}
@media (max-width: 700px) {
  .document-summary-panel {
    padding: 11px 5px;
  }
  .document-summary-grid {
    gap: 3px;
  }
  .document-summary-item {
    gap: 6px;
    padding: 5px 1px;
  }
  .document-summary-ring {
    width: clamp(56px, 17vw, 72px);
  }
  .document-summary-ring circle {
    stroke-width: 8;
  }
  .document-summary-ring strong {
    font-size: clamp(.95rem, 4.5vw, 1.18rem);
  }
  .document-summary-copy h3 {
    font-size: clamp(.75rem, 2.6vw, .78rem);
    line-height: 1.08;
  }
  .document-summary-copy p {
    font-size: .75rem;
    line-height: 1.14;
  }
}

.page > .section.documents-page {
  display: grid;
  row-gap: 8px;
}
.page > .section.documents-page > * {
  margin-top: 0;
  margin-bottom: 0;
}
.page > .section.documents-page > .document-category-section + .document-category-section {
  margin-top: 0;
}
.document-library-section {
  margin: 0;
  padding: 16px;
  overflow: hidden;
}
.document-library-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.document-library-heading h2 {
  margin: 0;
  color: var(--deep-forest);
  font-size: 1.15rem;
}
.document-library-heading .muted {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: .75rem;
}
.document-library-list {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.document-library-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 10px 12px;
  color: var(--ink);
  text-decoration: none;
  background: color-mix(in srgb, var(--white) 97%, var(--sage-pale));
  border-bottom: 1px solid var(--line);
}
.document-library-row:last-child {
  border-bottom: 0;
}
.document-library-row:hover,
.document-library-row:focus-visible {
  background: color-mix(in srgb, var(--sage-pale) 42%, var(--white));
}
.document-library-row:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--forest) 38%, transparent);
  outline-offset: -3px;
}
.document-library-title {
  min-width: 0;
  color: var(--deep-forest);
  font-size: .88rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.document-library-row-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  min-width: 0;
  white-space: nowrap;
}
.document-library-row-meta small {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 700;
}
.document-library-row-meta .document-library-review {
  color: #d85f54;
  font-weight: 850;
}
html.dark-mode .document-library-row-meta .document-library-review {
  color: #ff8f82;
}
.document-library-chevron {
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 1;
}
@media (max-width: 700px) {
  .document-library-section {
    padding: 13px;
  }
  .document-library-heading {
    margin-bottom: 7px;
  }
  .document-library-heading h2 {
    font-size: 1.05rem;
  }
  .document-library-row {
    min-height: 54px;
    padding: 9px 10px;
    gap: 8px;
  }
  .document-library-title {
    font-size: .82rem;
  }
  .document-library-row-meta {
    gap: 5px;
  }
  .document-library-row-meta small {
    font-size: .75rem;
  }
  .document-library-chevron {
    font-size: 1.1rem;
  }
}

.page > .section.document-search-page {
  display: grid;
  gap: 16px;
}
.page > .section.document-search-page > .back-link,
.page > .section.document-search-page > .page-intro,
.page > .section.document-search-page > .document-search-form {
  margin: 0;
}
.document-search-results-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}
.document-search-results-heading h2 {
  margin: 3px 0 0;
  color: var(--deep-forest);
  font-size: 1.25rem;
}
.document-search-results-heading .muted {
  flex: 0 0 auto;
  white-space: nowrap;
}
.document-search-results {
  display: grid;
  gap: 10px;
}
.document-search-result {
  padding: 0;
  overflow: hidden;
}
.document-search-result-link {
  display: grid;
  gap: 4px;
  padding: 13px 15px;
  color: var(--ink);
  text-decoration: none;
}
.document-search-result-link:hover,
.document-search-result-link:focus-visible {
  background: color-mix(in srgb, var(--sage-pale) 28%, transparent);
}
.document-search-result-link:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--forest) 38%, transparent);
  outline-offset: -3px;
}
.document-search-result-link strong {
  color: var(--deep-forest);
  font-size: .95rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.document-search-result-link small {
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.document-search-message {
  margin: 0;
}

.records-results-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 26px 0 12px; }
.records-results-heading h2 { margin: 4px 0 0; color: var(--deep-forest); font-size: 1.35rem; }
.records-results-heading .button { flex: 0 0 auto; }
.records-search-prompt { margin-top: 24px; text-align: center; }
.records-search-prompt h2 { margin-top: 0; color: var(--deep-forest); }
.records-search-prompt p { margin-bottom: 0; }

.document-empty { padding: 18px; }
.document-empty p { margin: 0; }

.forms-catalogue .section-heading h1 { font-size: clamp(1.9rem, 4.5vw, 2.6rem); margin-bottom: 8px; }
.forms-catalogue .form-catalogue-tools { min-height: 0; }
.forms-catalogue .form-catalogue-tools label { display: block; }
.form-catalogue-card h2 { margin: 6px 0 7px; color: var(--deep-forest); font-size: 1.2rem; }
.form-card-kicker { display: inline-block; color: var(--forest); font-size: .75rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.today-actions-section { margin-top: 16px; }
.today-actions-list { display: grid; gap: 8px; }
.today-shift-group { padding: 18px 20px; background: linear-gradient(145deg, #fff 0%, #fffaf1 100%); }
.today-shift-group .panel-heading { margin-bottom: 10px; }
.today-shift-group .panel-heading strong, .today-shift-group .panel-heading small { display: block; }
.today-shift-group .panel-heading small { margin-top: 3px; color: var(--muted); }
.today-form-list { display: grid; gap: 8px; }
.today-form-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 11px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.today-form-row:hover, .today-form-row:focus-visible { background: #fffdf8; }
.today-form-row strong, .today-form-row small { display: block; overflow-wrap: anywhere; }
.today-form-row small { margin-top: 2px; color: var(--muted); font-size: .8rem; }
.today-form-state { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: #fff0d9; color: #a65319; font-weight: 900; }
.today-form-row.completed .today-form-state { background: #dcebc8; color: var(--forest); }
.today-actions-empty { background: #fffdf8; }
.form-assignment-context { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin: 16px 0; padding: 13px 15px; border: 1px solid #dfe7cf; border-radius: 14px; background: #f7fbf2; }
.form-assignment-context strong { color: var(--deep-forest); }
.form-assignment-context span { color: var(--muted); font-size: .9rem; }
.assignment-panel { margin: 22px 0; padding-top: 20px; border-top: 1px solid var(--line); }
.assignment-panel h2 { margin-bottom: 4px; color: var(--deep-forest); }
.assignment-inline-form { display: flex; align-items: center; gap: 7px; min-width: 250px; }
.assignment-inline-form select { min-width: 0; }
.shift-lead-summary { margin: 13px 0; padding: 10px 12px; border-radius: 10px; background: #f7fbf2; color: var(--muted); }
.shift-lead-summary strong { color: var(--deep-forest); }
.table-wrap td small { display: block; margin-top: 3px; color: var(--muted); font-size: .78rem; }
@media (max-width: 700px) {
  .today-form-row { grid-template-columns: auto minmax(0, 1fr); }
  .today-form-row .status { grid-column: 2; justify-self: start; }
  .assignment-inline-form { min-width: 0; flex-direction: column; align-items: stretch; }
  .assignment-inline-form .button, .assignment-inline-form select { width: 100%; }
}


/* Reusable volunteer roles */
.role-admin-layout { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(0, 1.15fr); gap: 8px; align-items: start; }
.role-slot-options { margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #fbfcf5; }
.role-slot-options legend { padding: 0 5px; color: var(--deep-forest); font-weight: 800; }
.role-slot-options legend small { display: block; margin-top: 3px; color: var(--muted); font-size: .78rem; font-weight: 500; }
.role-slot-option { display: grid; grid-template-columns: minmax(0, 1fr) 80px; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid #e8ecdf; }
.role-slot-option:first-of-type { margin-top: 7px; }
.role-slot-option strong, .role-slot-option small { display: block; }
.role-slot-option small { margin-top: 2px; color: var(--muted); font-size: .76rem; font-weight: 500; }
.role-slot-option input { width: 80px; }
.calculated-capacity { display: flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 8px 11px; border-radius: 10px; background: #f7fbf2; color: var(--deep-forest); }
.calculated-capacity small { color: var(--muted); font-size: .78rem; }
.role-admin-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.role-admin-actions form { display: inline-flex; }
.shift-roles { margin: 4px 0 0; color: var(--muted); font-size: .82rem; }
.shift-signup-form { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.shift-signup-form select { min-width: 210px; }

html.dark-mode .training-options,
html.dark-mode .role-slot-options {
  color: #f0f2eb;
  background: #252a27;
  border-color: #46503f;
}

html.dark-mode .training-options legend,
html.dark-mode .role-slot-options legend {
  color: #f0f2eb;
}

html.dark-mode .training-option,
html.dark-mode .role-slot-option {
  color: #f0f2eb;
  border-color: #414842;
}

html.dark-mode .calculated-capacity {
  color: #f0f2eb;
  background: #252a27;
  border: 1px solid #46503f;
}

@media (max-width: 900px) {
  .role-admin-layout { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .role-slot-option { grid-template-columns: minmax(0, 1fr) 70px; gap: 8px; }
  .role-slot-option input { width: 70px; }
  .shift-signup-form { align-items: stretch; flex-direction: column; width: 100%; }
  .shift-signup-form select, .shift-signup-form .button { width: 100%; }
}


/* Visual tidy-up */
.interior-page .brand-context { display: block; }
.admin-page { font-size: .93rem; }
.admin-page h1 { font-size: clamp(1.75rem, 3.6vw, 2.65rem); }
.admin-page h2 { font-size: 1.35rem; }
.admin-page h3 { font-size: 1.02rem; }
.admin-page .lead { font-size: .98rem; }
.admin-page .button { padding: 9px 13px; }
.admin-page .button.small { padding: 7px 10px; font-size: .82rem; }
.admin-page label { font-size: .88rem; }
.admin-page input, .admin-page select, .admin-page textarea { padding: 9px 10px; font-size: .9rem; }
.admin-page th, .admin-page td { padding: 9px 11px; font-size: .84rem; }
.admin-page th { font-size: .75rem; }
.admin-quick-links { margin: 12px 0 18px; }
.admin-management-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(250px, .65fr); gap: 8px; align-items: start; }
.admin-user-layout { display: grid; grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr); gap: 8px; align-items: start; }
.admin-user-create { padding-right: 20px; border-right: 1px solid var(--line); }
.admin-user-create h3, .admin-user-list h3 { margin-top: 0; color: var(--deep-forest); }
.admin-user-list .muted { margin-top: -6px; font-size: .82rem; }
.admin-document-management { min-height: 0; }
.admin-document-management p { margin-bottom: 18px; font-size: .88rem; }
.dashboard-hero h1 { font-size: clamp(1.65rem, 3.1vw, 2.2rem); }
@media (max-width: 980px) {
  .admin-management-grid, .admin-user-layout { grid-template-columns: 1fr; }
  .admin-user-create { padding-right: 0; padding-bottom: 18px; border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 700px) {
  .interior-page .brand-context { display: block; }
  .dashboard-hero h1 { font-size: clamp(1.5rem, 7vw, 1.9rem); }
  .admin-page { font-size: .9rem; }
  .admin-user-layout { gap: 8px; }
}


/* Admin mobile containment */
.admin-page .card,
.admin-page .admin-user-layout,
.admin-page .admin-user-create,
.admin-page .admin-user-list,
.admin-page form,
.admin-page .stack { min-width: 0; max-width: 100%; }
.admin-page input,
.admin-page select,
.admin-page textarea { box-sizing: border-box; max-width: 100%; }
.admin-page .stack > .button { justify-self: start; }

@media (max-width: 700px) {
  .admin-page .card { overflow: hidden; }
  .admin-page .stack > .button { width: 100%; justify-self: stretch; }
  .admin-page .button { white-space: normal; overflow-wrap: anywhere; }
}


/* Shift roster assignment */
.roster-lead-form { max-width: 430px; }
.roster-role-list { display: grid; gap: 8px; }
.roster-role-panel { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #fbfcf5; }
.roster-role-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.roster-role-heading h3 { margin: 0; color: var(--deep-forest); }
.roster-role-heading .muted { margin: 3px 0 0; }
.roster-assigned-list { margin: 10px 0 14px; }
.roster-assigned-list li { align-items: center; }
.roster-assigned-list li > span { min-width: 0; }
.roster-assigned-list small { display: block; color: var(--muted); font-size: .78rem; font-weight: 500; }
@media (max-width: 700px) {
  .roster-role-heading { flex-direction: column; gap: 7px; }
  .roster-role-panel .assignment-inline-form { min-width: 0; }
}


/* Form CSV import */
.csv-import-card, .csv-import-help, .csv-import-preview { max-width: 900px; }
.csv-import-preview { background: #f7fbf2; }
.csv-import-preview li { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.csv-import-preview li:last-child { border-bottom: 0; }
.csv-import-preview li small { display: block; margin-top: 3px; color: var(--muted); }
.csv-import-help code { padding: 2px 5px; border-radius: 4px; background: #eef0dc; font-size: .85em; }
.csv-example { overflow-x: auto; padding: 14px; border-radius: 10px; background: #2e3326; color: #fff8ed; font: .78rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }
@media (max-width: 700px) {
  .csv-import-preview li { align-items: flex-start; flex-direction: column; }
  .csv-example { font-size: .75rem; }
}

/* PWA installation and mobile safe-area support */
[hidden] { display: none !important; }

.site-header {
  padding-top: env(safe-area-inset-top);
}

.install-card {
  text-align: center;
}

.install-brand {
  margin: 4px auto 20px;
}

.install-brand img {
  display: block;
  width: min(220px, 72vw);
  max-height: 120px;
  margin: 0 auto;
  object-fit: contain;
}

.install-actions {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin: 24px 0;
}

.install-actions .button {
  min-width: 220px;
}

.install-instructions {
  margin-top: 18px;
  padding: 16px;
  text-align: left;
  background: #f1f2e7;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.install-instructions h2 {
  margin-top: 0;
  font-size: 1.25rem;
}

.install-card .button-row {
  justify-content: center;
}


/* Push notification controls */
.notifications-section { margin-top: 18px; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.notifications-card { background: linear-gradient(145deg, #fff 0%, #f7fbf2 100%); }
.notifications-card .panel-heading { margin-bottom: 8px; }
.notifications-bell { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff0d9; color: var(--orange); font-size: 1.1rem; }
.notifications-control { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.notifications-control .button { flex: 0 0 auto; }
.notifications-status { margin: 0; }
@media (max-width: 700px) {
  .notifications-control { align-items: stretch; flex-direction: column; }
  .notifications-control .button { width: 100%; }
}


/* App settings */
.app-settings-form { display: grid; gap: 8px; max-width: 980px; }
.settings-panel { display: grid; gap: 8px; }
.settings-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.settings-choice { display: flex; grid-template-columns: none; align-items: center; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); cursor: pointer; }
.settings-choice:has(input:checked) { border-color: var(--orange); box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 18%, transparent); }
.settings-choice input { width: auto; margin: 0; }
.settings-choice-copy { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.settings-choice-copy strong { color: var(--ink); }
.settings-swatches { display: inline-flex; gap: 5px; }
.settings-swatch { display: block; width: 21px; height: 21px; border: 1px solid rgba(46,51,38,.16); border-radius: 50%; }
.logo-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.logo-settings-card { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--mint); }
.logo-settings-card h3 { margin: 0; }
.app-settings-logo-preview { display: block; width: 100%; height: 100px; padding: 12px; object-fit: contain; border-radius: 10px; background: var(--white); border: 1px solid var(--line); }
.checkbox-label { display: flex; grid-template-columns: none; align-items: center; gap: 8px; font-weight: 600; }
.checkbox-label input { width: auto; }
@media (max-width: 700px) {
  .settings-choice-grid, .logo-settings-grid { grid-template-columns: 1fr; }
  .settings-choice-copy { align-items: flex-start; flex-direction: column; gap: 7px; }
}

.logo-upload-status { min-height: 1.5em; }
.app-settings-submit-status { flex-basis: 100%; margin: 0; color: var(--forest); }

.logo-settings-card { min-width: 0; }
.logo-position-fieldset { margin: 0; padding: 0; border: 0; }
.logo-position-fieldset legend { margin-bottom: 6px; font-weight: 700; }
.logo-position-options { display: flex; gap: 8px; flex-wrap: wrap; }
.logo-position-choice { display: inline-flex; grid-template-columns: none; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--hub-radius-control, 10px); background: var(--white); font-weight: 600; cursor: pointer; }
.logo-position-choice input { width: auto; margin: 0; }
.logo-position-choice:has(input:checked) { border-color: var(--orange); background: var(--sage-pale); }
.header-inner { position: relative; }
.site-header.logo-size-small .brand-logo { width: 120px; max-height: 48px; }
.site-header.logo-size-medium .brand-logo { width: 164px; max-height: 64px; }
.site-header.logo-size-large .brand-logo { width: 230px; max-height: 78px; }

/* Desktop header: branding and navigation live on separate rows so a long
   permission-dependent menu can never overlap a centred or large tenant logo. */
@media (min-width: 701px) {
  .header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    justify-content: stretch;
    gap: 8px;
  }

  .brand {
    grid-row: 1;
    justify-self: start;
    max-width: 100%;
  }

  .nav {
    grid-row: 2;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding-top: 8px;
    border-top: 1px solid var(--line);
  }

  .nav a.active,
  .nav a[aria-current="page"] {
    color: var(--forest);
    background: var(--sage-pale);
  }

  .site-header.logo-position-middle .brand {
    position: static;
    left: auto;
    transform: none;
    justify-self: center;
    margin: 0;
  }

  .site-header.logo-position-right .brand {
    order: initial;
    justify-self: end;
    margin: 0;
  }

  .site-header.logo-position-right .nav {
    order: initial;
    margin-right: 0;
  }
}

@media (max-width: 700px) {
  .site-header.logo-size-small .brand-logo { width: 110px; max-height: 42px; }
  .site-header.logo-size-medium .brand-logo { width: 178px; max-width: 62vw; max-height: 62px; }
  .site-header.logo-size-large .brand-logo { width: 230px; max-width: 78vw; max-height: 76px; }
  .site-header.logo-position-middle .brand { position: static; transform: none; margin: 0 auto; }
  .site-header.logo-position-right .brand { margin-left: auto; }
}

/* Logo positioning controls */

/* Home page account actions */
.home-logout{display:flex;justify-content:center;gap:.75rem;margin:4px auto 10px}
.home-account-action{display:flex;align-items:center;justify-content:center;gap:.55rem;min-width:8.5rem;min-height:3.2rem;padding:.7rem 1rem;border:1px solid var(--line);border-radius:14px;background:var(--surface,#fff);color:var(--ink);font-weight:750;text-decoration:none;box-shadow:0 1px 3px rgba(0,0,0,.04);transition:transform .15s ease,border-color .15s ease,background .15s ease}
.home-account-action:active{transform:scale(.97)}
.home-account-action:focus-visible{outline:3px solid color-mix(in srgb,var(--brand-primary,#748c3f) 55%,transparent);outline-offset:2px}
.home-account-icon{display:block;width:1.45rem;height:1.45rem;flex:0 0 1.45rem;background:currentColor;mask-repeat:no-repeat;mask-position:center;mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain}
.home-account-icon.is-settings{mask-image:url('/assets/icons/settings.svg');-webkit-mask-image:url('/assets/icons/settings.svg')}
.home-account-icon.is-hr{mask-image:url('/assets/icons/hr.svg');-webkit-mask-image:url('/assets/icons/hr.svg')}
.home-account-icon.is-feedback{mask-image:url('/assets/icons/messages.svg');-webkit-mask-image:url('/assets/icons/messages.svg')}
.home-account-icon.is-logout{mask-image:url('/assets/icons/logout.svg');-webkit-mask-image:url('/assets/icons/logout.svg')}
html.dark-mode .home-account-action{background:#252a27;border-color:#46503f;color:#f0f2eb}
@media(max-width:700px){.home-logout{margin-bottom:12px}.home-account-action{min-width:0;flex:1;max-width:10.5rem}}



/* Form entry: keep labels concise and controls comfortable on phones. */
.form-required-note {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: .9rem;
  font-weight: 650;
}
.form-grid {
  gap: 11px;
  padding: 16px;
}
.form-grid .form-field {
  gap: 5px;
  min-width: 0;
}
.form-grid .field-label-text {
  display: inline-block;
  color: var(--deep-forest);
  line-height: 1.35;
}
.form-grid .required {
  display: inline;
  margin-left: 2px;
  color: #c95e22;
  font-weight: 900;
}
.form-grid .form-field > input,
.form-grid .form-field > select {
  min-height: 44px;
  padding: 8px 10px;
  box-sizing: border-box;
}
.form-grid .form-field > textarea {
  min-height: 96px;
  padding: 9px 10px;
  box-sizing: border-box;
}
.form-grid .form-field > input:focus,
.form-grid .form-field > select:focus,
.form-grid .form-field > textarea:focus {
  border-color: var(--forest);
  outline: 3px solid rgba(105, 114, 52, .18);
  outline-offset: 1px;
}
.form-grid .form-field:focus-within .field-label-text {
  color: var(--forest);
}
.form-grid .field-help {
  margin-top: -1px;
}
.form-grid .form-actions {
  align-items: center;
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
@media (max-width: 700px) {
  .form-shell .back-link { margin-bottom: 16px; }
  .form-heading { margin-bottom: 14px; }
  .form-grid { gap: var(--hub-space-2, 8px); padding: var(--hub-space-3, 12px); border-radius: var(--hub-radius-card, 18px); }
  .form-grid .form-actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .form-grid .form-actions .button { width: 100%; box-sizing: border-box; text-align: center; }
}


/* Per-device dark mode */
html.dark-mode {
  color-scheme: dark;
  --cream: #151914 !important;
  --white: #20261f !important;
  --ink: #f4f3e9 !important;
  --muted: #c2c7b8 !important;
  --line: #46503f !important;
  --mint: #293127 !important;
  --sage-pale: #343e2a !important;
  --peach: #3d2c21 !important;
  --deep-forest: #f4f3e9 !important;
  --forest: #b8cf73 !important;
  --shadow: 0 14px 34px rgba(0, 0, 0, .3) !important;
}
html.dark-mode a { color: #d4df90; }
html.dark-mode .site-header,
html.dark-mode .action-card,
html.dark-mode .card,
html.dark-mode .success-card,
html.dark-mode .auth-card,
html.dark-mode .form-grid,
html.dark-mode .filter-bar,
html.dark-mode .table-wrap,
html.dark-mode .document-dialog { background: var(--white); }
html.dark-mode .nav a:hover,
html.dark-mode th { background: #30392d; }
html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea { color: var(--ink); background: #171d17; border-color: var(--line); }
html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder { color: #9fa897; }
html.dark-mode .notice,
html.dark-mode .alert { color: var(--ink); background: #3d2c21; border-color: #775134; }
html.dark-mode .alert.warning { background: #3b3820; border-color: #777142; }
html.dark-mode .tag,
html.dark-mode .status { color: #ecf2ce; background: #3d482c; }
html.dark-mode .button { color: var(--ink); background: #3a452f; }
html.dark-mode .button.primary { color: #1d211b; background: #f6a557; }
html.dark-mode .button.ghost { color: var(--ink); background: transparent; border-color: var(--line); }
html.dark-mode .logo-settings-card { background: #293127; }
html.dark-mode .app-settings-logo-preview,
html.dark-mode .logo-position-choice { background: #20261f; }
.dark-mode-control { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.dark-mode-control p { margin: 0; }
.dark-mode-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--ink); background: var(--sage-pale); font-size: 21px; }


/* Dark mode dashboard corrections */
html.dark-mode .dashboard-hero {
  background: linear-gradient(125deg, #273026 0%, #1b241c 58%, #34442b 100%);
  border-color: #4c5d43;
}
html.dark-mode .dashboard-hero h1 { color: #fffdf5; }
html.dark-mode .dashboard-hero .lead { color: #d7ddcf; }
html.dark-mode .dashboard-hero .eyebrow { color: #d1df8e; }
html.dark-mode .hero-leaf { background: #9fb95e; opacity: .7; }
html.dark-mode .hero-leaf-two { background: #c7db7c; }
html.dark-mode .hero-wave { background: rgba(176, 207, 100, .22); }
@media (max-width: 700px) {
  html.dark-mode .mobile-nav {
    background: rgba(24, 30, 24, .98);
    border-top-color: #46503f;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .38);
  }
  html.dark-mode .mobile-nav a { color: #c1c9b6; }
  html.dark-mode .mobile-nav a:first-child,
  html.dark-mode .mobile-nav a:hover,
  html.dark-mode .mobile-nav a:focus-visible { color: #d4df90; }
}


/* Shared page introduction cards */
.page-intro {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: var(--hub-space-5, 20px);
  border: 1px solid color-mix(in srgb, var(--ink) 20%, var(--line));
  border-radius: var(--hub-radius-card, 18px);
  background: #fffdf8;
  box-shadow: 0 8px 22px rgba(46, 51, 38, .07);
}
.page-intro::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -52px;
  width: 170px;
  height: 128px;
  border-radius: 60% 0 0 0;
  background: rgba(174, 189, 99, .16);
  transform: rotate(-8deg);
  pointer-events: none;
}
.page-intro > * {
  position: relative;
  z-index: 1;
}
.page-intro h1,
.page-intro h2,
.page-intro h3 {
  margin-top: .18rem;
  margin-bottom: .45rem;
}
.page-intro .eyebrow {
  display: block;
  margin-bottom: .28rem;
}
.page-intro .lead,
.page-intro > p:last-child {
  margin-top: 0;
  margin-bottom: 0;
}
.section-heading.page-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--hub-space-3, 12px);
}
.section-heading.page-intro > div {
  min-width: 0;
}
.section-heading.page-intro > .muted {
  flex: 0 0 auto;
  margin-top: .15rem;
}
@media (max-width: 700px) {
  .page-intro {
    margin: 0;
    padding: var(--hub-space-4, 16px);
    border-radius: var(--hub-radius-card, 18px);
  }
  .page-intro::after {
    right: -46px;
    bottom: -58px;
    width: 154px;
    height: 116px;
  }
  .page-intro h1,
  .page-intro h2,
  .page-intro h3 {
    margin-top: .12rem;
    margin-bottom: .4rem;
  }
  .section-heading.page-intro {
    align-items: flex-start;
    gap: 12px;
  }
}

/* Dark mode page introductions */
html.dark-mode .page-intro {
  border-color: #4c5d43;
  background: linear-gradient(125deg, #273026 0%, #1b241c 58%, #34442b 100%);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
}
html.dark-mode .page-intro::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -52px;
  width: 170px;
  height: 128px;
  border-radius: 60% 0 0 0;
  background: rgba(176, 207, 100, .16);
  transform: rotate(-8deg);
  pointer-events: none;
}
html.dark-mode .page-intro > * { position: relative; z-index: 1; }
html.dark-mode .page-intro h1,
html.dark-mode .page-intro h2,
html.dark-mode .page-intro h3 { color: #fffdf5; }
html.dark-mode .page-intro .lead,
html.dark-mode .page-intro .muted { color: #d7ddcf; }
html.dark-mode .page-intro .eyebrow { color: #d1df8e; }
@media (max-width: 700px) {
  html.dark-mode .page-intro { margin-bottom: 16px; }
}


/* Dark mode calendar readability */
html.dark-mode,
html.dark-mode body { background: #191b1c; }
html.dark-mode .page { background: #191b1c; }
html.dark-mode .shift-calendar-card { background: #202522; }
html.dark-mode .shift-calendar-toolbar h2,
html.dark-mode .shift-legend,
html.dark-mode .calendar-head { color: #f0f2eb; }
html.dark-mode .calendar-day {
  background: #2a2f2c;
  border-color: #4b554d;
  color: #f6f7f1;
}
html.dark-mode .calendar-day:hover,
html.dark-mode .calendar-day:focus-visible {
  background: #333b36;
  border-color: #f6a557;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .42);
}
html.dark-mode .calendar-day.blank { background: transparent; border-color: transparent; }
html.dark-mode .calendar-day.available { background: #2c4130; border-color: #5fa66a; }
html.dark-mode .calendar-day.partial { background: #4a3921; border-color: #dd9b42; }
html.dark-mode .calendar-day.full { background: #4b2d29; border-color: #c96c57; }
html.dark-mode .calendar-date { color: #fffdf5; }
html.dark-mode .calendar-day-label { color: #e0e5dc; }
html.dark-mode .shift-key.none,
html.dark-mode .calendar-status-dot.none { background: #c7ccc4; }


/* Dark mode document lightbox */
html.dark-mode .document-dialog {
  background: #202522 !important;
  border: 1px solid #46503f;
}
html.dark-mode .document-toolbar {
  background: #202522;
  border-bottom-color: #46503f;
}
html.dark-mode .document-toolbar h2 { color: #fffdf5; }
html.dark-mode .document-toolbar .button {
  color: #fffdf5;
  background: #3a452f;
  border-color: #5b6a4d;
}
html.dark-mode .document-viewer { background: #141716; }
html.dark-mode .document-loading,
html.dark-mode .document-error { color: #e0e5dc; background: #202522; border-radius: 12px; }


/* Dark-mode selection state is defined with the compact three-button layout below. */


/* User settings page */
.user-settings-page > .settings-management-section,
.user-settings-page > .notifications-section,
.user-settings-page > .dark-mode-section,
.user-settings-page > .settings-password-section { margin: 0 0 14px; }
.user-settings-page > .notifications-section:first-of-type { margin-top: 0; }
.settings-admin-card { min-height: 0; padding: 18px; color: var(--ink); text-decoration: none; }
.settings-admin-card h2 { margin: 4px 0 6px; color: var(--deep-forest); font-size: 1.35rem; }
.settings-admin-card p { margin: 0; }
.settings-admin-card .action-link { align-self: stretch; }

@media (max-width: 700px) {
  .user-settings-page { padding-bottom: 8px; }
}


/* Compact device settings controls */
.notifications-card,
.dark-mode-card { padding: 18px; }
.notifications-card .panel-heading,
.dark-mode-card .panel-heading { margin-bottom: 4px; }
.notifications-card p,
.dark-mode-card p { margin-bottom: 8px; }
.notifications-control,
.dark-mode-control { margin-top: 10px; gap: 8px; }
.notifications-control { align-items: center; flex-direction: row; }
.notifications-status,
.dark-mode-status { font-size: .82rem; }
.notification-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 8px;
  min-width: 72px;
  padding: 5px 9px 5px 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: var(--sage-pale);
  font: inherit;
  font-size: .82rem;
  font-weight: 800;
  cursor: pointer;
}
.notification-toggle-track {
  display: flex;
  align-items: center;
  width: 32px;
  height: 18px;
  padding: 2px;
  border-radius: 999px;
  background: #8a9286;
  transition: background .16s ease;
}
.notification-toggle-thumb {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  transition: transform .16s ease;
}
.notification-toggle.is-active .notification-toggle-track { background: var(--forest); }
.notification-toggle.is-active .notification-toggle-thumb { transform: translateX(14px); }
.dark-mode-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
}
.dark-mode-options .button {
  min-width: 0;
  padding: 9px 6px;
  font-size: .84rem;
  white-space: nowrap;
}
.dark-mode-options .button.is-active {
  color: #1d211b;
  background: var(--orange);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 25%, transparent);
}
html.dark-mode .dark-mode-options .button.is-active { color: #1d211b; background: #f6a557; }
@media (max-width: 700px) {
  .notifications-control .notification-toggle { width: auto; }
}
@media (max-width: 480px) {
  .dark-mode-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dark-mode-options .button:last-child { grid-column: auto; }
}
html.dark-mode .notification-toggle { color: #f4f5ed; background: #2c3628; border-color: #4b5945; }
html.dark-mode .notification-toggle-track { background: #687166; }
html.dark-mode .notification-toggle.is-active .notification-toggle-track { background: #b8cf73; }


/* Compact, expandable account security section */
.settings-password-section { margin-top: 18px; }
.settings-password-card { padding: 18px; }
.settings-password-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--deep-forest);
  cursor: pointer;
  list-style: none;
}
.settings-password-details > summary::-webkit-details-marker { display: none; }
.settings-password-details > summary .eyebrow {
  display: block;
  margin-bottom: 2px;
}
.settings-password-details > summary strong {
  display: block;
  font-size: 1.18rem;
}
.settings-details-indicator {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--ink);
  background: var(--sage-pale);
  font-size: 1rem;
  transition: transform .16s ease;
}
.settings-password-details[open] .settings-details-indicator { transform: rotate(180deg); }
.settings-password-details > p { margin: 12px 0; }
.settings-password-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 10px;
}
.settings-password-form label { margin: 0; }
.settings-password-form .button { min-height: 48px; white-space: nowrap; }
@media (max-width: 820px) {
  .settings-password-form { grid-template-columns: 1fr; }
  .settings-password-form .button { width: 100%; }
}


/* Controlled record review and corrections */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.record-edited-badge {
  display: inline-block;
  margin-left: 5px;
  padding: 2px 6px;
  border-radius: 999px;
  color: #584114;
  background: #fff0d9;
  font-size: .75rem;
  font-weight: 800;
  vertical-align: middle;
}
.record-detail-card { max-width: 900px; }
.record-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-bottom: 18px;
  color: var(--muted);
  font-size: .9rem;
}
.record-meta strong { color: var(--ink); }
.record-detail-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.record-detail-section h2 { margin: 0 0 14px; font-size: 1.15rem; }
.record-data {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}
.record-data > div {
  padding: 12px;
  border-radius: 12px;
  background: var(--mint);
}
.record-data dt {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.record-data dd { margin: 0; overflow-wrap: anywhere; }
.record-change-history {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.record-change-history li {
  padding: 13px;
  border-left: 3px solid var(--orange);
  border-radius: 0 10px 10px 0;
  background: var(--mint);
}
.record-change-history small { color: var(--muted); }
.record-modify-dialog {
  width: min(500px, calc(100vw - 32px));
  margin: auto;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--ink);
  background: var(--white);
  box-shadow: 0 24px 70px rgba(0,0,0,.35);
}
.record-dialog-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.record-dialog-heading h2 { margin: 3px 0 0; font-size: 1.3rem; }
.record-modify-dialog textarea { min-height: 100px; }
html.dark-mode .record-data > div,
html.dark-mode .record-change-history li { background: #293127; }
html.dark-mode .record-edited-badge { color: #fff0d9; background: #5b4125; }
html.dark-mode .record-modify-dialog { border-color: #46503f; background: #20261f; }
@media (max-width: 700px) {
  .record-data { grid-template-columns: 1fr; }
  .record-meta { display: grid; gap: 6px; }
  .record-modify-dialog { padding: 16px; }
}


/* Dashboard messages shortcut */
.dashboard-messages-section { margin-top: 14px; }
.dashboard-shortcut-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 104px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--ink);
  background: var(--white);
  box-shadow: 0 12px 26px rgba(43, 54, 34, .06);
  text-decoration: none;
}
.dashboard-shortcut-tile:hover { border-color: var(--green); background: var(--mint); }
.dashboard-utility-copy {
  min-width: 0;
}
.dashboard-utility-copy .eyebrow {
  display: block;
}
.dashboard-utility-copy h2 {
  margin: 3px 0 4px;
  font-size: 1.2rem;
}
.dashboard-utility-copy p {
  margin: 0;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.35;
}
.dashboard-message-tile-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.dashboard-message-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  object-fit: contain;
  opacity: .72;
}
.dashboard-message-tile-end {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.dashboard-message-badge {
  display: inline-grid;
  min-width: 26px;
  height: 26px;
  place-items: center;
  padding: 0 7px;
  border: 2px solid var(--white);
  border-radius: 999px;
  color: #fff;
  background: var(--orange);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
  font-size: .78rem;
  line-height: 1;
}
.dashboard-message-chevron {
  color: var(--muted);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1;
}
html.dark-mode .dashboard-shortcut-tile { border-color: #46503f; color: var(--ink); background: #20261f; }
html.dark-mode .dashboard-shortcut-tile:hover { background: #293127; }
html.dark-mode .dashboard-message-icon { filter: invert(1); opacity: .82; }
html.dark-mode .dashboard-message-badge { border-color: #20261f; }

/* Messages */
.messages-layout {
  display: grid;
  grid-template-columns: minmax(250px, .85fr) minmax(0, 1.55fr);
  gap: 18px;
  align-items: start;
}
.messages-inbox { padding: 0; overflow: hidden; }
.messages-inbox-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 14px;
}
.messages-inbox-heading h2 { margin: 3px 0 0; }
.message-thread-help {
  margin: 0;
  padding: 2px 18px 13px;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.4;
}
.message-thread-list {
  display: grid;
  border-top: 1px solid var(--line);
}
.message-thread {
  display: grid;
  gap: 5px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.message-thread:hover,
.message-thread.is-selected { background: var(--mint); }
.message-thread-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.message-thread small {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.message-unread-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--orange);
}
.message-new-details {
  margin: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--mint) 58%, transparent);
}
.message-new-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  cursor: pointer;
  color: var(--green);
  font-weight: 800;
  list-style: none;
}
.message-new-details summary::-webkit-details-marker { display: none; }
.message-new-details[open] summary { border-bottom: 1px solid var(--line); }
.message-compose-plus {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  color: var(--white);
  background: var(--green);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1;
}
.message-new-details[open] .message-compose-plus { transform: rotate(45deg); }
.message-new-details form { padding: 14px; }
.message-chat-empty {
  display: grid;
  align-content: center;
  min-height: 260px;
  padding: clamp(24px, 5vw, 44px);
  background: linear-gradient(145deg, var(--white), var(--mint));
}
.message-chat-empty h2 { margin: 4px 0 8px; }
.message-chat,
.message-chat-empty { min-height: 380px; }
.message-chat {
  display: grid;
  grid-template-rows: auto minmax(180px, 1fr) auto;
  gap: 16px;
}
.message-chat-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.message-chat-heading h2 { margin: 3px 0 0; }
.message-bubbles {
  display: grid;
  max-height: 58vh;
  gap: 10px;
  overflow-y: auto;
  align-content: start;
  padding-right: 4px;
}
.message-bubble {
  width: fit-content;
  max-width: min(82%, 580px);
  padding: 11px 13px;
  border-radius: 14px 14px 14px 4px;
  background: var(--mint);
}
.message-bubble p { margin: 0 0 6px; }
.message-bubble small { color: var(--muted); }
.message-bubble.is-mine {
  justify-self: end;
  border-radius: 14px 14px 4px;
  background: #ffe7d1;
}
.message-bubble.is-shift { border-left: 4px solid var(--orange); }
.message-reply-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}
.message-reply-form textarea {
  min-height: 62px;
  margin: 0;
}
.message-reply-form .button { white-space: nowrap; }
.message-dialog {
  width: min(720px, calc(100vw - 20px));
  height: min(86vh, 820px);
  height: min(86dvh, 820px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 16px;
  padding: clamp(18px, 3vw, 28px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--hub-radius-dialog, 22px);
  color: var(--ink);
  background: var(--white);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .34);
}
.message-dialog:focus { outline: none; }
.message-dialog .message-bubbles { min-height: 0; }
.message-dialog-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.message-dialog-heading h2 { margin: 3px 0 0; }
.message-dialog .message-bubbles {
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
html.dark-mode .message-dialog { border-color: #46503f; background: #20261f; }

.shift-message-panel {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--hub-radius-card, 18px);
  background: var(--mint);
}
.shift-message-panel h2 { margin: 3px 0 5px; font-size: 1.25rem; }
.shift-message-panel .stack { margin-top: 14px; }

html.dark-mode .message-thread:hover,
html.dark-mode .message-thread.is-selected,
html.dark-mode .message-new-details,
html.dark-mode .shift-message-panel,
html.dark-mode .message-bubble,
html.dark-mode .message-chat-empty { background: #293127; }
html.dark-mode .message-new-details { border-color: #46503f; }
html.dark-mode .message-bubble.is-mine { background: #5b4125; }
html.dark-mode .message-thread { color: var(--ink); }
html.dark-mode .message-bubble small,
html.dark-mode .message-thread small { color: #c1c9bc; }

@media (max-width: 800px) {
  .messages-layout { grid-template-columns: 1fr; }
  .message-chat,
  .message-chat-empty { min-height: 0; }
  .message-bubbles { max-height: 48vh; }
}
@media (max-width: 520px) {
  .dashboard-shortcut-tile { padding: 11px 16px; }
  .message-reply-form { grid-template-columns: 1fr; display: grid; }
  .message-reply-form .button { width: 100%; }
  .message-dialog {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 12px;
    padding: 16px;
    overflow: hidden;
    border-radius: var(--hub-radius-dialog, 22px);
    background: var(--white);
  }
  .message-bubble { max-width: 92%; }
}


/* Audited chat log */
.chat-log-thread-type {
  padding: 3px 7px;
  border-radius: 999px;
  color: var(--green);
  background: var(--mint);
  font-size: .75rem;
  font-weight: 800;
}
.chat-log-access-card { max-width: 640px; }
.chat-log-access-card h2 { margin: 4px 0 8px; }
.chat-log-access-card textarea { min-height: 110px; }
.chat-log-bubble { max-width: min(88%, 700px); }
.chat-log-viewer .message-bubbles { max-height: 62vh; }
html.dark-mode .chat-log-thread-type { color: #e4edbd; background: #293127; }


/* Conversation archive controls */
.message-dialog-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}
.message-dialog-actions form,
.message-chat-heading form { margin: 0; }
.message-chat-heading form { flex: 0 0 auto; }
@media (max-width: 520px) {
  .message-dialog-heading {
    align-items: flex-start;
    gap: 10px;
  }
  .message-dialog-actions {
    display: grid;
    gap: 6px;
  }
  .message-dialog-actions .button { width: 100%; }
  .message-chat-heading { display: grid; }
  .message-chat-heading form .button { width: 100%; }
}


.message-archive-form {
  display: flex;
  justify-content: flex-start;
  margin: -4px 0 0;
}
.message-archive-form .button.danger {
  color: #a83228;
  border-color: #d88b84;
  background: #fff4f2;
}
.message-archive-form .button.danger:hover {
  color: #fff;
  border-color: #b84035;
  background: #b84035;
}
html.dark-mode .message-archive-form .button.danger {
  color: #ffd4ce;
  border-color: #a9574f;
  background: #4a2825;
}
html.dark-mode .message-archive-form .button.danger:hover {
  color: #fff;
  background: #b84035;
}


/* Long-press conversation actions */
.message-thread[data-message-thread-action] {
  -webkit-touch-callout: none;
  user-select: none;
}
.message-thread-action-dialog {
  width: min(440px, calc(100vw - 32px));
  margin: auto;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--ink);
  background: var(--white);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
}
.message-thread-action-dialog {
  display: grid;
  gap: 16px;
}
.message-thread-action-dialog:focus { outline: none; }
.message-thread-action-dialog h2 { margin: 4px 0 6px; }
.message-thread-action-dialog .button.danger {
  color: #a83228;
  border-color: #d88b84;
  background: #fff4f2;
}
.message-thread-action-dialog .button.danger:hover {
  color: #fff;
  border-color: #b84035;
  background: #b84035;
}
html.dark-mode .message-thread-action-dialog {
  border-color: #46503f;
  background: #20261f;
}

@media (max-width: 700px) {
  .message-thread-action-dialog,
  .record-modify-dialog,
  .create-user-dialog {
    overflow: auto;
    background: var(--white);
  }
  html.dark-mode .message-thread-action-dialog,
  html.dark-mode .record-modify-dialog,
  html.dark-mode .create-user-dialog {
    background: #20261f;
  }
}
html.dark-mode .message-thread-action-dialog .button.danger {
  color: #ffd4ce;
  border-color: #a9574f;
  background: #4a2825;
}


/* Shift conversation membership */
.message-left-conversations {
  margin: 0 12px 12px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
}
.message-left-conversations summary {
  cursor: pointer;
  color: var(--green);
  font-weight: 800;
  list-style: none;
}
.message-left-conversations summary::-webkit-details-marker { display: none; }
.message-left-conversations[open] summary { margin-bottom: 8px; }
.message-left-conversations p { margin: 0 0 10px; font-size: .9rem; }
.message-left-conversations li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.message-left-conversations li span { display: grid; gap: 2px; }
.message-left-conversations li small { color: var(--muted); }
.message-left-conversations form { margin: 0; }
html.dark-mode .message-left-conversations {
  border-color: #46503f;
  background: #20261f;
}


/* Administration menu */
.admin-menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
  gap: 8px;
}
.admin-menu-card {
  display: flex;
  min-height: 190px;
  flex-direction: column;
  align-items: flex-start;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--ink);
  background: var(--white);
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.admin-menu-card:hover,
.admin-menu-card:focus-visible {
  border-color: var(--green);
  box-shadow: 0 14px 28px rgba(44, 65, 37, .14);
  transform: translateY(-2px);
}
.admin-menu-card h2 {
  margin: 7px 0 8px;
  color: var(--deep-forest);
}
.admin-menu-card p {
  margin: 0;
  color: var(--muted);
}
.admin-menu-card-action {
  margin-top: auto;
  padding-top: 18px;
  color: var(--green);
  font-weight: 800;
}
.user-management-page .admin-user-management { max-width: 1120px; }
.user-management-page .admin-user-create h2,
.user-management-page .admin-user-list h2 { margin: 5px 0 15px; }
@media (max-width: 700px) {
  .admin-menu-grid { grid-template-columns: 1fr; }
  .admin-menu-card { min-height: 0; padding: 20px; }
}


/* User management create-user popup */
.user-list-heading { align-items: center; margin-bottom: 10px; }
.user-list-heading h2 { margin-bottom: 0; }
.create-user-dialog {
  width: min(520px, calc(100vw - 32px));
  max-height: min(88vh, 720px);
  max-height: min(88dvh, 720px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--ink);
  background: var(--white);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.create-user-dialog:focus { outline: none; }
.create-user-dialog-inner { padding: clamp(20px, 5vw, 30px); }
.create-user-dialog-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.create-user-dialog-heading h2 { margin: 4px 0 0; }
.create-user-dialog .stack { margin-top: 0; }
html.dark-mode .create-user-dialog { border-color: #46503f; background: #20261f; }
@media (max-width: 700px) {
  .user-list-heading { align-items: stretch; gap: 10px; }
  .user-list-heading .button { width: 100%; }
  .create-user-dialog {
    overflow: auto;
    border-radius: 18px;
    background: var(--white);
  }
}


/* Create-user entry card */
.create-user-card {
  display: flex;
  width: 100%;
  min-height: 165px;
  flex-direction: column;
  align-items: flex-start;
  margin: 0 0 16px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--ink);
  background: var(--white);
  box-shadow: var(--shadow);
  font: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.create-user-card:hover,
.create-user-card:focus-visible {
  border-color: var(--green);
  box-shadow: 0 14px 28px rgba(44, 65, 37, .14);
  transform: translateY(-2px);
}
.create-user-card strong {
  display: block;
  margin: 7px 0 8px;
  color: var(--deep-forest);
  font-family: var(--heading);
  font-size: 1.35rem;
}
.create-user-card-copy { color: var(--muted); }
.create-user-card-action {
  margin-top: auto;
  padding-top: 18px;
  color: var(--green);
  font-weight: 800;
}
html.dark-mode .create-user-card { background: #20261f; }
.create-user-page-card { max-width: 680px; }
.create-user-page-card .button-row { margin-top: 4px; }
@media (max-width: 700px) {
  .create-user-card { min-height: 0; padding: 20px; }
}


/* Controlled-document register */
.controlled-documents-page { max-width: 1120px; }
.controlled-document-upload { max-width: 760px; }
.controlled-document-form > label:first-of-type { max-width: 440px; }
.controlled-document-details {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition:
    max-height .56s cubic-bezier(.22, 1, .36, 1),
    opacity .34s ease,
    transform .48s cubic-bezier(.22, 1, .36, 1);
}
.controlled-document-details[hidden] { display: none !important; }
.controlled-document-details.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.controlled-document-details-inner {
  display: grid;
  gap: 15px;
}
@media (prefers-reduced-motion: reduce) {
  .controlled-document-details {
    transition: none;
    transform: none;
  }
}
.document-ai-status-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
}
.document-ai-spinner {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  object-fit: contain;
  animation: document-ai-spin 1.05s linear infinite;
  transform-origin: 50% 50%;
}
.document-ai-spinner[hidden] { display: none !important; }
@keyframes document-ai-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .document-ai-spinner { animation-duration: 2.4s; }
}
.controlled-document-fields {
  display: grid;
  gap: 15px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--mint) 42%, transparent);
}
.field-heading {
  color: var(--green);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.controlled-document-register { margin-top: 20px; }
.controlled-document-legacy {
  display: block;
  margin-top: 3px;
  color: #a55b23;
  font-size: .78rem;
  font-weight: 700;
}
html.dark-mode .controlled-document-fields { border-color: #46503f; background: rgba(41, 54, 40, .55); }
@media (max-width: 700px) {
  .controlled-document-fields { padding: 15px; }
}



.training-certificate-details {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition:
    max-height .56s cubic-bezier(.22, 1, .36, 1),
    opacity .34s ease,
    transform .48s cubic-bezier(.22, 1, .36, 1);
}
.training-certificate-details[hidden] { display: none !important; }
.training-certificate-details.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.training-certificate-details-inner {
  display: grid;
  gap: 15px;
}
@media (prefers-reduced-motion: reduce) {
  .training-certificate-details {
    transition: none;
    transform: none;
  }
}

/* Records: desktop table and mobile cards */
.records-page {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.records-page .records-search-form,
.records-page .records-results-heading,
.records-page .records-desktop-table,
.records-page .records-mobile-list {
  min-width: 0;
  max-width: 100%;
}
.records-desktop-table {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}
.records-mobile-list { display: none; }

@media (max-width: 700px) {
  .records-page .records-desktop-table { display: none; }
  .records-mobile-list {
    display: grid;
    gap: 8px;
  }
  .record-mobile-card {
    display: grid;
    gap: 10px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--hub-radius-card, 18px);
    background: var(--card);
    box-shadow: var(--card-shadow);
  }
  .record-mobile-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .record-mobile-date {
    color: var(--muted);
    font-size: .88rem;
    font-weight: 700;
  }
  .record-mobile-card h3 {
    margin: 0;
    font-size: 1.16rem;
  }
  .record-mobile-meta {
    margin: -2px 0 0;
    color: var(--muted);
    font-size: .92rem;
    line-height: 1.45;
  }
  .record-mobile-summary {
    padding: 10px 12px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--mint) 48%, transparent);
    color: var(--ink);
    font-size: .92rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
  }
  .record-mobile-summary-empty {
    margin: 0;
    font-size: .9rem;
  }
  .record-mobile-view {
    justify-self: start;
    margin-top: 2px;
  }
  html.dark-mode .record-mobile-card {
    border-color: #46503f;
    background: #1c231d;
  }
  html.dark-mode .record-mobile-summary {
    background: rgba(61, 78, 54, .48);
    color: #f4f2e8;
  }
}


/* Tenant branding settings */
.settings-field-grid,
.brand-colour-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.brand-colour-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 16px;
}
.brand-colour-grid input[type="color"] {
  width: 100%;
  min-height: 48px;
  padding: 4px;
}
.custom-colour-toggle { margin-top: 18px; }
.brand-live-preview {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--cream);
  color: var(--ink);
  transition: background-color .2s ease, color .2s ease;
}
.brand-live-preview h3 {
  margin: 6px 0 8px;
  color: var(--green);
}
.brand-live-preview p { margin: 0 0 18px; }
@media (max-width: 700px) {
  .settings-field-grid,
  .brand-colour-grid { grid-template-columns: 1fr; }
}


.app-icon-settings {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: start;
  gap: 20px;
}
.app-icon-preview {
  width: 112px;
  height: 112px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--cream);
  object-fit: contain;
}
@media (max-width: 560px) {
  .app-icon-settings { grid-template-columns: 1fr; }
}

.shift-type-library{display:grid;gap:.7rem}
.shift-type-library-item{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.9rem;padding:.9rem 1rem;border:1px solid var(--line);border-radius:14px;background:var(--surface,#fff)}
.shift-type-library-copy{display:grid;gap:.2rem;min-width:0}
.shift-type-library-copy strong{font-size: 1rem;color:var(--deep-forest)}
.shift-type-library-copy small{color:var(--muted);font-size: .82rem}
.shift-type-library-copy span{color:var(--muted);font-size: .82rem}
.shift-type-library-actions{display:flex;align-items:center;gap:.45rem}
.shift-type-library-actions form{display:inline-flex;margin:0}
.shift-type-icon-action{display:grid;place-items:center;width:2.75rem;height:2.75rem;border:1px solid var(--line);border-radius:.8rem;background:var(--surface,#fff);color:var(--deep-forest);text-decoration:none;transition:transform .15s ease,border-color .15s ease}
.shift-type-icon-action:active{transform:scale(.94)}
.shift-type-icon-action:focus-visible{outline:3px solid color-mix(in srgb,var(--brand-primary,#748c3f) 55%,transparent);outline-offset:2px}
.shift-type-icon-action span{display:block;width:1.35rem;height:1.35rem;background:currentColor;mask-repeat:no-repeat;mask-position:center;mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain}
.shift-type-icon-action.is-edit span{mask-image:url('/assets/icons/edit-event.svg');-webkit-mask-image:url('/assets/icons/edit-event.svg')}
html.dark-mode .shift-type-library-item,html.dark-mode .shift-type-icon-action{background:#252a27;border-color:#46503f}
html.dark-mode .shift-type-library-copy strong,html.dark-mode .shift-type-icon-action{color:#f0f2eb}
@media(max-width:520px){.shift-type-library-item{grid-template-columns:minmax(0,1fr);gap:.7rem}.shift-type-library-actions{justify-content:flex-end}}


/* Page header geometry is defined once in the shared .page-intro contract above. */
.training-page > .training-page-intro .lead {
  max-width: none;
}

/* Keep the Documents dashboard on the same tight vertical rhythm as Training. */
.page > .section.documents-page {
  gap: 8px;
  margin-bottom: 16px;
}
.page > .section.documents-page > * {
  margin-top: 0;
  margin-bottom: 0;
}
.page > .section.documents-page > .document-category-section + .document-category-section {
  margin-top: 0;
}

/* Keep the Training dashboard on one consistent vertical spacing rhythm. */
.page > .section.training-page {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}
.page > .section.training-page > .training-page-intro,
.page > .section.training-page > .training-progress-panel,
.page > .section.training-page > .training-category {
  margin: 0;
}
.page > .section.training-page > .training-category + .training-category {
  margin-top: 0;
}
.page > .section.training-page + .external-training-section {
  margin-top: 0;
}

/* Controlled-document mobile offline availability */
.offline-document-form { margin: 0; }
.offline-document-switch {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 8px;
  cursor: pointer;
  font-size: .82rem;
  font-weight: 800;
  white-space: nowrap;
}
.offline-document-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.offline-document-switch-track {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 38px;
  height: 22px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #8a9286;
  transition: background .16s ease, border-color .16s ease;
}
.offline-document-switch-track i {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.24);
  transition: transform .16s ease;
}
.offline-document-switch input:checked + .offline-document-switch-track {
  background: var(--forest);
  border-color: var(--forest);
}
.offline-document-switch input:checked + .offline-document-switch-track i {
  transform: translateX(16px);
}
.offline-document-switch input:focus-visible + .offline-document-switch-track {
  outline: 3px solid color-mix(in srgb, var(--forest) 35%, transparent);
  outline-offset: 2px;
}


.document-toolbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.document-cache-status {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 9px;
  border: 1px solid color-mix(in srgb, var(--forest) 28%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--sage-pale) 82%, #fff);
  color: var(--forest);
  font-size: .78rem;
  font-weight: 800;
  white-space: nowrap;
}
.document-cache-status[hidden] { display: none !important; }


/* Android/WebView document lightbox hardening.
   Use an explicit inset sheet instead of relying on viewport-centred grid sizing. */
.document-modal {
  isolation: isolate;
}
@media (max-width: 700px) {
  .document-modal {
    display: block;
    padding: 0;
  }
  .document-dialog {
    position: absolute !important;
    z-index: 1;
    top: max(8px, env(safe-area-inset-top));
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    left: 8px;
    width: auto !important;
    height: auto !important;
    min-width: 0;
    min-height: 240px;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr);
    visibility: visible !important;
    opacity: 1 !important;
    overflow: hidden;
    border-radius: 18px !important;
    background: #ffffff !important;
  }
  .document-toolbar {
    flex-wrap: nowrap;
    background: #ffffff;
  }
  .document-toolbar h2 {
    width: auto;
    min-width: 0;
  }
  .document-viewer {
    min-height: 0;
  }
}
@media (max-width: 700px) {
  html.dark-mode .document-dialog,
  html.dark-mode .document-toolbar {
    background: #202522 !important;
  }
}


.offline-cache-summary {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--muted);
  font-size: .86rem;
  font-weight: 700;
}
.offline-cache-summary.is-ready {
  border-color: color-mix(in srgb, var(--forest) 32%, var(--line));
  background: color-mix(in srgb, var(--sage-pale) 78%, #fff);
  color: var(--forest);
}
.offline-cache-summary.is-warning {
  border-color: #d6b56b;
  background: #fff7df;
  color: #755615;
}
html.dark-mode .offline-cache-summary {
  background: #202522;
}
html.dark-mode .offline-cache-summary.is-ready {
  background: #273525;
  color: #e3f1d8;
}
html.dark-mode .offline-cache-summary.is-warning {
  background: #3b3820;
  color: #f5e8ad;
}


/* Conditional form workflows */
.form-builder-conditional {
  margin-top: 2px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.form-builder-conditional summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  color: var(--deep-forest);
  font-weight: 800;
}
.form-builder-conditional summary span {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 650;
}
.form-builder-conditional-body {
  display: grid;
  gap: 18px;
  margin-top: 14px;
  padding: 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--sage-pale) 55%, var(--white));
}
.form-builder-conditional h4 {
  margin: 0 0 4px;
  color: var(--deep-forest);
}
.form-builder-response {
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.form-builder-wide {
  grid-column: 1 / -1;
}
.form-builder-conditional textarea {
  min-height: 88px;
}
.form-field[hidden],
.form-conditional-guidance[hidden] {
  display: none !important;
}
.form-conditional-guidance {
  display: grid;
  gap: 7px;
  padding: 14px 16px;
  border: 1px solid #e1b273;
  border-radius: var(--hub-radius-row, 14px);
  background: #fff4df;
  color: var(--ink);
}
.form-conditional-guidance > strong {
  color: #8f4818;
}
.form-conditional-guidance p {
  margin: 0;
  line-height: 1.5;
}
.form-conditional-next {
  display: grid;
  gap: 2px;
  margin-top: 3px;
  padding-top: 9px;
  border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent);
}
.form-conditional-next small {
  color: var(--muted);
  font-weight: 600;
}
.form-follow-up-card {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin: 20px 0 4px;
  padding: 18px;
  border: 1px solid #e1b273;
  border-radius: 14px;
  background: #fff4df;
}
.form-follow-up-card p {
  margin: 0;
}
.form-follow-up-card .button {
  margin-top: 2px;
}
html.dark-mode .form-builder-row {
  background: #242b23;
}
html.dark-mode .form-builder-conditional-body {
  background: #293127;
}
html.dark-mode .form-conditional-guidance,
html.dark-mode .form-follow-up-card {
  background: #3b3820;
  border-color: #777142;
}
html.dark-mode .form-conditional-guidance > strong {
  color: #f1c17e;
}
@media (max-width: 700px) {
  .form-builder-conditional-body {
    padding: 12px;
  }
}


/* Customer-controlled HR encryption setup */
.hr-activation-entry {
  max-width: 680px;
}
.hr-activation-summary {
  display: grid;
  gap: 7px;
  margin: 16px 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--sage-pale) 68%, var(--white));
}
.hr-activation-summary p {
  margin: 0;
  line-height: 1.5;
}
.hr-setup {
  max-width: 860px;
  margin-inline: auto;
}
.hr-setup-steps {
  display: grid;
  gap: 8px;
}
.hr-setup-step {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.hr-setup-step[hidden] {
  display: none !important;
}
.hr-step-number {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--forest);
  color: #fff;
  font-weight: 900;
}
.hr-setup-step h2 {
  margin-top: 2px;
}
.hr-setup-step .button + .button {
  margin-left: 8px;
}
.hr-setup-status {
  min-height: 24px;
  margin: 14px 2px;
  font-weight: 750;
}
.hr-setup-status[data-kind="success"] {
  color: var(--forest);
}
.hr-setup-status[data-kind="error"] {
  color: #a33a2b;
}
.hr-vault-status {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
}
.hr-vault-status .status {
  flex: 0 0 auto;
}
html.dark-mode .hr-activation-summary {
  background: #293127;
}
html.dark-mode .hr-setup-status[data-kind="success"] {
  color: #dcefd5;
}
html.dark-mode .hr-setup-status[data-kind="error"] {
  color: #ffb9ad;
}
@media (max-width: 700px) {
  .hr-setup-step {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
  }
  .hr-step-number {
    width: 30px;
    height: 30px;
  }
  .hr-setup-step .button {
    width: 100%;
  }
  .hr-setup-step .button + .button {
    margin: 8px 0 0;
  }
  .hr-vault-status {
    display: grid;
  }
}


/* Client-side HR encryption readiness */
.hr-client-crypto-status {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
}
.hr-client-crypto-status .status {
  flex: 0 0 auto;
  max-width: 250px;
  text-align: center;
}
.hr-client-crypto-status [data-state="ready"] {
  background: color-mix(in srgb, var(--sage-pale) 82%, var(--white));
  color: var(--forest);
}
.hr-client-crypto-status [data-state="loading"] {
  opacity: .78;
}
.hr-client-crypto-status [data-state="error"] {
  background: #f7d6cf;
  color: #8f2f21;
}
.hr-client-crypto-status [data-state="locked"] {
  opacity: .72;
}
html.dark-mode .hr-client-crypto-status [data-state="ready"] {
  background: #2f3c2c;
  color: #dcefd5;
}
html.dark-mode .hr-client-crypto-status [data-state="error"] {
  background: #512c26;
  color: #ffd0c7;
}
@media (max-width: 700px) {
  .hr-client-crypto-status {
    display: grid;
  }
  .hr-client-crypto-status .status {
    max-width: none;
    width: 100%;
  }
}


/* Encrypted HR people profiles */
.hr-people-page,
.hr-profile-page {
  max-width: 980px;
  margin-inline: auto;
}
.hr-people-panel {
  padding: 18px;
}
.hr-people-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, .34fr);
  gap: 12px;
  align-items: end;
  margin-bottom: 14px;
}
.hr-archive-page .hr-people-toolbar {
  grid-template-columns: 1fr;
}
.hr-people-list {
  display: grid;
  gap: 8px;
}
.hr-person-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--hub-radius-card, 18px);
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
}
.hr-person-card:hover,
.hr-person-card:focus-visible {
  border-color: color-mix(in srgb, var(--forest) 42%, var(--line));
  background: color-mix(in srgb, var(--sage-pale) 28%, var(--white));
  outline: none;
}
.hr-person-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--forest);
  color: #fff;
  font-weight: 850;
  letter-spacing: -.02em;
}
.hr-person-copy {
  min-width: 0;
}
.hr-person-copy strong,
.hr-person-copy small {
  display: block;
  overflow-wrap: anywhere;
}
.hr-person-copy strong {
  color: var(--deep-forest);
  font-size: 1rem;
}
.hr-person-copy small {
  margin-top: 2px;
  color: var(--muted);
  font-size: .8rem;
}
.hr-person-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 850;
  white-space: nowrap;
}
.hr-person-status.status-onboarding {
  background: var(--peach);
  color: #a95018;
}
.hr-person-status.status-active {
  background: #dcebc8;
  color: var(--forest);
}
.hr-person-status.status-inactive,
.hr-person-status.status-left {
  background: #ecece7;
  color: #62675f;
}
.hr-person-arrow {
  color: var(--forest);
  font-size: 1.7rem;
  line-height: 1;
}
.hr-people-error {
  color: #a33a2b !important;
  font-weight: 750;
}
.hr-profile-form {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}
.hr-profile-section {
  padding: 19px;
}
.hr-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.hr-profile-wide {
  grid-column: 1 / -1;
}
.hr-profile-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 4px 2px 2px;
}
.hr-profile-actions [data-kind="ready"] {
  color: var(--forest);
  font-weight: 750;
}
.hr-profile-actions [data-kind="error"] {
  color: #a33a2b;
  font-weight: 750;
}
.hr-profile-timeline {
  margin-top: 16px;
}
.hr-timeline-list {
  display: grid;
  gap: 0;
  margin-top: 12px;
}
.hr-timeline-item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  position: relative;
  padding: 0 0 18px;
}
.hr-timeline-item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: -2px;
  left: 6px;
  width: 2px;
  background: var(--line);
}
.hr-timeline-marker {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--forest);
  box-shadow: 0 0 0 4px var(--white);
}
.hr-timeline-copy strong,
.hr-timeline-copy small {
  display: block;
}
.hr-timeline-copy strong {
  color: var(--deep-forest);
}
.hr-timeline-copy small {
  margin-top: 2px;
  color: var(--muted);
  font-size: .77rem;
}
.hr-timeline-copy p {
  margin: 5px 0 0;
  color: var(--muted);
  line-height: 1.45;
}
html.dark-mode .hr-person-status.status-active {
  background: #2f3c2c;
  color: #dcefd5;
}
html.dark-mode .hr-person-status.status-onboarding {
  background: #54321e;
  color: #ffd8b7;
}
html.dark-mode .hr-person-status.status-inactive,
html.dark-mode .hr-person-status.status-left {
  background: #383b37;
  color: #d6d7d2;
}
html.dark-mode .hr-timeline-marker {
  box-shadow: 0 0 0 4px var(--white);
}
@media (max-width: 700px) {
  .hr-people-page .page-intro,
  .hr-profile-page .page-intro {
    align-items: stretch;
    gap: 12px;
  }
  .hr-people-page .page-intro .button {
    width: 100%;
  }
  .hr-people-toolbar {
    grid-template-columns: 1fr;
  }
  .hr-person-card {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    padding: 12px;
  }
  .hr-person-status {
    grid-column: 2;
    justify-self: start;
  }
  .hr-person-arrow {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
  .hr-profile-section {
    padding: 17px;
  }
  .hr-profile-grid {
    grid-template-columns: 1fr;
  }
  .hr-profile-wide {
    grid-column: auto;
  }
  .hr-profile-actions {
    display: grid;
  }
  .hr-profile-actions .button {
    width: 100%;
  }
}


/* Person-linked encrypted HR records and documents */
.hr-profile-records,
.hr-profile-documents {
  margin-top: 16px;
}
.hr-profile-records .panel-heading,
.hr-profile-documents .panel-heading {
  align-items: center;
  gap: 12px;
}
.hr-inline-editor {
  margin: 16px 0 10px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: var(--hub-radius-row, 14px);
  background: color-mix(in srgb, var(--sage-pale) 26%, var(--white));
}
.hr-inline-editor[hidden] {
  display: none !important;
}
.hr-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 13px;
}
.hr-secure-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}
.hr-secure-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
}
.hr-secure-item-copy {
  min-width: 0;
}
.hr-secure-item-copy strong,
.hr-secure-item-copy small {
  display: block;
}
.hr-secure-item-copy strong {
  color: var(--deep-forest);
  overflow-wrap: anywhere;
}
.hr-secure-item-copy small {
  margin-top: 2px;
  color: var(--muted);
  font-size: .76rem;
}
.hr-secure-item-copy p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.hr-profile-records [data-kind="ready"],
.hr-profile-documents [data-kind="ready"] {
  color: var(--forest);
  font-weight: 750;
}
.hr-profile-records [data-kind="error"],
.hr-profile-documents [data-kind="error"] {
  color: #a33a2b;
  font-weight: 750;
}
html.dark-mode .hr-inline-editor {
  background: #293127;
}
@media (max-width: 700px) {
  .hr-profile-records .panel-heading,
  .hr-profile-documents .panel-heading {
    align-items: stretch;
  }
  .hr-profile-records .panel-heading .button,
  .hr-profile-documents .panel-heading .button {
    width: 100%;
  }
  .hr-inline-actions {
    display: grid;
  }
  .hr-inline-actions .button {
    width: 100%;
  }
  .hr-secure-item {
    grid-template-columns: 1fr;
  }
  .hr-secure-item > .button {
    width: 100%;
  }
}


/* Read-first HR personnel file */
.hr-personnel-file {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}
.hr-personnel-file[hidden],
.hr-profile-form[hidden] {
  display: none !important;
}
.hr-personnel-cover {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 20px;
}
.hr-personnel-identity {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
}
.hr-personnel-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: var(--forest);
  color: #fff;
  font-size: 1.18rem;
  font-weight: 900;
  letter-spacing: -.03em;
}
.hr-personnel-identity h2 {
  margin: 2px 0 3px;
  color: var(--deep-forest);
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  overflow-wrap: anywhere;
}
.hr-personnel-identity p {
  margin: 0;
  color: var(--muted);
}
.hr-personnel-cover-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.hr-personnel-status {
  display: inline-flex;
  align-items: center;
  min-height: 31px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 850;
  white-space: nowrap;
}
.hr-personnel-status.status-onboarding {
  background: var(--peach);
  color: #a95018;
}
.hr-personnel-status.status-active {
  background: #dcebc8;
  color: var(--forest);
}
.hr-personnel-status.status-inactive,
.hr-personnel-status.status-left {
  background: #ecece7;
  color: #62675f;
}
.hr-personnel-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.hr-personnel-stat {
  padding: 14px 15px;
}
.hr-personnel-stat span,
.hr-personnel-stat strong {
  display: block;
}
.hr-personnel-stat span {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .045em;
}
.hr-personnel-stat strong {
  margin-top: 4px;
  color: var(--deep-forest);
  font-size: 1rem;
  overflow-wrap: anywhere;
}
.hr-personnel-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.hr-personnel-summary {
  padding: 18px;
}
.hr-personnel-summary .panel-heading {
  margin-bottom: 12px;
}
.hr-personnel-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  margin: 0;
}
.hr-personnel-details > div {
  min-width: 0;
}
.hr-personnel-details dt {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .035em;
}
.hr-personnel-details dd {
  margin: 3px 0 0;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.hr-personnel-detail-wide {
  grid-column: 1 / -1;
}
.hr-personnel-notes {
  grid-column: 1 / -1;
}
.hr-personnel-notes > p {
  margin: 0;
  color: var(--ink);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
html.dark-mode .hr-personnel-status.status-active {
  background: #2f3c2c;
  color: #dcefd5;
}
html.dark-mode .hr-personnel-status.status-onboarding {
  background: #54321e;
  color: #ffd8b7;
}
html.dark-mode .hr-personnel-status.status-inactive,
html.dark-mode .hr-personnel-status.status-left {
  background: #383b37;
  color: #d6d7d2;
}
@media (max-width: 760px) {
  .hr-personnel-cover {
    display: grid;
    align-items: start;
  }
  .hr-personnel-cover-actions {
    justify-content: stretch;
  }
  .hr-personnel-cover-actions .button {
    width: 100%;
  }
  .hr-personnel-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hr-personnel-summary-grid {
    grid-template-columns: 1fr;
  }
  .hr-personnel-notes {
    grid-column: auto;
  }
}
@media (max-width: 430px) {
  .hr-personnel-cover {
    padding: 16px;
  }
  .hr-personnel-avatar {
    width: 54px;
    height: 54px;
    border-radius: 17px;
  }
  .hr-personnel-stats {
    grid-template-columns: 1fr 1fr;
  }
  .hr-personnel-details {
    grid-template-columns: 1fr;
  }
  .hr-personnel-detail-wide {
    grid-column: auto;
  }
}


/* Guided encrypted HR onboarding */
.hr-onboarding-card {
  margin-top: 2px;
  padding: 18px;
}
.hr-onboarding-heading {
  align-items: center;
  gap: 12px;
}
.hr-onboarding-heading .status[data-state="complete"],
.hr-onboarding-heading .status[data-state="ready"] {
  background: color-mix(in srgb, var(--sage-pale) 82%, var(--white));
  color: var(--forest);
}
.hr-onboarding-heading .status[data-state="progress"] {
  background: var(--peach);
  color: #9b4c17;
}
.hr-onboarding-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.hr-onboarding-summary-grid > div {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--sage-pale) 18%, var(--white));
}
.hr-onboarding-summary-grid span,
.hr-onboarding-summary-grid strong {
  display: block;
}
.hr-onboarding-summary-grid span {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.hr-onboarding-summary-grid strong {
  margin-top: 3px;
  color: var(--deep-forest);
  font-size: .88rem;
  overflow-wrap: anywhere;
}
.hr-onboarding-progress {
  height: 8px;
  margin: 13px 0 6px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 82%, var(--white));
}
.hr-onboarding-progress > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--forest);
  transition: width .25s ease;
}
.hr-onboarding-progress-copy {
  margin: 0;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 720;
}
.hr-onboarding-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 13px;
}
.hr-onboarding-card [data-kind="ready"] {
  color: var(--forest);
  font-weight: 750;
}
.hr-onboarding-card [data-kind="error"] {
  color: #a33a2b;
  font-weight: 750;
}

.hr-onboarding-dialog {
  width: min(620px, calc(100vw - 32px));
  max-height: min(720px, calc(100vh - 32px));
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border-radius: var(--hub-radius-dialog, 22px);
  background: var(--white);
  box-shadow: 0 24px 70px rgba(17, 23, 16, .28);
}
.hr-onboarding-dialog-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding: 18px 18px 10px;
}
.hr-onboarding-dialog-head h2 {
  margin: 2px 0 0;
}
.hr-onboarding-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  padding: 0 18px 10px;
}
.hr-onboarding-dots span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--line);
  transition: width .2s ease, background .2s ease;
}
.hr-onboarding-dots span.is-active {
  width: 24px;
  background: var(--forest);
}
.hr-onboarding-dots span.is-complete {
  background: color-mix(in srgb, var(--forest) 55%, var(--line));
}
.hr-onboarding-carousel {
  min-height: 0;
  overflow: auto;
  padding: 4px 18px 8px;
}
.hr-onboarding-slide {
  display: grid;
  gap: 14px;
  animation: hr-onboarding-slide-in .18s ease;
}
.hr-onboarding-slide[hidden] {
  display: none !important;
}
.hr-onboarding-slide h3 {
  margin: 0;
  color: var(--deep-forest);
  font-size: 1.25rem;
}
.hr-onboarding-step-count {
  justify-self: start;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--sage-pale);
  color: var(--forest);
  font-size: .75rem;
  font-weight: 850;
}
.hr-onboarding-question {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.hr-onboarding-question p {
  margin: 0;
  font-weight: 750;
  line-height: 1.4;
}
.hr-onboarding-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.hr-onboarding-choices label {
  position: relative;
  cursor: pointer;
}
.hr-onboarding-choices input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.hr-onboarding-choices span {
  display: grid;
  place-items: center;
  min-height: 44px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  font-weight: 800;
  text-align: center;
}
.hr-onboarding-choices input:checked + span {
  border-color: var(--forest);
  background: color-mix(in srgb, var(--sage-pale) 72%, var(--white));
  color: var(--forest);
  box-shadow: 0 0 0 1px var(--forest);
}
.hr-onboarding-choices input:focus-visible + span {
  outline: 3px solid color-mix(in srgb, var(--forest) 28%, transparent);
  outline-offset: 2px;
}
.hr-onboarding-review {
  display: grid;
  gap: 8px;
}
.hr-onboarding-review-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--hub-radius-row, 14px);
}
.hr-onboarding-review-row strong,
.hr-onboarding-review-row small {
  display: block;
}
.hr-onboarding-review-row small {
  margin-top: 2px;
  color: var(--muted);
  line-height: 1.35;
}
.hr-onboarding-review-row > span {
  color: #9b4c17;
  font-size: .75rem;
  font-weight: 850;
  white-space: nowrap;
}
.hr-onboarding-review-row.is-complete > span {
  color: var(--forest);
}
.hr-onboarding-wizard-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px 18px;
  border-top: 1px solid var(--line);
}
html.dark-mode .hr-onboarding-summary-grid > div,
html.dark-mode .hr-onboarding-dialog,
html.dark-mode .hr-onboarding-choices span,
html.dark-mode .hr-onboarding-question,
html.dark-mode .hr-onboarding-review-row {
  background: #242b23;
}
html.dark-mode .hr-onboarding-choices input:checked + span {
  background: #2d3b2b;
  color: #dcefd5;
}
@keyframes hr-onboarding-slide-in {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}
@media (max-width: 700px) {
  .hr-onboarding-summary-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .hr-onboarding-dialog {
    position: absolute !important;
    top: max(8px, env(safe-area-inset-top));
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    left: 8px;
    width: auto !important;
    max-height: none;
    border-radius: 18px !important;
  }
  .hr-onboarding-carousel {
    padding-inline: 14px;
  }
  .hr-onboarding-dialog-head {
    padding: 16px 14px 9px;
  }
  .hr-onboarding-wizard-actions {
    padding: 11px 14px 14px;
  }
}
@media (max-width: 520px) {
  .hr-onboarding-summary-grid {
    gap: 6px;
  }
  .hr-onboarding-summary-grid > div {
    padding: 8px;
  }
  .hr-onboarding-summary-grid strong {
    font-size: .8rem;
  }
  .hr-onboarding-choices {
    grid-template-columns: 1fr;
  }
  .hr-onboarding-wizard-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .hr-onboarding-wizard-actions .button {
    width: 100%;
  }
}


/* Privacy-first personnel file */
.hr-personnel-photo-wrap {
  position: relative;
  flex: 0 0 auto;
}
.hr-personnel-photo {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--forest) 26%, var(--line));
  border-radius: 50%;
  background: color-mix(in srgb, var(--sage-pale) 62%, var(--white));
  color: var(--forest);
  cursor: pointer;
}
.hr-personnel-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hr-personnel-photo-placeholder {
  font-size: .92rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.hr-personnel-photo-edit {
  position: absolute;
  right: 5px;
  bottom: 5px;
  left: 5px;
  padding: 3px 5px;
  border-radius: 7px;
  background: rgba(18, 28, 18, .76);
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
}
.hr-personnel-photo:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--forest) 32%, transparent);
  outline-offset: 2px;
}
.hr-personnel-photo-status {
  position: absolute;
  right: 6px;
  bottom: 6px;
  left: 6px;
  z-index: 3;
  padding: 4px 5px;
  border-radius: 999px;
  background: rgba(22, 43, 28, .88);
  color: #fff;
  font-size: .75rem;
  font-weight: 850;
  line-height: 1.1;
  text-align: center;
  pointer-events: none;
}
.hr-personnel-photo-status[data-state="error"] {
  background: rgba(168, 60, 50, .94);
}
.hr-personnel-photo.is-busy img,
.hr-personnel-photo.is-busy .hr-personnel-photo-placeholder {
  opacity: .58;
}
.hr-personnel-photo.is-busy::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255, 255, 255, .55);
  border-top-color: #fff;
  border-radius: 50%;
  animation: hr-photo-spin .7s linear infinite;
  pointer-events: none;
}
@keyframes hr-photo-spin {
  to { transform: rotate(360deg); }
}

.hr-personnel-accordions {
  display: grid;
  gap: 8px;
}
.hr-personnel-accordion {
  overflow: hidden;
  padding: 0;
}
.hr-personnel-accordion > summary {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  height: 58px;
  min-height: 58px;
  padding: 8px 16px;
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.hr-personnel-accordion:not([open]) {
  height: 58px;
  min-height: 58px;
  max-height: 58px;
}
.hr-personnel-accordion > summary::-webkit-details-marker {
  display: none;
}
.hr-personnel-accordion > summary > span:first-child {
  min-width: 0;
}
.hr-personnel-accordion > summary .eyebrow,
.hr-personnel-accordion > summary strong {
  display: block;
}
.hr-personnel-accordion > summary strong {
  margin-top: 2px;
  color: var(--deep-forest);
  font-size: 1rem;
}
.hr-accordion-chevron {
  color: var(--forest);
  font-size: 1.55rem;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform .18s ease;
}
.hr-personnel-accordion[open] .hr-accordion-chevron {
  transform: rotate(90deg);
}
.hr-personnel-accordion-body {
  padding: 2px 16px 16px;
  border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}
.hr-accordion-summary-status,
.hr-accordion-summary-count {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 800;
  white-space: nowrap;
}
.hr-accordion-summary-status[data-state="complete"],
.hr-accordion-summary-status[data-state="ready"] {
  color: var(--forest);
}
.hr-accordion-summary-status[data-state="progress"] {
  color: #9b4c17;
}
.hr-personnel-accordion .hr-personnel-notes {
  grid-column: auto;
}
.hr-personnel-accordion .hr-personnel-notes p {
  margin: 0;
  line-height: 1.55;
  white-space: pre-wrap;
}
.hr-personnel-accordion .hr-profile-records,
.hr-personnel-accordion .hr-profile-documents {
  margin-top: 14px;
}
.hr-personnel-accordion .hr-profile-documents {
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.hr-secure-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.hr-secure-toolbar p {
  margin: 0;
}
.hr-onboarding-compact {
  display: grid;
  gap: 0;
}

.hr-add-item-dialog {
  width: min(520px, calc(100vw - 32px));
  padding: 18px;
  border-radius: var(--hub-radius-dialog, 22px);
  background: var(--white);
  box-shadow: 0 24px 70px rgba(17, 23, 16, .28);
}
.hr-add-item-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.hr-add-item-head h2 {
  margin: 2px 0 0;
}
.hr-add-item-choices {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.hr-add-item-choice {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.hr-add-item-choice strong {
  color: var(--deep-forest);
  font-size: 1rem;
}
.hr-add-item-choice span {
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.4;
}
.hr-add-item-choice:hover,
.hr-add-item-choice:focus-visible {
  border-color: color-mix(in srgb, var(--forest) 42%, var(--line));
  background: color-mix(in srgb, var(--sage-pale) 28%, var(--white));
  outline: none;
}
html.dark-mode .hr-personnel-photo,
html.dark-mode .hr-add-item-dialog,
html.dark-mode .hr-add-item-choice {
  background: #242b23;
}
@media (max-width: 700px) {
  .hr-personnel-photo {
    width: 68px;
    height: 68px;
    border-radius: 18px;
  }
  .hr-personnel-accordion > summary {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .hr-accordion-summary-status,
  .hr-accordion-summary-count {
    grid-column: 1;
    margin-top: -3px;
  }
  .hr-accordion-chevron {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .hr-secure-toolbar {
    display: grid;
  }
  .hr-secure-toolbar .button {
    width: 100%;
  }
  .hr-add-item-dialog {
    position: absolute !important;
    top: max(8px, env(safe-area-inset-top));
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    left: 8px;
    width: auto !important;
    overflow: auto;
  }
}


/* Personnel account & access */
.hr-account-access-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.hr-account-access-grid > div {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--sage-pale) 18%, var(--white));
}
.hr-account-access-grid span,
.hr-account-access-grid strong {
  display: block;
}
.hr-account-access-grid span {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.hr-account-access-grid strong {
  margin-top: 3px;
  color: var(--deep-forest);
  overflow-wrap: anywhere;
}
.hr-account-editor {
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.hr-account-subsection {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.hr-account-subsection > summary {
  cursor: pointer;
  color: var(--deep-forest);
  font-weight: 850;
}
.hr-account-subsection .stack {
  margin-top: 12px;
}
.hr-account-danger {
  margin-top: 14px;
  padding: 13px;
  border: 1px solid color-mix(in srgb, #a33a2b 24%, var(--line));
  border-radius: var(--hub-radius-row, 14px);
  background: color-mix(in srgb, #a33a2b 4%, var(--white));
}
.hr-account-danger h3 {
  margin: 0 0 4px;
  font-size: .95rem;
}
.hr-account-danger p {
  margin: 0 0 10px;
}
.hr-account-limit {
  margin-top: 14px;
}
.hr-accordion-summary-status.is-active {
  color: var(--forest);
}
.hr-accordion-summary-status.is-disabled {
  color: #a33a2b;
}
html.dark-mode .hr-account-access-grid > div,
html.dark-mode .hr-account-danger {
  background: #242b23;
}
@media (max-width: 520px) {
  .hr-account-access-grid {
    grid-template-columns: 1fr 1fr;
  }
}


/* Guided HR offboarding */
.hr-offboarding-entry,
.hr-former-person-note {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  margin-top: 14px;
  padding: 12px;
  border-top: 1px solid var(--line);
}
.hr-offboarding-entry strong,
.hr-former-person-note strong {
  color: var(--deep-forest);
}
.hr-offboarding-entry p,
.hr-former-person-note p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.4;
}
.hr-offboarding-entry.is-blocked {
  opacity: .78;
}
.hr-former-person-note {
  border: 1px solid color-mix(in srgb, var(--forest) 22%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--sage-pale) 24%, var(--white));
}
.hr-offboarding-dialog {
  width: min(610px, calc(100vw - 32px));
  max-height: min(720px, calc(100vh - 32px));
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  overflow: hidden;
  border-radius: var(--hub-radius-dialog, 22px);
  background: var(--white);
  box-shadow: 0 24px 70px rgba(17, 23, 16, .28);
}
.hr-offboarding-dialog-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding: 18px 18px 10px;
}
.hr-offboarding-dialog-head h2 { margin: 2px 0 0; }
.hr-offboarding-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  padding: 0 18px 10px;
}
.hr-offboarding-dots span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--line);
  transition: width .2s ease, background .2s ease;
}
.hr-offboarding-dots span.is-active { width: 24px; background: var(--forest); }
.hr-offboarding-dots span.is-complete { background: color-mix(in srgb, var(--forest) 55%, var(--line)); }
.hr-offboarding-carousel {
  min-height: 0;
  overflow: auto;
  padding: 4px 18px 10px;
}
.hr-offboarding-slide {
  display: grid;
  gap: 13px;
  animation: hr-onboarding-slide-in .18s ease;
}
.hr-offboarding-slide[hidden] { display: none !important; }
.hr-offboarding-slide h3 {
  margin: 0;
  color: var(--deep-forest);
  font-size: 1.2rem;
}
.hr-offboarding-review {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--sage-pale) 18%, var(--white));
}
.hr-offboarding-review p { margin: 0 0 10px; }
.hr-offboarding-review p strong,
.hr-offboarding-review p span { display: block; }
.hr-offboarding-review p span { margin-top: 3px; color: var(--muted); }
.hr-offboarding-review ul { margin: 0; padding-left: 20px; }
.hr-offboarding-review li + li { margin-top: 6px; }
.hr-offboarding-confirm {
  display: flex !important;
  grid-template-columns: auto 1fr;
  gap: 9px !important;
  align-items: flex-start;
  padding: 11px;
  border: 1px solid color-mix(in srgb, #a33a2b 24%, var(--line));
  border-radius: 12px;
}
.hr-offboarding-confirm input { margin-top: 3px; }
.hr-offboarding-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px 18px;
  border-top: 1px solid var(--line);
}
.hr-offboarding-dialog [data-kind="ready"] {
  color: var(--forest);
  font-weight: 750;
  padding: 0 18px;
}
.hr-offboarding-dialog [data-kind="error"] {
  color: #a33a2b;
  font-weight: 750;
  padding: 0 18px;
}
html.dark-mode .hr-offboarding-dialog,
html.dark-mode .hr-offboarding-review,
html.dark-mode .hr-former-person-note { background: #242b23; }
@media (max-width: 700px) {
  .hr-offboarding-entry,
  .hr-former-person-note { display: grid; }
  .hr-offboarding-entry .button { width: 100%; }
  .hr-offboarding-dialog {
    position: absolute !important;
    top: max(8px, env(safe-area-inset-top));
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    left: 8px;
    width: auto !important;
    max-height: none;
    border-radius: 18px !important;
  }
}
@media (max-width: 520px) {
  .hr-offboarding-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .hr-offboarding-actions .button { width: 100%; }
}


/* Demo HR security notice */
.demo-hr-security-overlay {
  z-index: 175;
  backdrop-filter: blur(3px);
}
.demo-hr-security-overlay[hidden] { display: none !important; }
.demo-hr-security-dialog {
  box-sizing: border-box;
  width: min(520px, 100%);
  height: min(600px, calc(100vh - 36px));
  height: min(600px, calc(100dvh - 36px));
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--hub-radius-dialog, 22px);
  background: var(--white);
  box-shadow: 0 24px 70px rgba(20, 24, 22, .32);
}
.demo-hr-security-header { padding: 24px 22px 0; }
.demo-hr-security-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 22px;
}
.demo-hr-security-actions {
  padding: 16px 22px max(16px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}
.demo-hr-security-dialog h2 { margin: 4px 0 12px; }
.demo-hr-security-body > p { color: var(--muted); }
.demo-hr-security-live {
  margin: 18px 0;
  padding: 15px 16px;
  border: 1px solid color-mix(in srgb, var(--forest) 24%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--sage-pale) 58%, var(--white));
}
.demo-hr-security-live strong { display: block; margin-bottom: 5px; color: var(--deep-forest); }
.demo-hr-security-live p { margin: 0; color: var(--muted); }
.demo-hr-security-dialog .button { width: 100%; }
html.dark-mode .demo-hr-security-dialog { background: #20261f; border-color: #46503f; }
html.dark-mode .demo-hr-security-live { background: #293127; border-color: #46503f; }

/* HR dashboard */
.hr-dashboard {
  display: grid;
  gap: 8px;
}
.hr-dashboard-heading {
  margin-bottom: 0;
  align-items: flex-end;
}
.hr-dashboard-heading-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}
.hr-dashboard-vault-state {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 800;
  white-space: nowrap;
}
.hr-dashboard-vault-state[data-state="ready"] {
  color: var(--forest);
}

.hr-dashboard-overview {
  display: grid;
  grid-template-columns: .7fr .7fr 1.6fr;
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.hr-dashboard-overview > div {
  min-width: 0;
  padding: 12px 14px;
}
.hr-dashboard-overview > div + div {
  border-left: 1px solid var(--line);
}
.hr-dashboard-overview span {
  display: block;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.hr-dashboard-overview-stat strong {
  display: block;
  margin-top: 3px;
  color: var(--deep-forest);
  font-size: 1.7rem;
  line-height: 1;
}
.hr-dashboard-overview-training {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hr-dashboard-overview-training > div:last-child {
  min-width: 0;
}
.hr-dashboard-overview-training > div:last-child > strong {
  display: block;
  margin-top: 2px;
  color: var(--deep-forest);
  font-size: .86rem;
}
.hr-dashboard-overview-training small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: .75rem;
}
.hr-dashboard-training-ring {
  position: relative;
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
}
.hr-dashboard-training-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.hr-dashboard-training-ring circle {
  fill: none;
  stroke: color-mix(in srgb, var(--line) 78%, var(--white));
  stroke-width: 9;
}
.hr-dashboard-training-ring circle.value {
  stroke: var(--forest);
  stroke-linecap: round;
  stroke-dasharray: 0 100;
  transition: stroke-dasharray .3s ease;
}
.hr-dashboard-training-ring > strong {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--deep-forest);
  font-size: .78rem;
}

.hr-dashboard-people-card,
.hr-dashboard-actions-card {
  padding: 14px;
}
.hr-dashboard-card-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}
.hr-dashboard-card-heading h2 {
  margin: 2px 0 0;
}
.hr-dashboard-carousel-actions {
  display: flex;
  gap: 5px;
}
.hr-dashboard-people-nav {
  min-width: 44px;
  min-height: 44px;
  display: inline-grid;
  place-items: center;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 1.25rem;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
}
.hr-dashboard-people-nav:hover:not(:disabled),
.hr-dashboard-people-nav:focus-visible:not(:disabled) {
  border-color: var(--orange);
  outline: none;
}
.hr-dashboard-people-nav:disabled {
  cursor: default;
  opacity: .34;
}
.hr-dashboard-people-nav-icon {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
  opacity: .72;
  pointer-events: none;
}
.hr-dashboard-people-nav-icon.is-previous {
  transform: scaleX(-1);
}
.hr-dashboard-people-viewport {
  overflow: hidden;
}
.hr-dashboard-people-track {
  min-height: 284px;
}
.hr-dashboard-people-page {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(8, 32px);
  gap: 4px 8px;
}
.hr-dashboard-person {
  height: 32px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--sage-pale) 10%, var(--white));
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
}
.hr-dashboard-person strong {
  min-width: 0;
  overflow: hidden;
  color: var(--deep-forest);
  font-size: .82rem;
  font-weight: 850;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hr-dashboard-person small {
  flex: 0 0 auto;
  color: var(--forest);
  font-size: .75rem;
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .02em;
  white-space: nowrap;
}
.hr-dashboard-archive-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--ink);
  text-decoration: none;
}

.hr-dashboard-legacy-card {
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  color: var(--ink);
  text-decoration: none;
}
.hr-dashboard-legacy-card h2 {
  margin: 2px 0 4px;
}
.hr-dashboard-legacy-card p {
  margin: 0;
}
.hr-dashboard-legacy-card > strong {
  min-width: 38px;
  display: grid;
  place-items: center;
  padding: 7px 9px;
  border-radius: 999px;
  background: var(--peach);
  color: #9b4c17;
  font-size: .82rem;
  font-weight: 900;
}
.hr-dashboard-legacy-card:hover,
.hr-dashboard-legacy-card:focus-visible {
  border-color: color-mix(in srgb, var(--orange) 48%, var(--line));
  outline: none;
}

.hr-legacy-accounts,
.hr-legacy-account-detail {
  display: grid;
  gap: 8px;
}
.hr-legacy-account-count {
  min-width: 42px;
  display: grid;
  place-items: center;
  padding: 8px 10px;
  border-radius: 999px;
  background: var(--peach);
  color: #9b4c17;
  font-weight: 900;
}
.hr-legacy-account-list {
  padding: 8px;
}
.hr-legacy-account-row {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--ink);
  text-decoration: none;
}
.hr-legacy-account-row + .hr-legacy-account-row {
  border-top: 1px solid var(--line);
  border-radius: 0;
}
.hr-legacy-account-row:hover,
.hr-legacy-account-row:focus-visible {
  background: color-mix(in srgb, var(--sage-pale) 36%, transparent);
  outline: none;
}
.hr-legacy-account-copy {
  min-width: 0;
}
.hr-legacy-account-copy strong,
.hr-legacy-account-copy small {
  display: block;
}
.hr-legacy-account-copy strong {
  color: var(--deep-forest);
}
.hr-legacy-account-copy small {
  margin-top: 3px;
  color: var(--muted);
  font-size: .78rem;
}
.hr-legacy-account-arrow {
  color: var(--forest);
  font-size: 1.55rem;
  line-height: 1;
}
.hr-legacy-empty {
  padding: 18px 12px;
  text-align: center;
}
.hr-legacy-empty p {
  margin: 4px 0 0;
}
.hr-legacy-note {
  margin: 2px 4px 0;
  font-size: .78rem;
}
.hr-legacy-account-summary {
  padding: 16px;
}
.hr-legacy-account-summary dl {
  display: grid;
  gap: 0;
  margin: 0;
}
.hr-legacy-account-summary dl > div {
  display: grid;
  grid-template-columns: minmax(130px, .7fr) minmax(0, 1.3fr);
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.hr-legacy-account-summary dl > div:last-child {
  border-bottom: 0;
}
.hr-legacy-account-summary dt {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
}
.hr-legacy-account-summary dd {
  margin: 0;
  color: var(--deep-forest);
  font-weight: 750;
  overflow-wrap: anywhere;
}
.hr-legacy-account-danger {
  padding: 18px;
  border-color: color-mix(in srgb, #c95e22 38%, var(--line));
}
.hr-legacy-account-danger h2 {
  margin: 3px 0 6px;
}
.hr-legacy-account-danger p {
  margin: 0 0 14px;
  color: var(--muted);
}
.hr-legacy-remove-form {
  margin: 0;
}
@media (max-width: 600px) {
  .hr-dashboard-legacy-card {
    min-height: 84px;
    padding: 12px 14px !important;
  }
  .hr-legacy-account-summary dl > div {
    grid-template-columns: 1fr;
    gap: 3px;
  }
  .hr-legacy-account-row {
    min-height: 54px;
    padding: 9px 10px;
  }
}
.hr-dashboard-archive-card h2 {
  margin: 2px 0 4px;
}
.hr-dashboard-archive-card p {
  margin: 0;
}
.hr-dashboard-archive-card:hover,
.hr-dashboard-archive-card:focus-visible {
  border-color: color-mix(in srgb, var(--forest) 36%, var(--line));
  outline: none;
}
.hr-dashboard-archive-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  color: var(--forest);
}
.hr-dashboard-archive-meta strong {
  font-size: .78rem;
  font-weight: 850;
  white-space: nowrap;
}
.hr-dashboard-archive-arrow {
  font-size: 1.7rem;
  line-height: 1;
}
html.dark-mode .hr-dashboard-people-nav-icon {
  filter: invert(1);
  opacity: .86;
}

.hr-dashboard-action-count {
  min-width: 28px;
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--peach);
  color: #9b4c17;
  font-size: .75rem;
  font-weight: 900;
  text-align: center;
}
.hr-dashboard-actions {
  display: grid;
  gap: 6px;
}
.hr-dashboard-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--hub-radius-control, 10px);
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
}
.hr-dashboard-action strong,
.hr-dashboard-action span {
  display: block;
}
.hr-dashboard-action strong {
  color: var(--deep-forest);
}
.hr-dashboard-action span {
  margin-top: 2px;
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.3;
}
.hr-dashboard-action > small {
  color: #9b4c17;
  font-size: .75rem;
  font-weight: 850;
  white-space: nowrap;
}
.hr-dashboard-action.is-ready > small {
  color: var(--forest);
}
.hr-dashboard-all-clear {
  display: grid;
  place-items: center;
  min-height: 64px;
  padding: 10px;
  border: 1px dashed color-mix(in srgb, var(--forest) 30%, var(--line));
  border-radius: var(--hub-radius-control, 10px);
  color: var(--forest);
  text-align: center;
}
.hr-dashboard-all-clear strong {
  display: block;
}

html.dark-mode .hr-dashboard-overview,
html.dark-mode .hr-dashboard-person,
html.dark-mode .hr-dashboard-action {
  background: #242b23;
}
@media (max-width: 600px) {
  .hr-dashboard-heading {
    display: grid;
    gap: 10px;
  }
  .hr-dashboard-heading-actions {
    justify-content: space-between;
  }
  .hr-dashboard-overview {
    grid-template-columns: .7fr .7fr 1.6fr;
  }
  .hr-dashboard-overview > div {
    padding: 10px;
  }
  .hr-dashboard-training-ring {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
  }
  .hr-dashboard-archive-card {
    align-items: center;
  }
}
@media (max-width: 520px) {
  .hr-dashboard-people-page {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(8, 32px);
    gap: 4px 6px;
  }
  .hr-dashboard-person {
    padding-inline: 7px;
  }
  .hr-dashboard-person strong {
    font-size: .78rem;
  }
  .hr-dashboard-person small {
    font-size: .75rem;
  }
  .hr-dashboard-overview-training {
    gap: 7px;
  }
}



/* HR usability reset */
.hr-personnel-loading {
  display: grid;
  gap: 4px;
  padding: 16px;
}
.hr-personnel-loading strong {
  color: var(--deep-forest);
}
.hr-personnel-loading span {
  color: var(--muted);
  font-size: .8rem;
}
.hr-personnel-cover {
  min-height: 84px;
  padding: 10px 12px;
}
.hr-personnel-identity {
  width: 100%;
  gap: 11px;
}
.hr-personnel-photo {
  width: 54px;
  height: 54px;
  border-radius: 14px;
}
.hr-personnel-photo-edit {
  right: 3px;
  bottom: 3px;
  left: 3px;
  font-size: .75rem;
}
.hr-personnel-identity-copy {
  min-width: 0;
}
.hr-personnel-identity-copy h2 {
  margin: 0 0 3px;
  font-size: 1.25rem;
}
.hr-personnel-identity-copy p {
  margin: 0 0 5px;
  overflow: hidden;
  color: var(--muted);
  font-size: .78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hr-personnel-status {
  min-height: 23px;
  padding: 3px 8px;
  font-size: .75rem;
}

.hr-personnel-stats {
  display: none !important;
}
.hr-personnel-accordions {
  gap: 6px;
}
.hr-personnel-accordion {
  border-radius: var(--hub-radius-row, 14px);
}
.hr-personnel-accordion > summary,
.hr-personnel-accordion:not([open]) {
  box-sizing: border-box;
  height: 58px;
  min-height: 58px;
  max-height: 58px;
}
.hr-personnel-accordion > summary {
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 9px;
  padding: 0 14px;
}
.hr-personnel-accordion > summary > strong {
  min-width: 0;
  overflow: hidden;
  color: var(--deep-forest);
  font-size: .96rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hr-personnel-accordion > summary .hr-accordion-summary-status,
.hr-personnel-accordion > summary .hr-accordion-summary-count {
  grid-column: auto;
  margin: 0;
  color: var(--muted);
  font-size: .75rem;
}
.hr-personnel-accordion > summary .hr-accordion-chevron {
  grid-column: auto;
  grid-row: auto;
  font-size: 1.35rem;
}
.hr-personnel-accordion-body {
  padding: 12px 14px 14px;
}
.hr-personnel-subsection + .hr-personnel-subsection,
.hr-account-access-panel {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.hr-personnel-subsection-heading {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.hr-personnel-subsection-heading h3,
.hr-secure-toolbar h3 {
  margin: 0;
  color: var(--deep-forest);
  font-size: .9rem;
}
.hr-emergency-subsection {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.hr-personnel-details {
  gap: 10px 14px;
}
.hr-personnel-details dt {
  font-size: .75rem;
}
.hr-personnel-details dd {
  font-size: .84rem;
}
.hr-account-state {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 800;
}
.hr-account-state.is-active {
  color: var(--forest);
}
.hr-account-state.is-disabled {
  color: #a33a2b;
}
.hr-profile-section[hidden] {
  display: none !important;
}

.hr-people-heading-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.hr-compact-vault-state {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 800;
}
.hr-compact-vault-state[data-state="ready"] {
  color: var(--forest);
}

/* Dashboard people list grows from one row to eight rows instead of reserving
   eight empty rows when there are only a few people. */
.hr-dashboard-people-track {
  min-height: 0 !important;
}
.hr-dashboard-people-page {
  grid-template-rows: none !important;
  grid-auto-rows: 32px;
}
.hr-dashboard-heading {
  min-width: 0;
}
.hr-dashboard-heading > div,
.hr-dashboard-heading-actions {
  min-width: 0;
}
.hr-dashboard-heading-actions {
  flex-wrap: wrap;
}
.hr-dashboard-heading-actions .button {
  width: auto;
  max-width: 100%;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .hr-personnel-cover {
    display: block;
  }
  .hr-personnel-accordion > summary {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }
  .hr-personnel-details {
    grid-template-columns: 1fr 1fr;
  }
  .hr-people-heading,
  .hr-dashboard-heading {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px;
  }
  .hr-people-heading-actions,
  .hr-dashboard-heading-actions {
    width: 100%;
    justify-content: space-between;
  }
  .hr-people-heading-actions .button,
  .hr-dashboard-heading-actions .button {
    flex: 0 0 auto;
    padding: 8px 11px;
    font-size: .78rem;
  }
}
@media (max-width: 430px) {
  .hr-personnel-photo {
    width: 50px;
    height: 50px;
  }
  .hr-personnel-accordion > summary {
    padding-inline: 12px;
  }
  .hr-personnel-accordion > summary .hr-accordion-summary-status,
  .hr-personnel-accordion > summary .hr-accordion-summary-count {
    max-width: 108px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}


/* HR dashboard five-part training completion */
.hr-dashboard-training-summary {
  padding: 12px 14px 14px;
}
.hr-dashboard-training-summary-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 10px;
}
.hr-dashboard-training-summary-heading > strong {
  color: var(--deep-forest);
  font-size: .9rem;
}
.hr-dashboard-training-progress-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.hr-dashboard-training-progress-item {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 5px;
  text-align: center;
}
.hr-dashboard-training-progress-item .hr-dashboard-training-ring {
  width: 52px;
  height: 52px;
  flex-basis: 52px;
}
.hr-dashboard-training-progress-item > span {
  min-width: 0;
  color: var(--deep-forest);
  font-size: .75rem;
  font-weight: 800;
  line-height: 1.15;
}
.hr-dashboard-training-progress-item .hr-dashboard-training-ring > strong {
  font-size: .75rem;
}
@media (max-width: 430px) {
  .hr-dashboard-training-summary {
    padding-inline: 10px;
  }
  .hr-dashboard-training-progress-grid {
    gap: 3px;
  }
  .hr-dashboard-training-progress-item .hr-dashboard-training-ring {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }
  .hr-dashboard-training-progress-item > span {
    font-size: .75rem;
  }
  .hr-dashboard-training-progress-item .hr-dashboard-training-ring > strong {
    font-size: .75rem;
  }
}


/* HR-wide encrypted workspace marker */
.hr-workspace-banner {
  box-sizing: border-box;
  width: 100%;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 6px 16px;
  background: #b42318;
  color: #fff;
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .055em;
  line-height: 1.2;
  text-transform: uppercase;
}
.hr-workspace-banner-mark {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border: 2px solid currentColor;
  border-radius: 2px;
  position: relative;
}
.hr-workspace-banner-mark::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 5px;
  height: 4px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  transform: translateX(-50%);
}
html.dark-mode .hr-workspace-banner {
  background: #c43228;
  color: #fff;
}
@media (max-width: 700px) {
  .hr-workspace-banner {
    min-height: 28px;
    padding-block: 5px;
    font-size: .75rem;
  }
}


/* Human Resources enrol card */
.hr-dashboard-heading {
  display: block !important;
}
.hr-dashboard-enrol-card {
  min-height: 108px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 14px 16px;
  color: var(--ink);
  text-decoration: none;
}
.hr-dashboard-enrol-card h2 {
  margin: 0;
  font-size: 1.25rem;
}
.hr-dashboard-enrol-card p {
  width: 100%;
  margin: 0;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.35;
}
.hr-dashboard-enrol-card:hover,
.hr-dashboard-enrol-card:focus-visible {
  border-color: color-mix(in srgb, var(--forest) 36%, var(--line));
  outline: none;
}
@media (max-width: 700px) {
  .hr-dashboard-enrol-card {
    min-height: 96px;
    padding: 12px 14px !important;
  }
  .hr-dashboard-enrol-card h2 {
    font-size: 1.15rem;
  }
  .hr-dashboard-enrol-card p {
    font-size: .82rem;
  }
}


/* HuBAI: reusable popup guidance assistant */
.hub-ai-section {
  margin-top: 0;
}

.hub-ai-launcher {
  box-sizing: border-box;
  width: 100%;
  min-height: 104px;
  display: grid;
  place-items: center;
  gap: 0;
  padding: 14px 20px;
  border: 1px solid var(--line);
  border-radius: var(--hub-radius-card, 18px);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.hub-ai-launcher:not(.is-unavailable):hover,
.hub-ai-launcher:not(.is-unavailable):focus-visible {
  border-color: color-mix(in srgb, var(--forest) 40%, var(--line));
  transform: translateY(-1px);
  outline: none;
}
.hub-ai-launcher.is-unavailable {
  cursor: default;
}
.hub-ai-launcher-copy {
  min-width: 0;
}
.hub-ai-launcher-copy h2,
.hub-ai-launcher > div h2 {
  margin: 3px 0 4px;
  color: var(--deep-forest);
  font-size: 1.18rem;
}
.hub-ai-launcher-copy p,
.hub-ai-launcher > div p {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.4;
}
.hub-ai-launcher-action {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--forest);
  font-size: .82rem;
  font-weight: 850;
}
.hub-ai-launcher-arrow {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--forest);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
}

html.hub-ai-open,
body.hub-ai-open {
  overflow: hidden;
}

.hub-ai-modal {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(27, 31, 21, .72);
}
.hub-ai-modal[hidden] {
  display: none !important;
}

.hub-ai-dialog {
  width: min(720px, 100%);
  max-height: min(86vh, 840px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--white);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .34);
}
.hub-ai-dialog:focus {
  outline: none;
}

.hub-ai-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px 15px;
  border-bottom: 1px solid var(--line);
  background: var(--white);
}
.hub-ai-modal-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}
.hub-ai-logo-popup {
  flex: 0 0 auto;
  width: 112px;
}
.hub-ai-modal-header h2 {
  margin: 0 0 2px;
  color: var(--deep-forest);
  font-size: 1.35rem;
}
.hub-ai-modal-header p {
  margin: 0;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
}
.hub-ai-close {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
}
.hub-ai-close:hover,
.hub-ai-close:focus-visible {
  background: var(--sage-pale);
  outline: none;
}
.hub-ai-close:disabled {
  opacity: .45;
  cursor: wait;
}

.hub-ai-modal-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 20px 24px;
  scroll-padding-top: 18px;
  -webkit-overflow-scrolling: touch;
}

.hub-ai-disclaimer {
  margin: 0;
  padding: 7px 20px calc(7px + env(safe-area-inset-bottom));
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  background: var(--white);
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.25;
  text-align: center;
}

.hub-ai-question-panel {
  padding: 0;
}
.hub-ai-form {
  display: grid;
  gap: 11px;
}
.hub-ai-question-label {
  display: grid;
  gap: 7px;
  color: var(--deep-forest);
  font-size: .86rem;
  font-weight: 800;
}
.hub-ai-question-label textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 96px;
  resize: vertical;
  font-size: 1rem;
  line-height: 1.45;
}
.hub-ai-form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hub-ai-form-actions .button {
  min-width: 140px;
}
.hub-ai-status {
  margin: 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.35;
}

.hub-ai-result {
  margin-top: 22px;
  padding: 20px;
  scroll-margin-top: 14px;
  border: 1px solid color-mix(in srgb, var(--forest) 20%, var(--line));
  border-radius: 18px;
  background: color-mix(in srgb, var(--sage-pale) 34%, var(--white));
}
.hub-ai-result:focus {
  outline: none;
}
.hub-ai-result-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.hub-ai-answer-copy {
  color: var(--ink);
  font-size: 1.08rem;
  font-weight: 560;
  line-height: 1.62;
}
.hub-ai-answer-copy p {
  margin: 0 0 14px;
}
.hub-ai-answer-copy p:last-child {
  margin-bottom: 0;
}
.hub-ai-answer-copy strong {
  color: var(--deep-forest);
  font-weight: 800;
}
.hub-ai-answer-copy ul,
.hub-ai-answer-copy ol {
  margin: 4px 0 14px;
  padding-left: 1.35rem;
}
.hub-ai-answer-copy ul:last-child,
.hub-ai-answer-copy ol:last-child {
  margin-bottom: 0;
}
.hub-ai-answer-copy li {
  padding-left: 2px;
}
.hub-ai-answer-copy li + li {
  margin-top: 7px;
}
.hub-ai-answer-heading {
  margin: 16px 0 7px;
  color: var(--deep-forest);
  font-size: .96rem;
  font-weight: 850;
  line-height: 1.35;
}
.hub-ai-answer-copy > .hub-ai-answer-heading:first-child {
  margin-top: 0;
}

.hub-ai-source-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--forest) 18%, var(--line));
}
.hub-ai-source-section h3 {
  margin: 0 0 9px;
  color: var(--deep-forest);
  font-size: .82rem;
}
.hub-ai-sources {
  display: grid;
  gap: 7px;
}
.hub-ai-source {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
}
.hub-ai-source:hover,
.hub-ai-source:focus-visible {
  border-color: color-mix(in srgb, var(--forest) 42%, var(--line));
  outline: none;
}
.hub-ai-source-copy {
  min-width: 0;
}
.hub-ai-source-copy small,
.hub-ai-source-copy strong {
  display: block;
}
.hub-ai-source-copy small {
  margin-bottom: 2px;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .025em;
}
.hub-ai-source-copy strong {
  overflow: hidden;
  color: var(--deep-forest);
  font-size: .82rem;
  line-height: 1.3;
  text-overflow: ellipsis;
}
.hub-ai-source-arrow {
  display: grid;
  place-items: center;
  justify-self: end;
  color: var(--forest);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
}

html.dark-mode .hub-ai-dialog,
html.dark-mode .hub-ai-modal-header,
html.dark-mode .hub-ai-launcher,
html.dark-mode .hub-ai-source {
  background: var(--white);
}
html.dark-mode .hub-ai-result {
  background: color-mix(in srgb, var(--sage-pale) 28%, var(--white));
}


@keyframes hubAiSheetUp {
  from {
    transform: translateY(100%);
    opacity: .78;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hub-ai-dialog {
    animation: none !important;
  }
}

@media (max-width: 700px) {
  .hub-ai-launcher {
    min-height: 92px;
    padding: 14px 16px;
    gap: 10px;
  }
  .hub-ai-launcher-copy h2,
  .hub-ai-launcher > div h2 {
    font-size: 1.05rem;
  }
  .hub-ai-launcher-copy p,
  .hub-ai-launcher > div p {
    font-size: .78rem;
  }
  .hub-ai-launcher-action > span:first-child {
    display: none;
  }

  .hub-ai-modal {
    inset: auto 0 auto 0;
    top: var(--hub-ai-viewport-top, 0px);
    width: 100%;
    height: var(--hub-ai-viewport-height, 100dvh);
    display: flex;
    align-items: flex-end;
    justify-content: stretch;
    padding: 0;
  }
  .hub-ai-dialog {
    position: relative;
    width: 100%;
    max-height: calc(var(--hub-ai-viewport-height, 100dvh) - max(8px, env(safe-area-inset-top)));
    border-width: 1px 1px 0;
    border-radius: 22px 22px 0 0;
    animation: hubAiSheetUp .28s cubic-bezier(.22, .72, .28, 1) both;
    transform-origin: bottom center;
  }
  .hub-ai-modal-header {
    padding: 15px 16px 13px;
  }
  .hub-ai-modal-brand {
    gap: 10px;
  }
  .hub-ai-logo-popup {
    width: 88px;
  }
  .hub-ai-modal-header h2 {
    font-size: 1.22rem;
  }
  .hub-ai-modal-scroll {
    padding: 16px 16px 28px;
  }
  .hub-ai-question-label textarea {
    min-height: 78px;
    max-height: 150px;
  }
  .hub-ai-form-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .hub-ai-form-actions .button {
    width: 100%;
    min-width: 0;
  }
  .hub-ai-result {
    margin-top: 18px;
    padding: 17px 15px;
  }
  .hub-ai-answer-copy {
    font-size: 1.03rem;
    line-height: 1.58;
  }
  .hub-ai-source {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
  }
  .hub-ai-source-arrow {
    justify-self: end;
  }
}



/* HuBAI logo treatment */
.hub-ai-launcher {
  display: grid;
  grid-template-rows: auto 1fr;
  align-items: center;
  justify-items: stretch;
  gap: 0;
  min-height: 58px;
  padding: 7px 14px 6px;
  text-align: left;
}
.hub-ai-launcher-eyebrow {
  justify-self: start;
  color: var(--forest);
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .055em;
  line-height: 1.1;
  text-transform: uppercase;
}
.hub-ai-launcher-brand {
  width: 100%;
  display: grid;
  justify-items: center;
  align-items: center;
}
.hub-ai-logo {
  display: inline-block;
  color: #000000;
  line-height: 0;
}
.hub-ai-logo svg {
  display: block;
  width: 100%;
  height: auto;
}
html.dark-mode .hub-ai-logo {
  color: #ffffff;
}
.hub-ai-logo-dashboard {
  width: min(132px, 42vw);
}
.hub-ai-launcher-help {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 800;
  line-height: 1.2;
}
.hub-ai-logo-fallback {
  font-size: 1.55rem;
  font-weight: 900;
  line-height: 1;
}
.hub-ai-logo-fallback span {
  color: #eb6c18;
}
.hub-ai-modal-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}
.hub-ai-logo-popup {
  flex: 0 0 auto;
  width: 112px;
}
@media (max-width: 700px) {
  .hub-ai-logo-dashboard {
    width: min(120px, 40vw);
  }
  .hub-ai-launcher {
    min-height: 54px;
    padding: 6px 13px 5px;
  }
  .hub-ai-launcher-eyebrow {
    font-size: .75rem;
  }
  .hub-ai-modal-brand {
    gap: 10px;
  }
  .hub-ai-logo-popup {
    width: 88px;
  }
}


/* Global 8px card and widget rhythm.
   Page/section wrappers own the spacing; individual surfaces must not add
   extra vertical margins on top of the shared gap. */
:root {
  --hub-space-1: 4px;
  --hub-space-2: 8px;
  --hub-space-3: 12px;
  --hub-space-4: 16px;
  --hub-space-5: 20px;
  --hub-space-6: 24px;
  --hub-card-gap: var(--hub-space-2);
  --hub-card-padding: 15px 18px;
  --hub-row-gap: var(--hub-space-2);
  --hub-row-padding: 10px var(--hub-space-3);
  --hub-row-min-height: 52px;
  --hub-radius-control: 10px;
  --hub-radius-row: 14px;
  --hub-radius-card: 18px;
  --hub-radius-dialog: 22px;
  --hub-control-height: 44px;
  --hub-control-padding-x: 14px;
  --hub-control-border: #ccd0bc;
  --hub-heading-page-size: clamp(1.7rem, 4vw, 2.35rem);
  --hub-heading-section-size: 1.25rem;
  --hub-heading-subsection-size: 1.05rem;
  --hub-heading-description-size: .92rem;
  --hub-surface: var(--white);
  --hub-border: var(--line);
  --surface: var(--hub-surface);
  --border: var(--hub-border);
  --card: var(--hub-surface);
  --card-shadow: var(--shadow);
}

/* Shared heading hierarchy. Page, section and subsection headings should
   keep the same eyebrow/title/description rhythm across Hub surfaces. */
.hub-heading,
.page-intro,
.panel-heading > div,
.section-heading > div {
  min-width: 0;
}
.hub-heading > .eyebrow,
.page-intro > .eyebrow,
.page-intro .eyebrow,
.panel-heading .eyebrow,
.section-heading .eyebrow {
  display: block;
  margin: 0 0 4px;
}
.hub-heading--page > h1,
.page-intro > h1,
.page-intro h1,
.section-heading.page-intro h1 {
  margin: 0 0 7px;
  font-size: var(--hub-heading-page-size);
  line-height: 1.08;
  letter-spacing: -.025em;
}
.hub-heading--section > h2,
.panel-heading h2 {
  margin: 0;
  font-size: var(--hub-heading-section-size);
  line-height: 1.15;
}
.hub-heading--subsection > h3 {
  margin: 0;
  font-size: var(--hub-heading-subsection-size);
  line-height: 1.2;
}
.hub-heading > p,
.page-intro > .lead,
.page-intro .lead,
.panel-heading p,
.section-heading p {
  margin: 0;
  color: var(--muted);
  font-size: var(--hub-heading-description-size);
  line-height: 1.4;
}

/* Shared Hub component primitives. New work should compose these patterns
   rather than introducing slightly different card and row geometry. */
.hub-card {
  min-width: 0;
  border: 1px solid var(--hub-border);
  border-radius: var(--hub-radius-card);
  background: var(--hub-surface);
  box-shadow: var(--shadow);
}
.hub-card--compact {
  padding: var(--hub-card-padding);
}
.hub-row {
  box-sizing: border-box;
  min-width: 0;
  min-height: var(--hub-row-min-height);
  gap: var(--hub-row-gap);
  padding: var(--hub-row-padding);
}
.hub-row--surface {
  border: 1px solid var(--hub-border);
  border-radius: var(--hub-radius-row);
  background: var(--hub-surface);
}
.hub-row--selectable {
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}
.hub-row--selectable:hover,
.hub-row--selectable:focus-visible {
  background: color-mix(in srgb, var(--sage-pale) 42%, var(--hub-surface));
}
.hub-row--selectable:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--forest) 38%, transparent);
  outline-offset: -3px;
}
.hub-row-copy {
  min-width: 0;
}
.hub-row-copy strong,
.hub-row-copy small {
  display: block;
}
.hub-row-copy small {
  margin-top: 2px;
  color: var(--muted);
}

:where(
  .card,
  .action-card,
  .success-card,
  .dashboard-shortcut-tile,
  .dashboard-training-progress,
  .training-progress-panel,
  .document-summary-panel,
  .settings-panel,
  .account-settings,
  .form-follow-up-card,
  .controlled-document-register,
  .record-mobile-card,
  .hr-dashboard-legacy-card,
  .hr-dashboard-archive-card
) {
  border-radius: var(--hub-radius-card);
}

.page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--hub-card-gap);
}
.page .section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--hub-card-gap) !important;
  margin: 0 !important;
}
.page .section > :where(
  .page-intro,
  .section-heading,
  .records-results-heading,
  .card,
  .action-card,
  .settings-panel,
  .form-catalogue-tools,
  .document-catalogue-tools,
  .filter-bar,
  .table-wrap,
  .document-summary-panel,
  .document-category-section,
  .training-progress-panel,
  .training-category,
  .account-settings,
  .assignment-panel,
  .record-detail-section,
  .controlled-document-register,
  .form-follow-up-card,
  .hr-profile-records,
  .hr-profile-documents,
  .hr-account-subsection,
  .hr-personnel-subsection,
  .hr-emergency-subsection
) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.page .section > .section + .section {
  margin-top: 0 !important;
}
.page-intro,
.page > .section > .page-intro,
.page > .section > .section-heading.page-intro {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.document-category-section + .document-category-section,
.training-category + .training-category {
  margin-top: 0 !important;
}
.document-search-results,
.messages-layout,
.shift-type-library,
.dashboard-widget-grid,
.card-grid,
.split-grid,
.doc-grid,
.admin-grid,
.action-grid,
.form-catalogue-list,
.document-catalogue-list,
.today-actions-list,
.today-form-list,
.my-shifts-list,
.user-admin-list,
.user-admin-grid,
.admin-shift-layout,
.training-list,
.training-admin-page,
.training-admin-document-browser,
.hr-dashboard,
.hr-personnel-file,
.settings-panel,
.app-settings-form,
.records-mobile-list {
  gap: var(--hub-card-gap) !important;
}
.document-search-results {
  gap: var(--hub-card-gap) !important;
}
.dashboard-hero,
.dashboard-messages-section,
.today-actions-section,
.my-shifts-section,
.notifications-section,
.dark-mode-section,
.settings-management-section,
.settings-password-section,
.external-training-section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
@media (max-width: 700px) {
  .page .section,
  .page-intro,
  .page > .section > .page-intro,
  .page > .section > .section-heading.page-intro {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}


/* Personnel profile dashboard redesign */
.hr-personnel-cover {
  display: grid;
  gap: 20px;
  padding: 22px;
}
.hr-personnel-cover-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.hr-personnel-cover .hr-personnel-identity {
  flex: 1 1 240px;
  gap: 18px;
}
.hr-personnel-cover .hr-personnel-photo {
  width: 116px;
  height: 116px;
  border-radius: 50%;
  border-width: 2px;
  box-shadow: 0 8px 22px rgba(22, 42, 22, .10);
}
.hr-personnel-cover .hr-personnel-photo-placeholder {
  font-size: 1.35rem;
}
.hr-personnel-cover .hr-personnel-identity h2 {
  margin-top: 7px;
  font-size: clamp(1.7rem, 4vw, 2.25rem);
}
.hr-personnel-cover .hr-personnel-identity p {
  margin-top: 1px;
  font-size: 1rem;
}
.hr-personnel-cover .hr-personnel-status {
  margin-top: 9px;
}
.hr-personnel-edit-profile {
  flex: 0 0 auto;
  margin-left: auto;
  min-height: 44px;
  padding-inline: 14px;
}
.hr-personnel-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.hr-personnel-quick-grid > div {
  min-width: 0;
  padding: 15px 14px 2px;
}
.hr-personnel-quick-grid > div + div {
  border-left: 1px solid var(--line);
}
.hr-personnel-quick-grid span,
.hr-personnel-quick-grid strong {
  display: block;
}
.hr-personnel-quick-grid span {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.hr-personnel-quick-grid strong {
  margin-top: 4px;
  color: var(--deep-forest);
  font-size: .95rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.hr-personnel-dashboard-card {
  padding: 18px;
}
.hr-personnel-dashboard-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.hr-personnel-dashboard-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.hr-personnel-dashboard-title h2,
.hr-personnel-dashboard-title p {
  margin: 0;
}
.hr-personnel-dashboard-title h2 {
  color: var(--deep-forest);
  font-size: 1.15rem;
}
.hr-personnel-dashboard-title p {
  margin-top: 2px;
  color: var(--muted);
  font-size: .79rem;
  line-height: 1.35;
}
.hr-personnel-dashboard-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--sage-pale) 82%, var(--white));
}
.hr-personnel-dashboard-icon img {
  width: 23px;
  height: 23px;
  object-fit: contain;
}
.hr-personnel-dashboard-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: var(--hub-radius-control, 10px);
  background: color-mix(in srgb, var(--sage-pale) 25%, var(--white));
  color: var(--ink);
  font-size: .8rem;
  font-weight: 800;
  text-decoration: none;
}
.hr-personnel-dashboard-action:hover,
.hr-personnel-dashboard-action:focus-visible {
  background: color-mix(in srgb, var(--sage-pale) 55%, var(--white));
  outline: none;
}
.hr-personnel-dashboard-action span {
  color: var(--forest);
  font-size: 1.35rem;
  line-height: .8;
}

.hr-personnel-training-progress-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-top: 15px;
}
.hr-personnel-training-progress {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 82%, var(--white));
}
.hr-personnel-training-progress > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--forest);
  transition: width .25s ease;
}
.hr-personnel-training-progress-row > strong {
  min-width: 38px;
  color: var(--deep-forest);
  font-size: .86rem;
  text-align: right;
}
.hr-personnel-training-breakdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.hr-personnel-training-breakdown > div {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 12px 10px 11px;
  border: 1px solid var(--line);
  border-radius: var(--hub-radius-row, 14px);
  background: color-mix(in srgb, var(--sage-pale) 15%, var(--white));
}
.hr-personnel-training-breakdown > div::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--forest) var(--hr-person-training-progress, 0%),
    transparent var(--hr-person-training-progress, 0%)
  );
}
.hr-personnel-training-breakdown strong,
.hr-personnel-training-breakdown span,
.hr-personnel-training-breakdown small {
  display: block;
}
.hr-personnel-training-breakdown strong {
  color: var(--forest);
  font-size: 1rem;
}
.hr-personnel-training-breakdown span {
  margin-top: 3px;
  color: var(--deep-forest);
  font-size: .78rem;
  font-weight: 850;
}
.hr-personnel-training-breakdown small {
  margin-top: 3px;
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.25;
}

.hr-personnel-role-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.hr-personnel-role-summary > div {
  min-width: 0;
  padding: 11px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--sage-pale) 16%, var(--white));
}
.hr-personnel-role-summary span,
.hr-personnel-role-summary strong {
  display: block;
}
.hr-personnel-role-summary span {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .035em;
}
.hr-personnel-role-summary strong {
  margin-top: 4px;
  color: var(--deep-forest);
  font-size: .88rem;
  overflow-wrap: anywhere;
}
.hr-personnel-card-details {
  margin-top: 12px;
  border-top: 1px solid var(--line);
}
.hr-personnel-card-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 2px 0;
  color: var(--deep-forest);
  font-size: .82rem;
  font-weight: 850;
  list-style: none;
  cursor: pointer;
}
.hr-personnel-card-details > summary::-webkit-details-marker {
  display: none;
}
.hr-personnel-card-details .hr-accordion-chevron {
  transform: rotate(0);
}
.hr-personnel-card-details[open] .hr-accordion-chevron {
  transform: rotate(90deg);
}
.hr-personnel-card-details-body {
  padding-top: 15px;
}
.hr-personnel-card-details-body .hr-account-access-panel {
  margin-top: 16px;
}

.hr-personnel-onboarding-card .hr-onboarding-summary-grid {
  margin-top: 14px;
}
.hr-personnel-onboarding-card .hr-onboarding-actions {
  margin-bottom: 2px;
}
.hr-personnel-onboarding-card [data-hr-onboarding-message]:empty {
  display: none;
}

.hr-personnel-private-accordions {
  display: grid;
  gap: 8px;
}
.hr-personnel-private-accordions .hr-personnel-accordion > summary {
  height: auto;
  min-height: 66px;
  padding: 13px 18px;
}
.hr-personnel-private-accordions .hr-personnel-accordion:not([open]) {
  height: auto;
  min-height: 66px;
  max-height: none;
}
.hr-personnel-private-accordions .hr-personnel-accordion > summary strong {
  font-size: 1rem;
}
.hr-personnel-private-accordions .hr-personnel-accordion-body {
  padding: 4px 18px 18px;
}

html.dark-mode .hr-personnel-dashboard-icon,
html.dark-mode .hr-personnel-training-breakdown > div,
html.dark-mode .hr-personnel-role-summary > div,
html.dark-mode .hr-personnel-dashboard-action {
  background: #293127;
}
html.dark-mode .hr-personnel-training-progress {
  background: #343b33;
}

@media (max-width: 760px) {
  .hr-personnel-cover {
    padding: 20px;
  }
  .hr-personnel-cover .hr-personnel-photo {
    width: 104px;
    height: 104px;
    border-radius: 50%;
  }
  .hr-personnel-quick-grid,
  .hr-personnel-role-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hr-personnel-quick-grid > div:nth-child(odd),
  .hr-personnel-role-summary > div:nth-child(odd) {
    border-left: 0;
  }
  .hr-personnel-quick-grid > div:nth-child(n+3) {
    border-top: 1px solid var(--line);
  }
  .hr-personnel-training-breakdown {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .hr-personnel-cover {
    gap: 17px;
    padding: 18px;
  }
  .hr-personnel-cover-top {
    gap: 12px;
  }
  .hr-personnel-cover .hr-personnel-identity {
    gap: 14px;
  }
  .hr-personnel-cover .hr-personnel-photo {
    width: 94px;
    height: 94px;
  }
  .hr-personnel-cover .hr-personnel-identity h2 {
    font-size: 1.65rem;
  }
  .hr-personnel-cover .hr-personnel-identity p {
    font-size: .88rem;
  }
  .hr-personnel-edit-profile {
    min-height: 44px;
    padding-inline: 10px;
    font-size: .75rem;
  }
  .hr-personnel-dashboard-card {
    padding: 15px;
  }
  .hr-personnel-dashboard-heading {
    align-items: flex-start;
  }
  .hr-personnel-dashboard-title {
    gap: 10px;
  }
  .hr-personnel-dashboard-icon {
    width: 38px;
    height: 38px;
  }
  .hr-personnel-dashboard-icon img {
    width: 21px;
    height: 21px;
  }
  .hr-personnel-dashboard-action {
    min-height: 44px;
    padding: 7px 9px;
    font-size: .75rem;
  }
  .hr-personnel-training-breakdown small {
    min-height: 2.5em;
  }
  .hr-personnel-role-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* Customer-facing Hub manual */
.manual-page {
  max-width: 980px;
  margin-inline: auto;
}
.manual-intro {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start !important;
  column-gap: 8px !important;
  row-gap: 2px !important;
  padding: 14px 16px !important;
}
.manual-intro > .eyebrow {
  align-self: center;
  margin: 0;
}
.manual-intro > h1 {
  grid-column: 1 / -1;
  width: 100%;
  margin: 2px 0 4px;
  font-size: clamp(1.7rem, 7.2vw, 2.5rem);
  line-height: 1.02;
  letter-spacing: -.04em;
}
.manual-intro > .lead {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
  margin: 0;
  font-size: .95rem;
  line-height: 1.38;
}
.manual-version {
  align-self: center;
  padding: 2px 6px;
  font-size: .75rem;
  line-height: 1.15;
  white-space: nowrap;
}
.manual-page > .hub-ai-section {
  width: 100%;
}
.manual-carousel-list {
  display: grid;
  gap: 8px;
}
.manual-carousel-card {
  margin: 0;
  padding: 12px;
  overflow: hidden;
}
.manual-carousel-toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.manual-carousel-toolbar-copy {
  min-width: 0;
  text-align: center;
}
.manual-carousel-toolbar-copy h2 {
  margin: 1px 0 2px;
  color: var(--deep-forest);
  font-size: 1.2rem;
}
.manual-carousel-toolbar-copy .muted {
  display: block;
  font-size: .75rem;
  line-height: 1.25;
}
.manual-carousel-nav {
  min-width: 42px;
  min-height: 44px;
  display: inline-grid;
  place-items: center;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.manual-carousel-nav:hover:not(:disabled),
.manual-carousel-nav:focus-visible:not(:disabled) {
  border-color: var(--orange);
  outline: none;
}
.manual-carousel-nav:disabled {
  cursor: default;
  opacity: .34;
}
.manual-carousel-nav-icon {
  display: block;
  width: 27px;
  height: 27px;
  object-fit: contain;
  opacity: .72;
  pointer-events: none;
}
.manual-carousel-nav-icon.is-previous {
  transform: scaleX(-1);
}
.manual-carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 1px;
}
.manual-carousel-track::-webkit-scrollbar {
  display: none;
}
.manual-carousel-page {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.manual-card {
  min-width: 0;
}
.manual-section-card {
  box-sizing: border-box;
  width: 100%;
  min-height: 52px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 0;
  padding: 10px 12px;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.manual-section-card:hover,
.manual-section-card:focus-visible {
  border-color: color-mix(in srgb, var(--forest) 38%, var(--line));
  outline: none;
}
.manual-card-copy {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 3px;
}
.manual-card-title {
  min-width: 0;
  color: #687333;
  font-size: .9625rem;
  line-height: 1.2;
}
html.dark-mode .manual-card-title {
  color: #d1df8e;
}
.manual-card-summary {
  width: 100%;
  min-width: 0;
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.manual-reader-backdrop {
  position: fixed;
  inset: 0;
  z-index: 145;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(27, 31, 21, .72);
}
.manual-reader-backdrop[hidden] {
  display: none !important;
}
.manual-reader {
  box-sizing: border-box;
  width: min(760px, 100%);
  max-height: min(86vh, 840px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  padding-bottom: env(safe-area-inset-bottom);
  overflow: hidden;
  overscroll-behavior-x: contain;
  touch-action: pan-y;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--white);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .34);
}
.manual-reader:focus {
  outline: none;
}
.manual-reader-handle {
  width: 44px;
  height: 5px;
  margin: 9px auto 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 40%, transparent);
}
.manual-reader-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 10px 16px 12px;
  border-bottom: 1px solid var(--line);
}
.manual-reader-heading {
  min-width: 0;
}
.manual-reader-heading .eyebrow {
  display: block;
  margin-bottom: 3px;
}
.manual-reader-heading h2 {
  margin: 0 0 4px;
  color: var(--deep-forest);
  font-size: 1.35rem;
}
.manual-reader-heading .muted {
  margin: 0;
}
.manual-reader-close {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.manual-reader-close:hover,
.manual-reader-close:focus-visible {
  background: var(--sage-pale);
  outline: none;
}
.manual-reader-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 16px 22px;
  -webkit-overflow-scrolling: touch;
}
.manual-body > :first-child {
  margin-top: 0;
}
.manual-body > :last-child {
  margin-bottom: 0;
}
.manual-body h3 {
  margin-top: 20px;
}
.manual-body ul,
.manual-body ol {
  margin: 10px 0 16px;
  padding-left: 22px;
}
.manual-body li + li {
  margin-top: 8px;
}
.manual-note,
.manual-warning {
  margin: 14px 0;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--green) 7%, var(--white));
}
.manual-warning {
  background: color-mix(in srgb, #b42318 7%, var(--white));
  border-color: color-mix(in srgb, #b42318 25%, var(--line));
}
html.manual-reader-open,
body.manual-reader-open {
  overflow: hidden;
}
.settings-manual-card {
  text-decoration: none;
  color: var(--ink);
}
html.dark-mode .manual-carousel-nav-icon {
  filter: invert(1);
  opacity: .86;
}
/* Android/WebView manual-reader hardening.
   Mirror the proven document lightbox: explicit inset sizing avoids WebView
   collapsing or anchoring an intrinsic-height sheet below the visible viewport. */
@media (max-width: 700px) {
  .manual-reader-backdrop {
    inset: 0;
    display: block;
    width: auto;
    height: auto;
    padding: 0;
  }
  .manual-reader {
    position: absolute !important;
    z-index: 1;
    top: max(8px, env(safe-area-inset-top));
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    left: 8px;
    width: auto !important;
    height: auto !important;
    min-width: 0;
    min-height: 240px;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: hidden;
    border-width: 1px;
    border-radius: 22px;
    animation: hubAiSheetUp .28s cubic-bezier(.22, .72, .28, 1) both;
    transform-origin: bottom center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .manual-reader {
    animation: none !important;
  }
}

@media (max-width: 600px) {
  .manual-carousel-card {
    padding: 10px;
  }
  .manual-carousel-toolbar-copy h2 {
    font-size: 1.08rem;
  }
  .manual-carousel-nav {
    min-width: 44px;
    min-height: 44px;
    padding: 8px;
  }
  .manual-carousel-nav-icon {
    width: 26px;
    height: 26px;
  }
  .manual-section-card {
    min-height: 50px;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 9px 10px;
  }
  .manual-card-title {
    font-size: .9025rem;
  }
  .manual-card-summary {
    font-size: .75rem;
  }
  .manual-reader-header {
    padding-inline: 14px;
  }
  .manual-reader-scroll {
    padding: 12px 14px max(20px, env(safe-area-inset-bottom));
  }
}

.hr-personnel-photo-feedback {
  margin: -7px 0 0;
  color: var(--forest);
  font-size: .88rem;
  line-height: 1.4;
}
.hr-personnel-photo-feedback[data-state="error"] { color: #a83c32; }
html.dark-mode .hr-personnel-photo-feedback[data-state="error"] { color: #ff9d91; }


/* Versioned Hub training courses */
.training-admin-course-list,
.training-course-editor-list {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}
.training-admin-course-row,
.training-course-editor-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--hub-radius-row, 14px);
  background: var(--white);
  color: inherit;
  text-decoration: none;
}
.training-admin-course-row:hover {
  border-color: var(--forest);
}
.training-admin-course-row > span:first-child,
.training-course-editor-row-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.training-admin-course-row small,
.training-course-editor-row small {
  color: var(--muted);
  overflow-wrap: anywhere;
}
.training-course-add {
  margin-top: 14px;
}
.training-course-add > summary {
  list-style: none;
  width: fit-content;
  cursor: pointer;
}
.training-course-add > summary::-webkit-details-marker {
  display: none;
}
.training-course-add[open] > summary {
  margin-bottom: 14px;
}
.training-course-editor-page,
.training-course-player {
  display: grid;
  gap: 16px;
}
.training-course-editor-card,
.training-course-section,
.training-course-final,
.training-course-attempt-history {
  margin: 0;
}
.training-course-publish {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.training-course-summary {
  display: grid;
  gap: 12px;
  margin: 0;
}
.training-course-summary > div {
  display: grid;
  gap: 4px;
}
.training-course-summary dt {
  color: var(--muted);
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.training-course-summary dd {
  margin: 0;
}
.training-course-summary code {
  overflow-wrap: anywhere;
  font-size: .78rem;
}
.training-course-player-intro {
  margin-bottom: 0;
}
.training-course-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
  margin-top: 12px;
}
.training-course-progress > span {
  display: block;
  height: 100%;
  width: var(--course-progress, 0%);
  max-width: 100%;
  border-radius: inherit;
  background: var(--forest);
  transition: width .25s ease;
}
.training-course-section {
  display: grid;
  gap: 16px;
}
.training-course-section.is-complete {
  border-color: color-mix(in srgb, var(--forest) 45%, var(--line));
}
.training-course-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.training-course-section-heading h2 {
  margin: 2px 0 0;
}
.training-course-text {
  line-height: 1.65;
  white-space: normal;
}
.training-course-image,
.training-course-video {
  display: block;
  width: 100%;
  max-height: min(68vh, 720px);
  object-fit: contain;
  border-radius: 14px;
  background: #000;
}
.training-course-image {
  background: var(--surface);
}
.training-youtube-launch {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 200px;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: #000;
  color: #fff;
  cursor: pointer;
  text-align: left;
}
.training-youtube-launch > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.training-youtube-launch-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.06) 58%);
}
.training-youtube-launch-copy {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.training-youtube-launch-copy > span:last-child {
  display: grid;
  gap: 2px;
}
.training-youtube-launch-copy small {
  color: rgba(255,255,255,.86);
}
.training-youtube-launch-play {
  display: grid;
  place-items: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  color: #111;
  font-size: 1.05rem;
  padding-left: 2px;
}
.training-youtube-card-note {
  margin: 0;
}
.training-youtube-dialog {
  z-index: 140;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, .86);
}
.training-youtube-dialog-shell {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: min(100%, 1000px) !important;
  height: auto !important;
  min-width: 0;
  min-height: 0;
  max-width: 1000px !important;
  max-height: 92dvh !important;
  margin: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--hub-radius-dialog, 22px);
  background: #050505 !important;
  color: #f7f7f7;
  box-shadow: 0 28px 90px rgba(0,0,0,.48);
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto;
  visibility: visible !important;
  opacity: 1 !important;
}
.training-youtube-dialog-heading,
.training-youtube-dialog-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}
.training-youtube-dialog-heading {
  justify-content: space-between;
  padding-top: max(12px, env(safe-area-inset-top));
  border-bottom: 1px solid rgba(255,255,255,.14);
  background: #050505;
}
.training-youtube-dialog-heading > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.training-youtube-dialog-heading strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.training-youtube-dialog-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 14px;
  background: #000;
}
.training-youtube-dialog-footer {
  justify-content: space-between;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,.14);
  background: #050505;
}
.training-youtube-player-shell {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 0;
  overflow: hidden;
  border-radius: 14px;
  background: #000;
}
.training-youtube-player {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
}
.training-youtube-status {
  margin: 0;
  color: rgba(255,255,255,.82);
}
.training-youtube-status[data-state="error"] {
  color: #a83c32;
}
html.dark-mode .training-youtube-status[data-state="error"] {
  color: #ff9d91;
}

/* Phone landscape is a Hub-managed viewport fill. YouTube itself never enters fullscreen. */
.training-youtube-dialog.is-landscape-fullscreen {
  padding: 0;
}
.training-youtube-dialog.is-landscape-fullscreen .training-youtube-dialog-shell {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  border: 0;
  border-radius: 0;
  grid-template-rows: minmax(0, 1fr);
}
.training-youtube-dialog.is-landscape-fullscreen .training-youtube-dialog-heading,
.training-youtube-dialog.is-landscape-fullscreen .training-youtube-dialog-footer,
.training-youtube-dialog.is-landscape-fullscreen .training-youtube-status {
  display: none !important;
}
.training-youtube-dialog.is-landscape-fullscreen .training-youtube-dialog-body {
  display: block;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}
.training-youtube-dialog.is-landscape-fullscreen .training-youtube-player-shell {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  border-radius: 0;
}
.training-youtube-dialog.is-landscape-fullscreen .training-youtube-player {
  width: 100%;
  height: 100%;
  min-height: 0;
}
.training-youtube-dialog.is-landscape-fullscreen .training-youtube-leave-confirm {
  position: absolute;
  inset: 0;
}
/* Android/WebView training-player hardening.
   Keep the popup as an explicit inset sheet on phone-sized viewports. The
   generic WebView modal already uses this reliable geometry; do not override
   it with an intrinsic-height relative sheet here. */
@media (max-width: 700px) {
  .training-youtube-dialog {
    display: block;
    padding: 0;
  }
  .training-youtube-dialog-shell {
    position: absolute !important;
    top: max(8px, env(safe-area-inset-top)) !important;
    right: 8px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    left: 8px !important;
    width: auto !important;
    height: auto !important;
    min-width: 0;
    min-height: 240px;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: hidden;
    border-radius: var(--hub-radius-dialog, 22px);
  }
  .training-youtube-dialog-heading,
  .training-youtube-dialog-footer {
    padding-inline: 12px;
  }
  .training-youtube-dialog-body {
    min-height: 0;
    padding: 10px;
  }

  .training-youtube-dialog.is-landscape-fullscreen .training-youtube-dialog-shell {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0;
    border-radius: 0;
  }
}

.training-course-external-actions,
.training-external-dialog-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.training-course-viewed-form {
  margin-top: 2px;
}
.training-course-knowledge {
  display: grid;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.training-course-section-complete {
  margin: 0;
  font-weight: 700;
  color: var(--forest);
}
.training-course-questions {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.training-question-carousel-toolbar {
  margin: 0;
}
.training-question-carousel-toolbar-copy h3 {
  font-size: clamp(1rem, 4vw, 1.28rem);
}
.training-question-carousel {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  touch-action: pan-y;
}
.training-question-carousel-track {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: stretch;
  transform: translateX(0);
  will-change: transform;
}
.training-question-carousel-page {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.training-course-question {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
}
.training-course-question legend {
  display: grid;
  gap: 3px;
  max-width: 100%;
  padding: 0 4px;
  font-weight: 700;
}
.training-course-options {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}
.training-course-options label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}
.training-course-options label:has(input:checked) {
  border-color: color-mix(in srgb, var(--forest) 54%, var(--line));
  background: color-mix(in srgb, var(--sage-pale) 65%, var(--white));
}
.training-course-options input[type="radio"] {
  appearance: auto;
  -webkit-appearance: radio;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 0;
  padding: 0;
  accent-color: var(--forest);
}
.training-course-options label > span {
  min-width: 0;
  line-height: 1.25;
}
.training-question-submit-page {
  align-self: stretch;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  min-height: 180px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  text-align: center;
}
.training-question-submit-page h3,
.training-question-submit-page p {
  margin: 0;
}
.training-question-submit-page .button {
  width: min(100%, 360px);
  margin-top: 6px;
}
@media (max-width: 520px) {
  .training-question-carousel-toolbar {
    gap: 8px;
  }
  .training-question-carousel-toolbar .training-carousel-nav {
    min-width: 40px;
    min-height: 40px;
    padding: 6px 8px;
  }
  .training-question-carousel-toolbar .training-carousel-nav-icon {
    width: 26px;
    height: 26px;
  }
  .training-course-question {
    padding: 10px;
  }
}
.training-course-final.is-locked {
  opacity: .76;
}
.training-external-dialog {
  z-index: 120;
}
.training-external-dialog-shell {
  width: min(94vw, 1100px);
  height: min(88vh, 820px);
  overflow: hidden;
  border-radius: var(--hub-radius-dialog, 22px);
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 22px 80px rgba(0, 0, 0, .28);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.training-external-dialog-heading,
.training-external-dialog-footer {
  padding: 12px 14px;
  align-items: center;
}
.training-external-dialog-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}
.training-external-dialog-footer {
  justify-content: flex-end;
  border-top: 1px solid var(--line);
}
.training-external-dialog iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}
html.dark-mode .training-admin-course-row,
html.dark-mode .training-course-editor-row,
html.dark-mode .training-external-dialog-shell,
html.dark-mode .training-youtube-dialog-shell {
  background: var(--surface);
}
html.dark-mode .training-course-image {
  background: #111;
}
@media (max-width: 720px) {
  .training-admin-course-row,
  .training-course-editor-row,
  .training-course-publish,
  .training-course-section-heading {
    align-items: stretch;
    flex-direction: column;
  }
  .training-admin-course-row .status,
  .training-course-editor-row .status,
  .training-course-section-heading .status {
    width: fit-content;
  }
  .training-external-dialog-shell {
    border-radius: var(--hub-radius-dialog, 22px);
  }
  .training-youtube-dialog-footer {
    align-items: stretch;
    flex-direction: column;
  }
  .training-youtube-dialog-footer .button {
    width: 100%;
  }
  .training-external-dialog-footer {
    justify-content: stretch;
  }
  .training-external-dialog-footer .button {
    flex: 1 1 auto;
    text-align: center;
  }
}


/* Course creation popup: same fixed-shell / scroll-body pattern as HuBAI and the document viewer. */
.training-course-create-modal {
  z-index: 130;
}
.training-course-create-dialog {
  width: min(720px, 100%);
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.training-course-create-head,
.training-course-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.training-course-create-head h2 {
  margin: 3px 0 6px;
}
.training-course-create-head p {
  margin: 0;
}
.training-course-create-form {
  min-height: 0;
  margin: 0;
}
.training-course-create-scroll {
  overflow-y: auto;
  touch-action: pan-y;
}
.training-course-create-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--white);
}
@media (max-width: 700px) {
  .training-course-panel-heading {
    align-items: stretch;
    flex-direction: column;
  }
  .training-course-panel-heading > .button {
    width: fit-content;
  }
  .training-course-create-dialog {
    width: 100%;
    max-height: calc(var(--hub-ai-viewport-height, 100dvh) - max(8px, env(safe-area-inset-top)));
    border-width: 1px 1px 0;
    border-radius: 22px 22px 0 0;
    animation: hubAiSheetUp .28s cubic-bezier(.22, .72, .28, 1) both;
    transform-origin: bottom center;
  }
  .training-course-create-head {
    padding: 15px 16px 13px;
  }
  .training-course-create-scroll {
    padding: 16px 16px 24px;
  }
  .training-course-create-actions {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  }
  .training-course-create-actions .button {
    flex: 1 1 0;
  }
}
html.dark-mode .training-course-create-actions {
  background: var(--white);
}
@media (prefers-reduced-motion: reduce) {
  .training-course-create-dialog {
    animation: none !important;
  }
}


/* Training video leave confirmation: replaces the browser-native confirm with a Hub-styled prompt. */
.training-youtube-leave-confirm {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, .84);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.training-youtube-leave-confirm[hidden] {
  display: none !important;
}
.training-youtube-leave-card {
  width: min(440px, 100%);
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface, #fff);
  color: var(--ink);
  box-shadow: 0 26px 80px rgba(0, 0, 0, .48);
}
.training-youtube-leave-card h2 {
  margin: 5px 0 9px;
  font-size: clamp(1.35rem, 5vw, 1.7rem);
}
.training-youtube-leave-card p {
  margin: 0;
  line-height: 1.55;
}
.training-youtube-leave-card p strong {
  white-space: nowrap;
}
.training-youtube-leave-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}
.training-youtube-leave-actions .button {
  width: 100%;
  min-width: 0;
  justify-content: center;
  text-align: center;
}
@media (max-width: 360px) {
  .training-youtube-leave-confirm {
    padding: 14px;
  }
  .training-youtube-leave-card {
    padding: 20px;
  }
  .training-youtube-leave-actions {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .training-youtube-leave-card {
    animation: trainingLeaveConfirmIn .16s ease-out both;
  }
}
@keyframes trainingLeaveConfirmIn {
  from { opacity: 0; transform: scale(.97) translateY(5px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}


/* Global Hub card/widget internal padding.
   This is intentionally scoped to page surfaces so dialogs, lightboxes and
   other overlay shells can keep the spacing required by their interaction UI. */
.page :where(
  .card,
  .action-card,
  .success-card,
  .dashboard-shortcut-tile,
  .training-progress-panel,
  .document-summary-panel,
  .settings-panel,
  .account-settings,
  .form-follow-up-card,
  .controlled-document-register
) {
  padding: var(--hub-card-padding) !important;
}


/* Role-based core training */
.training-role-carousel-shell {
  min-width: 0;
  margin-top: 16px;
}

.training-role-carousel-toolbar {
  margin-bottom: 12px;
}

.training-role-carousel {
  min-width: 0;
  padding-bottom: 2px;
  touch-action: pan-x pan-y;
}

.training-role-carousel-page {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: none;
}

.training-role-card {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--hub-radius-card, 18px);
  background: var(--surface);
  color: inherit;
  padding: 16px;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
}

.training-role-card:hover,
.training-role-card:focus-visible {
  border-color: color-mix(in srgb, var(--forest) 44%, var(--border));
  background: color-mix(in srgb, var(--sage-pale) 34%, var(--surface));
  outline: none;
}

.training-role-card-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.training-role-card strong,
.training-role-card small {
  display: block;
}

.training-role-card strong {
  font-size: 1.05rem;
  line-height: 1.25;
}

.training-role-card small {
  color: var(--muted);
}

.training-role-preview {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.training-role-preview-item,
.training-role-preview-more,
.training-role-empty {
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.35;
}

.training-role-preview-item {
  color: var(--ink);
  font-weight: 650;
}

.training-role-preview-more {
  font-weight: 700;
}

.training-role-empty {
  margin-top: 8px;
}

.training-role-carousel-empty {
  margin-top: 14px;
}

.training-role-dialog {
  width: min(94vw, 920px);
  max-height: 92dvh;
}

.training-role-modal-head {
  align-items: flex-start;
}

.training-role-form {
  min-height: 0;
  overflow-y: auto;
  touch-action: pan-y;
}

.training-role-options {
  display: grid;
  gap: 14px;
}

.training-role-type-section {
  min-width: 0;
  overflow: hidden;
}

.training-role-type-toolbar {
  margin-bottom: 10px;
}

.training-role-type-toolbar .training-carousel-toolbar-copy h3 {
  font-size: 1.05rem;
}

.training-role-type-carousel {
  min-width: 0;
  padding: 0 1px 2px;
}

.training-role-type-page {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: none;
}

.training-role-type-page-list {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}

.training-role-option {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
}

.training-role-option:last-child {
  border-bottom: 0;
}

.training-role-option-main {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.training-role-option-main input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 auto;
}

.training-role-option-main > span {
  min-width: 0;
}

.training-role-option-main strong,
.training-role-option-main small {
  display: block;
}

.training-role-option-main strong {
  font-size: .88rem;
  line-height: 1.2;
}

.training-role-option-main small {
  margin-top: 2px;
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.2;
}

.training-role-due {
  min-width: 0;
  display: block;
}

.training-role-due select {
  width: 100%;
  min-height: 44px;
  padding: 9px 28px 9px 9px;
  font-size: .82rem;
}

.training-role-modal-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 12px;
  background: var(--surface);
}

@media (max-width: 760px) {
  .training-role-type-toolbar {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 8px;
  }

  .training-role-type-toolbar .training-carousel-nav {
    min-width: 44px;
    min-height: 44px;
    padding: 7px;
  }

  .training-role-carousel-toolbar {
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    gap: 8px;
  }

  .training-role-carousel-toolbar .training-carousel-nav {
    min-width: 42px;
    min-height: 42px;
    padding: 7px;
  }

  .training-role-card {
    padding: 14px;
  }

  .training-role-dialog {
    width: auto;
    height: auto;
    max-height: none;
    border-radius: 18px;
  }

  .training-role-option {
    grid-template-columns: minmax(0, 1fr) 104px;
    gap: 8px;
    padding: 8px 9px;
  }

  .training-role-option-main {
    gap: 8px;
  }

  .training-role-option-main strong {
    font-size: .84rem;
  }

  .training-role-option-main small {
    font-size: .75rem;
  }

  .training-role-due select {
    min-height: 44px;
    padding: 9px 26px 9px 8px;
    font-size: .78rem;
  }

  .training-role-modal-actions {
    justify-content: stretch;
  }

  .training-role-modal-actions .button {
    flex: 1 1 0;
  }
}


/* Tenant-defined Hub roles and permissions */
.tenant-role-page-heading {
  align-items: center;
  gap: 16px;
}
.tenant-role-section {
  margin-bottom: 12px;
}
.tenant-role-create-section {
  margin: 0 0 12px;
}
.tenant-role-create-home-card {
  width: 100%;
  cursor: pointer;
}
.tenant-role-create-home-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--forest) 32%, var(--line));
  border-radius: 999px;
  color: var(--forest);
  background: color-mix(in srgb, var(--sage-pale) 42%, var(--white));
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
}
.tenant-role-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.tenant-role-card {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--hub-radius-card, 18px);
  color: var(--ink);
  background: var(--white);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.tenant-role-card:hover,
.tenant-role-card:focus-visible {
  border-color: color-mix(in srgb, var(--forest) 40%, var(--line));
  background: color-mix(in srgb, var(--sage-pale) 38%, var(--white));
}
.tenant-role-card-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.tenant-role-card-copy > strong {
  font-size: 1rem;
  line-height: 1.25;
}
.tenant-role-card-copy > small,
.tenant-role-card-meta {
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.35;
}
.tenant-role-card-meta {
  margin-top: 3px;
  font-weight: 650;
}
.tenant-role-card-archived {
  opacity: .78;
}
.tenant-role-none-archived {
  margin: 0;
}
.tenant-role-modal,
.training-role-modal {
  z-index: 132;
}
.tenant-role-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: min(90dvh, 900px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}
.tenant-role-form {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0;
}
.tenant-role-form textarea {
  min-height: 86px;
}
.tenant-role-permissions {
  min-width: 0;
}
.tenant-role-permission-carousel {
  min-width: 0;
  display: grid;
  gap: 10px;
}
.tenant-role-permission-carousel-toolbar {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 10px;
}
.tenant-role-permission-carousel-toolbar-copy {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 1px;
  text-align: center;
}
.tenant-role-permission-carousel-toolbar-copy strong {
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.2;
}
.tenant-role-permission-carousel-toolbar-copy small {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 650;
}
.tenant-role-permission-carousel-nav {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  cursor: pointer;
}
.tenant-role-permission-carousel-nav:hover:not(:disabled),
.tenant-role-permission-carousel-nav:focus-visible:not(:disabled) {
  border-color: color-mix(in srgb, var(--forest) 48%, var(--line));
  background: color-mix(in srgb, var(--sage-pale) 46%, var(--white));
}
.tenant-role-permission-carousel-nav:disabled {
  opacity: .35;
  cursor: default;
}
.tenant-role-permission-carousel-nav-icon {
  width: 26px;
  height: 26px;
  display: block;
  object-fit: contain;
}
.tenant-role-permission-carousel-nav-icon.is-previous {
  transform: rotate(180deg);
}
.tenant-role-permission-carousel-track {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tenant-role-permission-carousel-track::-webkit-scrollbar {
  display: none;
}
.tenant-role-permission-group {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--hub-radius-card, 18px);
  background: var(--white);
}
.tenant-role-permission-group-head {
  padding: 13px 14px 10px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--sage-pale) 42%, var(--white));
}
.tenant-role-permission-group-head h3 {
  margin: 0 0 3px;
  font-size: 1rem;
}
.tenant-role-permission-group-head p {
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
}
.tenant-role-permission-list {
  display: grid;
}
.tenant-role-permission {
  min-width: 0;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  font-weight: 400;
}
.tenant-role-permission:last-child {
  border-bottom: 0;
}
.tenant-role-permission input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--forest);
}
.tenant-role-permission-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.tenant-role-permission-copy strong {
  color: var(--ink);
  font-size: .93rem;
}
.tenant-role-permission-copy small {
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.4;
}
.tenant-role-permission-reserved {
  grid-template-columns: minmax(0, 1fr) auto;
  cursor: default;
  background: color-mix(in srgb, var(--peach) 38%, var(--white));
}
.tenant-role-protected-note {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--forest) 24%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--sage-pale) 48%, var(--white));
  color: var(--deep-forest);
  font-size: .88rem;
  font-weight: 650;
}
.tenant-role-modal-actions {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin: 2px -20px 0;
  padding: 12px 20px max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--white);
  box-shadow: 0 -10px 24px rgba(27, 31, 21, .08);
}
.tenant-role-archive-form {
  display: grid;
  gap: 6px;
  margin-top: 2px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.tenant-role-archive-form small {
  color: var(--muted);
  font-size: .8rem;
}
.tenant-role-archive-form .button.ghost {
  justify-self: start;
}
html.dark-mode .training-role-type-page-list {
  background: #20261f;
  border-color: #46503f;
}

html.dark-mode .training-role-option {
  border-color: #46503f;
}

html.dark-mode .tenant-role-card,
html.dark-mode .tenant-role-permission-group,
html.dark-mode .tenant-role-permission,
html.dark-mode .tenant-role-permission-carousel-nav {
  background: #20261f;
  border-color: #46503f;
}
html.dark-mode .tenant-role-modal-actions {
  background: #20261f;
  border-color: #46503f;
  box-shadow: 0 -10px 24px rgba(0, 0, 0, .24);
}
html.dark-mode .tenant-role-permission-group-head,
html.dark-mode .tenant-role-protected-note {
  background: #293127;
  border-color: #46503f;
}
html.dark-mode .tenant-role-create-home-icon {
  border-color: #52604a;
  color: #dbe6d4;
  background: #293127;
}
html.dark-mode .tenant-role-permission-reserved {
  background: #302a24;
}
@media (max-width: 700px) {
  .tenant-role-page-heading {
    align-items: stretch;
    flex-direction: column;
  }
  .tenant-role-grid {
    grid-template-columns: 1fr;
  }
  .tenant-role-dialog {
    width: auto;
    height: auto;
    max-height: none;
    border-radius: 18px;
  }
  .tenant-role-permission-carousel {
    gap: 8px;
  }
  .tenant-role-permission-carousel-toolbar {
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    gap: 8px;
  }
  .tenant-role-permission-carousel-nav {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
  .tenant-role-permission-carousel-track {
    gap: 8px;
  }
  .tenant-role-modal-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tenant-role-modal-actions .button {
    width: 100%;
    min-width: 0;
    text-align: center;
  }
}

/* Hub touch-target standard: controls remain visually compact, but their hit area never drops below 44px. */
button,
.button,
.nav a,
.mobile-nav a,
.back-link,
.breadcrumb-link,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select {
  min-height: 44px;
}

button,
.button {
  min-width: 44px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.back-link,
.breadcrumb-link,
.nav a,
.mobile-nav a {
  align-items: center;
}

.hr-unlock-close,
.hub-ai-close,
.manual-reader-close,
.manual-carousel-nav,
.training-question-carousel-toolbar .training-carousel-nav,
.training-role-type-toolbar .training-carousel-nav,
.training-role-carousel-toolbar .training-carousel-nav,
.tenant-role-permission-carousel-nav,
.hr-dashboard-people-nav,
.shift-type-icon-action,
.hr-personnel-edit-profile,
.hr-personnel-dashboard-action,
.hr-dashboard-action,
.training-role-due select {
  min-width: 44px;
  min-height: 44px;
}

.checkbox-line,
.checkbox-label,
.training-acknowledgement,
.training-admin-document-main,
.training-role-option-main,
.tenant-role-permission,
.training-course-options label {
  min-height: 44px;
}

/* Demo access uses the shared Hub controls and remains visible after login. */
.demo-login-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--hub-space-2);
  padding: var(--hub-space-2) var(--hub-space-5);
  color: var(--ink);
  background: var(--hub-surface);
  border-bottom: 2px solid var(--orange);
  font-size: 14px;
}
.demo-login-banner a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--hub-space-2);
}
.demo-user-picker {
  border: 1px solid var(--hub-border);
  border-radius: var(--hub-radius-row);
  padding: var(--hub-space-3);
  max-height: 360px;
  overflow-y: auto;
}
.demo-user-row {
  min-height: 44px;
  cursor: pointer;
}
.demo-user-row input {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  min-height: 18px;
}
.demo-normal-login summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  font-size: 14px;
}

/* Personnel checklist: shared rows, semantic completion and direct actions. */
.hr-checklist { display: grid; gap: var(--hub-card-gap); }
.hr-checklist-item { display: grid; gap: var(--hub-space-1); }
.hr-checklist-action { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; width: 100%; text-align: left; color: var(--ink); font: inherit; }
.hr-checklist-state { flex: 0 0 28px; font-size: 20px; text-align: center; }
.hr-checklist-item.is-complete .hr-checklist-state { color: #26713b; }
.hr-checklist-action .hub-row-copy { min-width: 0; }
.hr-checklist-action strong, .hr-checklist-action small { white-space: normal; overflow-wrap: anywhere; }

.hr-enrollment-result { width: min(100%, 540px); max-height: 90dvh; padding: var(--hub-card-padding); display: grid; gap: var(--hub-space-3); align-content: start; overflow-y: auto; color: var(--ink); background: var(--hub-surface); border: 1px solid var(--hub-border); border-radius: var(--hub-radius-dialog); }
.hr-enrollment-result .form-actions { position: sticky; bottom: 0; background: var(--hub-surface); padding-top: var(--hub-space-2); }
.document-viewer .hr-document-image { display: block; max-width: 100%; height: auto; margin: auto; }

.hr-document-upload-dialog { width: min(640px, 100%); max-height: min(90vh, 900px); overflow-y: auto; background: var(--card); color: var(--ink); border: 1px solid var(--border); border-radius: var(--hub-radius-dialog, 22px); padding: 18px; }
.hr-document-upload-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.hr-document-upload-head h2 { margin: 0; font-size: 20px; }
.hr-document-upload-dialog .hr-inline-editor { margin: 0; }
.hr-document-upload-dialog .hr-inline-actions { position: sticky; bottom: 0; background: var(--card); padding: 12px 0 0; }

.hr-upload-requirement { margin-top: 12px; }