/* ==========================================================================
   Mid Group AI: aegis-widgets.css
   Styles for the two interactive Aegis demos: the ledger verifier and the
   policy sandbox. Everything is scoped under .aegis-widget, and the
   document-style tokens (--paper, --ink, --seal, ...) live on .aegis-widget
   rather than :root, because the site already defines --ink and others with
   different values. Scoping keeps the widgets' paper-and-ink palette from
   leaking into the site theme and vice versa.

   The palette is intentionally a light "document" ground in both site
   themes: the widget is a ledger, and it should read like a statement, not
   a dashboard. The three decision colours (allow/hold/deny) are load
   bearing and used only for decisions.
   ========================================================================== */

.aegis-widget{
  /* Widget-local tokens mapped to the site brand palette (styles.css). The
     three decision colours are the brand's status colours (green/amber/red)
     and are used only for allow/hold/deny. Light values here, dark override
     below, so the widget follows the OS theme like the rest of the site. */
  --paper:#ffffff; --paper-2:#eef2f8; --paper-3:#e2e8f2;
  --rule:#d5d9df; --rule-strong:#bcc3ce;
  --ink:#1a1d26; --ink-2:#5b6270; --ink-3:#7c8492;
  --seal:#004c9a; --seal-soft:#7aa6d4;
  --allow:#1f7a4d; --hold:#9a6206; --deny:#c53d3d;
  --mono:var(--font-mono); --sans:var(--font-sans);

  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.55;
  padding:clamp(18px,4vw,40px);
  border:1px solid var(--rule);
  border-radius:14px;
  margin-top:26px;
}
@media (prefers-color-scheme: dark){
  .aegis-widget{
    --paper:#161b24; --paper-2:#1d2531; --paper-3:#273040;
    --rule:#262c38; --rule-strong:#39414f;
    --ink:#f2f4f8; --ink-2:#98a1b2; --ink-3:#828b9b;
    --seal:#2f8ee0; --seal-soft:#5079a8;
    --allow:#4cc98a; --hold:#f0a53a; --deny:#ef6a5e;
  }
}
.aegis-widget *{box-sizing:border-box}
/* rounded chrome to match the site's card/button radii; controls carry a 7px
   radius in their own rules, the ledger grid stays square as a data table */
.aegis-widget .banner,
.aegis-widget .verdict{border-radius:9px}
.aegis-widget .meter{border-radius:5px;overflow:hidden}
.aegis-widget .wrap{margin:0 auto}
.aegis-widget--ledger .wrap{max-width:980px}
.aegis-widget--preview .wrap{max-width:980px}
.aegis-widget--policy .wrap{max-width:1080px}

/* ---- shared masthead ---- */
.aegis-widget .masthead{border-top:2px solid var(--ink);padding-top:10px;margin-bottom:20px}
.aegis-widget .stamp{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--seal);display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;
}
.aegis-widget .stamp b{font-weight:600;color:var(--ink)}
.aegis-widget .aw-title{
  font-family:var(--mono);font-weight:600;font-size:clamp(19px,3.4vw,27px);
  letter-spacing:-.01em;margin:12px 0 6px;color:var(--ink);
}
.aegis-widget .lede{max-width:64ch;color:var(--ink-2);margin:0 0 18px}
.aegis-widget .lede em{color:var(--ink);font-style:normal;font-weight:600}

/* ---- shared buttons ---- */
.aegis-widget button{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;
  background:var(--paper);color:var(--ink);border:1px solid var(--rule-strong);
  padding:7px 12px;cursor:pointer;border-radius:7px;
}
.aegis-widget button:hover{background:var(--paper-3);border-color:var(--ink-2)}
.aegis-widget button:focus-visible{outline:2px solid var(--seal);outline-offset:2px}
.aegis-widget button.primary,
.aegis-widget button.act.go{background:var(--seal);color:var(--paper);border-color:var(--seal)}
.aegis-widget button.primary:hover,
.aegis-widget button.act.go:hover{filter:brightness(1.12)}
.aegis-widget button:disabled{opacity:.4;cursor:not-allowed}

/* ---- shared footnote ---- */
.aegis-widget .foot{
  margin-top:24px;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;
  color:var(--ink-3);border-top:1px solid var(--rule);padding-top:10px;max-width:78ch;line-height:1.7;
}

/* ==========================================================================
   Ledger verifier
   ========================================================================== */
