/* /solutions/insurance — page-specific styles.
   Accent: the palette's amber. The context section carries this page's own illustration,
   a claims pipeline on a rail (scripts/v47/pages/solutions--insurance.py). */

#af-mock .story-context{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:5vw;align-items:center}
#af-mock .story-context > p{font-size:27px;line-height:1.5;max-width:20em}
#af-mock .story-context-section{background:#faf6ec}

#af-mock .ins-pipeline{
  margin:0;background:#fff;border:1px solid #e8dfcb;border-radius:10px;
  padding:20px 24px 18px;box-shadow:0 18px 40px -34px #8a6224;
}
#af-mock .ins-pipeline-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
#af-mock .ins-pipeline-head .eyebrow{margin:0;font:9px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;color:#a08a64}
#af-mock .ins-pipeline-src{display:flex;align-items:center;gap:7px;font:9px 'IBM Plex Mono',monospace;letter-spacing:.06em;color:#ab9878}
#af-mock .ins-pipeline-src img{display:block;width:15px;height:15px;object-fit:contain}

/* The rail: one continuous line down the left, solid while the agent works, dashed once
   the work has passed to a person. */
#af-mock .ins-pipeline-stages{list-style:none;margin:16px 0 0;padding:0}
#af-mock .ins-pipeline-stages li{
  display:grid;grid-template-columns:24px 30px minmax(0,1fr) auto;column-gap:12px;row-gap:1px;
  align-items:baseline;padding:10px 0;position:relative;
}
#af-mock .ins-pipeline-stages li::before{   /* rail segment */
  content:'';position:absolute;left:6px;top:0;bottom:0;width:1px;background:#e3c9a0;
}
#af-mock .ins-pipeline-stages li:first-child::before{top:14px}
#af-mock .ins-pipeline-stages li:last-child::before{bottom:auto;height:14px}
#af-mock .ins-pipeline-stages li::after{    /* rail node */
  content:'';position:absolute;left:2px;top:12px;width:9px;height:9px;border-radius:50%;
  background:#e0a95c;border:1px solid #cf9241;
}
#af-mock .ins-pipeline-stages li[data-actor=person]::before{
  background:repeating-linear-gradient(#d9cdb8 0 4px,transparent 4px 8px);
}
#af-mock .ins-pipeline-stages li[data-actor=person]::after{background:#fff;border-color:#2b2b2b}
#af-mock .ins-pipeline-stages li b{grid-column:2;font:10px 'IBM Plex Mono',monospace;color:#b29a72;font-weight:400}
#af-mock .ins-pipeline-stages li span{grid-column:3;font:15px 'DM Sans',sans-serif;color:#26221c}
#af-mock .ins-pipeline-stages li i{grid-column:3;grid-row:2;font:normal 9px 'IBM Plex Mono',monospace;letter-spacing:.07em;color:#a7987e}
#af-mock .ins-pipeline-stages li em{
  grid-column:4;grid-row:1/3;align-self:center;font:normal 9px 'IBM Plex Mono',monospace;
  letter-spacing:.1em;padding:6px 11px;border-radius:30px;white-space:nowrap;
  background:#fbeed7;color:#8a6224;border:1px solid #f0d8ac;
}
#af-mock .ins-pipeline-stages li[data-actor=person] em{background:#1d1d1a;color:#f4efe4;border-color:#1d1d1a}

#af-mock .ins-pipeline-foot{
  margin:16px 0 0;padding-top:14px;border-top:1px solid #efe6d5;
  font:11px/1.75 'IBM Plex Mono',monospace;color:#8a7c64;max-width:46ch;
}

/* "What changes" and the workflow list: shorter measure, an amber thread. */
#af-mock .story-capabilities h3{font-size:22px;line-height:1.3}
#af-mock .story-capabilities article:hover .cap-thread i{background:#cf9241}
#af-mock .story-workflows p{max-width:52ch}

