/* Solutions / Operations (scripts/v47/pages/solutions--operations.py).
   Page accent: a cooler slate-green — operations is the plainest page of the set.
   Holds the four-stage relay strip and this page's readability tightening. */

/* --- Page character. ---------------------------------------------------------------- */
#af-mock .story-context-section{background:#f2f4ef}
#af-mock .story-context-section .section-head .eyebrow,
#af-mock .practice-section .section-head .eyebrow{color:#5d6b52}
#af-mock .story-capabilities article>span,
#af-mock .story-workflows summary>span{color:#6f7d62}

/* --- Readability. ------------------------------------------------------------------- */
#af-mock .story-context>p{font-size:26px;line-height:1.55;max-width:24em}
#af-mock .story-capabilities p,
#af-mock .story-workflows p,
#af-mock .faq p{max-width:62ch}
/* Seven stages of one process: a numbered run down the page rather than a ragged grid. */
#af-mock .story-capabilities{grid-template-columns:1fr;gap:0}
#af-mock .story-capabilities article{display:grid;grid-template-columns:56px minmax(0,28ch) minmax(0,1fr);
  column-gap:34px;align-items:start;padding:22px 0;border-top:1px solid #dde1d8}
#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}
@media(max-width:900px){
  #af-mock .story-capabilities article{grid-template-columns:40px minmax(0,1fr);column-gap:16px}
  #af-mock .story-capabilities h3,#af-mock .story-capabilities p{grid-column:2}
  #af-mock .story-capabilities p{padding-top:10px}
  #af-mock .story-capabilities .cap-thread{grid-column:2}
}

/* --- The relay: four stages across the width, joined by one thread. ------------------ */
#af-mock .story-context{grid-template-columns:minmax(0,1fr);gap:40px}
#af-mock .op-relay{margin:0;border:1px solid #dbe0d4;border-radius:8px;background:#fff;
  box-shadow:0 18px 44px #5d6b5214;overflow:hidden}
#af-mock .op-relay figcaption{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 20px;border-bottom:1px solid #e6eae0;background:#f8faf5;font-size:9px!important}
#af-mock .op-relay figcaption .eyebrow{margin:0;color:#5d6b52}
#af-mock .op-actor{font:10px 'IBM Plex Mono',monospace;letter-spacing:.06em;color:#8d958a}
#af-mock .op-relay ol{list-style:none;margin:0;padding:26px 20px 8px;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 18px}
#af-mock .op-relay li{position:relative;padding:22px 0 26px}
/* one thread running behind the four marks, level with their centres */
#af-mock .op-relay li:before{content:'';position:absolute;left:0;right:-18px;top:36px;height:1px;
  background:#cfd8c6}
#af-mock .op-relay li:last-child:before{display:none}
#af-mock .op-mark{position:relative;z-index:1;display:grid;place-items:center;width:28px;height:28px;
  border-radius:50%;border:1px solid #d3dbc9;background:#fff}
#af-mock .op-mark img{display:block;width:16px;height:16px;object-fit:contain}
#af-mock .op-step{position:absolute;top:0;left:0;font:10px 'IBM Plex Mono',monospace;
  letter-spacing:.1em;color:#a0a897}
#af-mock .op-relay b{display:block;margin:14px 0 5px;font:500 15px/1.35 'DM Sans',sans-serif;color:#0a0a0a}
#af-mock .op-note{font:11px/1.65 'IBM Plex Mono',monospace;color:#8e968a}
#af-mock .op-relay li[data-state=hold] .op-mark{border-color:#e3c98b;box-shadow:0 0 0 4px #f5eddb}
#af-mock .op-relay li[data-state=hold] .op-note{color:#96742a}
/* the thread running into a checkpoint is dashed, not solid */
#af-mock .op-relay li:has(+ li[data-state=hold]):before{background:repeating-linear-gradient(90deg,#dcc48c 0 5px,transparent 5px 10px)}
#af-mock .op-relay-note{margin:0;padding:16px 20px 18px;border-top:1px solid #e6eae0;background:#f8faf5;
  font-size:12px!important;line-height:1.7;color:#7f877b;max-width:none}
@media(max-width:820px){
  #af-mock .op-relay ol{grid-template-columns:1fr 1fr;gap:4px 18px}
  #af-mock .op-relay li:nth-child(2):before{right:0}
}
@media(max-width:520px){
  #af-mock .op-relay ol{grid-template-columns:1fr}
  #af-mock .op-relay li:before{display:none}
}

