/* Shared shell additions. The source portal stylesheet supplies the visual system. */
#appRoot {
  /* The source admin stylesheet declares body as a flex container. Without a
     flex basis, an extracted route shrinks to its content and leaves an empty
     desktop strip on the right. The shell must always own the full viewport. */
  flex: 1 0 100%;
  width: 100%;
  min-width: 0;
}

#appPageHost {
  display: contents;
}

.admin-page-transition {
  position: fixed;
  z-index: 20;
  inset: 64px 0 0;
  display: grid;
  place-items: center;
  background: rgba(247, 250, 248, 0.84);
  background: color-mix(in srgb, var(--bg, #f7faf8) 84%, transparent);
  backdrop-filter: blur(1px);
}

.admin-page-transition[hidden] {
  display: none;
}

.admin-page-transition-dots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
}

.admin-page-transition-dots i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--green-dark, #176f3d);
  animation: admin-route-dot 780ms cubic-bezier(0.25, 1, 0.5, 1) infinite both;
}

.admin-page-transition-dots i:nth-child(2) { animation-delay: 110ms; }
.admin-page-transition-dots i:nth-child(3) { animation-delay: 220ms; }

@keyframes admin-route-dot {
  0%, 100% { opacity: 0.32; transform: translateY(0); }
  45% { opacity: 1; transform: translateY(-3px); }
}

.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 (min-width: 1024px) {
  .admin-page-transition {
    top: 62px;
    left: 232px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-page-transition-dots i {
    animation: none;
    opacity: 0.8;
  }
}

.desktop-nav a.desktop-nav-btn,
.desktop-sidebar-footer a.desktop-nav-btn,
.bottom-nav a.nav-btn,
.mobile-more-menu a.mobile-more-btn {
  color: inherit;
  text-decoration: none;
}

/* The destination becomes selected at click time. The loader still owns the
   content area, so the quick color change acknowledges intent without
   suggesting that the page's live data is already ready. */
.desktop-nav-btn,
.nav-btn,
.mobile-more-btn {
  transition: color 160ms cubic-bezier(0.25, 1, 0.5, 1), background-color 160ms cubic-bezier(0.25, 1, 0.5, 1);
}

@media (prefers-reduced-motion: reduce) {
  .desktop-nav-btn,
  .nav-btn,
  .mobile-more-btn {
    transition: none;
  }
}

#headerNotificationPanel .notification-empty {
  color: var(--muted, #667085);
  font-size: 13px;
}

#appView .profile-menu-wrap {
  position: relative;
}

#appView .profile-quick-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 100;
  width: 236px;
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid var(--line-strong, #d3dfd8);
  border-radius: var(--radius-md, 10px);
  background: var(--card, #fdfefd);
  box-shadow: 0 14px 32px rgba(18, 37, 26, 0.14);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top right;
  transition: opacity 180ms cubic-bezier(0.22, 1, 0.36, 1), transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

#appView .profile-quick-menu[hidden] {
  display: none;
}

#appView .profile-quick-menu.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

#appView .profile-quick-menu-head {
  display: grid;
  gap: 2px;
  padding: 7px 8px 11px;
  border-bottom: 1px solid var(--line, #e1e9e4);
}

#appView .profile-quick-menu-head strong {
  color: var(--text, #14251a);
  font-size: 14px;
  line-height: 1.3;
}

#appView .profile-quick-menu-head span,
#appView .profile-quick-setting-note {
  color: var(--muted, #63726b);
  font-size: 12px;
  line-height: 1.35;
}

#appView .profile-quick-setting,
#appView .profile-quick-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px;
  box-sizing: border-box;
}

#appView .profile-quick-setting {
  justify-content: space-between;
  gap: 12px;
}

#appView .profile-quick-setting > div {
  display: grid;
  gap: 1px;
}

#appView .profile-quick-setting-label {
  color: var(--text, #14251a);
  font-size: 14px;
  font-weight: 680;
}

#appView .profile-toggle-preview {
  display: inline-flex;
  align-items: center;
  width: 38px;
  height: 22px;
  padding: 2px;
  box-sizing: border-box;
  border-radius: 999px;
  background: oklch(87% 0.014 151);
  opacity: 0.72;
}

#appView .profile-toggle-preview span {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--card, #fdfefd);
  box-shadow: 0 1px 2px rgba(18, 37, 26, 0.18);
}

