/* Internal Agents (scripts/v47/pages/product--internal-agents.py).
   The roster of copilots already running inside, and real tool logos in the
   policy matrix head. #af-mock outranks the handoff's .af-scope rules. */

/* The context reads as a statement over a roster, not a column beside a seal. */
#af-mock .story-context{grid-template-columns:minmax(0,1fr);gap:40px}

#af-mock .shadow-roster{border-top:1px solid var(--line);padding-top:18px}
#af-mock .shadow-roster .roster-head,
#af-mock .shadow-roster .roster-row{
  display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr) minmax(0,190px) minmax(0,210px);
  align-items:center;gap:20px;
}
#af-mock .shadow-roster .roster-head{
  padding-bottom:12px;font:9px 'IBM Plex Mono',monospace;letter-spacing:.14em;color:#98a087;
}
#af-mock .shadow-roster ul{list-style:none;margin:0;padding:0}
#af-mock .shadow-roster .roster-row{
  padding:15px 0;border-top:1px solid var(--line);
}
#af-mock .shadow-roster code{font:12px 'IBM Plex Mono',monospace;color:#3f4a33;background:none;padding:0}
#af-mock .shadow-roster .roster-doing{font:15px 'DM Sans',sans-serif;color:#0a0a0a}
#af-mock .shadow-roster .roster-tool{display:flex;align-items:center;gap:9px;min-width:0;font-size:14px}
#af-mock .shadow-roster .roster-tool img{flex:none;display:block;width:17px;height:17px;object-fit:contain}
#af-mock .shadow-roster .roster-tool span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#af-mock .shadow-roster em{
  font:11px 'IBM Plex Mono',monospace;font-style:normal;letter-spacing:.04em;color:#b08a5f;
  justify-self:start;padding:6px 11px;border:1px dashed #e0c9a8;border-radius:30px;background:#fdf8f1;
}
#af-mock .shadow-roster .is-owned em{color:#5d7338;border-style:solid;border-color:#cbd8b5;background:#f3f7ea}
#af-mock .shadow-roster .is-owned code{color:#0a0a0a}
#af-mock .shadow-roster .roster-note{
  margin:18px 0 0;max-width:62ch;font:11px/1.7 'IBM Plex Mono',monospace;color:var(--muted);
}

/* Policy matrix: the tools it names, with their own logos, no tile. */
#af-mock .access-matrix thead .mx-tool{display:inline-flex;flex-direction:column;align-items:center;gap:9px}
#af-mock .access-matrix thead .mx-tool i{
  display:grid;place-items:center;width:30px;height:30px;font-style:normal;
}
#af-mock .access-matrix thead .mx-tool i img{display:block;width:24px;height:24px;object-fit:contain}
#af-mock .access-matrix thead .mx-tool i.mx-generic{
  background:#ffffff12;border:1px solid #ffffff28;color:#c3d9a0;
  font:9px 'IBM Plex Mono',monospace;letter-spacing:.06em;
}

@media(max-width:1000px){
  #af-mock .shadow-roster .roster-head,
  #af-mock .shadow-roster .roster-row{grid-template-columns:minmax(0,160px) minmax(0,1fr) minmax(0,150px);gap:14px}
  #af-mock .shadow-roster .roster-head span:last-child,
  #af-mock .shadow-roster em{grid-column:2/-1;justify-self:start}
  #af-mock .shadow-roster .roster-head span:last-child{padding-left:0}
}
@media(max-width:700px){
  #af-mock .shadow-roster .roster-head{display:none}
  #af-mock .shadow-roster .roster-row{grid-template-columns:minmax(0,1fr);gap:7px}
  #af-mock .shadow-roster em{grid-column:1}
}

/* Readability: a comfortable measure for the answers. */
#af-mock .faq p{max-width:62ch}

/* 02 / IN PRACTICE — one employee's working day.
   A timeline down the page: the hour, a mark on the spine, and the card for what
   the agent did at that hour and how it came out. */
