/* Audit Trail — page-only styles for the edits in
   scripts/v47/pages/product--audit-trail.py. The ledger is this page's signature: a
   thread down the left, one node per event, the tool's own logo on the row. */

#af-mock .at-record .audit-demo{max-width:none;margin:0;padding:0;border:1px solid #dce1d1;border-radius:12px;background:#fff;overflow:hidden}
#af-mock .at-ledger .demo-top{padding:18px 24px;border-bottom:1px solid #dce1d1;background:#fbfcf6;font:11px 'IBM Plex Mono',monospace;letter-spacing:.06em;color:#8a927c}
#af-mock .at-ledger .demo-top label{display:flex;align-items:center;gap:10px}
#af-mock .at-ledger .demo-top select{font:11px 'IBM Plex Mono',monospace;color:#3c4432;background:#fff;border:1px solid #d7dfc8;border-radius:4px;padding:5px 8px}

#af-mock .at-ledger .instrument-event{position:relative;padding:14px 24px 14px 62px;border-bottom:1px solid #eceee6}
#af-mock .at-ledger .instrument-event:last-child{border-bottom:0}
/* the thread every action leaves */
#af-mock .at-ledger .instrument-event:before{content:'';position:absolute;left:36px;top:0;bottom:0;width:1px;background:#e2e6da}
#af-mock .at-ledger .instrument-event:after{content:'';position:absolute;left:33px;top:23px;width:7px;height:7px;border-radius:50%;background:#fff;border:1px solid #9fb178}
#af-mock .at-ledger .instrument-event[data-decision=blocked]:after{border-color:#dfa87a}
#af-mock .at-ledger .instrument-event[open]:after{background:#839a54;border-color:#839a54}
#af-mock .at-ledger .instrument-event[open][data-decision=blocked]:after{background:#c98c57;border-color:#c98c57}

#af-mock .at-ledger summary{display:grid;grid-template-columns:72px 18px auto minmax(0,1fr) auto 16px;align-items:center;column-gap:16px;list-style:none}
#af-mock .at-ledger summary::-webkit-details-marker{display:none}
#af-mock .at-ledger summary:after{content:'+';justify-self:end;font:12px 'IBM Plex Mono',monospace;color:#a8b096}
#af-mock .at-ledger .instrument-event[open] summary:after{content:'\2212'}
#af-mock .at-ledger summary code{font:10px 'IBM Plex Mono',monospace;letter-spacing:.06em;color:#98a087}
#af-mock .at-ledger summary img{width:18px;height:18px;object-fit:contain;display:block}
#af-mock .at-ledger summary strong{font:500 14px 'IBM Plex Mono',monospace;letter-spacing:-.2px;color:#101208}
#af-mock .at-ledger .at-who{font:11px 'IBM Plex Mono',monospace;letter-spacing:.04em;color:#8a9179;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#af-mock .at-ledger .at-who i{font-style:normal;color:#b3baa5}
#af-mock .at-ledger .status{margin:0}
#af-mock .at-ledger .instrument-event p{margin:12px 0 0;font:12px/1.7 'DM Sans',sans-serif;color:#6d7663;max-width:62ch}
#af-mock .at-ledger .event-chain{margin-top:12px}

/* Capability cards: a shorter measure than the column allows. */
#af-mock .story-capabilities p{max-width:34ch}

@media(max-width:820px){
  #af-mock .at-ledger .instrument-event{padding:14px 18px 14px 48px}
  #af-mock .at-ledger .instrument-event:before{left:24px}
  #af-mock .at-ledger .instrument-event:after{left:21px}
  #af-mock .at-ledger summary{grid-template-columns:auto 18px minmax(0,1fr) auto;row-gap:6px}
  #af-mock .at-ledger .at-who{grid-column:1/-1;white-space:normal}
  #af-mock .at-ledger summary:after{display:none}
}

/* 02 / IN PRACTICE — three records, opened as records.
   The ledger further down reads the trail as a list; these are three single slips, each
   with its fields, the two identities, where the checking stopped, and a stamp. */
