/* Harbor uses the shared demo frame and guidance, with three domain interfaces. */
.demo-workforce {
  --app: #f3f6fb;
  --panel: #fff;
  --tint: #e8effb;
  --app-ink: #182a43;
  --app-muted: #596b82;
  --app-line: #cfdaea;
  --button: #2059a4;
  --on-button: #fff;
  --blue: #2059a4;
  --harbor-warm: #835718;
  --harbor-warm-bg: #fbf1dd;
  --harbor-navy: #152d4e;
  --harbor-on-navy: #fff;
  overflow-wrap: anywhere;
}
:root[data-theme="dark"] .demo-workforce {
  --app: #142238;
  --panel: #1b2e48;
  --tint: #233c5e;
  --app-ink: #f1f5fb;
  --app-muted: #b4c5dc;
  --app-line: #3a526e;
  --button: #a9ccff;
  --on-button: #11263e;
  --blue: #a9ccff;
  --harbor-warm: #f0ca87;
  --harbor-warm-bg: #3c3325;
  --harbor-navy: #244465;
  --harbor-on-navy: #f5f8ff;
}
.demo-workforce .app-content {
  padding-top: 19px;
}
.demo-workforce .app-content h2 {
  font-size: 27px;
  letter-spacing: -1px;
}
.demo-workforce .app-content h3 {
  font-size: 15px;
  letter-spacing: -0.25px;
}
.demo-workforce .app-content p {
  font-size: 12px;
  line-height: 1.65;
}
.demo-workforce .app-content .app-kicker {
  margin-bottom: 7px;
}
.demo-workforce .app-lead {
  margin-top: -6px;
}
.demo-workforce .text-button {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--blue);
  background: none;
  border: 0;
  padding: 12px 0;
  min-height: 44px;
  font-size: 12px;
  text-align: left;
}
.harbor-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 24px;
}
.harbor-brand > svg,
.workforce-partner-strip > svg {
  width: 31px;
  height: 31px;
  flex: none;
  overflow: visible;
}
.harbor-brand > span {
  font-size: 20px;
  font-weight: 760;
  letter-spacing: 1.8px;
  line-height: 1;
}
.harbor-brand small {
  display: block;
  font-size: 6px;
  letter-spacing: 2.08px;
  margin-top: 5px;
  font-weight: 600;
}
.harbor-brand > b {
  margin-left: auto;
  max-width: 90px;
  font-size: 8px;
  line-height: 1.5;
  letter-spacing: 1.1px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--app-muted);
  text-align: right;
}
.workforce-person {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 16px 0;
}
.workforce-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: block;
  flex: none;
  background: var(--tint);
  border: 1px solid var(--app-line);
  object-fit: cover;
  object-position: 50% 43%;
}
.workforce-person > span:last-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.workforce-person strong {
  font-size: 13px;
}
.workforce-person small {
  font-size: 10px;
  color: var(--app-muted);
}
.workforce-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 650;
  line-height: 1.5;
  background: var(--tint);
  color: var(--blue);
}
.workforce-status::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}
.workforce-workspace-title {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 8px;
}
.workforce-workspace-title h2 {
  margin-top: 4px;
}
.workforce-cycle {
  flex: none;
  border: 1px solid var(--app-line);
  color: var(--app-muted);
  padding: 5px 8px;
  border-radius: 7px;
  font-size: 9px;
  margin-top: 4px;
}
.workforce-metrics {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 16px;
  margin: 24px 0 12px;
}
.workforce-metrics > div {
  display: grid;
  gap: 5px;
}
.workforce-metrics strong {
  font-size: 37px;
  line-height: 1.1;
  letter-spacing: -1.7px;
}
.workforce-metrics strong small {
  font-size: 18px;
  color: var(--app-muted);
  letter-spacing: -0.6px;
}
.workforce-metrics > div > span {
  font-size: 10px;
  color: var(--app-muted);
}
.workforce-metrics .workforce-metric-attention {
  border-left: 1px solid var(--app-line);
  padding-left: 19px;
}
.workforce-metric-attention strong {
  color: var(--harbor-warm);
}
.workforce-readiness-line {
  height: 5px;
  background: var(--harbor-warm-bg);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 23px;
}
.workforce-readiness-line i {
  display: block;
  height: 100%;
  width: var(--readiness);
  border-radius: 5px;
  background: var(--blue);
}
.workforce-priority {
  background: var(--panel);
  border: 1px solid var(--app-line);
  border-radius: 14px;
  padding: 18px;
  margin: 18px 0;
  box-shadow: 0 5px 15px #11284408;
}
.workforce-priority-label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--harbor-warm);
  font-size: 8px;
  letter-spacing: 0.75px;
  font-weight: 700;
}
.workforce-priority-label > .ui-icon {
  width: 15px;
  height: 15px;
}
.workforce-priority .workforce-person {
  margin: 14px 0 11px;
}
.workforce-priority h3 {
  margin-bottom: 10px;
}
.workforce-locations {
  margin: 23px 0;
}
.workforce-locations > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--app-line);
}
.workforce-locations > div > span {
  font-size: 12px;
  font-weight: 650;
}
.workforce-locations small {
  display: block;
  font-size: 9px;
  color: var(--app-muted);
  font-weight: 400;
  margin-top: 4px;
}
.workforce-locations b {
  font-size: 9px;
  font-weight: 550;
  color: var(--app-muted);
  text-align: right;
}
.workforce-partner-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border-radius: 12px;
  background: var(--tint);
  margin-top: 25px;
}
.workforce-partner-strip > span {
  display: grid;
  gap: 3px;
  font-size: 9px;
  color: var(--app-muted);
}
.workforce-partner-strip strong {
  font-size: 12px;
  color: var(--app-ink);
}
.workforce-partner-strip small {
  font-size: 9px;
}
.workforce-panel {
  border: 1px solid var(--app-line);
  background: var(--panel);
  padding: 17px;
  border-radius: 13px;
  margin: 18px 0;
}
.workforce-panel h3 {
  margin-top: 0;
}
.workforce-panel > p:last-child {
  margin-bottom: 0;
}
.workforce-panel small {
  font-size: 10px;
  color: var(--app-muted);
}
.workforce-panel ul {
  padding-left: 17px;
  font-size: 12px;
  line-height: 1.7;
}
.workforce-panel li + li {
  margin-top: 9px;
}
.workforce-meta {
  margin: 18px 0;
  border-block: 1px solid var(--app-line);
}
.workforce-meta > div {
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: 16px;
  padding: 11px 0;
  font-size: 11px;
}
.workforce-meta > div + div {
  border-top: 1px solid var(--app-line);
}
.workforce-meta dt {
  color: var(--app-muted);
}
.workforce-meta dd {
  margin: 0;
  font-weight: 550;
  text-align: right;
}
.workforce-resource {
  border: 1px solid var(--app-line);
  border-radius: 11px;
  background: var(--panel);
  margin: 12px 0;
  padding: 0 14px;
}
.workforce-resource summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  font-size: 11px;
  line-height: 1.5;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  padding: 11px 0;
}
.workforce-resource summary::-webkit-details-marker {
  display: none;
}
.workforce-resource summary::after {
  content: "+";
  margin-left: auto;
  font-size: 18px;
  font-weight: 400;
  color: var(--blue);
}
.workforce-resource[open] > summary::after {
  content: "−";
}
.workforce-resource summary > .ui-icon {
  width: 18px;
  height: 18px;
  color: var(--blue);
}
.workforce-resource summary small {
  display: block;
  font-weight: 400;
  color: var(--app-muted);
  font-size: 9px;
  margin-top: 3px;
}
.workforce-resource p,
.workforce-resource li {
  color: var(--app-muted);
  font-size: 11px !important;
  line-height: 1.7;
}
.workforce-resource ul {
  padding-left: 17px;
}
.workforce-resource li {
  margin: 8px 0;
}
.workforce-resource summary:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}
.workforce-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 26px;
}
.workforce-section-heading > span {
  font-size: 9px;
  color: var(--app-muted);
  text-align: right;
}
.workforce-section-heading h3 {
  font-size: 13px !important;
}
.workforce-employee-greeting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.workforce-avatar-large {
  width: 48px;
  height: 48px;
  font-size: 14px;
}
.workforce-employee-next {
  --blue: #bed5f4;
  border-radius: 18px;
  padding: 20px;
  background: var(--harbor-navy);
  color: var(--harbor-on-navy);
  margin: 21px 0 16px;
}
.workforce-employee-next .workforce-priority-label {
  color: #f1ce94;
}
.workforce-employee-next h3 {
  font-size: 20px !important;
  line-height: 1.3;
  margin: 13px 0 12px;
}
.workforce-employee-next .workforce-status {
  background: #ffffff14;
  color: #e1ecff;
}
.workforce-employee-next .app-button {
  background: #e9f1ff;
  color: #142e50;
}
.workforce-employee-next .app-notice {
  --app-muted: #d4e1f3;
  --tint: #ffffff0a;
  --button: #bed5f4;
}
.workforce-employee-next .handoff {
  color: #e9f1ff;
  border-color: #9fb7d267;
}
.workforce-hub-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 15px 0;
  border-bottom: 1px solid var(--app-line);
  font-size: 10px;
}
.workforce-hub-strip span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--app-muted);
}
.workforce-hub-strip .ui-icon {
  width: 14px;
  height: 14px;
}
.workforce-refresher {
  margin: 21px 0;
  padding: 20px;
  border: 1px solid var(--app-line);
  border-radius: 15px;
  background: var(--tint);
}
.workforce-resource-icon {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border-radius: 10px;
  background: var(--panel);
  color: var(--blue);
  margin-bottom: 12px;
}
.workforce-saved {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  margin: 18px 0;
  color: var(--blue);
}
.workforce-saved .ui-icon {
  width: 17px;
  height: 17px;
}
.workforce-record {
  border: 1px solid var(--app-line);
  border-top: 3px solid var(--blue);
  border-radius: 12px;
  padding: 19px;
  background: var(--panel);
  margin: 22px 0;
}
.workforce-record-top {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--blue);
  font-size: 8px;
  letter-spacing: 1px;
}
.workforce-record-top .ui-icon {
  width: 17px;
  height: 17px;
}
.workforce-record > h3 {
  margin-top: 16px;
  font-size: 20px !important;
  line-height: 1.35;
}
.workforce-record .workforce-meta > div {
  grid-template-columns: 0.9fr 1.2fr;
  gap: 10px;
}
.workforce-record .workforce-meta dd {
  font-size: 10px;
}
.demo-workforce .workforce-evidence-note {
  margin-bottom: 0;
  font-size: 9px;
}
.workforce-evidence-checks {
  display: grid;
  border-block: 1px solid var(--app-line);
  margin: 18px 0;
  padding: 8px 0;
}
.workforce-evidence-checks > p {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px !important;
  margin: 7px 0;
}
.workforce-evidence-checks .ui-icon {
  width: 15px;
  height: 15px;
  color: var(--blue);
}
.workforce-evidence-checks > p > span {
  margin-left: auto;
  font-size: 9px;
  color: var(--app-muted);
}
.workforce-timeline {
  margin: 24px 0;
}
.workforce-timeline ol {
  list-style: none;
  padding: 0;
}
.workforce-timeline li {
  display: flex;
  align-items: start;
  gap: 13px;
  padding: 12px 0;
}
.workforce-timeline-dot {
  width: 7px;
  height: 7px;
  border: 2px solid var(--blue);
  border-radius: 50%;
  margin-top: 5px;
  flex: none;
}
.workforce-timeline strong,
.workforce-timeline small {
  display: block;
  font-size: 11px;
}
.workforce-timeline small {
  font-size: 9px;
  color: var(--app-muted);
  margin-top: 5px;
}
.workforce-timeline p {
  color: var(--app-muted);
  font-size: 11px !important;
}
.workforce-client {
  background: var(--panel);
  border: 1px solid var(--app-line);
  border-radius: 14px;
  padding: 18px;
  margin: 23px 0;
}
.workforce-client-heading {
  display: flex;
  align-items: center;
  gap: 11px;
}
.workforce-client-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--tint);
  color: var(--blue);
  flex: none;
  font-weight: 700;
  font-size: 18px;
}
.workforce-client-heading h3 {
  margin: 0 0 3px;
  font-size: 14px !important;
}
.workforce-client-heading small {
  font-size: 9px;
  color: var(--app-muted);
}
.workforce-client-details {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 14px 0;
}
.workforce-client-details span {
  padding: 3px 6px;
  border: 1px solid var(--app-line);
  border-radius: 5px;
  font-size: 8px;
  color: var(--app-muted);
}
.workforce-client-request {
  padding: 16px;
  background: var(--tint);
  border-radius: 9px;
}
.workforce-client-request h3 {
  margin-top: 4px;
}
.workforce-client-request p {
  font-size: 11px !important;
}
.workforce-provider-content > div:not(.workforce-section-heading) {
  display: flex;
  gap: 12px;
  padding: 15px 0;
  border-bottom: 1px solid var(--app-line);
}
.workforce-provider-content .ui-icon {
  width: 18px;
  height: 18px;
  color: var(--blue);
}
.workforce-provider-content strong,
.workforce-provider-content small {
  display: block;
  font-size: 11px;
}
.workforce-provider-content small {
  margin-top: 4px;
  font-size: 9px;
  color: var(--app-muted);
  line-height: 1.65;
}
.workforce-session-context {
  display: flex;
  align-items: start;
  gap: 14px;
  margin: 22px 0;
  padding: 17px;
  background: var(--tint);
  border-radius: 11px;
}
.workforce-session-number {
  font-size: 26px;
  letter-spacing: -1.5px;
  color: var(--blue);
  line-height: 1;
  margin-top: 3px;
}
.workforce-session-context strong,
.workforce-session-context small {
  display: block;
  font-size: 12px;
}
.workforce-session-context small {
  font-size: 9px;
  margin: 6px 0;
  color: var(--app-muted);
}
.workforce-session-context p {
  font-size: 10px !important;
  margin-bottom: 0;
}
.workforce-options {
  padding: 12px;
  border: 1px solid var(--app-line);
  border-radius: 12px;
  margin: 20px 0;
}
.workforce-options legend {
  font-size: 12px;
  font-weight: 650;
}
.workforce-options label {
  display: flex;
  align-items: start;
  gap: 10px;
  padding: 12px 0;
  font-size: 12px;
}
.workforce-options label + label {
  border-top: 1px solid var(--app-line);
}
.workforce-options input {
  width: 18px;
  height: 18px;
  accent-color: var(--button);
  margin: 1px 0 0;
  flex: none;
}
.workforce-options small {
  display: block;
  font-size: 9px;
  line-height: 1.6;
  color: var(--app-muted);
  margin-top: 5px;
}
.workforce-assessment-heading {
  margin-top: 22px;
}
.workforce-assessment-heading p {
  color: var(--app-muted);
}
@media (max-width: 600px) {
  body[data-demo="workforce"] .role-switch {
    width: 100%;
    max-width: 350px;
    display: flex;
  }
  body[data-demo="workforce"] .role-switch button {
    flex: 1;
    padding-inline: 9px;
  }
  .demo-workforce .app-content {
    padding: 22px 20px 28px;
  }
  .demo-workforce .app-content h2 {
    font-size: 30px;
  }
  .demo-workforce .app-content p {
    font-size: 13px;
  }
  .demo-workforce .app-button {
    font-size: 13px;
  }
  .workforce-person strong {
    font-size: 14px;
  }
  .workforce-resource summary {
    min-height: 58px;
    font-size: 12px;
  }
  .workforce-options label {
    padding-block: 15px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .workforce-readiness-line i {
    transition: none;
  }
}

/* Original Harbor and Willow identities with consistent sample portraits. */
.harbor-mark .harbor-piers {
  fill: var(--blue);
}
.harbor-mark .harbor-current {
  fill: var(--harbor-warm);
}
.willow-mark {
  width: 31px;
  height: 31px;
  flex: none;
}
.willow-leaf-one {
  fill: var(--blue);
}
.willow-leaf-two {
  fill: var(--harbor-warm);
}
.willow-stem {
  fill: none;
  stroke: var(--panel);
  stroke-width: 1.4;
  stroke-linecap: round;
}
.workforce-employer-wordmark {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 3px 0 9px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.15px;
  color: var(--app-muted);
}
.workforce-employer-wordmark .willow-mark {
  width: 21px;
  height: 21px;
}
.workforce-account {
  display: grid;
  justify-items: center;
  flex: none;
  gap: 5px;
  margin-left: 3px;
}
.workforce-account .workforce-avatar {
  width: 34px;
  height: 34px;
}
.workforce-account .workforce-cycle {
  margin: 0;
  padding: 3px 6px;
  font-size: 8px;
}
.workforce-client-heading .workforce-coordinator {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.workforce-avatar.workforce-avatar-small {
  width: 23px;
  height: 23px;
}
.workforce-client-mark {
  background: transparent;
  border: 1px solid var(--app-line);
  width: 46px;
  height: 46px;
  border-radius: 12px;
}

/* Each role remains an app-sized experience; deeper records are optional. */
.workforce-record-provider {
  display: block;
  font-size: 11px;
  color: var(--app-muted);
}
.workforce-record .workforce-resource {
  margin-bottom: 6px;
}
.workforce-record .workforce-hub-strip {
  margin-top: 7px;
}
.workforce-history .workforce-timeline {
  margin: 0;
}
.workforce-session-status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0;
}
.workforce-session-status > span {
  font-size: 10px;
  padding: 4px 7px;
  border-radius: 6px;
  background: var(--tint);
  color: var(--app-muted);
}
.workforce-locations {
  margin: 0 0 10px;
}
.workforce-record-note {
  line-height: 1.6;
}
@media (max-width: 600px) {
  .demo-workforce .workforce-person small,
  .demo-workforce .workforce-client-heading small,
  .demo-workforce .workforce-resource summary small,
  .demo-workforce .workforce-locations small,
  .demo-workforce .workforce-locations b,
  .demo-workforce .workforce-timeline small,
  .demo-workforce .workforce-meta dd,
  .demo-workforce .workforce-status,
  .demo-workforce .workforce-session-status > span,
  .demo-workforce .workforce-client-details > span,
  .demo-workforce .workforce-provider-content small,
  .demo-workforce .workforce-panel small,
  .demo-workforce .workforce-options small,
  .demo-workforce .app-content .quiet {
    font-size: 11px;
  }
  .demo-workforce .workforce-client-heading .workforce-coordinator {
    line-height: 1.4;
  }
  .demo-workforce .workforce-client-heading h3 {
    line-height: 1.4;
  }
}

/* Eight milestones wrap intentionally on tablet and unfolded narrow layouts. */
@media (min-width: 451px) and (max-width: 800px) {
  body[data-demo="workforce"] .demo-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px 18px;
  }
  body[data-demo="workforce"] .demo-steps li {
    min-width: 0;
    font-size: 12px;
    align-items: center;
  }
}