/* Solutions / HR & People (scripts/v47/pages/solutions--hr.py).
   Page accent: the palette's green, kept quiet — people pages should feel plain.
   Holds the redacted employee record and this page's readability tightening. */

/* --- Page character. ---------------------------------------------------------------- */
#af-mock .story-context-section{background:#f1f5ea}
#af-mock .story-context-section .section-head .eyebrow,
#af-mock .practice-section .section-head .eyebrow{color:#6d8a48}
#af-mock .story-capabilities article>span,
#af-mock .story-workflows summary>span{color:#7d9a53}

/* --- Readability. ------------------------------------------------------------------- */
#af-mock .story-context>p{font-size:26px;line-height:1.55;max-width:18.5em}
#af-mock .story-capabilities p,
#af-mock .story-workflows p,
#af-mock .faq p{max-width:62ch}
/* Three narrow columns made the seven headings ragged; a single ruled list reads
   straight down and gives each control its own line. */
#af-mock .story-capabilities{grid-template-columns:1fr;gap:0}
#af-mock .story-capabilities article{display:grid;grid-template-columns:52px minmax(0,26ch) minmax(0,1fr);
  column-gap:36px;align-items:start;padding:22px 0;border-top:1px solid #dfe5d3}
#af-mock .story-capabilities article>span{grid-column:1;padding-top:5px}
#af-mock .story-capabilities h3{grid-column:2;margin:0;font-size:20px;line-height:1.3}
#af-mock .story-capabilities p{grid-column:3;margin:0;padding-top:2px}
#af-mock .story-capabilities .cap-thread{grid-column:2/4;margin-top:10px}
#af-mock .story-capabilities article:hover{background:#f6f9f0}
@media(max-width:900px){
  #af-mock .story-capabilities article{grid-template-columns:38px minmax(0,1fr);column-gap:16px}
  #af-mock .story-capabilities h3{grid-column:2}
  #af-mock .story-capabilities p{grid-column:2;padding-top:10px}
  #af-mock .story-capabilities .cap-thread{grid-column:2}
}

/* --- The record: the same employee, with out-of-scope fields held back. -------------- */
#af-mock .story-context{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:6vw;align-items:start}
#af-mock .hr-record{margin:0;border:1px solid #d9e2c9;border-radius:8px;background:#fff;
  box-shadow:0 18px 44px #6d8a4814;overflow:hidden}
#af-mock .hr-record figcaption{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 18px;border-bottom:1px solid #e6ecdb;background:#f8fbf3;font-size:9px!important}
#af-mock .hr-record figcaption .eyebrow{margin:0;color:#6d8a48}
#af-mock .hr-system img{display:block;width:18px;height:18px;object-fit:contain}
#af-mock .hr-record dl{margin:0;padding:4px 18px 10px}
#af-mock .hr-field{display:grid;grid-template-columns:minmax(0,15ch) minmax(0,1fr);column-gap:18px;
  align-items:baseline;padding:11px 0;border-bottom:1px solid #f0f3e9}
#af-mock .hr-field:last-child{border-bottom:0}
#af-mock .hr-record dt{margin:0;font:10px 'IBM Plex Mono',monospace;letter-spacing:.09em;
  text-transform:uppercase;color:#8d9a7c}
#af-mock .hr-record dd{margin:0;font:400 14.5px 'DM Sans',sans-serif;color:#0a0a0a;
  display:flex;align-items:center;gap:10px;min-width:0}
