/* Shared Humans+ shell presentation. All appearance values resolve through
   the published Presentation theme tokens applied to the document root. */
:root {
  /* Match the approved rendered shell proportions: the expanded rail is
     about 16% of the viewport, with a comfortable 224px minimum. */
  --shell-sidebar-width: clamp(14rem, 16vw, 22.5rem);
  --shell-sidebar-collapsed-width: 76px;
  --content-gutter: clamp(var(--eos-space-control, var(--theme-space-control, 1rem)), 1.7vw, var(--eos-space-section, var(--theme-space-section, 1.5rem)));
  font-family: var(--eos-font-family, var(--theme-font-family, 'DM Sans')), system-ui, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

button, input, select, textarea { font: inherit; }
button, select, input:not([type="checkbox"]):not([type="radio"]), textarea { min-height: 2.75rem; }
.button.primary,
.sign-in-form button {
  border-color: var(--eos-color-action-primary, var(--eos-color-accent, var(--theme-accent)));
  background: var(--eos-color-action-primary, var(--eos-color-accent, var(--theme-accent)));
  color: var(--eos-color-action-primary-text, var(--eos-color-accent-text, var(--theme-accent-text)));
}
.button.primary:hover,
.sign-in-form button:hover {
  border-color: var(--eos-color-action-primary-hover, var(--eos-color-action-primary, var(--theme-accent)));
  background: var(--eos-color-action-primary-hover, var(--eos-color-action-primary, var(--theme-accent)));
}
.button.primary:active,
.sign-in-form button:active {
  border-color: var(--eos-color-action-primary-active, var(--eos-color-action-primary, var(--theme-accent)));
  background: var(--eos-color-action-primary-active, var(--eos-color-action-primary, var(--theme-accent)));
}
a:hover, [role="link"]:hover { text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--eos-color-focus, var(--theme-focus));
  outline-offset: 2px;
}

h1, h2, h3, h4, .brand strong, .brand-name {
  font-family: var(--eos-font-heading-family, var(--theme-heading-font-family, Fraunces)),
    var(--eos-font-family, var(--theme-font-family, 'DM Sans')), system-ui, sans-serif;
  letter-spacing: -.025em;
}
:root[data-theme="high-contrast"] h1,
:root[data-theme="high-contrast"] h2,
:root[data-theme="high-contrast"] h3,
:root[data-theme="high-contrast"] h4,
:root[data-theme="high-contrast"] .brand strong,
:root[data-theme="high-contrast"] .brand-name {
  font-family: var(--eos-font-family, var(--theme-font-family, system-ui)), system-ui, sans-serif;
}

.topbar {
  color: var(--eos-color-header-text, var(--theme-text-primary));
  background: var(--eos-color-header-surface, var(--theme-header));
}
.brand { color: var(--eos-color-header-text, var(--theme-text-primary)); text-decoration: none; }
.brand img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: none;
}
.brand strong, .brand-name {
  background: none;
  color: var(--eos-color-header-text, var(--theme-text-primary));
  -webkit-text-fill-color: currentColor;
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: -.035em;
}
.brand strong span, .brand-name span { color: inherit; -webkit-text-fill-color: currentColor; }
:root[data-theme="high-contrast"] .brand strong,
:root[data-theme="high-contrast"] .brand-name { background: none; color: var(--eos-color-primary, var(--theme-primary)); -webkit-text-fill-color: var(--eos-color-primary, var(--theme-primary)); }
:root[data-theme="high-contrast"] .brand strong span,
:root[data-theme="high-contrast"] .brand-name span { color: var(--eos-color-primary, var(--theme-primary)); -webkit-text-fill-color: var(--eos-color-primary, var(--theme-primary)); }
.breadcrumbs { color: var(--eos-color-header-muted, var(--theme-text-muted)); }
.breadcrumbs a:hover { color: var(--eos-color-header-text, var(--theme-text-primary)); }
.breadcrumbs [aria-current="page"] { color: var(--eos-color-header-text, var(--theme-text-primary)); }
.clock { color: var(--eos-color-header-muted, var(--theme-text-muted)); font-variant-numeric: tabular-nums; }
.clock strong { color: var(--eos-color-header-text, var(--theme-text-primary)); }
.header-icon-button {
  color: var(--eos-color-header-text, var(--theme-text-primary));
  background: color-mix(in srgb, var(--eos-color-header-surface, var(--theme-header)) 72%, var(--eos-color-surface-raised, var(--theme-surface-raised)));
}
.header-icon-button:hover { border-color: var(--eos-color-accent, var(--theme-accent)); background: var(--eos-color-surface-raised, var(--theme-surface-raised)); }

