/* Shadow AI — page-only styles for the edits in scripts/v47/pages/product--shadow-ai.py. */

/* Context: the gateway list stands where the repeated seal did. */
#af-mock .story-context{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:5vw;align-items:start}
#af-mock .story-context>p{max-width:none;font-size:clamp(24px,2.2vw,30px)}

#af-mock .sa-gate{margin:0;border:1px solid var(--line,#e2e5e9);border-radius:10px;background:#fff;overflow:hidden;box-shadow:0 18px 44px -32px #4a5a2e55}
#af-mock .sa-gate figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:15px 20px;border-bottom:1px solid var(--line,#e2e5e9);background:#fbfcf6}
#af-mock .sa-gate figcaption .eyebrow{margin:0}
#af-mock .sa-gate figcaption>span+span{font:10px 'IBM Plex Mono',monospace;letter-spacing:.09em;color:#8a927c}
#af-mock .sa-list{list-style:none;margin:0;padding:16px 20px 6px}
/* One row per agent: a solid rail for the ones with a way in, a broken one for the rest. */
#af-mock .sa-list li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;column-gap:12px;row-gap:4px;padding:9px 0 11px 14px;margin-bottom:8px;border-left:2px solid #c3d9a0}
#af-mock .sa-list li.is-out{border-left:2px dashed #f0b98c}
#af-mock .sa-list b{grid-column:1;grid-row:1;font:500 15px 'DM Sans',sans-serif;letter-spacing:-.1px}
#af-mock .sa-list .sa-tools{grid-column:2;grid-row:1;display:inline-flex;gap:7px}
#af-mock .sa-list .sa-tools img{width:16px;height:16px;object-fit:contain;display:block}
#af-mock .sa-list .sa-verdict{grid-column:3;grid-row:1;justify-self:end;font:9px 'IBM Plex Mono',monospace;letter-spacing:.11em;text-transform:uppercase;color:#627749;background:#f0f5e8;border-radius:3px;padding:4px 8px;white-space:nowrap}
#af-mock .sa-list .sa-note{grid-column:1/-1;grid-row:2;font:11px 'IBM Plex Mono',monospace;letter-spacing:.04em;color:#8a9179}
#af-mock .sa-list li.is-out b{color:#7d8290}
#af-mock .sa-list li.is-out .sa-verdict{color:#9b5936;background:#faf0e9}
#af-mock .sa-list li.is-out .sa-note{color:#b58a5f}
#af-mock .sa-gate>p{margin:0;padding:15px 20px;border-top:1px solid var(--line,#e2e5e9);background:#f8f8f4;font-size:13px;line-height:1.7;color:#5a6072;max-width:none}

/* Interactive example: the registry control runs warm, like the rest of this page. */
#af-mock .instrument-graphic{background:radial-gradient(ellipse at 40% 55%,#f3e2cd,transparent 66%)}
#af-mock .instrument-rings{border-color:#d9bf9e}
#af-mock .instrument-rings i{border-color:#e4cdb0}
#af-mock .instrument-graphic>span{color:#a8752f}

/* Capability cards: a shorter measure than the column allows. */
#af-mock .story-capabilities p{max-width:34ch}

@media(max-width:860px){
  #af-mock .story-context{grid-template-columns:1fr;gap:34px}
}

/* 02 / IN PRACTICE — the path a call takes at the gateway.
   The questions run down the left with real arrows between them; each answer that ends
   the call leaves to the right, with the concrete example that took that exit. */