#appView .profile-quick-link {
  gap: 9px;
  border-top: 1px solid var(--line, #e1e9e4);
  color: var(--text, #14251a);
  font-size: 14px;
  font-weight: 680;
  text-decoration: none;
}

#appView .profile-quick-link:hover,
#appView .profile-quick-link:focus-visible {
  background: var(--green-soft, #edf8f1);
  color: var(--green-dark, #176f3d);
}

#appView .profile-quick-link .material-symbols-rounded {
  font-size: 19px;
}

#appView .profile-quick-link .profile-quick-link-arrow {
  margin-left: auto;
  color: var(--muted, #63726b);
}

@media (prefers-reduced-motion: reduce) {
  #appView .profile-quick-menu {
    transition: none;
  }
}

/* Loaded only while the optional, route-aware onboarding is active. */
/* The tour's click guard is the source of truth. This prevents header and
   navigation affordances from looking available while a lesson owns focus. */
body.is-onboarding-locked #appView > :not(#appPageHost) {
  pointer-events: none;
  user-select: none;
}

.experimental-onboarding {
  position: fixed;
  inset: 0;
  z-index: 2147482000;
  pointer-events: none;
  --onboarding-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.experimental-onboarding-scrim {
  position: absolute;
  inset: 0;
  background: transparent;
}

.experimental-onboarding-spotlight {
  position: fixed;
  z-index: 1;
  border: 3px solid var(--green, #16733f);
  border-radius: 12px;
  background: rgba(244, 255, 248, 0.2);
  box-shadow: 0 0 0 100vmax rgba(16, 29, 23, 0.48), 0 0 0 8px rgba(80, 196, 121, 0.24), 0 14px 32px rgba(8, 42, 24, 0.25);
  pointer-events: none;
  will-change: transform, opacity;
}

.experimental-onboarding-spotlight.is-revealing {
  animation: onboarding-spotlight-in 220ms var(--onboarding-ease) both;
}

.experimental-onboarding-spotlight[data-onboarding-instruction]::after {
  content: attr(data-onboarding-instruction);
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  padding: 6px 9px;
  border-radius: 7px;
  background: var(--green, #16733f);
  color: var(--card, #fdfefd);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 5px 12px rgba(8, 42, 24, 0.2);
}

.experimental-onboarding-card {
  position: fixed;
  z-index: 2;
  right: 24px;
  bottom: 24px;
  width: min(30rem, calc(100vw - 3rem));
  max-height: calc(100dvh - 48px);
  padding: 1.5rem;
  box-sizing: border-box;
  overflow: auto;
  border: 1px solid var(--line, #dce5df);
  border-radius: 14px;
  background: var(--card, #fdfefd);
  box-shadow: 0 22px 58px rgba(8, 27, 18, 0.28);
  color: var(--text, #14251a);
  pointer-events: auto;
  will-change: transform, opacity;
}

.experimental-onboarding.is-entering .experimental-onboarding-card {
  animation: onboarding-guide-in 240ms var(--onboarding-ease) both;
}

.experimental-onboarding.is-leaving .experimental-onboarding-card {
  animation: onboarding-guide-out 170ms var(--onboarding-ease) both;
  pointer-events: none;
}

.experimental-onboarding-card.is-top-positioned {
  top: 92px;
  bottom: auto;
}

.experimental-onboarding-card.is-left-positioned {
  right: auto;
  left: 24px;
}

/* The deductions controls sit lower in the long Payroll settings sheet.
   Put their compact guide above the sheet, in the dimmed sidebar space, so it
   cannot cover the Other deductions switch or the choices it reveals. */
.experimental-onboarding-card.is-top-left-positioned {
  top: 24px;
  bottom: auto;
}

/* Once a real form is open, keep the guide compact so it does not cover the
   field being edited. Exit practice remains first and the green Next step
   control always sits directly beneath it. */
.experimental-onboarding.is-compact-form-guide .experimental-onboarding-card {
  width: min(330px, calc(100vw - 48px));
  padding: 15px;
}

.experimental-onboarding.is-compact-form-guide .experimental-onboarding-card h2 {
  font-size: 17px;
}

.experimental-onboarding.is-compact-form-guide .experimental-onboarding-card p {
  margin-top: 7px;
  font-size: 13px;
}

.experimental-onboarding.is-compact-form-guide .experimental-onboarding-status {
  min-height: 0;
  margin-top: 8px;
}

.experimental-onboarding.is-compact-form-guide .experimental-onboarding-actions {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "exit"
    "next";
  gap: 8px;
  margin-top: 12px;
}

.experimental-onboarding.is-compact-form-guide [data-tour-back] {
  display: none;
}

.experimental-onboarding.is-compact-form-guide [data-tour-next] {
  display: block;
  grid-area: next;
}

.experimental-onboarding.is-compact-form-guide .experimental-onboarding-skip {
  grid-area: exit;
  width: 100%;
  min-height: 40px;
}

.experimental-onboarding-close {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line, #dce5df);
  border-radius: 9px;
  background: var(--green-soft, #edf8f1);
  color: var(--text, #14251a);
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.experimental-onboarding-card h2 {
  margin: 0;
  color: var(--text, #14251a);
  font-size: 1.5rem;
  font-weight: 750;
  letter-spacing: -0.018em;
  line-height: 1.16;
}

.experimental-onboarding-card p {
  max-width: 39ch;
  margin: 0.75rem 0 0;
  color: var(--muted, #63726b);
  font-size: 1rem;
  font-weight: 520;
  line-height: 1.55;
}

.experimental-onboarding-status {
  min-height: 1.3rem;
  margin: 1rem 0 0;
  color: var(--muted, #63726b);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.45;
}

.experimental-onboarding-status.is-ready {
  color: var(--green-dark, #176f3d);
}

.experimental-onboarding-status.is-updated {
  animation: onboarding-status-confirm 280ms var(--onboarding-ease) both;
}

.experimental-onboarding-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "back next"
    "exit exit";
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.experimental-onboarding-actions .btn,
.experimental-onboarding-skip {
  min-height: 3rem;
  padding-inline: 1rem;
  font-size: 0.9375rem;
  font-weight: 700;
  white-space: normal;
}

.experimental-onboarding-actions [data-tour-back] { grid-area: back; }
.experimental-onboarding-actions [data-tour-next] { grid-area: next; }
.experimental-onboarding-actions .experimental-onboarding-skip { grid-area: exit; }

.experimental-onboarding-actions:has([data-tour-back]:disabled) {
  grid-template-areas:
    "next next"
    "exit exit";
}

.experimental-onboarding-actions [data-tour-back]:disabled {
  display: none;
}

.experimental-onboarding-actions [data-tour-next].onboarding-next-ready {
  animation: onboarding-next-ready 260ms var(--onboarding-ease) both;
}

.experimental-onboarding-actions .btn:disabled {
  cursor: not-allowed;
  opacity: 0.58;
  box-shadow: none;
}

.onboarding-tour-example {
  margin-top: 14px;
}

/* Tutorial values are visibly temporary. They are inserted only while the
   dashboard lesson is open, and restored before any real page interaction. */
.onboarding-practice-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  margin: 0 0 10px;
  padding: 4px 7px;
  border: 1px solid var(--line, #dce5df);
  border-radius: 999px;
  background: var(--green-soft, #edf8f1);
  color: var(--green-dark, #176f3d);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.025em;
  line-height: 1;
}

.onboarding-practice-label .material-symbols-rounded {
  font-size: 13px;
}

@keyframes onboarding-spotlight-in {
  from { opacity: 0; transform: scale(0.975); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes onboarding-guide-in {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes onboarding-guide-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(8px) scale(0.99); }
}

@keyframes onboarding-practice-dialog-in {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)) scale(0.985); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes onboarding-status-confirm {
  0% { opacity: 0.6; transform: translateY(3px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes onboarding-next-ready {
  0% { transform: scale(0.985); }
  100% { transform: scale(1); }
}

.onboarding-example,
.onboarding-drive-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px;
  box-sizing: border-box;
  border: 1px solid var(--line, #dce5df);
  border-radius: 10px;
  background: var(--green-soft, #edf8f1);
  color: var(--text, #14251a);
}

.onboarding-example > .material-symbols-rounded,
.onboarding-drive-note > .material-symbols-rounded {
  flex: 0 0 auto;
  color: var(--green-dark, #176f3d);
  font-size: 20px;
}

.onboarding-example > div:not(.onboarding-choice-row) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.onboarding-example strong,
.onboarding-example span:not(.material-symbols-rounded),
.onboarding-drive-note span:last-child {
  font-size: 12px;
  line-height: 1.45;
}

.onboarding-example strong { font-weight: 750; }
.onboarding-example span:not(.material-symbols-rounded) { color: var(--muted, #63726b); }

.onboarding-input-prefix {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--line-strong, #cbd8d0);
  border-radius: 8px;
  background: var(--card, #fdfefd);
}

.onboarding-input-prefix > span { padding-left: 11px; color: var(--muted, #63726b); }
.onboarding-input-prefix input { border: 0; border-radius: 0; }

.onboarding-choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
}

.onboarding-choice-row .btn,
.onboarding-choice-row .onboarding-secondary-choice { min-height: 38px; }

.onboarding-secondary-choice {
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--line-strong, #cbd8d0);
  border-radius: 8px;
  background: var(--card, #fdfefd);
  color: var(--text, #14251a);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.onboarding-secondary-choice:hover,
.onboarding-secondary-choice.is-selected {
  border-color: var(--green, #16733f);
  background: var(--green-soft, #edf8f1);
  color: var(--green-dark, #176f3d);
}

.experimental-onboarding-actions [data-tour-existing-branch] { grid-area: exit; }

.onboarding-request-example { flex-wrap: wrap; }
.onboarding-request-example .onboarding-choice-row { margin-left: 30px; }

.onboarding-drive-note {
  margin-top: 16px;
  background: #f7faf8;
}

.experimental-onboarding-decision-actions.onboarding-drive-actions {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  grid-template-areas: "later connect";
  gap: 12px;
  margin-top: 18px;
}

.experimental-onboarding-decision-actions.onboarding-drive-actions [data-tour-drive-later],
.experimental-onboarding-decision-actions.onboarding-drive-actions [data-tour-drive-connect] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
}

.onboarding-drive-actions [data-tour-drive-later] { grid-area: later; }
.onboarding-drive-actions [data-tour-drive-connect] { grid-area: connect; }

.experimental-onboarding-skip {
  border: 1px solid var(--line, #dce5df);
  border-radius: var(--radius-sm, 8px);
  background: #f7faf8;
  color: var(--text, #14251a);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.experimental-onboarding-card button:focus-visible {
  outline: 3px solid rgba(27, 145, 83, 0.38);
  outline-offset: 2px;
}

.experimental-onboarding-decision[hidden] {
  display: none;
}

.experimental-onboarding.is-decision-open .experimental-onboarding-card,
.experimental-onboarding.is-decision-open .experimental-onboarding-spotlight {
  visibility: hidden;
}

.experimental-onboarding-decision {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  box-sizing: border-box;
  background: rgba(11, 27, 18, 0.62);
  pointer-events: none;
}

.experimental-onboarding.is-entering .experimental-onboarding-decision {
  animation: onboarding-decision-backdrop-in 200ms ease-out both;
}

.experimental-onboarding.is-entering .experimental-onboarding-decision-card {
  animation: onboarding-decision-card-in 240ms var(--onboarding-ease) both;
}

.experimental-onboarding.is-leaving .experimental-onboarding-decision {
  animation: onboarding-decision-backdrop-out 160ms ease-out both;
}

.experimental-onboarding.is-leaving .experimental-onboarding-decision-card {
  animation: onboarding-decision-card-out 160ms var(--onboarding-ease) both;
  pointer-events: none;
}

.experimental-onboarding-decision-card {
  width: min(500px, 100%);
  padding: 22px;
  box-sizing: border-box;
  border: 1px solid var(--line, #dce5df);
  border-radius: 14px;
  background: var(--card, #fdfefd);
  box-shadow: 0 22px 58px rgba(8, 27, 18, 0.28);
  color: var(--text, #14251a);
  pointer-events: auto;
}

.experimental-onboarding-decision-eyebrow {
  color: var(--green-dark, #176f3d);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.experimental-onboarding-decision-card h2 {
  margin: 9px 0 0;
  color: var(--text, #14251a);
  font-size: 22px;
  line-height: 1.2;
}

.experimental-onboarding-decision-card p {
  margin: 10px 0 0;
  color: var(--muted, #63726b);
  font-size: 14px;
  font-weight: 560;
  line-height: 1.5;
}

.experimental-onboarding-decision-status {
  min-height: 18px;
  color: var(--green-dark, #176f3d) !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}

.experimental-onboarding-decision-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "return discard"
    "keep keep";
  gap: 8px;
  margin-top: 18px;
}

.experimental-onboarding-decision-actions .btn,
.experimental-onboarding-discard {
  min-height: 42px;
  padding-inline: 13px;
  white-space: normal;
}

.experimental-onboarding-decision-actions [data-tour-return] { grid-area: return; }
.experimental-onboarding-decision-actions [data-tour-discard] { grid-area: discard; }
.experimental-onboarding-decision-actions [data-tour-keep] { grid-area: keep; }

.experimental-onboarding-discard {
  border: 1px solid var(--line, #dce5df);
  border-radius: var(--radius-sm, 8px);
  background: #f7faf8;
  color: var(--text, #14251a);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.experimental-onboarding-decision-card button:focus-visible {
  outline: 3px solid rgba(27, 145, 83, 0.38);
  outline-offset: 2px;
}

.onboarding-completion {
  position: fixed;
  z-index: 2147482001;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  box-sizing: border-box;
}

.onboarding-completion-backdrop {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: rgba(11, 27, 18, 0.62);
}

.onboarding-completion-confetti {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.onboarding-confetti-piece {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 1px;
  background: oklch(0.7 0.16 151);
}

.onboarding-confetti-piece:nth-child(4n + 1) { background: oklch(0.88 0.12 153); }
.onboarding-confetti-piece:nth-child(4n + 2) { background: oklch(0.84 0.15 86); }
.onboarding-confetti-piece:nth-child(4n + 3) { background: oklch(0.94 0.025 151); }

.onboarding-completion-card {
  position: relative;
  z-index: 2;
  width: min(440px, 100%);
  padding: 24px;
  box-sizing: border-box;
  border: 1px solid var(--line, #dce5df);
  border-radius: 14px;
  background: var(--card, #fdfefd);
  box-shadow: 0 22px 58px rgba(8, 27, 18, 0.28);
  color: var(--text, #14251a);
}

.onboarding-completion-mark {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 12px;
  background: var(--green-soft, #edf8f1);
  color: var(--green-dark, #176f3d);
}

.onboarding-completion-mark .material-symbols-rounded { font-size: 25px; }

.onboarding-completion-eyebrow {
  margin-top: 18px;
  color: var(--green-dark, #176f3d);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}

.onboarding-completion-card h2 {
  max-width: 20ch;
  margin: 8px 0 0;
  color: var(--text, #14251a);
  font-size: 24px;
  letter-spacing: -0.018em;
  line-height: 1.18;
}

.onboarding-completion-card p {
  margin: 10px 0 0;
  color: var(--muted, #63726b);
  font-size: 14px;
  font-weight: 560;
  line-height: 1.5;
}

.onboarding-completion-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 10px;
  margin-top: 24px;
}

.onboarding-completion-actions .btn {
  min-height: 48px;
  justify-content: center;
  padding-inline: 12px;
  white-space: normal;
}

.onboarding-completion-card button:focus-visible {
  outline: 3px solid rgba(27, 145, 83, 0.38);
  outline-offset: 2px;
}

.onboarding-completion.is-entering .onboarding-completion-backdrop { animation: onboarding-decision-backdrop-in 200ms ease-out both; }
.onboarding-completion.is-entering .onboarding-completion-card { animation: onboarding-completion-card-in 220ms var(--onboarding-ease, cubic-bezier(0.22, 1, 0.36, 1)) both; }
.onboarding-completion.is-leaving .onboarding-completion-backdrop { animation: onboarding-decision-backdrop-out 160ms ease-out both; }
.onboarding-completion.is-leaving .onboarding-completion-card { animation: onboarding-completion-card-out 160ms var(--onboarding-ease, cubic-bezier(0.22, 1, 0.36, 1)) both; }

@keyframes onboarding-decision-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes onboarding-decision-backdrop-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes onboarding-decision-card-in {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes onboarding-decision-card-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(8px) scale(0.99); }
}

@keyframes onboarding-completion-card-in {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes onboarding-completion-card-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(8px) scale(0.99); }
}

@media (prefers-reduced-motion: reduce) {
  .onboarding-completion-confetti { display: none; }

  .experimental-onboarding *,
  .onboarding-completion * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .experimental-onboarding-spotlight,
  .experimental-onboarding-card {
    will-change: auto;
  }
}

/* The Settings / Log out area is already visually separated by its position at
   the bottom of the sidebar. The inherited rule adds an orphaned horizontal
   line above it, which reads as a rendering glitch in a cropped or narrow
   desktop view. */
@media (min-width: 1024px) {
  #appView .desktop-sidebar-footer {
    border-top: 0;
  }
}

@media (max-width: 699px) {
  .experimental-onboarding-card {
    right: 14px;
    bottom: calc(82px + env(safe-area-inset-bottom));
    width: calc(100vw - 28px);
    padding: 16px;
  }

  .experimental-onboarding-card.is-top-positioned {
    top: calc(66px + env(safe-area-inset-top));
    bottom: auto;
  }

  .experimental-onboarding-card.is-left-positioned {
    right: 14px;
    left: 14px;
  }

  .experimental-onboarding-card.is-top-left-positioned {
    top: calc(66px + env(safe-area-inset-top));
  }

  /* A fixed guide must not cover the final Save branch action. Extra sheet
     space lets the form scroll the submit button fully above the guide. */
  .experimental-onboarding-branch-form-open #branchFormOverlay .sheet {
    padding-bottom: 292px;
  }

  .experimental-onboarding-actions {
    grid-template-columns: 1fr 1fr;
  }

  .experimental-onboarding-decision-actions.onboarding-drive-actions {
    grid-template-columns: 1fr;
    grid-template-areas: "connect" "later";
  }

  .experimental-onboarding-skip {
    grid-column: auto;
    grid-row: auto;
  }

  .experimental-onboarding-decision {
    align-items: end;
    padding: 14px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }

  .experimental-onboarding-decision-card {
    padding: 18px;
  }

  .onboarding-completion {
    align-items: end;
    padding: 14px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }

  .onboarding-completion-card { padding: 20px 18px; }

  .onboarding-completion-actions { grid-template-columns: 1fr; }

}

/* Standalone-tab desktop alignment.
   These routes are real pages, so they must opt into the same wide content
   column as the desktop shell instead of retaining the old mobile-card width. */
@media (min-width: 1024px) {
  /* Keep the swapped page inside one explicit desktop grid cell. Rendering it
     through `display: contents` lets older page grids size against the whole
     shell and can create a horizontal page offset beside the sidebar. */
  #appView > #appPageHost {
    display: block;
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    min-width: 0;
  }

  #appView > #appPageHost > .page {
    box-sizing: border-box;
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
  }

  #appView .page#attendancePage,
  #appView .page#branchesPage,
  #appView .page#payrollPage,
  #appView .page#requestsPage,
  #appView .page#reportsPage,
  #appView .page#billingPage,
  #appView .page#settingsPage {
    box-sizing: border-box;
    justify-self: stretch;
    width: 100%;
    /* The shell already defines the available desktop column. Do not cap an
       extracted page inside it: wide screens otherwise leave a blank strip
       to the right of tables, search bars, and summary cards. */
    max-width: none;
    min-width: 0;
    margin-inline: 0;
  }

  #attendancePage > .search-wrap,
  #attendancePage > .filter-row,
  #attendancePage > #missingCheckoutQueue,
  #attendancePage > #attendanceCards,
  #branchesPage > .search-wrap,
  #branchesPage > #branchCards,
  #branchesPage > .branches-deferred-card,
  #requestsPage > .request-summary-grid,
  #requestsPage > #requestMessage,
  #requestsPage > #requestCards,
  #payrollPage > #payrollRows,
  #payrollPage > .payroll-side-panel {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

}

/* Payroll needs room for a readable ledger and its export panel. Below this
   width, stacking them avoids a horizontal scroll or a side panel pushed off
   the visible page. */
@media (min-width: 1024px) and (max-width: 1279px) {
  #appView > #appPageHost > #payrollPage {
    grid-template-columns: minmax(0, 1fr);
  }

  #payrollPage > #payrollRows,
  #payrollPage > .payroll-side-panel {
    grid-column: 1;
    grid-row: auto;
  }

  #payrollPage > .payroll-side-panel {
    position: static;
    max-width: none;
  }
}