.sidebar, .workforce-sidebar {
  color: var(--eos-color-navigation-text, var(--theme-text-primary));
  background: var(--eos-color-navigation-surface, var(--theme-navigation));
}
.nav-group summary, .nav-label {
  color: var(--eos-color-navigation-muted, var(--theme-text-muted));
}
.nav-group summary:hover {
  color: var(--eos-color-navigation-text, var(--theme-text-primary));
  background: color-mix(in srgb, var(--eos-color-navigation-text, var(--theme-text-primary)) 7%, transparent);
}
.nav-chevron, .chevron, .profile-disclosure {
  color: var(--eos-color-navigation-disclosure, var(--theme-navigation-disclosure, var(--eos-color-navigation-muted, var(--theme-text-muted))));
}
.nav-link, .work-nav a {
  color: var(--eos-color-navigation-muted, var(--theme-text-muted));
  font-size: var(--eos-font-label-size, var(--theme-label-size, .875rem));
  line-height: 1.3;
  text-decoration: none;
}
.nav-link:hover, .work-nav a:hover, .nav-link.active, .work-nav a[aria-current="page"] {
  color: var(--eos-color-navigation-text, var(--theme-text-primary));
  background: color-mix(in srgb, var(--eos-color-navigation-accent, var(--theme-primary)) 14%, var(--eos-color-navigation-surface, var(--theme-navigation)));
}
.nav-footer { background: var(--eos-color-navigation-surface, var(--theme-navigation)); }
.nav-profile { color: var(--eos-color-navigation-text, var(--theme-text-primary)); }
.nav-profile-copy small { color: var(--eos-color-navigation-muted, var(--theme-text-muted)); }

.page-heading .eyebrow, .eyebrow { color: var(--eos-color-accent, var(--theme-accent)); }
.page-heading > p:not(.eyebrow), .lede { color: var(--eos-color-text-muted, var(--theme-text-muted)); }
.register, .panel, .scope-banner, .details-panel {
  border-color: var(--eos-color-border, var(--theme-border));
  background: var(--eos-color-surface, var(--theme-surface));
}
.status-pill[data-status="DRAFT"], .status-pill[data-status="RETIRED"] { color: var(--eos-color-text-muted, var(--theme-text-muted)); }
.status-pill[data-status="IN_REVIEW"], .status-pill[data-status="PENDING"] { color: var(--eos-color-warning, var(--theme-warning)); }
.status-pill[data-status="PUBLISHED"], .status-pill[data-status="ACTIVE"] { color: var(--eos-color-success, var(--theme-success)); }
.status-pill[data-status="SUSPENDED"], .status-pill[data-status="REJECTED"] { color: var(--eos-color-danger, var(--theme-danger)); }

/*
 * Shared Humans+ application frame.
 *
 * Keep shell geometry and common navigation behavior styles in Presentation,
 * so APP-021 and APP-013 share the same layout contract. Application styles
 * remain responsible for their domain content; appearance comes from the
 * published EOS theme tokens above.
 */