.aegis-widget .banner{
  border:1px solid var(--rule-strong);border-left:5px solid var(--allow);
  background:var(--paper-2);padding:12px 16px;margin-bottom:8px;
  display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;
}
.aegis-widget .banner[data-state="broken"]{border-left-color:var(--deny)}
.aegis-widget .banner .verdict{
  font-family:var(--mono);font-weight:600;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--allow);
}
.aegis-widget .banner[data-state="broken"] .verdict{color:var(--deny)}
.aegis-widget .banner .detail{font-size:13.5px;color:var(--ink-2)}
.aegis-widget .banner .detail code{font-family:var(--mono);color:var(--ink);background:var(--paper-3);padding:0 3px}

.aegis-widget .bar{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px;align-items:center}
.aegis-widget .bar .hint{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.04em}

.aegis-widget .ledger{border-top:1px solid var(--ink);border-bottom:2px solid var(--ink)}
.aegis-widget .head,
.aegis-widget .row{
  display:grid;grid-template-columns:34px 46px 74px 1fr 132px 96px;
  gap:12px;align-items:baseline;
}
.aegis-widget .head{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);padding:8px 6px;border-bottom:1px solid var(--rule-strong);
}
.aegis-widget .rowwrap{border-bottom:1px solid var(--rule)}
.aegis-widget .rowwrap:last-child{border-bottom:none}
.aegis-widget .row{
  width:100%;text-align:left;background:none;border:none;padding:9px 6px;
  font-family:var(--mono);font-size:12.5px;text-transform:none;letter-spacing:0;
  cursor:pointer;color:var(--ink);
}
.aegis-widget .row:hover{background:var(--paper-2)}
.aegis-widget .row:focus-visible{outline:2px solid var(--seal);outline-offset:-2px}
.aegis-widget .rowwrap[data-bad] .row{background:rgba(197,61,61,.1)}

/* chain rail: the link between rows, drawn */
.aegis-widget .rail{position:relative;height:1.4em;justify-self:center;width:34px}
.aegis-widget .rail::before{
  content:"";position:absolute;left:50%;top:-14px;bottom:50%;width:1px;
  background:var(--seal-soft);transform:translateX(-.5px);
}
.aegis-widget .rail::after{
  content:"";position:absolute;left:50%;top:50%;bottom:-14px;width:1px;
  background:var(--seal-soft);transform:translateX(-.5px);
}
.aegis-widget .rowwrap:first-child .rail::before{display:none}
.aegis-widget .rowwrap:last-child .rail::after{display:none}
.aegis-widget .rail i{
  position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;
  background:var(--paper);border:1.5px solid var(--seal);border-radius:50%;
}
.aegis-widget .rowwrap[data-bad="hash"] .rail i{background:var(--deny);border-color:var(--deny)}
.aegis-widget .rowwrap[data-bad="link"] .rail::before{background:none;border-left:1px dashed var(--deny);top:-14px}
.aegis-widget .rowwrap[data-bad="link"] .rail i{background:var(--paper);border-color:var(--deny)}

.aegis-widget .seq{color:var(--ink-3)}
.aegis-widget .at{color:var(--ink-2)}
.aegis-widget .type{font-weight:600}
.aegis-widget .type .sum{font-weight:400;color:var(--ink-2)}
.aegis-widget .hash{color:var(--seal);word-break:break-all;font-size:11.5px}
.aegis-widget .rowwrap[data-bad] .hash{color:var(--deny)}
.aegis-widget .state{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.aegis-widget .rowwrap[data-bad] .state{color:var(--deny);font-weight:600}

/* expanded detail */
.aegis-widget .detailpane{padding:4px 6px 20px 60px;background:var(--paper-2);border-top:1px dashed var(--rule-strong)}
.aegis-widget .aw-sub{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:16px 0 7px;font-weight:600;
}
.aegis-widget .fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px 18px}
.aegis-widget .field{display:flex;flex-direction:column;gap:2px}
.aegis-widget .field label{font-family:var(--mono);font-size:10.5px;color:var(--ink-2);letter-spacing:.03em}
.aegis-widget .field input{
  font-family:var(--mono);font-size:12.5px;padding:5px 7px;
  border:1px solid var(--rule-strong);background:var(--paper);color:var(--ink);border-radius:7px;
}
.aegis-widget .field input:focus{outline:2px solid var(--seal);outline-offset:-1px;border-color:var(--seal)}
.aegis-widget .field input[data-dirty="1"]{border-color:var(--deny);background:var(--paper)}
.aegis-widget .bytes{
  font-family:var(--mono);font-size:11.5px;line-height:1.65;color:var(--ink-2);
  background:var(--paper);border:1px solid var(--rule);padding:9px 11px;
  word-break:break-all;white-space:pre-wrap;max-height:150px;overflow:auto;
}
.aegis-widget .cmp{display:grid;gap:5px;font-family:var(--mono);font-size:11.5px;margin-top:9px}
.aegis-widget .cmp div{display:flex;gap:10px;flex-wrap:wrap}
.aegis-widget .cmp span:first-child{color:var(--ink-3);min-width:112px;letter-spacing:.06em;text-transform:uppercase;font-size:10px;padding-top:2px}
.aegis-widget .cmp b{font-weight:400;word-break:break-all}
.aegis-widget .cmp .match{color:var(--allow)}
.aegis-widget .cmp .mismatch{color:var(--deny);font-weight:600}
.aegis-widget .rowacts{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}

