/* ==========================================================================
   KuduDoc — workforce & renewals
   Shared by workforce.html ("KuduDoc for People") and renewals.html
   (the expiry & compliance calendar).

   Page-local styles only. Shared components live in styles/components.css;
   the .section-head / .hero__cta / .hero__note / .faq-list patterns come from
   styles/solutions.css, which both pages also load (same FAQ markup, same
   scripts/solutions.js accordion). Everything new here is prefixed .wf-.

   Colour comes from design tokens only — no raw hex, no purple, no
   blue-800/900, no orange-600. Status colour uses the documented AA-safe
   pairings: *-700 text on *-50 fills, ink-900 on the bright 500 fills.
   ========================================================================== */

/* ==========================================================================
   1. Hero
   ========================================================================== */
.wf-hero{ position: relative; overflow: hidden; }
.wf-hero-doc{ max-width: 480px; margin-inline: auto; text-align: left; }
.wf-split-doc{ max-width: 500px; margin-inline: auto; }

/* ==========================================================================
   2. Mock primitives — the small believable product bits inside .doc-window
   and .card mocks on both pages.
   ========================================================================== */

/* Small-caps label above a block of mock content */
.wf-doc-label{
  display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-tertiary); margin-bottom: var(--space-3);
}
.wf-doc-label + .wf-doc-label,
.wf-row + .wf-doc-label,
.wf-kv + .wf-doc-label{ margin-top: var(--space-5); }

/* Dashed footnote line at the bottom of a mock */
.wf-doc-foot{
  margin-top: var(--space-4); padding-top: var(--space-3);
  border-top: 1px dashed var(--ink-100);
  font-size: var(--text-micro); color: var(--text-tertiary);
}

/* Chip row above mock content */
.wf-chips{ display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }

/* Person header inside an employee-file mock */
.wf-person{ display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.wf-person__badge{
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
  background: var(--blue-100); color: var(--blue-700);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-small);
}
.wf-person__name{ display: block; font-size: var(--text-body); font-weight: 600; color: var(--ink-900); line-height: 1.3; }
.wf-person__sub{ display: block; font-size: var(--text-micro); color: var(--text-tertiary); }

/* Generic row: icon + name/sub + trailing chip */
.wf-row{ display: flex; align-items: center; gap: var(--space-3); padding-block: var(--space-3); flex-wrap: wrap; }
.wf-row + .wf-row{ border-top: var(--border-hairline); }
.wf-row__icon{
  width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--radius-sm);
  background: var(--blue-50); color: var(--blue-600);
  display: flex; align-items: center; justify-content: center;
}
.wf-row__icon svg{ width: 17px; height: 17px; }
.wf-row__icon--success{ background: var(--success-50); color: var(--success-700); }
.wf-row__icon--warning{ background: var(--warning-50); color: var(--warning-700); }
.wf-row__icon--danger{ background: var(--danger-50); color: var(--danger-700); }
.wf-row__icon--muted{ background: var(--ink-50); color: var(--ink-300); border: 1px dashed var(--ink-200); }
.wf-row__who{ display: flex; flex-direction: column; min-width: 0; flex: 1; }
.wf-row__name{ display: block; font-size: var(--text-small); font-weight: 600; color: var(--ink-900); }
.wf-row__sub{ display: block; font-size: var(--text-micro); color: var(--text-tertiary); }
.wf-row > .chip{ margin-left: auto; flex-shrink: 0; }
.wf-row--missing .wf-row__name{ color: var(--text-tertiary); font-weight: 500; }

/* Key / value line */
.wf-kv{ display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-small); padding-block: var(--space-2); }
.wf-kv + .wf-kv{ border-top: 1px dashed var(--ink-100); }
.wf-kv__k{ color: var(--text-tertiary); }
.wf-kv__v{ font-weight: 600; color: var(--ink-900); text-align: right; }

/* Status banner strip inside a mock */
.wf-banner{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: var(--radius-md);
  background: var(--success-50); color: var(--success-700);
  font-size: var(--text-small); font-weight: 700;
  margin-bottom: var(--space-4);
}
.wf-banner svg{ flex-shrink: 0; width: 18px; height: 18px; }
.wf-banner--blue{ background: var(--blue-50); color: var(--blue-700); }
.wf-banner--warning{ background: var(--warning-50); color: var(--warning-700); }
.wf-banner--danger{ background: var(--danger-50); color: var(--danger-700); }
.wf-banner--foot{ margin-bottom: 0; margin-top: var(--space-4); }