.app-shell, .workforce-app {
  display: grid;
  width: 100%;
  max-width: 100vw;
  min-width: 0;
  min-height: 100dvh;
  grid-template-rows: auto minmax(0, 1fr);
  color: var(--eos-color-text-primary, var(--theme-text-primary));
  background: var(--eos-color-page, var(--theme-page));
}
.app-shell .topbar, .workforce-app .topbar {
  min-height: 72px;
  grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr);
  grid-template-areas: "start clock tools";
}
.app-shell .header-start, .workforce-app .header-start {
  grid-area: start;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--eos-space-section, var(--theme-space-section));
}
.app-shell .clock, .workforce-app .clock {
  grid-area: clock;
  justify-self: center;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.app-shell .topbar-context, .workforce-app .header-tools {
  grid-area: tools;
  justify-self: end;
  min-width: 0;
}
.app-shell .topbar-context #screen-selector {
  width: min(18.125rem, 28vw);
  max-width: 100%;
}
.app-shell .topbar-context select,
.workforce-app .header-tools select {
  color: var(--eos-color-text-primary, var(--theme-text-primary));
}
.app-shell .topbar-context .button:not(.primary),
.workforce-app .header-tools .button:not(.primary) {
  color: var(--eos-color-text-primary, var(--theme-text-primary));
}
.app-shell .workspace, .workforce-app .workforce-layout {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 0;
  grid-template-columns: var(--shell-sidebar-width) minmax(0, 1fr);
}
.app-shell .sidebar, .workforce-app .workforce-sidebar {
  position: sticky;
  top: 0;
  align-self: stretch;
  min-width: 0;
  height: 100%;
  max-height: calc(100dvh - 72px);
}
.app-shell #main-content, .workforce-app .workforce-main {
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  max-width: none;
  margin: 0;
}
.app-shell .nav-footer, .workforce-app .nav-footer { margin-top: auto; }
.app-shell.nav-collapsed .workspace,
.workforce-app.nav-collapsed .workforce-layout { grid-template-columns: var(--shell-sidebar-collapsed-width) minmax(0, 1fr); }
.app-shell #main-content, .workforce-app .workforce-main {
  padding-inline: var(--content-gutter);
}
.app-shell #main-content {
  max-width: 88rem;
  justify-self: stretch;
}
.app-shell .breadcrumbs, .workforce-app .breadcrumbs {
  position: absolute;
  top: 50%;
  left: calc(var(--shell-sidebar-width) + var(--content-gutter));
  flex: 0 1 auto;
  max-width: calc(100% - var(--shell-sidebar-width) - var(--content-gutter) - var(--eos-space-control, 1rem));
  transform: translateY(-50%);
}
.app-shell.nav-collapsed .breadcrumbs, .workforce-app.nav-collapsed .breadcrumbs {
  left: calc(var(--shell-sidebar-collapsed-width) + var(--content-gutter));
  max-width: calc(100% - var(--shell-sidebar-collapsed-width) - var(--content-gutter) - var(--eos-space-control, 1rem));
}
.app-shell #main-content {
  padding-block: clamp(var(--eos-space-section, var(--theme-space-section, 1.5rem)), 4vw, 3.375rem)
    clamp(var(--eos-space-section, var(--theme-space-section, 1.5rem)), 3vw, 2.625rem);
}
.app-shell #main-content h1 {
  font-size: clamp(calc(var(--eos-font-heading-size, 2rem) * .9), 3vw,
    calc(var(--eos-font-heading-size, 2rem) * 1.325));
}
.workforce-app .page-heading {
  max-width: none;
  margin: 0;
  padding: var(--eos-space-page, var(--theme-space-page, 2rem)) 0 var(--eos-space-section, var(--theme-space-section, 1.5rem));
}
.workforce-app .sign-in-panel {
  width: 100%;
  max-width: none;
  margin: 0 0 var(--eos-space-section, var(--theme-space-section, 1.5rem));
}
.workforce-app .sign-in-form { width: 100%; max-width: 32rem; }
.workforce-app .content-grid {
  max-width: none;
  margin: 0;
  padding: 0 0 var(--eos-space-page, var(--theme-space-page, 2rem));
}
.workforce-app .footer { max-width: none; margin: 0; padding: 0 0 var(--eos-space-page, var(--theme-space-page, 2rem)); }
.app-shell .nav-link, .workforce-app .work-nav a {
  min-height: 2.75rem;
  border-radius: .5rem;
  font-size: var(--eos-font-label-size, var(--theme-label-size, .875rem));
}
.app-shell .nav-group summary, .workforce-app .nav-label {
  min-height: 2.375rem;
  white-space: nowrap;
}
.app-shell .nav-profile, .workforce-app .nav-profile { min-height: 3.25rem; }

/*
 * Shared content rhythm from the agreed Humans+ UI reference.
 * Keep theme/database tokens as the source values, while matching the
 * reference's compact 13px register/form hierarchy and 11/12px support text.
 */
