/* Enterprise Identity — page-only styles for the edits in
   scripts/v47/pages/product--enterprise-identity.py. */

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

/* The directory: org -> team -> member, joined by the thread a grant travels down. */
#af-mock .ei-directory{margin:0;border:1px solid var(--line,#e2e5e9);border-radius:10px;background:#fff;overflow:hidden;box-shadow:0 18px 44px -32px #4a5a2e55}
#af-mock .ei-directory 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 .ei-directory figcaption .eyebrow{margin:0}
#af-mock .ei-directory figcaption>span+span{font:10px 'IBM Plex Mono',monospace;letter-spacing:.09em;color:#8a927c}
#af-mock .ei-tree,#af-mock .ei-tree ul{list-style:none;margin:0;padding:0}
#af-mock .ei-tree{padding:16px 22px 10px}
#af-mock .ei-tree ul{margin-left:12px;padding-left:18px;border-left:1px solid #dfe3d6}
#af-mock .ei-tree li{position:relative}
#af-mock .ei-tree ul>li:before{content:'';position:absolute;left:-18px;top:17px;width:13px;height:1px;background:#dfe3d6}
#af-mock .ei-tree ul>li:last-child:after{content:'';position:absolute;left:-19px;top:18px;bottom:0;width:3px;background:#fff}
#af-mock .ei-node{display:grid;grid-template-columns:58px minmax(0,1fr);column-gap:12px;row-gap:3px;padding:7px 0 12px}
#af-mock .ei-node small{grid-column:1;grid-row:1;align-self:center;font:9px 'IBM Plex Mono',monospace;letter-spacing:.11em;color:#98a087}
#af-mock .ei-node b{grid-column:2;grid-row:1;font:500 15px 'DM Sans',sans-serif;letter-spacing:-.1px}
#af-mock .ei-node em{grid-column:2;grid-row:2;display:flex;align-items:center;gap:9px;font:normal 11px 'IBM Plex Mono',monospace;letter-spacing:.04em;color:#8a9179}
#af-mock .ei-chips{display:inline-flex;gap:7px}
#af-mock .ei-chips img{width:16px;height:16px;object-fit:contain;display:block}
#af-mock .ei-tree .is-off b{color:#8b8f97;text-decoration:line-through;text-decoration-color:#e0b48c;text-decoration-thickness:1px}
#af-mock .ei-tree .is-off em{color:#b58a5f}
#af-mock .ei-directory>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 lifecycle control reads as a record, not a dial. */
#af-mock .instrument-graphic{background:radial-gradient(ellipse at 70% 30%,#e3ecd0,transparent 68%)}
#af-mock .instrument-graphic>span{font-size:58px}
#af-mock .instrument-settings>code{background:#fbfcf6;letter-spacing:.06em}

/* 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 same identity, either side of one edit in the provider.
   Two columns with the acting-identity card at the head of each and the same kind of
   request beneath; a hinge between them carries the minute the provider changed. */
