/* /demos/agent-gateway — the page's own chrome.
 *
 * THE VERDICT COLOURS CARRY MEANING, so none of them is the only carrier. Every
 * verdict prints its name in words in the badge as well, because a reader who
 * cannot distinguish the three colours must still be able to distinguish an
 * allow from a refusal — and because a printed evidence report is often
 * greyscale.
 */

.agw-badge {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
  font-size: .95rem;
}

.agw-badge-chip {
  flex: 0 0 auto;
  padding: .15rem .55rem;
  border: 1px solid currentColor;
  border-radius: .25rem;
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.agw-honesty {
  border: 1px solid rgba(128, 128, 128, .4);
  border-radius: .35rem;
  padding: 1rem 1.1rem .6rem;
  margin: 1.4rem 0;
}

.agw-honesty-head {
  font-size: 1.05rem;
  margin: 0 0 .6rem;
}

.agw-honesty ul {
  margin: 0;
  padding-left: 1.1rem;
}

.agw-honesty li {
  margin-bottom: .6rem;
}

/* --- the fleet and rule tables --------------------------------------------- */

.agw-num {
  text-align: right;
  white-space: nowrap;
}

.agw-id,
.agw-code {
  font-size: .85em;
}

.agw-charter {
  font-size: .9em;
}

.agw-scope {
  opacity: .8;
  font-size: .9em;
}

/* --- the controls ---------------------------------------------------------- */

.agw-stage {
  margin: 1.4rem 0;
}

.agw-status {
  margin: 0 0 1rem;
  font-size: .95rem;
  opacity: .9;
}

.agw-controls {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-bottom: 1rem;
}

.agw-controls fieldset {
  border: 1px solid rgba(128, 128, 128, .35);
  border-radius: .35rem;
  padding: .5rem .8rem .8rem;
  margin: 0;
  min-width: 0;
}

.agw-controls legend {
  font-size: .85rem;
  font-weight: 600;
  width: auto;
  padding: 0 .35rem;
  margin-bottom: 0;
}

.agw-controls label {
  display: block;
  font-size: .85rem;
  margin: .5rem 0 .15rem;
}

.agw-controls input[type="range"] {
  width: 100%;
}

.agw-toggles label {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: .35rem 0;
}

.agw-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

/* A notice is not a warning about the reader's browser — it is the engine
 * saying what it did with a number, so it reads as information rather than as
 * an error. */
.agw-notices {
  border-left: 3px solid currentColor;
  padding: .4rem .7rem;
  margin: .8rem 0;
  font-size: .9rem;
  opacity: .9;
}

/* --- the figures ----------------------------------------------------------- */

.agw-figures {
  display: grid;
  gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  margin: 1rem 0 1.4rem;
}

.agw-figure {
  border: 1px solid rgba(128, 128, 128, .35);
  border-radius: .35rem;
  padding: .7rem .8rem;
}

.agw-fig-n {
  display: block;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.1;
}

.agw-fig-l {
  display: block;
  font-size: .85rem;
  opacity: .85;
}

/* --- the policy diff ------------------------------------------------------- */

.agw-diff {
  border: 1px solid rgba(128, 128, 128, .45);
  border-radius: .35rem;
  padding: .9rem 1rem;
  margin: 1.2rem 0;
}

.agw-diff h3 {
  font-size: 1.05rem;
  margin: 0 0 .5rem;
}

.agw-diff-empty {
  margin: 0;
  opacity: .9;
}

.agw-diff-table {
  width: 100%;
  font-size: .9rem;
  border-collapse: collapse;
  margin-bottom: .8rem;
}

.agw-diff-table th,
.agw-diff-table td {
  text-align: left;
  padding: .25rem .5rem .25rem 0;
  border-bottom: 1px solid rgba(128, 128, 128, .25);
}

.agw-flips {
  margin: 0;
  padding-left: 1.1rem;
  font-size: .9rem;
}

.agw-flips li {
  margin-bottom: .35rem;
}

/* Direction is the field that matters on a diff, so it is the one that gets a
 * weight of its own. */
.agw-dir {
  font-weight: 600;
}

/* --- the stream ------------------------------------------------------------ */

.agw-stream {
  list-style: decimal;
  padding-left: 2.4rem;
  margin: 1rem 0 1.6rem;
}

.agw-action {
  border-left: 4px solid transparent;
  padding: .55rem .8rem;
  margin-bottom: .5rem;
  background: rgba(128, 128, 128, .06);
  border-radius: 0 .25rem .25rem 0;
}

.agw-action p {
  margin: 0 0 .25rem;
}

.agw-action-head {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
}

.agw-verdict {
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: .1rem .45rem;
  border: 1px solid currentColor;
  border-radius: .2rem;
}

.agw-action-title {
  font-weight: 600;
}

.agw-action-agent {
  font-family: var(--bs-font-monospace, monospace);
  font-size: .82rem;
  opacity: .85;
}

.agw-action-said {
  font-size: .92rem;
}

.agw-action-facts {
  font-size: .85rem;
  opacity: .85;
}

.agw-reasons {
  margin: .35rem 0 .25rem;
  padding-left: 1.1rem;
  font-size: .88rem;
}

.agw-reasons-none {
  font-size: .88rem;
  opacity: .8;
}

.agw-codes {
  font-size: .78rem;
  opacity: .75;
}

/* The three verdicts. The border colour is the fast signal and the badge text
 * is the real one. */
.agw-v-allow {
  border-left-color: #2f8f4e;
}

.agw-v-require-approval {
  border-left-color: #b8860b;
}

.agw-v-block {
  border-left-color: #b3382c;
}

/* --- the blind run --------------------------------------------------------- */

.agw-score {
  border: 1px solid rgba(128, 128, 128, .4);
  border-radius: .35rem;
  padding: .9rem 1rem;
  margin: 1rem 0;
}

.agw-score p {
  margin: 0 0 .4rem;
}

.agw-score-n {
  font-size: 1.6rem;
  font-weight: 700;
}

.agw-score-l {
  opacity: .9;
}

.agw-score-baseline,
.agw-score-split {
  font-size: .92rem;
  opacity: .9;
}

/* THE READING AND THE LIMIT ARE SET LARGER THAN THE FIGURES ABOVE THEM, and
 * that is the point rather than a style choice: the run came back perfect, and
 * a page that renders the number prominently and the caveat as fine print has
 * told a reader something false with typography. */
.agw-reading,
.agw-limit {
  border-left: 3px solid currentColor;
  padding: .5rem .9rem;
  margin: .9rem 0;
  font-size: 1rem;
}

.agw-method {
  border: 1px solid rgba(128, 128, 128, .4);
  border-radius: .35rem;
  padding: .9rem 1rem .5rem;
  margin: 1.2rem 0;
}

.agw-method-head {
  font-size: 1.02rem;
  margin: 0 0 .5rem;
}

.agw-method ol {
  padding-left: 1.2rem;
  margin-bottom: .6rem;
}

.agw-method li {
  margin-bottom: .45rem;
  font-size: .93rem;
}

.agw-correction {
  font-size: .93rem;
  margin: 0 0 .5rem;
}

.agw-misses {
  padding-left: 1.1rem;
}

.agw-misses li {
  margin-bottom: .8rem;
}

.agw-miss-head,
.agw-miss-said,
.agw-miss-engine,
.agw-miss-model {
  margin: 0 0 .2rem;
  font-size: .92rem;
}

.agw-no-misses {
  border-left: 3px solid currentColor;
  padding: .5rem .9rem;
  opacity: .95;
}

/* --- the prompt ------------------------------------------------------------ */

.agw-prompt {
  margin: 1rem 0 1.4rem;
}

.agw-prompt summary {
  cursor: pointer;
  font-weight: 600;
}

.agw-prompt pre {
  max-height: 30rem;
  overflow: auto;
  font-size: .8rem;
  line-height: 1.35;
  padding: .8rem;
  margin-top: .6rem;
  background: rgba(128, 128, 128, .08);
  border-radius: .3rem;
}

.agw-limits li {
  margin-bottom: .5rem;
}

.agw-source {
  font-size: .9rem;
  opacity: .9;
}

/* --- the generated report -------------------------------------------------- */

.agw-report-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin: .8rem 0;
}