#af-mock .gateflow{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
#af-mock .gf-head{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:18px 26px;border-bottom:1px solid var(--line);
  font:11px 'IBM Plex Mono',monospace;color:#8a927c;
}
#af-mock .gf-head .eyebrow{margin:0;font-size:11px;letter-spacing:.14em;color:#5f6a4b}
#af-mock .gf-grid{
  display:grid;grid-template-columns:minmax(0,420px) 58px minmax(0,1fr);
  column-gap:0;row-gap:30px;align-items:center;padding:30px 26px;
}
#af-mock .gf-r1{grid-row:1}
#af-mock .gf-r2{grid-row:2}
#af-mock .gf-r3{grid-row:3}
#af-mock .gf-r4{grid-row:4}
#af-mock .gf-r5{grid-row:5}
#af-mock .gf-node{
  grid-column:1;position:relative;display:grid;gap:6px;
  padding:17px 20px;border:1px solid var(--line);border-radius:10px;background:#fff;
}
#af-mock .gf-node small{font:9.5px 'IBM Plex Mono',monospace;letter-spacing:.16em;color:#8a927c}
#af-mock .gf-node b{font:500 15.5px/1.35 'DM Sans',sans-serif;color:#0a0a0a}
#af-mock .gf-node em{font:13px/1.55 'DM Sans',sans-serif;font-style:normal;color:#5c6358}
#af-mock .gf-node.is-start{border-color:#cbd8b5;background:linear-gradient(150deg,#f4f7ec,#fbf7e8)}
#af-mock .gf-node.is-end{border:1px solid #a9c37f;background:#f4f8ec}
#af-mock .gf-node.is-ask{background:#fbfbf8}
#af-mock .gf-node.is-ask b{font-family:Georgia,serif;font-size:17px}
#af-mock .gf-out,#af-mock .gf-on{
  font:10px 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#8a927c;
}
#af-mock .gf-out{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:#a8723f}
#af-mock .gf-on{color:#5f6a4b}
/* the arrow down to the next question */
#af-mock .gf-node:not(.gf-r1):before{
  content:'';position:absolute;left:34px;bottom:100%;height:30px;width:1px;background:#cbd2c0;
}
#af-mock .gf-node:not(.gf-r1):after{
  content:'';position:absolute;left:34px;bottom:100%;margin-bottom:-1px;margin-left:-3.5px;
  border:3.5px solid transparent;border-top-color:#b9c2ab;
}
/* the exits */
#af-mock .gf-exit{
  grid-column:3;position:relative;display:grid;gap:6px;
  padding:16px 20px;border:1px solid var(--line);border-radius:10px;background:#fff;
}
#af-mock .gf-exit.is-blocked{border-left:3px solid #f0b98c}
#af-mock .gf-exit.is-held{border-left:3px solid #f0ce86}
#af-mock .gf-exit:before{
  content:'';position:absolute;right:100%;top:50%;width:58px;height:1px;background:#cbd2c0;
}
#af-mock .gf-exit:after{
  content:'';position:absolute;right:100%;top:50%;margin-top:-3.5px;margin-right:-1px;
  border:3.5px solid transparent;border-left-color:#b9c2ab;
}
#af-mock .gf-tool{display:flex;align-items:center;gap:9px;min-width:0}
#af-mock .gf-tool img{flex:none;display:block;width:17px;height:17px;object-fit:contain;filter:grayscale(1);opacity:.5}
#af-mock .gf-tool em{font:11px 'IBM Plex Mono',monospace;font-style:normal;color:#8a927c}
#af-mock .gf-exit b{font:500 15px 'DM Sans',sans-serif;color:#0a0a0a}
#af-mock .gf-exit code{font:11px 'IBM Plex Mono',monospace;color:#8a927c;background:none;padding:0}
#af-mock .gf-exit p{margin:2px 0 0;font:13px/1.5 'DM Sans',sans-serif;color:#5c6358;max-width:62ch}
#af-mock .gf-verdict{
  justify-self:start;margin-top:3px;padding:6px 12px;border-radius:30px;border:1px solid var(--line);
  font:10px 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#4c5346;
}
#af-mock .gf-exit.is-blocked .gf-verdict{background:#fbeade;border-color:#eec9ae}
#af-mock .gf-exit.is-held .gf-verdict{background:#fbf3df;border-color:#ecd9ae}
#af-mock .gf-node.is-end .gf-verdict{background:#eef4e2;border-color:#cbd8b5}
#af-mock .gf-note{
  margin:0;padding:14px 26px;border-top:1px solid var(--line);
  font:11px 'IBM Plex Mono',monospace;color:#8a927c;
}

@media(max-width:1000px){
  #af-mock .gf-grid{grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);padding:24px 20px}
  #af-mock .gf-exit:before{width:34px}
}
@media(max-width:860px){
  #af-mock .gf-grid{grid-template-columns:minmax(0,1fr);row-gap:16px;padding:20px 18px}
  #af-mock .gf-node,#af-mock .gf-exit{grid-column:1}
  #af-mock .gf-node.gf-r1{grid-row:1}
  #af-mock .gf-node.gf-r2{grid-row:2}
  #af-mock .gf-exit.gf-r2{grid-row:3}
  #af-mock .gf-node.gf-r3{grid-row:4}
  #af-mock .gf-exit.gf-r3{grid-row:5}
  #af-mock .gf-node.gf-r4{grid-row:6}
  #af-mock .gf-exit.gf-r4{grid-row:7}
  #af-mock .gf-node.gf-r5{grid-row:8}
  #af-mock .gf-node:not(.gf-r1):before{height:16px}
  #af-mock .gf-exit{margin-left:24px}
  #af-mock .gf-exit:before,#af-mock .gf-exit:after{display:none}
  #af-mock .gf-out{position:static;transform:none;justify-self:start}
  #af-mock .gf-head,#af-mock .gf-note{padding-left:18px;padding-right:18px}
}