/* Coding Agents (scripts/v47/pages/product--coding-agents.py).
   The broker panel at the head of "what changes" and the Fabriq mark on the org-control
   example. #af-mock outranks the handoff's .af-scope rules. */

#af-mock .broker-panel{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:0;
  margin:0 0 50px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fbfcf8;
}
#af-mock .broker-panel .eyebrow{display:block;margin:0 0 16px;font-size:9.5px;color:#8a927c}
#af-mock .broker-panel > div{padding:26px 28px}
#af-mock .broker-shell{background:#12140f;border-right:1px solid var(--line)}
#af-mock .broker-shell .eyebrow{color:#8d957f}
#af-mock .broker-shell pre{margin:0;padding:0;background:none;border:0;overflow-x:auto}
#af-mock .broker-shell code{
  display:block;font:12px/2.05 'IBM Plex Mono',monospace;color:#cdd5c2;background:none;padding:0;
}
#af-mock .broker-shell .ln{display:block;white-space:pre}
#af-mock .broker-shell .ln b{color:#8ba35c;font-weight:400;margin-right:8px}
#af-mock .broker-shell .ln.dim{color:#79806f}
#af-mock .broker-shell .ln.ok{color:#c3d9a0}
#af-mock .broker-shell .ln.ok:before{content:'✓ ';color:#8ba35c}
#af-mock .broker-shell p{margin:22px 0 0;max-width:46ch;font-size:12.5px;line-height:1.75;color:#9aa28d}

#af-mock .broker-sessions ul{list-style:none;margin:0;padding:0}
#af-mock .broker-sessions li{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;
  column-gap:14px;row-gap:4px;padding:13px 0;border-top:1px solid var(--line);
}
#af-mock .broker-sessions li:first-child{border-top:0;padding-top:0}
#af-mock .broker-sessions code{
  grid-column:1;font:12px 'IBM Plex Mono',monospace;color:#0a0a0a;background:none;padding:0;
}
#af-mock .broker-sessions li > span{grid-column:1;font-size:13px;color:var(--muted)}
#af-mock .broker-sessions em{
  grid-column:2;grid-row:1;justify-self:end;font-style:normal;
  font:9px 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 10px;border-radius:30px;border:1px solid #cbd8b5;background:#f3f7ea;color:#5d7338;
}
#af-mock .broker-sessions .is-closed em{border-color:#e2e5e9;background:#f6f6f4;color:#8b8f99}
#af-mock .broker-sessions time{
  grid-column:2;grid-row:2;justify-self:end;font:10px 'IBM Plex Mono',monospace;color:#98a087;
}
#af-mock .broker-sessions p{margin:20px 0 0;max-width:42ch;font-size:12px;line-height:1.75;color:var(--muted)}

/* Org control example: Fabriq's own mark instead of the italic glyph. */
#af-mock .instrument-graphic .broker-mark{
  z-index:1;display:grid;justify-items:center;gap:10px;width:120px;padding:22px 0;font-size:0;
  border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 14px 44px #92a85f22;
}
#af-mock .instrument-graphic .broker-mark img{display:block;width:46px;height:46px}
#af-mock .instrument-graphic .broker-mark small{
  font:9px 'IBM Plex Mono',monospace;letter-spacing:.16em;color:#6b7458;
}
#af-mock .instrument-control[data-disabled=true] .broker-mark{border-style:dashed;box-shadow:none}
#af-mock .instrument-control[data-disabled=true] .broker-mark img{filter:grayscale(1);opacity:.3}

/* Readability: the answers here are the longest on the site. */
#af-mock .faq p{max-width:62ch}

@media(max-width:860px){
  #af-mock .broker-panel{grid-template-columns:minmax(0,1fr)}
  #af-mock .broker-shell{border-right:0;border-bottom:1px solid var(--line)}
}

/* 02 / IN PRACTICE — one session, turn by turn.
   The developer's line, then the broker's answer with the verdict in the margin:
   a transcript, not a table, and deliberately paper rather than another dark shell. */
#af-mock .loop-log{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
#af-mock .loop-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 .loop-head .eyebrow{margin:0;font-size:11px;letter-spacing:.14em;color:#5f6a4b}
#af-mock .loop-turns{list-style:none;margin:0;padding:0}
#af-mock .loop-turns li{
  display:grid;grid-template-columns:96px minmax(0,1fr) auto;
  column-gap:22px;align-items:start;padding:16px 26px;border-top:1px solid var(--line);
}
#af-mock .loop-turns li:first-child{border-top:0}
#af-mock .loop-who{
  font:11px 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;
  color:#a0a79a;padding-top:4px;
}
#af-mock .loop-turns li.is-ask{background:#fbfbf8}
#af-mock .loop-turns li.is-ask .loop-who{color:#5f6a4b}
#af-mock .loop-turns q{
  quotes:'\201C' '\201D';font:16px/1.55 Georgia,serif;color:#0a0a0a;
}
#af-mock .loop-body{min-width:0;display:grid;gap:7px}
#af-mock .loop-call{display:flex;align-items:center;gap:10px;min-width:0}
#af-mock .loop-call img{flex:none;display:block;width:18px;height:18px;object-fit:contain}
#af-mock .loop-turns li.is-blocked .loop-call img{filter:grayscale(1);opacity:.45}
#af-mock .loop-call .loop-generic{
  flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:4px;
  border:1px solid var(--line);background:#f6f6f4;color:#8a927c;
  font:10px 'IBM Plex Mono',monospace;font-style:normal;
}
#af-mock .loop-call code{
  font:13px 'IBM Plex Mono',monospace;color:#1d211c;background:none;padding:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#af-mock .loop-body p{margin:0;font:13px/1.55 'DM Sans',sans-serif;color:#5c6358;max-width:78ch}
#af-mock .loop-verdict{
  justify-self:end;margin-top:2px;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 .loop-turns li.is-allowed{border-left:3px solid #c3d9a0}
#af-mock .loop-turns li.is-blocked{border-left:3px solid #f0b98c}
#af-mock .loop-turns li.is-held{border-left:3px solid #f0ce86}
#af-mock .loop-turns li.is-allowed .loop-verdict{background:#eef4e2;border-color:#cbd8b5}
#af-mock .loop-turns li.is-blocked .loop-verdict{background:#fbeade;border-color:#eec9ae}
#af-mock .loop-turns li.is-held .loop-verdict{background:#fbf3df;border-color:#ecd9ae}
#af-mock .loop-note{
  margin:0;padding:14px 26px;border-top:1px solid var(--line);
  font:11px 'IBM Plex Mono',monospace;color:#8a927c;
}

@media(max-width:860px){
  #af-mock .loop-turns li{grid-template-columns:minmax(0,1fr) auto;column-gap:14px;row-gap:9px;padding:16px 18px}
  #af-mock .loop-who{grid-column:1;padding-top:0}
  #af-mock .loop-body{grid-column:1/-1}
  #af-mock .loop-verdict{grid-column:2;grid-row:1;margin-top:-2px}
  #af-mock .loop-head,#af-mock .loop-note{padding-left:18px;padding-right:18px}
}