.agw-report {
  border: 1px solid rgba(128, 128, 128, .45);
  border-radius: .35rem;
  padding: 1rem 1.1rem;
  margin: 1rem 0 1.6rem;
}

.agw-report h3 {
  font-size: 1.1rem;
  margin: 0 0 .5rem;
}

.agw-report-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .15rem .8rem;
  font-size: .88rem;
  margin: .7rem 0;
}

.agw-report-meta dt {
  font-weight: 600;
}

.agw-report-meta dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.agw-report-row {
  border-top: 1px solid rgba(128, 128, 128, .25);
  padding: .5rem 0;
  font-size: .88rem;
}

.agw-report-row p {
  margin: 0 0 .2rem;
}

.agw-report-approver {
  opacity: .8;
  font-style: italic;
}

.agw-attestation {
  margin-top: 1.2rem;
  padding-top: .8rem;
  border-top: 1px solid rgba(128, 128, 128, .35);
}

.agw-signature-rule {
  border-bottom: 1px solid currentColor;
  height: 2rem;
  max-width: 22rem;
  margin: .8rem 0 .3rem;
}

.agw-signature-label {
  font-size: .82rem;
  opacity: .85;
}

/* PRINTING SHOWS THE REPORT AND NOTHING ELSE. A printed page carrying the
 * sliders, the stream and the prompt would bury the artifact somebody meant to
 * put in front of another person. */