#af-mock .slips{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
#af-mock .slips-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 .slips-head .eyebrow{margin:0;font-size:11px;letter-spacing:.14em;color:#5f6a4b}
#af-mock .slips-row{
  list-style:none;margin:0;padding:26px;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
}
#af-mock .slips-row li{
  position:relative;display:grid;gap:13px;align-content:start;min-width:0;
  padding:20px 20px 22px;border:1px solid var(--line);border-radius:4px;background:#fdfdfb;
  border-top:2px dashed #dfe3d6;
}
#af-mock .slips-row li.is-allowed{background:linear-gradient(180deg,#f7faf0,#fff 42%)}
#af-mock .slips-row li.is-blocked{background:linear-gradient(180deg,#fdf1e8,#fff 42%)}
#af-mock .slips-row li.is-held{background:linear-gradient(180deg,#fdf7e9,#fff 42%)}
#af-mock .slip-top{
  display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  padding-bottom:11px;border-bottom:1px solid var(--line);
}
#af-mock .slip-top code{font:11px 'IBM Plex Mono',monospace;color:#5f6a4b;background:none;padding:0}
#af-mock .slip-top time{font:11px 'IBM Plex Mono',monospace;color:#8a927c}
#af-mock .slip-tool{display:flex;align-items:center;gap:10px;min-width:0}
#af-mock .slip-tool img{flex:none;display:block;width:20px;height:20px;object-fit:contain}
#af-mock .slips-row li.is-blocked .slip-tool img{filter:grayscale(1);opacity:.5}
#af-mock .slip-tool em{
  font:11px 'IBM Plex Mono',monospace;font-style:normal;letter-spacing:.06em;color:#8a927c;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#af-mock .slips-row li > b{font:500 17px/1.3 'DM Sans',sans-serif;color:#0a0a0a}
#af-mock .slips-row dl{margin:0;display:grid;gap:9px}
#af-mock .slips-row dl > div{display:grid;gap:2px;padding-bottom:9px;border-bottom:1px solid var(--line)}
#af-mock .slips-row dl > div:last-child{border-bottom:0;padding-bottom:0}
#af-mock .slips-row dt{
  font:9px 'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:#9aa08f;
}
#af-mock .slips-row dd{margin:0;font:12.5px 'IBM Plex Mono',monospace;color:#1d211c;word-break:break-word}
/* where the checking got to */
#af-mock .slip-checks{
  list-style:none;margin:0;padding:11px 0 0;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:7px;
}
#af-mock .slip-checks li{
  display:flex;align-items:center;gap:6px;padding:5px 9px;border-radius:30px;
  border:1px solid var(--line);background:#fff;
  font:9.5px 'IBM Plex Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#7b8468;
}
#af-mock .slip-checks li:before{content:'\2713';font-size:10px}
#af-mock .slip-checks li.is-ok{border-color:#cbd8b5;background:#f2f7e8;color:#4f5c39}
#af-mock .slip-checks li.is-no{border-color:#eec9ae;background:#fbeade;color:#8a5a33}
#af-mock .slip-checks li.is-no:before{content:'\2715'}
#af-mock .slip-checks li.is-hold{border-color:#ecd9ae;background:#fbf3df;color:#7d6427}
#af-mock .slip-checks li.is-hold:before{content:'\23f8'}
#af-mock .slip-checks li.is-skip{color:#adb3a8;border-style:dashed}
#af-mock .slip-checks li.is-skip:before{content:'\2013'}
#af-mock .slip-stamp{
  justify-self:start;padding:8px 16px;border:1.5px solid #b9c2ab;border-radius:4px;
  transform:rotate(-2.5deg);font:11px 'IBM Plex Mono',monospace;letter-spacing:.2em;
  text-transform:uppercase;color:#5f6a4b;background:#ffffffcc;
}
#af-mock .slips-row li.is-allowed .slip-stamp{border-color:#8fae5c;color:#4f6b28}
#af-mock .slips-row li.is-blocked .slip-stamp{border-color:#dd9e69;color:#8a5a33;transform:rotate(2deg)}
#af-mock .slips-row li.is-held .slip-stamp{border-color:#dcb361;color:#7d6427;transform:rotate(-1.5deg)}
#af-mock .slips-row li > p{margin:0;font:13px/1.5 'DM Sans',sans-serif;color:#5c6358}
#af-mock .slips-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 .slips-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:20px}
}
@media(max-width:860px){
  #af-mock .slips-row{grid-template-columns:minmax(0,1fr);padding:18px}
  #af-mock .slips-head,#af-mock .slips-note{padding-left:18px;padding-right:18px}
}