/* Credential Vault — page-only styles for the edits in
   scripts/v47/pages/product--credential-vault.py. Selectors use the shell id so they
   outrank the handoff's .af-scope rules. */

/* Context: the vault sheet stands where the repeated seal did, so the two halves hang
   from the top and the sheet gets a usable column. */
#af-mock .story-context{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:5vw;align-items:start}
#af-mock .story-context>p{max-width:none;font-size:clamp(24px,2.2vw,30px)}

/* The vault sheet: one row per connection — the provider's own mark, the secret masked,
   the last time Fabriq used it. */
#af-mock .cv-vault{margin:0;border:1px solid var(--line,#e2e5e9);border-radius:10px;background:#fff;overflow:hidden;box-shadow:0 18px 44px -32px #4a5a2e55}
#af-mock .cv-vault 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 .cv-vault figcaption .eyebrow{margin:0}
#af-mock .cv-vault figcaption>span+span{font:10px 'IBM Plex Mono',monospace;letter-spacing:.09em;color:#8a927c}
#af-mock .cv-vault ul{list-style:none;margin:0;padding:0}
#af-mock .cv-vault li{display:grid;grid-template-columns:24px minmax(0,1fr) auto;column-gap:14px;row-gap:5px;align-items:center;padding:14px 20px;border-bottom:1px solid #eceee6}
#af-mock .cv-vault li:last-child{border-bottom:0}
#af-mock .cv-vault li img{grid-column:1;grid-row:1/3;width:24px;height:24px;object-fit:contain;display:block}
#af-mock .cv-vault li b{grid-column:2;grid-row:1;font:500 15px 'DM Sans',sans-serif;letter-spacing:-.1px}
#af-mock .cv-vault .cv-used{grid-column:3;grid-row:1;justify-self:end;font:10px 'IBM Plex Mono',monospace;letter-spacing:.08em;color:#98a087}
#af-mock .cv-vault code{grid-column:2/4;grid-row:2;display:flex;align-items:baseline;gap:10px;font:11px 'IBM Plex Mono',monospace;letter-spacing:.06em;color:#8a9179}
#af-mock .cv-vault code i{font-style:normal;letter-spacing:.18em;color:#b9c2a8}
#af-mock .cv-vault>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 control is about a Gmail connection, so it shows the Gmail
   mark inside the rings instead of the generic monogram. */
#af-mock .instrument-graphic>span.cv-key{position:relative;z-index:1;display:grid;place-items:center;width:84px;height:84px;border:1px solid #c7d1b3;border-radius:50%;background:#fff;transition:opacity 1s,border-color 1s}
#af-mock .instrument-graphic>span.cv-key img{width:34px;height:34px;display:block}
#af-mock .instrument-control[data-disabled=true] .cv-key{border-color:#e2c3a2;opacity:.42}

/* The capability cards read better with 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 — one credential, opened up.
   The card with the secret masked on the left; on the right, three calls and the point
   on each path where the secret is attached (or where there is nothing left to attach). */
#af-mock .vaultcard{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
#af-mock .vc-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 .vc-head .eyebrow{margin:0;font-size:11px;letter-spacing:.14em;color:#5f6a4b}
#af-mock .vc-body{
  display:grid;grid-template-columns:minmax(0,316px) minmax(0,1fr);gap:28px;
  align-items:start;padding:26px;
}