@media print {
  body.agw-printing .agw-stage > *:not(.agw-report),
  body.agw-printing h1,
  body.agw-printing .lead,
  body.agw-printing .agw-badge,
  body.agw-printing .agw-honesty,
  body.agw-printing .agw-prompt,
  body.agw-printing .agw-method,
  body.agw-printing .agw-score,
  body.agw-printing .table-responsive,
  body.agw-printing header,
  body.agw-printing footer {
    display: none !important;
  }

  body.agw-printing .agw-report {
    border: 0;
    padding: 0;
  }
}

@media (max-width: 575.98px) {
  .agw-fig-n {
    font-size: 1.4rem;
  }

  .agw-stream {
    padding-left: 1.6rem;
  }

  .agw-report-meta {
    grid-template-columns: 1fr;
  }

  .agw-report-meta dt {
    margin-top: .4rem;
  }
}

/* --- what this page got wrong ---------------------------------------------- */

.agw-findings {
  padding-left: 1.4rem;
  margin: 1rem 0 1.6rem;
}

.agw-finding {
  margin-bottom: 1.1rem;
}

.agw-finding p {
  margin: 0 0 .4rem;
  font-size: .93rem;
}

.agw-finding-title {
  font-size: 1.02rem;
  margin: 0 0 .4rem;
}

/* WHAT CAUGHT IT is set apart because it is the transferable half. Each of the
 * three defects was invisible to a different class of check, and the sentence
 * naming which one found it is the sentence a reader can act on. */
.agw-finding-caught {
  border-left: 3px solid currentColor;
  padding-left: .7rem;
  opacity: .95;
}

/* --- the contestable set --------------------------------------------------- */

.agw-hard-kind {
  font-family: var(--bs-font-monospace, monospace);
  font-size: .8rem;
  opacity: .85;
}

/* ENGINE-DEFINED IS MARKED, NOT COLOURED. Thirteen of these have no defensible
 * right answer outside the engine, and a reader scanning the table has to be
 * able to tell which — a colour alone would not survive a printed page or a
 * reader who cannot distinguish it. */
.agw-hard-contested {
  display: inline-block;
  padding: .05rem .35rem;
  border: 1px solid currentColor;
  border-radius: .2rem;
  font-size: .72rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}

[data-test="agw-hard-table"] td {
  font-size: .88rem;
  vertical-align: top;
}