.aegis-widget textarea{
  width:100%;font-family:var(--mono);border-radius:7px;
}
.aegis-widget #jsonl{
  height:180px;font-size:11px;line-height:1.5;
  border:1px solid var(--rule-strong);background:var(--paper-2);color:var(--ink-2);padding:10px;
}

/* ---- public preview variant ----
   Two identifiers per row and they are not interchangeable: `ref` is the
   human reference someone quotes out loud, `hash` is the seal that makes the
   record tamper-evident. The ref is set in the same ink as the text so it
   reads as a label; the seal stays in the accent so it reads as machinery. */
.aegis-widget--preview .head,
.aegis-widget--preview .row{grid-template-columns:34px 118px 1fr 106px 84px}
.aegis-widget--preview .ref{color:var(--ink-2);font-size:11.5px;letter-spacing:.02em}
.aegis-widget--preview .rowwrap[data-bad] .ref{color:var(--deny);font-weight:600}
/* nothing in the preview is activatable, so rows must not invite a click */
.aegis-widget--preview .row{cursor:default}
.aegis-widget--preview .row:hover{background:none}

/* the row being changed, while it is being changed */
.aegis-widget--preview .rowwrap[data-hot]{background:var(--paper-3)}
.aegis-widget--preview .rowwrap[data-hot][data-bad]{background:rgba(197,61,61,.12)}

.aegis-widget .lp-foot{
  display:flex;gap:16px;align-items:baseline;justify-content:space-between;
  margin-top:16px;padding-top:13px;border-top:1px solid var(--rule);flex-wrap:wrap;
}
.aegis-widget .lp-caption{
  margin:0;font-size:14px;line-height:1.5;color:var(--ink-2);max-width:68ch;flex:1 1 320px;
}
.aegis-widget button.lp-toggle{
  font-size:10.5px;padding:5px 12px;flex:0 0 auto;color:var(--ink-2);
}

@media (prefers-reduced-motion:no-preference){
  .aegis-widget--preview .rowwrap{transition:background-color .28s ease}
  .aegis-widget--preview .hash,
  .aegis-widget--preview .state{transition:color .28s ease}
}

@media (max-width:760px){
  .aegis-widget--preview .row{
    grid-template-columns:26px 1fr;
    grid-template-areas:"rail ref" "rail type" "rail hash" "rail state";
  }
  .aegis-widget--preview .ref{grid-area:ref;font-weight:600;color:var(--ink)}
}
@media (max-width:760px){
  .aegis-widget .head{display:none}
  .aegis-widget .row{grid-template-columns:26px 1fr;grid-template-areas:"rail seq" "rail type" "rail hash" "rail state";gap:2px 10px}
  .aegis-widget .rail{grid-area:rail;height:100%}
  .aegis-widget .rail::before{top:-6px}
  .aegis-widget .rail::after{bottom:-6px}
  .aegis-widget .seq{grid-area:seq}
  .aegis-widget .at{display:none}
  .aegis-widget .type{grid-area:type}
  .aegis-widget .hash{grid-area:hash}
  .aegis-widget .state{grid-area:state}
  .aegis-widget .detailpane{padding-left:16px}
}
@media (prefers-reduced-motion:no-preference){
  .aegis-widget .rowwrap{transition:background-color .12s linear}
}

/* ==========================================================================
   Policy sandbox

   Scenario first. The six scenario cards are the largest thing on the widget
   and the verdict is the loudest, because the visitor's question is "what
   happens to my money", not "which constraint index failed". The raw policy
   document and the gate-by-gate trace live behind <details>, so the engineer
   who wants them is one click away and nobody else has to read them.
   ========================================================================== */
.aegis-widget button[aria-pressed="true"]{background:var(--seal);color:var(--paper);border-color:var(--seal)}
.aegis-widget button.act{text-transform:uppercase;letter-spacing:.1em;font-size:11px}