.app-shell #main-content {
  font-size: calc(var(--eos-font-body-size, var(--theme-body-size, 1rem)) * .8125);
  line-height: 1.5;
}
.app-shell #main-content .page-heading h1 {
  font-size: clamp(1.8rem, 3vw, calc(var(--eos-font-heading-size, 2rem) * 1.325));
  line-height: 1.08;
}
.app-shell #main-content .page-heading .eyebrow,
.app-shell #main-content .filters label,
.app-shell #main-content th,
.app-shell #main-content .register-feedback,
.app-shell #main-content .field-hint,
.app-shell #main-content .details-note,
.app-shell #main-content dt {
  font-size: calc(var(--eos-font-body-size, var(--theme-body-size, 1rem)) * .6875);
}
.app-shell #main-content .lede,
.app-shell #main-content .scope-banner p,
.app-shell #main-content .register-header p,
.app-shell #main-content .list-state,
.app-shell #main-content .module-identity {
  font-size: calc(var(--eos-font-body-size, var(--theme-body-size, 1rem)) * .75);
}
.app-shell #main-content .button,
.app-shell #main-content input,
.app-shell #main-content select,
.app-shell #main-content textarea {
  font-size: calc(var(--eos-font-body-size, var(--theme-body-size, 1rem)) * .8125);
}
.app-shell #main-content th { letter-spacing: .04em; }
.app-shell .nav-group summary,
.app-shell .nav-link,
.workforce-app .work-nav a {
  font-size: calc(var(--eos-font-body-size, var(--theme-body-size, 1rem)) * .8);
}
.app-shell .nav-profile-copy small,
.workforce-app .nav-profile-copy small {
  font-size: calc(var(--eos-font-body-size, var(--theme-body-size, 1rem)) * .6875);
}

/* The approved screen picker remains readable; breadcrumbs yield first at
   intermediate desktop widths so the header controls never run off-screen. */
@media (min-width: 56.251rem) and (max-width: 85rem) {
  .app-shell .header-start, .workforce-app .header-start {
    gap: var(--eos-space-compact, var(--theme-space-compact));
  }
  .app-shell .breadcrumbs, .workforce-app .breadcrumbs {
    max-width: clamp(9rem, 15vw, 12rem);
  }
  .app-shell .topbar-context, .workforce-app .header-tools {
    gap: var(--eos-space-compact, var(--theme-space-compact));
  }
  .app-shell .topbar-context #screen-selector {
    width: min(18.125rem, 26vw);
    min-width: 13rem;
  }
  .app-shell .topbar-context #session-status { display: none; }
  .app-shell .topbar-context .header-icon-button,
  .workforce-app .header-tools .header-icon-button {
    width: 2.5rem;
    min-height: 2.5rem;
  }
}

@container (max-width: 68rem) {
  .app-shell .overview-actions { grid-template-columns: minmax(0, 1fr); }
  .app-shell .register-header { align-items: flex-start; flex-wrap: wrap; }
  .app-shell .register-actions { margin-left: auto; }
}

@media (min-width: 48.001rem) and (max-width: 85rem) {
  .app-shell .workspace, .workforce-app .workforce-layout { grid-template-columns: var(--shell-sidebar-width) minmax(0, 1fr); }
  .app-shell.nav-collapsed .workspace,
  .workforce-app.nav-collapsed .workforce-layout { grid-template-columns: var(--shell-sidebar-collapsed-width) minmax(0, 1fr); }
  .app-shell .topbar, .workforce-app .topbar {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "start" "clock" "tools";
    row-gap: var(--eos-space-compact, var(--theme-space-compact));
    min-height: 0;
    padding: var(--eos-space-control, var(--theme-space-control, 1rem)) var(--eos-space-page, var(--theme-space-page, 2rem));
  }
  .app-shell .header-start, .workforce-app .header-start { display: flex; width: 100%; gap: var(--eos-space-control, var(--theme-space-control)); }
  .app-shell .brand, .workforce-app .brand { grid-area: brand; min-width: 0; }
  .app-shell .breadcrumbs, .workforce-app .breadcrumbs { position: static; top: auto; left: auto; grid-area: auto; flex: 1 1 15rem; max-width: none; transform: none; }
  .app-shell .clock, .workforce-app .clock { position: static; grid-area: clock; justify-self: center; transform: none; }
  .app-shell .topbar-context { position: static; grid-area: tools; display: flex; justify-self: stretch; width: 100%; max-width: none; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--eos-space-compact, var(--theme-space-compact)); }
  .app-shell .topbar-context #screen-selector { width: min(18.125rem, 42vw); min-width: min(13rem, 42vw); max-width: 18.125rem; flex: 0 1 18.125rem; }
  .app-shell .topbar-context .header-icon-button { width: 2.5rem; min-width: 2.5rem; min-height: 2.5rem; flex: 0 0 2.5rem; }
  .workforce-app .header-tools { position: static; grid-area: tools; justify-self: center; display: flex; flex-wrap: nowrap; justify-content: center; gap: var(--eos-space-compact, var(--theme-space-compact)); }
  .app-shell .topbar-context #session-status { display: none; }
  .app-shell .topbar-context #sign-in-link { min-height: 2.5rem; white-space: nowrap; }
  .app-shell #main-content { padding-inline: var(--content-gutter); }
  .app-shell .overview-actions { grid-template-columns: minmax(0, 1fr); }
  .app-shell .overview-card { grid-template-columns: auto minmax(0, 1fr); }
  .app-shell .overview-card > div { min-width: 0; }
  .workforce-app .sign-in-panel { grid-template-columns: minmax(0, 1fr); }
  .app-shell #main-content { padding-block: var(--eos-space-control, var(--theme-space-control, 1rem)); }
}