#af-mock .vc-card{
  margin:0;padding:22px;border:1px solid #cbd8b5;border-radius:12px;
  background:linear-gradient(155deg,#f4f7ec,#fbf6e6);
}
#af-mock .vc-card figcaption{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;align-items:center;
  padding-bottom:16px;border-bottom:1px solid #dbe4c9;
}
#af-mock .vc-mark{
  grid-row:1/3;display:grid;place-items:center;width:38px;height:38px;border-radius:9px;
  border:1px solid #cbd8b5;background:#fff;color:#5f6a4b;
  font:11px 'IBM Plex Mono',monospace;letter-spacing:.08em;
}
#af-mock .vc-card b{font:500 17px 'DM Sans',sans-serif;color:#0a0a0a}
#af-mock .vc-card figcaption em{font:11px 'IBM Plex Mono',monospace;font-style:normal;color:#7b8468}
#af-mock .vc-secret{display:grid;gap:7px;margin:18px 0}
#af-mock .vc-secret .eyebrow{margin:0;font-size:9.5px;letter-spacing:.16em;color:#7b8468}
#af-mock .vc-secret code{
  display:block;padding:12px 14px;border:1px dashed #c2cdaa;border-radius:8px;background:#fff;
  font:14px 'IBM Plex Mono',monospace;letter-spacing:.22em;color:#9aa08f;
}
#af-mock .vc-secret em{font:10px 'IBM Plex Mono',monospace;font-style:normal;color:#8a927c}
#af-mock .vc-facts{list-style:none;margin:0;padding:0;display:grid;gap:8px}
#af-mock .vc-facts li{
  display:flex;align-items:baseline;gap:10px;font:11.5px 'IBM Plex Mono',monospace;
  padding-bottom:8px;border-bottom:1px solid #dbe4c9;
}
#af-mock .vc-facts li:last-child{border-bottom:0;padding-bottom:0}
#af-mock .vc-facts i{flex:none;width:118px;font-style:normal;color:#7b8468}
#af-mock .vc-facts b{font-weight:500;color:#0a0a0a}

#af-mock .vc-calls{list-style:none;margin:0;padding:0;display:grid;gap:12px}
#af-mock .vc-calls li{
  display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:18px;row-gap:12px;
  align-items:start;padding:16px 20px;border:1px solid var(--line);border-radius:10px;background:#fff;
}
#af-mock .vc-calls li.is-allowed{border-left:3px solid #c3d9a0}
#af-mock .vc-calls li.is-blocked{border-left:3px solid #f0b98c}
#af-mock .vc-calls li.is-held{border-left:3px solid #f0ce86}
#af-mock .vc-what{display:grid;gap:3px;min-width:0}
#af-mock .vc-what b{font:500 15px 'DM Sans',sans-serif;color:#0a0a0a}
#af-mock .vc-what code{font:11px 'IBM Plex Mono',monospace;color:#8a927c;background:none;padding:0}
#af-mock .vc-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 .vc-calls li.is-allowed .vc-verdict{background:#eef4e2;border-color:#cbd8b5}
#af-mock .vc-calls li.is-blocked .vc-verdict{background:#fbeade;border-color:#eec9ae}
#af-mock .vc-calls li.is-held .vc-verdict{background:#fbf3df;border-color:#ecd9ae}
/* the path: agent → the point of injection → the tool */
#af-mock .vc-path{
  grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:0;
  padding:12px 14px;border-radius:8px;background:#fbfbf8;border:1px solid var(--line);
}
#af-mock .vc-node{
  display:flex;align-items:center;gap:8px;padding:6px 11px;border:1px solid var(--line);
  border-radius:30px;background:#fff;font:11px 'IBM Plex Mono',monospace;color:#1d211c;
}
#af-mock .vc-node img{display:block;width:16px;height:16px;object-fit:contain}
#af-mock .vc-node i{
  display:grid;place-items:center;width:16px;height:16px;border-radius:4px;
  border:1px solid var(--line);background:#f6f6f4;color:#8a927c;
  font:8px 'IBM Plex Mono',monospace;font-style:normal;
}
#af-mock .vc-path > i{flex:none;width:34px;height:1px;background:#cbd2c0;margin:0 -1px}
#af-mock .vc-inject{border-style:dashed;border-color:#a9c37f;background:#f2f7e8;color:#4f5c39}
#af-mock .vc-calls li.is-blocked .vc-inject{border-color:#e6b189;background:#fbeade;color:#8a5a33}
#af-mock .vc-calls li.is-held .vc-inject{border-color:#dcb361;background:#fbf3df;color:#7d6427}
#af-mock .vc-calls li.is-blocked .vc-dest{opacity:.5}
#af-mock .vc-calls li.is-blocked .vc-dest img{filter:grayscale(1)}
#af-mock .vc-calls li p{
  grid-column:1/-1;margin:0;font:13px/1.5 'DM Sans',sans-serif;color:#5c6358;max-width:74ch;
}
#af-mock .vc-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 .vc-body{grid-template-columns:minmax(0,1fr);gap:22px}
}
@media(max-width:860px){
  #af-mock .vc-body{padding:20px 18px}
  #af-mock .vc-path{gap:9px}
  #af-mock .vc-path > i{display:none}
  #af-mock .vc-head,#af-mock .vc-note{padding-left:18px;padding-right:18px}
}