/* Solutions / Customer support (scripts/v47/pages/solutions--customer-support.py).
   Page accent: the palette's peach. Holds the ticket queue and this page's readability
   tightening — the context column runs full width here, with the queue beneath it. */

/* --- Page character. ---------------------------------------------------------------- */
#af-mock .story-context-section{background:#fcf4ed}
#af-mock .story-context-section .section-head .eyebrow,
#af-mock .practice-section .section-head .eyebrow{color:#b0713f}
#af-mock .story-capabilities article>span,
#af-mock .story-workflows summary>span{color:#c08351}

/* The hero's `inward` ripple lights only the right of its host; a shorter, wider frame
   keeps the lit band in proportion instead of leaving a tall empty half. */
#af-mock .story-art .art-window{height:390px}
@media(min-width:1500px){#af-mock .story-art .art-window{height:430px}}

/* --- 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}
#af-mock .story-capabilities{grid-template-columns:repeat(2,1fr);gap:0 70px}
#af-mock .story-capabilities article{padding:26px 0 22px}
#af-mock .story-capabilities h3{font-size:22px;line-height:1.3;margin:16px 0 12px}
@media(max-width:860px){#af-mock .story-capabilities{grid-template-columns:1fr}}

/* --- The queue: the lead paragraph above, the illustrative queue across the width. --- */
#af-mock .story-context{grid-template-columns:minmax(0,1fr);gap:38px}
#af-mock .cs-queue{margin:0;border:1px solid #ecdccd;border-radius:8px;background:#fff;
  box-shadow:0 18px 44px #b0713f14;overflow:hidden}
#af-mock .cs-queue figcaption{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 20px;border-bottom:1px solid #f1e4d8;background:#fdf8f3;font-size:9px!important}
#af-mock .cs-queue figcaption .eyebrow{margin:0;color:#b0713f}
#af-mock .cs-systems{display:flex;align-items:center;gap:10px;color:#2b2b2b}
#af-mock .cs-systems img{display:block;width:17px;height:17px;object-fit:contain}
#af-mock .cs-queue ol{list-style:none;margin:0;padding:0}
#af-mock .cs-queue li{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,16em) auto;
  column-gap:22px;align-items:baseline;padding:14px 20px;border-bottom:1px solid #f6efe8}
#af-mock .cs-queue li:last-child{border-bottom:0}
#af-mock .cs-ref{font:11px 'IBM Plex Mono',monospace;color:#b9ada2}
#af-mock .cs-ref:before{content:'#'}
#af-mock .cs-queue b{font:500 14.5px 'DM Sans',sans-serif;color:#0a0a0a}
#af-mock .cs-detail{font:11.5px/1.6 'IBM Plex Mono',monospace;color:#9a8e84}
#af-mock .cs-queue em{font-style:normal;justify-self:end;white-space:nowrap;padding:5px 11px;border-radius:30px;
  font:9.5px 'IBM Plex Mono',monospace;letter-spacing:.09em;text-transform:uppercase;
  border:1px solid #d8e2c6;background:#f4f8ea;color:#5d7040}
#af-mock .cs-queue li[data-state=hold] em{border-color:#ecdcae;background:#fbf4e1;color:#96742a}
#af-mock .cs-queue li[data-state=draft] em{border-color:#ded9e6;background:#f6f4f9;color:#6b6480}
#af-mock .cs-queue li[data-state=out] em{border-color:#ecd2c1;background:#fbefe7;color:#a85f2e}
#af-mock .cs-queue li[data-state=out]{background:#fdfaf8}
#af-mock .cs-queue li[data-state=out] b,#af-mock .cs-queue li[data-state=out] .cs-detail{color:#b3a79e}
#af-mock .cs-note{margin:0;padding:15px 20px 17px;background:#fdf8f3;border-top:1px solid #f1e4d8;
  font-size:12px!important;line-height:1.7;color:#8b8079;max-width:none}
@media(max-width:820px){
  #af-mock .cs-queue li{grid-template-columns:auto minmax(0,1fr);row-gap:5px}
  #af-mock .cs-detail{grid-column:2}
  #af-mock .cs-queue em{grid-column:2;justify-self:start}
}

/* --- 02 / In practice: the agent's outbox ----------------------------------------- */
#af-mock .cs-outbox{
  margin:0;border:1px solid var(--line,#e2e5e9);border-radius:10px;background:#fff;
  overflow:hidden;box-shadow:0 18px 44px #5a60720f;
}
#af-mock .cs-outbox>figcaption{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;
  padding:16px 26px;border-bottom:1px solid var(--line,#e2e5e9);
  background:linear-gradient(100deg,#fdf1e6,#fdfaf6);
}
#af-mock .cs-outbox>figcaption .eyebrow{
  margin:0;padding:0;font:9px 'IBM Plex Mono',monospace;letter-spacing:.15em;color:#96643c;
}
#af-mock .cs-outbox-sub{font:11px 'IBM Plex Mono',monospace;color:#8d9482}
#af-mock .cs-outbox ol{list-style:none;margin:0;padding:0}
#af-mock .cs-outbox ol>li{
  display:grid;grid-template-columns:132px minmax(0,1fr);gap:clamp(18px,2.4vw,34px);
  padding:22px 26px;border-bottom:1px solid #f2f3ec;
}
#af-mock .cs-outbox ol>li:last-child{border-bottom:0}
#af-mock .cs-tray{
  border-right:1px solid #f0f1ea;padding-right:14px;text-align:right;
}
#af-mock .cs-tray b{
  display:block;font:10px 'IBM Plex Mono',monospace;letter-spacing:.14em;
  text-transform:uppercase;color:#56693a;
}
#af-mock .cs-tray span{
  display:block;margin-top:6px;font:11px 'IBM Plex Mono',monospace;color:#a0a796;
}
#af-mock .cs-to{
  margin:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:13px;color:#4a5048;
}
#af-mock .cs-to>span{
  font:9px 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#a0a796;
}
#af-mock .cs-to em{
  display:inline-flex;align-items:center;gap:7px;margin-left:auto;font-style:normal;
  font:10px 'IBM Plex Mono',monospace;letter-spacing:.06em;color:#9aa191;
}
#af-mock .cs-to img{display:block;width:15px;height:15px;object-fit:contain}
#af-mock .cs-subject{
  margin:10px 0 8px;font:19px/1.35 Georgia,serif;letter-spacing:-.3px;color:#0a0a0a;
}
#af-mock .cs-body{margin:0;font-size:13.5px;line-height:1.75;color:#5a6072;max-width:74ch}
#af-mock .cs-state{
  margin:12px 0 0;font:9.5px/1.6 'IBM Plex Mono',monospace;letter-spacing:.08em;
  text-transform:uppercase;color:#56693a;
}
#af-mock .cs-outbox .is-stopped{
  background:repeating-linear-gradient(135deg,#fdf8f3 0 8px,#faeee4 8px 16px);
}
#af-mock .cs-outbox .is-stopped .cs-tray b,#af-mock .cs-outbox .is-stopped .cs-state{color:#a05f33}
#af-mock .cs-outbox .is-stopped .cs-subject{color:#8a6a55}
#af-mock .cs-outbox .is-stopped img{filter:grayscale(1);opacity:.5}
#af-mock .cs-outbox .is-waiting{background:#fdfaed}
#af-mock .cs-outbox .is-waiting .cs-tray b,#af-mock .cs-outbox .is-waiting .cs-state{color:#786213}
#af-mock .cs-outbox-note{
  margin:0;padding:18px 26px 20px;border-top:1px solid var(--line,#e2e5e9);background:#fdfaf6;
  font-size:13px;line-height:1.8;color:#5a6072;max-width:82ch;
}

@media(max-width:820px){
  #af-mock .cs-outbox ol>li{grid-template-columns:1fr;gap:12px;padding:20px 20px}
  #af-mock .cs-tray{
    border-right:0;border-bottom:1px solid #f0f1ea;padding:0 0 10px;text-align:left;
    display:flex;align-items:baseline;gap:12px;
  }
  #af-mock .cs-tray span{margin-top:0}
  #af-mock .cs-to em{margin-left:0}
}