/* Permissions & Scopes (scripts/v47/pages/product--agent-permissions.py).
   The intersection written out under the opening statement, 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 the intersection, not a column beside a seal. */
#af-mock .story-context{grid-template-columns:minmax(0,1fr);gap:44px}

#af-mock .overlap{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
  align-items:start;gap:0 26px;
}
#af-mock .overlap .eyebrow{
  display:block;margin:0 0 14px;padding-bottom:12px;font-size:9.5px;color:var(--muted);
  border-bottom:1px solid var(--line);
}
#af-mock .overlap ul{list-style:none;margin:0;padding:0}
#af-mock .overlap li{
  display:flex;align-items:center;min-height:44px;padding:0 2px;
  font:12px 'IBM Plex Mono',monospace;color:#3f4a33;border-bottom:1px solid #eceee8;
}
#af-mock .overlap li:before{content:'●';margin-right:11px;font-size:8px;color:#8ba35c}
#af-mock .overlap li.off{color:#b3b8c2}
#af-mock .overlap li.off:before{content:'×';font-size:11px;color:#d7a97f}
#af-mock .overlap .ov-op{
  align-self:center;font:22px Georgia,serif;color:#98ad6a;
}
#af-mock .overlap .ov-effective .eyebrow{color:#5d7338;border-bottom-color:#cbd8b5}
#af-mock .overlap .ov-effective li{background:#f4f8ec;border-bottom-color:#e2ebd3;padding-left:12px}
#af-mock .overlap .ov-effective li.off{background:transparent;color:#c6cad2}
#af-mock .overlap .ov-effective li.off:before{content:'';margin-right:0}
#af-mock .overlap .ov-note{
  grid-column:1/-1;margin:22px 0 0;max-width:62ch;
  font:11px/1.8 '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;
}

/* Readability: the answers on this page run long. */
#af-mock .faq p{max-width:62ch}

@media(max-width:860px){
  #af-mock .overlap{grid-template-columns:minmax(0,1fr);gap:0}
  #af-mock .overlap .ov-col{margin-bottom:22px}
  #af-mock .overlap .ov-op{margin:0 0 22px;justify-self:start}
}

/* 02 / IN PRACTICE — the two sets drawn as sets.
   A Venn on the left with the scopes placed in it, the three requests on the right.
   (The context section states the same rule in words; this one is a place to land in.) */
#af-mock .setmap{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
#af-mock .setmap-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 .setmap-head .eyebrow{margin:0;font-size:11px;letter-spacing:.14em;color:#5f6a4b}
#af-mock .setmap-body{
  display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);
  gap:34px;align-items:center;padding:30px 26px;
}

#af-mock .venn{margin:0}
#af-mock .venn-plot{
  position:relative;width:100%;max-width:560px;aspect-ratio:560/384;margin:0 auto;
}
#af-mock .venn-ring{
  position:absolute;top:50%;width:64%;aspect-ratio:1;transform:translateY(-50%);
  border-radius:50%;border:1px solid #cbd8b5;
}
#af-mock .venn-a{left:0;background:#c3d9a038}
#af-mock .venn-b{right:0;border-color:#ecd9ae;background:#f0ce8636}
#af-mock .venn-label{
  position:absolute;top:6%;font:9.5px 'IBM Plex Mono',monospace;letter-spacing:.12em;
  color:#6b7458;max-width:30%;line-height:1.5;
}
#af-mock .venn-label-a{left:3%}
#af-mock .venn-label-b{right:3%;text-align:right;color:#8a7440}
#af-mock .venn-chip{
  position:absolute;display:grid;gap:3px;justify-items:center;text-align:center;
  padding:8px 11px;border:1px solid var(--line);border-radius:8px;background:#fff;
  box-shadow:0 6px 18px #6e7a5514;
}
#af-mock .venn-chip code{font:11px 'IBM Plex Mono',monospace;color:#1d211c;background:none;padding:0;white-space:nowrap}
#af-mock .venn-chip em{font:9px 'IBM Plex Mono',monospace;font-style:normal;letter-spacing:.08em;color:#9aa08f;text-transform:uppercase}
#af-mock .venn-chip.is-agent{left:2%;top:50%;transform:translateY(-50%);border-color:#eec9ae}
#af-mock .venn-chip.is-person{right:2%;top:50%;transform:translateY(-50%)}
#af-mock .venn-chip.is-both{left:50%;top:30%;transform:translate(-50%,-50%);border-color:#a9c37f}
#af-mock .venn-chip.is-both.is-held{top:70%;border-color:#dcb361}
#af-mock .venn figcaption{
  margin:16px 0 0;text-align:center;font:11px/1.6 'IBM Plex Mono',monospace;color:#8a927c;
}

#af-mock .setmap-requests{list-style:none;margin:0;padding:0;display:grid;gap:12px}
#af-mock .setmap-requests li{
  display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:5px;
  align-items:baseline;padding:15px 18px;border:1px solid var(--line);border-radius:10px;background:#fff;
}
#af-mock .setmap-requests li.is-allowed{border-left:3px solid #c3d9a0}
#af-mock .setmap-requests li.is-blocked{border-left:3px solid #f0b98c}
#af-mock .setmap-requests li.is-held{border-left:3px solid #f0ce86}
#af-mock .setmap-requests b{grid-column:1;font:500 15px 'DM Sans',sans-serif;color:#0a0a0a}
#af-mock .sm-verdict{
  grid-column:2;grid-row:1;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 .setmap-requests li.is-allowed .sm-verdict{background:#eef4e2;border-color:#cbd8b5}
#af-mock .setmap-requests li.is-blocked .sm-verdict{background:#fbeade;border-color:#eec9ae}
#af-mock .setmap-requests li.is-held .sm-verdict{background:#fbf3df;border-color:#ecd9ae}
#af-mock .setmap-requests code{
  grid-column:1/-1;font:11px 'IBM Plex Mono',monospace;color:#8a927c;background:none;padding:0;
}
#af-mock .setmap-requests p{grid-column:1/-1;margin:0;font:13px/1.5 'DM Sans',sans-serif;color:#5c6358}
#af-mock .setmap-note{
  margin:0;padding:14px 26px;border-top:1px solid var(--line);
  font:11px 'IBM Plex Mono',monospace;color:#8a927c;
}

@media(max-width:1100px){
  #af-mock .setmap-body{grid-template-columns:minmax(0,1fr);gap:28px}
}
@media(max-width:860px){
  #af-mock .setmap-body{padding:22px 18px}
  #af-mock .venn-plot{aspect-ratio:560/440}
  #af-mock .venn-ring{width:70%}
  #af-mock .venn-chip{padding:6px 8px}
  #af-mock .venn-chip code{font-size:10px}
  #af-mock .venn-chip em{display:none}
  #af-mock .setmap-head,#af-mock .setmap-note{padding-left:18px;padding-right:18px}
}