@media (max-width: 48rem) {
  .app-shell, .workforce-app {
    display: block;
    min-height: 100dvh;
  }
  .app-shell .topbar, .workforce-app .topbar {
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-areas: "brand tools" "crumb crumb" "clock clock";
    gap: var(--eos-space-compact, var(--theme-space-compact));
  }
  .app-shell .header-start, .workforce-app .header-start { display: contents; }
  .app-shell .brand, .workforce-app .brand { grid-area: brand; min-width: 0; }
  .app-shell .mobile-nav-toggle, .workforce-app .mobile-nav-toggle { display: grid; }
  .app-shell .breadcrumbs, .workforce-app .breadcrumbs { position: static; top: auto; left: auto; grid-area: crumb; max-width: 100%; transform: none; }
  .app-shell .clock, .workforce-app .clock { grid-area: clock; justify-self: center; }
  .app-shell .workspace, .workforce-app .workforce-layout { display: block; min-height: 0; }
  .app-shell #main-content { padding: var(--eos-space-control, var(--theme-space-control, 1rem)); }
  .workforce-app .workforce-main { padding-inline: var(--eos-space-control, var(--theme-space-control, .75rem)); }
  .workforce-app .page-heading { padding: var(--eos-space-section, var(--theme-space-section, 1.5rem)) 0; }
  .workforce-app .sign-in-panel { width: 100%; margin: 0 0 var(--eos-space-section, var(--theme-space-section, 1.5rem)); }
  .workforce-app .content-grid { padding: 0 0 var(--eos-space-section, var(--theme-space-section, 1.5rem)); }
  .workforce-app .footer { padding: 0 0 var(--eos-space-section, var(--theme-space-section, 1.5rem)); }
  .app-shell .sidebar, .workforce-app .workforce-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 51;
    display: flex;
    width: min(84vw, 18rem);
    height: 100dvh;
    max-height: none;
    flex-direction: column;
    overflow: hidden;
    padding: var(--eos-space-control, var(--theme-space-control, 1rem));
    border-right: 1px solid var(--eos-color-border, var(--theme-border));
    border-bottom: 0;
    box-shadow: 1rem 0 3rem color-mix(in srgb, var(--eos-color-border, var(--theme-border)) 42%, transparent);
    transform: translateX(-105%);
    transition: transform .2s ease;
  }
  .app-shell.mobile-nav-open .sidebar, .workforce-app.mobile-nav-open .workforce-sidebar { transform: translateX(0); }
  .app-shell .sidebar-collapse, .workforce-app .sidebar-collapse { display: none; }
  .app-shell .mobile-nav-backdrop, .workforce-app .mobile-nav-backdrop { position: fixed; inset: 0; z-index: 50; background: color-mix(in srgb, var(--eos-color-border, var(--theme-border)) 58%, transparent); backdrop-filter: blur(2px); }
  body.mobile-navigation-open { overflow: hidden; }
  .app-shell .sidebar-scroll, .workforce-app .sidebar-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 0; }
  .app-shell #main-content { padding: max(1rem, var(--eos-space-control, var(--theme-space-control, 1rem))); }
  .app-shell #main-content, .workforce-app .workforce-main { width: 100%; max-width: none; overflow-x: clip; }
  .app-shell .nav-footer, .workforce-app .nav-footer { margin-top: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}