/* ---- scenario cards: the front door ---- */
.aegis-widget .ps-scenarios{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:10px;margin:0 0 26px;
}
.aegis-widget button.ps-scenario{
  display:flex;flex-direction:column;gap:3px;text-align:left;
  font-family:var(--sans);font-size:15px;letter-spacing:0;
  padding:13px 15px;line-height:1.35;border-radius:10px;
  background:var(--paper-2);border:1px solid var(--rule-strong);
}
.aegis-widget button.ps-scenario:hover{background:var(--paper-3);border-color:var(--ink-2)}
.aegis-widget .ps-s-t{font-weight:600;color:var(--ink)}
.aegis-widget .ps-s-d{font-size:13px;color:var(--ink-2)}
.aegis-widget button.ps-scenario[aria-pressed="true"]{
  background:var(--seal);border-color:var(--seal);
}
.aegis-widget button.ps-scenario[aria-pressed="true"] .ps-s-t,
.aegis-widget button.ps-scenario[aria-pressed="true"] .ps-s-d{color:var(--paper)}

/* ---- result: verdict + approval on the left, limits + record on the right ---- */
.aegis-widget .ps-cols{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:0;border-top:1px solid var(--ink);
}
.aegis-widget .ps-main{padding-right:26px;border-right:1px solid var(--rule)}
.aegis-widget .ps-side{padding-left:26px}

/* verdict: the loudest element on the page */
.aegis-widget .ps-verdict{
  border:1px solid var(--rule-strong);border-left:6px solid var(--ink-3);
  background:var(--paper-2);padding:18px 20px;border-radius:9px;margin-top:18px;
}
.aegis-widget .ps-verdict[data-d="ALLOW"]{border-left-color:var(--allow)}
.aegis-widget .ps-verdict[data-d="HOLD"]{border-left-color:var(--hold)}
.aegis-widget .ps-verdict[data-d="DENY"]{border-left-color:var(--deny)}
.aegis-widget .ps-d{
  font-size:clamp(24px,4.2vw,34px);font-weight:700;line-height:1.1;
  letter-spacing:-.02em;margin:0;
}
.aegis-widget .ps-verdict[data-d="ALLOW"] .ps-d{color:var(--allow)}
.aegis-widget .ps-verdict[data-d="HOLD"] .ps-d{color:var(--hold)}
.aegis-widget .ps-verdict[data-d="DENY"] .ps-d{color:var(--deny)}
.aegis-widget .ps-why{font-size:15.5px;color:var(--ink);margin:9px 0 0;max-width:56ch}
/* The specific reason for this one action, in the reader's language. It
   replaces what used to be a mono line of rule identifiers: that detail is
   commercial IP and now lives only in the gated technical demo. */
.aegis-widget .ps-note{
  font-size:14px;color:var(--ink-2);max-width:56ch;
  margin:12px 0 0;padding-top:11px;border-top:1px dashed var(--rule-strong);
}

/* the approval card: the emotional centre of the product */
.aegis-widget .ps-ask{
  border:1px solid var(--hold);border-radius:9px;background:var(--paper-2);
  padding:16px 18px;margin-top:12px;
}
.aegis-widget .ps-ask-k{
  font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--hold);font-weight:600;margin:0;
}
.aegis-widget .ps-ask-what{font-size:19px;font-weight:600;color:var(--ink);margin:7px 0 0}
.aegis-widget .ps-ask-meta{font-size:13px;color:var(--ink-2);margin:5px 0 0}
.aegis-widget .ps-ask-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}

/* ---- progressive disclosure: the parts only an engineer wants ----
   Shared by both widgets. Nothing here is removed from the page; it is
   one click away instead of in front of a visitor who came to find out
   whether an agent can drain an account. */
.aegis-widget details.aw-adv{
  margin-top:22px;border-top:1px solid var(--rule-strong);padding-top:12px;
}
.aegis-widget details.aw-adv summary{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--seal);cursor:pointer;
}
.aegis-widget details.aw-adv summary:focus-visible{outline:2px solid var(--seal);outline-offset:3px}
.aegis-widget .aw-adv-body{padding-top:16px}
.aegis-widget .ps-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0 26px}
.aegis-widget .aw-fine{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;line-height:1.8;
  color:var(--ink-3);max-width:78ch;margin:16px 0 0;
}
.aegis-widget .aw-fine b{color:var(--ink-2);font-weight:600}
.aegis-widget .aw-label{
  font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;margin:16px 0 8px;
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
}
.aegis-widget .aw-label.spaced{margin-top:22px}
.aegis-widget .aw-label.spaced-sm{margin-top:14px}
.aegis-widget .aw-label .meta{color:var(--seal);letter-spacing:.04em;text-transform:none;font-weight:400}
.aegis-widget .aw-label .meta.bad{color:var(--deny)}