#af-mock .idsplit{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
#af-mock .idsplit-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 .idsplit-head .eyebrow{margin:0;font-size:11px;letter-spacing:.14em;color:#5f6a4b}
#af-mock .idsplit-body{
  display:grid;grid-template-columns:minmax(0,1fr) 112px minmax(0,1fr);
  align-items:start;padding:26px;
}
#af-mock .idcol{display:grid;gap:14px;min-width:0}
#af-mock .idcard{
  display:grid;gap:5px;padding:18px 20px;border:1px solid #cbd8b5;border-radius:11px;
  background:linear-gradient(150deg,#f4f7ec,#fbf7e8);
}
#af-mock .idcol.is-void .idcard{
  border-color:var(--line);border-style:dashed;background:#f7f7f5;
}
#af-mock .idcard small{font:9.5px 'IBM Plex Mono',monospace;letter-spacing:.16em;color:#7b8468}
#af-mock .idcol.is-void .idcard small{color:#9aa0a8}
#af-mock .idcard b{font:500 18px 'DM Sans',sans-serif;color:#0a0a0a}
#af-mock .idcol.is-void .idcard b{color:#7c828c;text-decoration:line-through;text-decoration-thickness:1px}
#af-mock .idcard em{font:13px 'DM Sans',sans-serif;font-style:normal;color:#4c5346}
#af-mock .idcol.is-void .idcard em{color:#868c96}
#af-mock .idcard code{
  margin-top:6px;font:10.5px 'IBM Plex Mono',monospace;letter-spacing:.06em;
  color:#5f6a4b;background:none;padding:0;
}
#af-mock .idcol.is-void .idcard code{color:#9aa0a8}
#af-mock .idcol ol{list-style:none;margin:0;padding:0;display:grid;gap:12px}
#af-mock .idcol li{
  display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;row-gap:5px;
  align-items:baseline;padding:14px 17px;border:1px solid var(--line);border-radius:10px;background:#fff;
}
#af-mock .idcol li.is-allowed{border-left:3px solid #c3d9a0}
#af-mock .idcol li.is-held{border-left:3px solid #f0ce86}
#af-mock .idcol li.is-blocked{border-left:3px solid #f0b98c;background:#fcfcfb}
#af-mock .id-tool{grid-column:1/-1;display:flex;align-items:center;gap:9px;min-width:0}
#af-mock .id-tool img{flex:none;display:block;width:17px;height:17px;object-fit:contain}
#af-mock .idcol li.is-blocked .id-tool img{filter:grayscale(1);opacity:.45}
#af-mock .id-tool em{font:11px 'IBM Plex Mono',monospace;font-style:normal;color:#8a927c}
#af-mock .idcol li b{grid-column:1;font:500 15px 'DM Sans',sans-serif;color:#0a0a0a}
#af-mock .idcol li.is-blocked b{color:#5c6358}
#af-mock .id-verdict{
  grid-column:2;justify-self:end;padding:6px 11px;border-radius:30px;border:1px solid var(--line);
  font:10px 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#4c5346;
}
#af-mock .idcol li.is-allowed .id-verdict{background:#eef4e2;border-color:#cbd8b5}
#af-mock .idcol li.is-held .id-verdict{background:#fbf3df;border-color:#ecd9ae}
#af-mock .idcol li.is-blocked .id-verdict{background:#fbeade;border-color:#eec9ae}
#af-mock .idcol li p{grid-column:1/-1;margin:0;font:13px/1.5 'DM Sans',sans-serif;color:#5c6358}
/* the hinge: the minute the provider changed its mind */
#af-mock .idsplit-hinge{
  align-self:stretch;height:100%;display:grid;grid-template-rows:1fr auto auto 1fr;
  justify-items:center;align-items:center;gap:10px;padding:0 8px;
}
#af-mock .idsplit-hinge i{width:1px;height:100%;min-height:40px;background:#e2e5e9}
#af-mock .idsplit-hinge span{
  font:12px 'IBM Plex Mono',monospace;color:#0a0a0a;padding:7px 10px;
  border:1px solid var(--line);border-radius:30px;background:#fff;
}
#af-mock .idsplit-hinge em{
  font:9.5px 'IBM Plex Mono',monospace;font-style:normal;letter-spacing:.1em;
  text-transform:uppercase;color:#8a927c;text-align:center;line-height:1.6;max-width:96px;
}
#af-mock .idsplit-note{
  margin:0;padding:14px 26px;border-top:1px solid var(--line);
  font:11px 'IBM Plex Mono',monospace;color:#8a927c;
}

@media(max-width:900px){
  #af-mock .idsplit-body{grid-template-columns:minmax(0,1fr);gap:18px;padding:20px 18px}
  #af-mock .idsplit-hinge{
    grid-auto-flow:column;justify-content:center;align-items:center;gap:12px;padding:4px 0;
  }
  #af-mock .idsplit-hinge i{width:40px;height:1px;flex:none;min-height:0}
  #af-mock .idsplit-head,#af-mock .idsplit-note{padding-left:18px;padding-right:18px}
}