/* Completeness / countdown meter */
.wf-meter{
  display: block; height: 6px; border-radius: var(--radius-full);
  background: var(--ink-100); overflow: hidden; margin-top: var(--space-2);
}
.wf-meter__fill{ display: block; height: 100%; border-radius: inherit; background: var(--blue-600); }
.wf-meter__fill--warning{ background: var(--warning-500); }
.wf-meter__fill--danger{ background: var(--danger-500); }
.wf-meter-label{
  display: flex; justify-content: space-between; gap: var(--space-3);
  font-size: var(--text-micro); color: var(--text-tertiary); margin-top: 6px;
}

/* Quoted clause snippet (AI reading a contract) */
.wf-snippet{
  border-left: 3px solid var(--blue-600); background: var(--blue-50);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-small); color: var(--ink-700); line-height: 1.6;
  margin-top: var(--space-4);
}
.wf-snippet mark{ background: var(--orange-100); color: var(--ink-900); border-radius: 3px; padding: 0 2px; }
.wf-snippet__cite{ display: block; margin-top: var(--space-2); font-size: var(--text-micro); font-weight: 600; color: var(--blue-700); }

/* WhatsApp-style delivery thread */
.wf-chat{ display: flex; flex-direction: column; gap: var(--space-3); }
.wf-chat__bubble{
  max-width: 88%; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md); font-size: var(--text-small); color: var(--ink-900);
  background: var(--ink-50); border: var(--border-hairline);
  border-bottom-left-radius: 4px; align-self: flex-start; line-height: 1.5;
}
.wf-chat__bubble--out{
  background: var(--success-50); border-color: var(--success-50);
  border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: 4px;
  align-self: flex-end;
}
.wf-chat__meta{ display: block; margin-top: 4px; font-size: var(--text-micro); color: var(--text-tertiary); }

/* Document owner attribution */
.wf-owner{ display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-micro); color: var(--text-secondary); }
.wf-owner__badge{
  width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%;
  background: var(--blue-100); color: var(--blue-700);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 10px;
}

/* ==========================================================================
   3. Expiry calendar — the dated list used in the renewals hero and the
   expiry feature card.
   ========================================================================== */
.wf-cal{ display: flex; flex-direction: column; gap: var(--space-2); }
.wf-cal__item{
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3); border: var(--border-hairline);
  border-left: 3px solid var(--blue-500); border-radius: var(--radius-md);
  background: var(--white);
}
.wf-cal__item--warning{ border-left-color: var(--warning-500); }
.wf-cal__item--danger{ border-left-color: var(--danger-500); }
.wf-cal__date{
  width: 46px; flex-shrink: 0; text-align: center;
  border-radius: var(--radius-sm); background: var(--ink-50); padding: 5px 0;
}
.wf-cal__day{
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-body); line-height: 1.1; color: var(--ink-900);
}
.wf-cal__mon{
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-tertiary);
}
.wf-cal__body{ min-width: 0; flex: 1; }
.wf-cal__name{ display: block; font-size: var(--text-small); font-weight: 600; color: var(--ink-900); }
.wf-cal__sub{ display: block; font-size: var(--text-micro); color: var(--text-tertiary); }
.wf-cal__item > .chip{ margin-left: auto; flex-shrink: 0; }
@media (max-width: 400px){
  .wf-cal__item{ flex-wrap: wrap; }
  .wf-cal__item > .chip{ margin-left: 58px; }
}

/* ==========================================================================
   4. Reminder ticks — the 90 / 60 / 30 / 7 day markers.
   ========================================================================== */
.wf-ticks{
  position: relative; display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: var(--space-2); margin-top: var(--space-4);
}
.wf-ticks::before{
  content: ""; position: absolute; left: 12%; right: 12%; top: 14px; height: 2px;
  background-image: repeating-linear-gradient(to right, var(--ink-200) 0 6px, transparent 6px 12px);
}
.wf-tick{ position: relative; text-align: center; }
.wf-tick__dot{
  position: relative; z-index: 1; width: 30px; height: 30px; margin-inline: auto;
  border-radius: 50%; background: var(--blue-50); color: var(--blue-700);
  border: 3px solid var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
}
.wf-tick--sent .wf-tick__dot{ background: var(--blue-600); color: var(--white); }
.wf-tick--now .wf-tick__dot{ background: var(--warning-500); color: var(--ink-900); }
.wf-tick__label{ display: block; margin-top: 6px; font-size: 10.5px; font-weight: 600; color: var(--text-tertiary); }