/* --- 02 / In practice: the work order, field by field ----------------------------- */
#af-mock .op-order{
  margin:0;border:1px solid var(--line,#e2e5e9);border-radius:10px;background:#fff;
  overflow:hidden;box-shadow:0 18px 44px #5a60720f;
}
#af-mock .op-order>figcaption{
  display:grid;gap:8px;padding:20px 28px;border-bottom:1px solid var(--line,#e2e5e9);
  background:linear-gradient(100deg,#f2f6e8,#fcfbf5);
}
#af-mock .op-order>figcaption .eyebrow{
  margin:0;padding:0;font:9px 'IBM Plex Mono',monospace;letter-spacing:.16em;color:#6f7a62;
}
#af-mock .op-order>figcaption b{font:23px/1.25 Georgia,serif;letter-spacing:-.45px;color:#0a0a0a}
#af-mock .op-order-who{font:11px 'IBM Plex Mono',monospace;color:#8d9482}
#af-mock .op-order-body{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.78fr);
  gap:clamp(24px,3.2vw,52px);padding:6px 28px 24px;
}
#af-mock .op-fields{margin:0}
#af-mock .op-fields>div{
  display:grid;grid-template-columns:160px minmax(0,1fr);gap:5px 20px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid #f2f3ec;
}
#af-mock .op-fields>div:last-child{border-bottom:0}
#af-mock .op-fields dt{
  font:9px 'IBM Plex Mono',monospace;letter-spacing:.13em;text-transform:uppercase;color:#8d9482;
}
#af-mock .op-fields dd{margin:0;font-size:14px;line-height:1.55;color:#20241f}
#af-mock .op-fields dd i{font-style:normal;color:#a3a99a;padding:0 5px}
#af-mock .op-fields dd b{font-weight:500}
#af-mock .op-field-note{
  grid-column:2;display:inline-flex;align-items:center;gap:8px;
  font:9.5px 'IBM Plex Mono',monospace;letter-spacing:.07em;text-transform:uppercase;color:#56693a;
}
#af-mock .op-field-note img{display:block;width:14px;height:14px;object-fit:contain}
#af-mock .op-fields .is-locked dd{color:#9a8574}
#af-mock .op-fields .is-locked dd s{color:#a98d7a;text-decoration-color:#d8bda8}
#af-mock .op-fields .is-locked .op-field-note{color:#a05f33}
#af-mock .op-fields .is-locked img{filter:grayscale(1);opacity:.5}
#af-mock .op-bar{
  display:inline-block;width:150px;height:13px;vertical-align:-2px;margin-right:6px;
  border-radius:2px;
  background:repeating-linear-gradient(135deg,#efe6dd 0 5px,#e4d7c9 5px 10px);
}
#af-mock .op-bar-short{width:76px}
#af-mock .op-fields .is-held{background:#fdfaed;border-radius:6px;padding-left:14px;padding-right:14px;margin-top:6px}
#af-mock .op-fields .is-held .op-field-note{color:#786213}
#af-mock .op-order-side{padding-top:18px;border-left:1px solid #f0f1ea;padding-left:clamp(0px,2vw,30px)}
#af-mock .op-order-side h3{margin:0 0 12px;font:21px/1.3 Georgia,serif;letter-spacing:-.4px;max-width:22ch}
#af-mock .op-order-side>p{margin:0 0 20px;font-size:13.5px;line-height:1.8;color:#5a6072}
#af-mock .op-order-meta{margin:0;border-top:1px solid var(--line,#e2e5e9)}
#af-mock .op-order-meta>div{padding:12px 0;border-bottom:1px solid #f0f1ea}
#af-mock .op-order-meta dt{
  font:9px 'IBM Plex Mono',monospace;letter-spacing:.13em;text-transform:uppercase;
  color:#9aa191;margin-bottom:5px;
}
#af-mock .op-order-meta dd{margin:0;font-size:12.5px;line-height:1.6;color:#4a5048}

@media(max-width:1000px){
  #af-mock .op-order-body{grid-template-columns:1fr;gap:10px;padding:6px 22px 22px}
  #af-mock .op-order-side{border-left:0;padding-left:0;border-top:1px solid #f0f1ea;padding-top:20px}
  #af-mock .op-order>figcaption{padding:18px 22px}
}
@media(max-width:620px){
  #af-mock .op-fields>div{grid-template-columns:1fr;row-gap:6px}
  #af-mock .op-field-note{grid-column:1}
  #af-mock .op-bar{width:120px}
}