#af-mock .workday{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
#af-mock .workday-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 .workday-head .eyebrow{margin:0;font-size:11px;letter-spacing:.14em;color:#5f6a4b}
#af-mock .workday-line{list-style:none;margin:0;padding:22px 26px 26px}
#af-mock .workday-line li{
  position:relative;display:grid;grid-template-columns:72px 30px minmax(0,1fr);
  align-items:start;padding:0 0 14px;
}
#af-mock .workday-line li:last-child{padding-bottom:0}
/* the spine runs through the mark column */
#af-mock .workday-line li:before{
  content:'';position:absolute;left:85px;top:14px;bottom:0;width:1px;background:#e2e5e9;
}
#af-mock .workday-line li:last-child:before{display:none}
#af-mock .workday-line time{
  padding-top:14px;font:12px 'IBM Plex Mono',monospace;color:#8a927c;letter-spacing:.04em;
}
#af-mock .workday-line .wd-mark{
  position:relative;z-index:1;justify-self:center;margin-top:16px;
  width:11px;height:11px;border-radius:50%;border:1px solid #c8cdbb;background:#fff;
}
#af-mock .workday-line li.is-allowed .wd-mark{background:#c3d9a0;border-color:#a9c37f}
#af-mock .workday-line li.is-blocked .wd-mark{background:#f0b98c;border-color:#dd9e69}
#af-mock .workday-line li.is-held .wd-mark{background:#f0ce86;border-color:#dcb361}
#af-mock .wd-card{
  display:grid;grid-template-columns:minmax(0,158px) minmax(0,1fr) auto;
  column-gap:20px;row-gap:6px;align-items:center;
  padding:15px 20px;border:1px solid var(--line);border-radius:10px;background:#fff;
}
#af-mock .workday-line li.is-allowed .wd-card{border-left:3px solid #c3d9a0}
#af-mock .workday-line li.is-blocked .wd-card{border-left:3px solid #f0b98c}
#af-mock .workday-line li.is-held .wd-card{border-left:3px solid #f0ce86}
#af-mock .workday-line li.is-open .wd-card,
#af-mock .workday-line li.is-close .wd-card{
  grid-template-columns:minmax(0,1fr);background:#fbfbf8;border-style:dashed;
}
#af-mock .wd-tool{display:flex;align-items:center;gap:10px;min-width:0}
#af-mock .wd-tool img{flex:none;display:block;width:20px;height:20px;object-fit:contain}
#af-mock .workday-line li.is-blocked .wd-tool img{filter:grayscale(1);opacity:.45}
#af-mock .wd-tool em{
  font:500 14px 'DM Sans',sans-serif;font-style:normal;color:#0a0a0a;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#af-mock .wd-card b{font:500 15px 'DM Sans',sans-serif;color:#0a0a0a}
#af-mock .wd-verdict{
  justify-self:end;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 .workday-line li.is-allowed .wd-verdict{background:#eef4e2;border-color:#cbd8b5}
#af-mock .workday-line li.is-blocked .wd-verdict{background:#fbeade;border-color:#eec9ae}
#af-mock .workday-line li.is-held .wd-verdict{background:#fbf3df;border-color:#ecd9ae}
#af-mock .wd-card p{
  grid-column:2/-1;margin:0;font:13px/1.5 'DM Sans',sans-serif;color:#5c6358;max-width:74ch;
}
#af-mock .workday-line li.is-open .wd-card p,
#af-mock .workday-line li.is-close .wd-card p{grid-column:1/-1}
#af-mock .workday-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 .workday-line{padding:18px 18px 22px}
  #af-mock .workday-line li{grid-template-columns:58px 24px minmax(0,1fr)}
  #af-mock .workday-line li:before{left:69px}
  #af-mock .wd-card{grid-template-columns:minmax(0,1fr);row-gap:9px}
  #af-mock .wd-verdict{justify-self:start}
  #af-mock .wd-tool{grid-column:1/-1}
  #af-mock .wd-card p{grid-column:1/-1}
  #af-mock .workday-head,#af-mock .workday-note{padding-left:18px;padding-right:18px}
}