/* ==========================================================================
   5. Progressive-discipline ladder.
   ========================================================================== */
.wf-ladder{ display: flex; flex-direction: column; gap: var(--space-2); }
.wf-ladder__step{
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4); border: var(--border-hairline);
  border-radius: var(--radius-md); background: var(--white);
}
.wf-ladder__num{
  width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%;
  background: var(--ink-100); color: var(--ink-700);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
}
.wf-ladder__label{ font-size: var(--text-small); font-weight: 600; color: var(--ink-900); }
.wf-ladder__meta{ margin-left: auto; font-size: var(--text-micro); color: var(--text-tertiary); }
.wf-ladder__step--done .wf-ladder__num{ background: var(--blue-600); color: var(--white); }
.wf-ladder__step--current{ border-color: var(--warning-500); background: var(--warning-50); }
.wf-ladder__step--current .wf-ladder__num{ background: var(--warning-500); color: var(--ink-900); }
.wf-ladder__step--current .wf-ladder__meta{ color: var(--warning-700); font-weight: 700; }
.wf-ladder__step--pending .wf-ladder__label{ color: var(--text-tertiary); font-weight: 500; }

/* ==========================================================================
   6. Onboarding packs — two side-by-side document checklists.
   ========================================================================== */
.wf-pack{
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--space-5); margin-top: var(--space-7);
}
@media (max-width: 760px){ .wf-pack{ grid-template-columns: minmax(0,1fr); } }
.wf-pack__col{
  background: var(--white); border: var(--border-hairline);
  border-radius: var(--radius-lg); padding: var(--space-6);
}
.wf-pack__head{ display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.wf-pack__title{ font-family: var(--font-display); font-weight: 600; font-size: var(--text-h4); color: var(--ink-900); }
.wf-pack__list{ display: flex; flex-direction: column; gap: 10px; }
.wf-pack__list li{ display: flex; align-items: flex-start; gap: 10px; font-size: var(--text-small); color: var(--text-secondary); }
.wf-pack__list svg{ width: 16px; height: 16px; flex-shrink: 0; margin-top: 4px; color: var(--success-700); }
.wf-pack__list li strong{ font-weight: 600; color: var(--ink-900); }
.wf-pack__extra svg{ color: var(--orange-700); }
.wf-pack__note{ margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px dashed var(--ink-100); font-size: var(--text-micro); color: var(--text-tertiary); }

/* ==========================================================================
   7. Copy-side helpers — icon lists, checklists, callouts, legends.
   ========================================================================== */
.wf-list{ display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-6); }
.wf-list__item{ display: flex; align-items: flex-start; gap: var(--space-4); }
.wf-list__icon{
  width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--radius-sm);
  background: var(--blue-50); color: var(--blue-600);
  display: flex; align-items: center; justify-content: center;
}
.wf-list__icon svg{ width: 18px; height: 18px; }
.wf-list__body{ min-width: 0; }
.wf-list__label{ display: block; font-size: var(--text-small); font-weight: 600; color: var(--ink-900); }
.wf-list__sub{ display: block; font-size: var(--text-small); color: var(--text-secondary); margin-top: 2px; }

.wf-checklist{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-5) var(--space-8); }
@media (max-width: 700px){ .wf-checklist{ grid-template-columns: minmax(0,1fr); } }
.wf-checklist__item{ display: flex; align-items: flex-start; gap: var(--space-3); }
.wf-checklist__icon{
  width: 26px; height: 26px; flex-shrink: 0; margin-top: 2px; border-radius: 50%;
  background: var(--success-50); color: var(--success-700);
  display: flex; align-items: center; justify-content: center;
}
.wf-checklist__icon svg{ width: 14px; height: 14px; }
.wf-checklist__title{ display: block; font-size: var(--text-body); font-weight: 600; color: var(--ink-900); }
.wf-checklist__desc{ display: block; font-size: var(--text-small); color: var(--text-secondary); margin-top: 2px; }