@media(max-width:900px){
  #af-mock .story-context{grid-template-columns:1fr;gap:34px}
  #af-mock .story-context > p{font-size:24px;max-width:none}
}
@media(max-width:560px){
  #af-mock .ins-pipeline-stages li{grid-template-columns:24px 30px minmax(0,1fr)}
  #af-mock .ins-pipeline-stages li em{grid-column:3;grid-row:3;justify-self:start;margin-top:6px}
}

/* "In practice": the claims agent's outbox — what leaves, what never gets written, and
   what waits for the adjuster (scripts/v47/pages/solutions--insurance.py). */
#af-mock .ins-outbox{border:1px solid #e2e5e9;border-radius:12px;background:#fff;overflow:hidden}
#af-mock .ins-outbox-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding:17px 26px;border-bottom:1px solid #e2e5e9;
  font:11px 'IBM Plex Mono',monospace;letter-spacing:.04em;color:#8a927c;
}
#af-mock .ins-outbox-head .eyebrow{margin:0;font-size:11px;letter-spacing:.14em;color:#6b4a2a}

#af-mock .ins-msgs{list-style:none;margin:0;padding:0}
#af-mock .ins-msgs li{
  display:grid;grid-template-columns:96px minmax(0,1fr) auto;column-gap:26px;align-items:start;
  padding:22px 26px;border-bottom:1px solid #eef0ec;
}
#af-mock .ins-msgs li:last-child{border-bottom:0}
#af-mock .ins-msgs li[data-state=blocked]{background:#fdfaf7}
#af-mock .ins-msgs li[data-state=held]{background:#fdfbf1}
#af-mock .ins-stamp{
  justify-self:start;margin-top:4px;transform:rotate(-4deg);
  font:9.5px 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid #b9cf94;color:#3f5d1e;background:#eef4e3;border-radius:3px;padding:7px 10px;
}
#af-mock .ins-msgs li[data-state=blocked] .ins-stamp{border-color:#e3b59a;color:#8a4420;background:#f8e3d6;transform:rotate(3deg)}
#af-mock .ins-msgs li[data-state=held] .ins-stamp{border-color:#e2d290;color:#6e5a12;background:#f6efcf;transform:rotate(-2deg)}
#af-mock .ins-to{display:block;font:11px 'IBM Plex Mono',monospace;letter-spacing:.05em;color:#8d9382}
#af-mock .ins-to b{color:#4a5040;font-weight:400}
#af-mock .ins-msg > b{display:block;margin:8px 0 0;font:500 17px/1.4 'DM Sans',sans-serif;color:#0a0a0a}
#af-mock .ins-msgs li[data-state=blocked] .ins-msg > b{color:#6a6055;text-decoration:line-through;text-decoration-color:#d9c6b6}
#af-mock .ins-msg p{margin:8px 0 0;max-width:68ch;font-size:13.5px;line-height:1.7;color:#69707c}
#af-mock .ins-sign{
  display:flex;align-items:flex-end;gap:12px;margin-top:14px;
  font:9.5px 'IBM Plex Mono',monospace;letter-spacing:.14em;color:#9a9378;
}
#af-mock .ins-sign i{display:block;width:190px;border-bottom:1px solid #c9bd92}
#af-mock .ins-tool{
  justify-self:end;display:inline-flex;align-items:center;gap:7px;margin-top:4px;
  padding:5px 11px;border:1px solid #e2e5e9;border-radius:30px;background:#fff;white-space:nowrap;
  font:10px 'IBM Plex Mono',monospace;letter-spacing:.06em;color:#8b9080;
}
#af-mock .ins-tool img{display:block;width:15px;height:15px;object-fit:contain}
#af-mock .ins-outbox-foot{
  margin:0;padding:14px 26px;border-top:1px solid #e2e5e9;background:#fbfbf8;
  font:10.5px/1.6 'IBM Plex Mono',monospace;color:#9a9c93;
}

@media(max-width:860px){
  #af-mock .ins-msgs li{grid-template-columns:minmax(0,1fr);row-gap:10px;padding:18px}
  #af-mock .ins-tool{justify-self:start}
  #af-mock .ins-sign i{width:120px}
}