.aegis-widget label.f{display:block;font-family:var(--mono);font-size:10.5px;color:var(--ink-2);margin-bottom:3px;letter-spacing:.03em}
.aegis-widget label.f.spaced{margin-top:10px}
.aegis-widget input[type=text],
.aegis-widget .aw-adv-body textarea{
  width:100%;font-family:var(--mono);font-size:12.5px;line-height:1.6;
  border:1px solid var(--rule-strong);background:var(--paper-2);color:var(--ink);
  padding:8px 10px;border-radius:7px;
}
.aegis-widget input[type=text]:focus,
.aegis-widget .aw-adv-body textarea:focus{outline:2px solid var(--seal);outline-offset:-1px;background:var(--paper)}
.aegis-widget .aw-adv-body textarea{resize:vertical}
.aegis-widget #ps-policy{height:290px}
.aegis-widget #ps-args{height:96px}
.aegis-widget .bad-json{border-color:var(--deny)}

/* the staircase: evaluation order made visible */
.aegis-widget .stair{margin-top:6px}
.aegis-widget .step{
  display:grid;grid-template-columns:22px 1fr;gap:11px;
  padding:8px 0 8px 10px;border-left:3px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.aegis-widget .step:last-child{border-bottom:none}
.aegis-widget .step .n{font-family:var(--mono);font-size:11px;color:var(--ink-3);padding-top:2px}
.aegis-widget .step .lab{font-family:var(--mono);font-size:12.5px;font-weight:600}
.aegis-widget .step .det{font-size:12.5px;color:var(--ink-2);margin-top:2px;word-break:break-word}
.aegis-widget .step[data-s="pass"]{border-left-color:var(--rule-strong)}
.aegis-widget .step[data-s="pass"] .lab{font-weight:400;color:var(--ink-2)}
.aegis-widget .step[data-s="fail"]{border-left-color:var(--deny);background:rgba(197,61,61,.09)}
.aegis-widget .step[data-s="fail"] .lab{color:var(--deny)}
.aegis-widget .step[data-s="hold"]{border-left-color:var(--hold);background:rgba(255,122,0,.12)}
.aegis-widget .step[data-s="hold"] .lab{color:var(--hold)}
.aegis-widget .step[data-s="skip"] .lab,
.aegis-widget .step[data-s="skip"] .det{color:var(--ink-3);font-weight:400}
.aegis-widget .step[data-s="unreached"]{opacity:.42}
.aegis-widget .step[data-s="unreached"] .lab{font-weight:400}
.aegis-widget .step[data-s="allow"]{border-left-color:var(--allow);background:rgba(59,166,107,.12)}
.aegis-widget .step[data-s="allow"] .lab{color:var(--allow)}

/* budgets: the most business-legible thing on the widget, so it reads in the
   page's own sans, not in mono like the rest of the machine detail */
.aegis-widget .budget{border-bottom:1px solid var(--rule);padding:11px 0}
.aegis-widget .budget:last-of-type{border-bottom:none}
.aegis-widget .budget .top{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;align-items:baseline}
.aegis-widget .budget .top b{font-weight:600;color:var(--ink)}
.aegis-widget .budget .top span{color:var(--ink-2);font-family:var(--mono);font-size:12.5px;white-space:nowrap}
.aegis-widget .meter{height:9px;background:var(--paper-3);margin-top:7px;display:flex;border:1px solid var(--rule-strong)}
.aegis-widget .meter i{display:block;height:100%}
.aegis-widget .meter .used{background:var(--seal)}
.aegis-widget .legend{font-size:12px;color:var(--ink-3);margin-top:9px;line-height:1.5}

.aegis-widget .acts{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 4px}
.aegis-widget .acts button.act{font-size:12px;padding:9px 15px}
.aegis-widget .log{font-family:var(--mono);font-size:11.5px;line-height:1.85;color:var(--ink-2);margin-top:6px;max-height:170px;overflow:auto}
.aegis-widget .log div{border-bottom:1px dotted var(--rule);padding:2px 0;word-break:break-all}
.aegis-widget .log .k{color:var(--seal)}
.aegis-widget .log .empty{color:var(--ink-3);border:none;font-style:normal}

@media (max-width:840px){
  .aegis-widget .ps-cols{grid-template-columns:1fr}
  .aegis-widget .ps-main{border-right:none;padding-right:0;padding-bottom:10px}
  .aegis-widget .ps-side{padding-left:0;border-top:1px solid var(--rule);padding-top:4px}
}
@media (max-width:520px){
  .aegis-widget .ps-scenarios{grid-template-columns:1fr;gap:8px}
}