/* Honesty callout — the "here is what this is not" block. Orange-toned so it
   reads as a caveat rather than an error. */
.wf-callout{
  border-left: 4px solid var(--orange-500); background: var(--orange-50);
  padding: var(--space-5) var(--space-6); border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-top: var(--space-6); font-size: var(--text-small); color: var(--ink-900); line-height: 1.6;
}
.wf-callout p + p{ margin-top: var(--space-3); }
.wf-callout strong{ font-weight: 700; }

/* Roadmap legend under a section of asterisked features */
.wf-legend{ margin-top: var(--space-5); font-size: var(--text-micro); color: var(--text-tertiary); }

/* FAQ answers here run to two paragraphs; the shared solutions.css rule only
   ever had single-paragraph answers to style, so it sets no gap between them.
   Page-local addition — this stylesheet loads on workforce.html and
   renewals.html only. */
.faq-item__panel p + p{ margin-top: var(--space-4); }

/* In-copy links — base.css strips colour and underline from anchors, so
   copy-level links restate both. */
.wf-list__sub a,
.wf-checklist__desc a,
.wf-callout a,
.faq-item__panel a{
  color: var(--blue-600); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
}
.wf-list__sub a:hover,
.wf-checklist__desc a:hover,
.wf-callout a:hover,
.faq-item__panel a:hover{ color: var(--blue-700); }

/* ==========================================================================
   8. Route cards — the three ways an expiry date gets into KuduDoc.
   ========================================================================== */
.wf-routes{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-5); }
@media (max-width: 900px){ .wf-routes{ grid-template-columns: minmax(0,1fr); } }
.wf-route{
  display: flex; flex-direction: column; gap: var(--space-3); height: 100%;
  padding: var(--space-6); border: var(--border-hairline);
  border-radius: var(--radius-lg); background: var(--white);
}
.wf-route--lead{ background: var(--blue-50); border-color: var(--blue-100); }
.wf-route__num{
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%;
  background: var(--blue-600); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-small);
}
.wf-route--lead .wf-route__num{ background: var(--orange-500); color: var(--ink-900); }
.wf-route h3{ font-size: var(--text-h4); }
.wf-route p{ font-size: var(--text-small); color: var(--text-secondary); }
.wf-route__tag{ margin-top: auto; padding-top: var(--space-2); }

/* ==========================================================================
   9. Document-type cards — the .industry-grid of things KuduDoc watches.
   ========================================================================== */
.wf-type__icon{
  width: 40px; height: 40px; border-radius: var(--radius-md);
  background: var(--blue-50); color: var(--blue-600);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-4);
}
.wf-type__icon svg{ width: 22px; height: 22px; }

/* ==========================================================================
   10. Feature-card variant — .feature-card zeroes its bottom padding so a
   product visual can bleed to the edge. Cards here that end in copy rather
   than a visual restore it.
   ========================================================================== */
.wf-feature--pad{ padding-bottom: var(--space-8); }

/* ==========================================================================
   11. Small screens
   ========================================================================== */

/* Below the .split breakpoint the media column goes full-width, so the 30px
   horizontal reveal travel from motion.css would poke past the right edge
   (body hides the overflow, but scrollWidth still exceeds the viewport).
   Keep the data-animate="left"/"right" tags and just travel vertically here.
   Page-local: this stylesheet is only loaded by workforce.html and
   renewals.html. */
@media (max-width: 900px){
  .js-motion .split__media[data-animate="left"],
  .js-motion .split__media[data-animate="right"]{ transform: translateY(26px); }
  .js-motion .split__media[data-animate="left"].in-view,
  .js-motion .split__media[data-animate="right"].in-view{ transform: none; }
}

@media (max-width: 560px){
  .wf-row{ align-items: flex-start; }
  .wf-kv{ flex-wrap: wrap; }
  .wf-kv__v{ text-align: left; }
  .wf-ladder__meta{ margin-left: 0; width: 100%; }
  .wf-pack__col{ padding: var(--space-5); }
}

/* Anchor offset so #auto-renewal doesn't land under the sticky nav */
#auto-renewal{ scroll-margin-top: calc(var(--nav-height) + var(--space-5)); }