#af-mock .hr-field[data-held=true] dt{color:#b0b3a7}
#af-mock .hr-field[data-held=true] dd i{display:block;width:104px;height:11px;border-radius:2px;
  background:repeating-linear-gradient(90deg,#d8dccf 0 9px,#eceee5 9px 12px)}
#af-mock .hr-field[data-held=true] dd span{font:9.5px 'IBM Plex Mono',monospace;letter-spacing:.08em;
  text-transform:uppercase;color:#a5a99a}
#af-mock .hr-note{margin:0;padding:14px 18px 16px;background:#f8fbf3;border-top:1px solid #e6ecdb;
  font-size:12px!important;line-height:1.7;color:#78806c;max-width:none}
@media(max-width:860px){
  #af-mock .story-context{grid-template-columns:1fr;gap:32px}
  #af-mock .story-context>p{max-width:none}
}
@media(max-width:480px){#af-mock .hr-field{grid-template-columns:1fr;row-gap:4px}}

/* --- 02 / In practice: the two sets a request has to sit in ----------------------- */
#af-mock .hr-venn-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;
  padding-bottom:16px;border-bottom:1px solid var(--line,#e2e5e9);margin-bottom:26px;
}
#af-mock .hr-venn-head .eyebrow{
  margin:0;padding:0;font:9px 'IBM Plex Mono',monospace;letter-spacing:.15em;color:#6f7a62;
}
#af-mock .hr-venn-sublabel{font:12px 'IBM Plex Mono',monospace;color:#6c7365}
#af-mock .hr-venn-body{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(320px,.98fr);
  gap:clamp(26px,3.4vw,54px);align-items:center;
}
#af-mock .hr-venn-body figure{margin:0}
#af-mock .hr-venn-art{display:block;width:100%;height:auto}
#af-mock .hr-venn-art text{font-family:'IBM Plex Mono',monospace}
#af-mock .hr-venn-set{font-size:11px;letter-spacing:.14em;fill:#4f5747;text-anchor:end}
#af-mock .hr-venn-sub{font-size:10.5px;fill:#8d9482;text-anchor:end}
#af-mock .hr-venn-right{text-anchor:start}
#af-mock .hr-venn-mid{font-size:11px;letter-spacing:.14em;fill:#3c4434;text-anchor:middle}
#af-mock .hr-venn-mid-sub{font-size:10.5px;letter-spacing:0;fill:#6f7a62}
#af-mock .hr-pin text{font-size:11px;letter-spacing:.06em;text-anchor:middle;fill:#fff}
#af-mock .hr-pin.is-allowed circle{fill:#6d8043;stroke:#56693a}
#af-mock .hr-pin.is-blocked circle{fill:#b0693a;stroke:#96562c}
#af-mock .hr-pin.is-held circle{fill:#c9a83f;stroke:#a88c2a}
#af-mock .hr-venn-body figcaption{
  margin-top:14px;font-size:12.5px;line-height:1.75;color:#6c7365;max-width:52ch;
}
#af-mock .hr-asks{list-style:none;margin:0;padding:0;border-top:1px solid var(--line,#e2e5e9)}
#af-mock .hr-asks li{
  display:grid;grid-template-columns:26px 15px minmax(0,1fr) auto;gap:6px 11px;
  align-items:center;padding:16px 0;border-bottom:1px solid #f0f1ea;
}
#af-mock .hr-key{
  width:22px;height:22px;border-radius:50%;display:grid;place-content:center;
  font:10px 'IBM Plex Mono',monospace;color:#fff;background:#6d8043;
}
#af-mock .hr-asks .is-blocked .hr-key{background:#b0693a}
#af-mock .hr-asks .is-held .hr-key{background:#c9a83f}
#af-mock .hr-asks img{display:block;width:15px;height:15px;object-fit:contain}
#af-mock .hr-asks b{font:400 14px/1.5 'DM Sans',sans-serif;color:#20241f}
#af-mock .hr-ask-verdict{
  justify-self:end;padding:4px 11px;border-radius:30px;white-space:nowrap;
  font:9.5px 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;
  background:#f1f6e5;border:1px solid #cfdcb4;color:#56693a;
}
#af-mock .hr-asks .is-blocked .hr-ask-verdict{background:#fbf1e8;border-color:#e7cbb2;color:#a05f33}
#af-mock .hr-asks .is-blocked b{color:#9a8574;text-decoration:line-through;text-decoration-color:#ddc3ad}
#af-mock .hr-asks .is-blocked img{filter:grayscale(1);opacity:.5}
#af-mock .hr-asks .is-held .hr-ask-verdict{background:#fdfaed;border-color:#e8dcae;color:#786213}
#af-mock .hr-asks em{
  grid-column:3/5;font-style:normal;font-size:12.5px;line-height:1.7;color:#6c7365;
}

@media(max-width:1000px){
  #af-mock .hr-venn-body{grid-template-columns:1fr;gap:26px}
  #af-mock .hr-venn-art{max-width:560px;margin:0 auto}
}
@media(max-width:600px){
  #af-mock .hr-asks li{grid-template-columns:26px 15px minmax(0,1fr);row-gap:8px}
  #af-mock .hr-ask-verdict{grid-column:3;justify-self:start}
  #af-mock .hr-asks em{grid-column:3}
}