/* /demos/iam-lab — the access-review page's own chrome.
 *
 * Colors come from the site variables in css.css so the page follows the theme
 * toggle. Nothing here restates a value the shell already owns, and nothing
 * here keys on a Go constant — the tier and severity class names are the only
 * shared vocabulary and they arrive from the template. */

.iam-provenance {
  border-left: 3px solid var(--border, #ccc);
  padding: 0.5rem 0 0.5rem 1rem;
  margin: 1.5rem 0;
}

.iam-provenance p {
  margin-bottom: 0.6rem;
}

.iam-provenance code {
  font-size: 0.85em;
  word-break: break-all;
}

/* The headline figures. A grid rather than a flex row so the four boxes stay
 * the same width as their numbers change under a slider — a layout that
 * reflowed on every keystroke would read as the page glitching. */
.iam-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1rem;
  margin: 1.5rem 0 0.75rem;
}

.iam-figure {
  border: 1px solid var(--border, #ccc);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  text-align: center;
}

.iam-figure-value {
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.iam-figure-label {
  display: block;
  font-size: 0.85rem;
  opacity: 0.8;
}

.iam-note {
  font-size: 0.9rem;
  opacity: 0.85;
  margin-bottom: 1.25rem;
}

.iam-denominator {
  opacity: 0.7;
  font-size: 0.9em;
}

.iam-clean-row {
  font-weight: 600;
}

/* Tier and severity badges. The tier scale is deliberately NOT a red-amber-green
 * ramp: tier is what a rule compares, not how bad it is, and coloring it like a
 * severity would tell a reader that a peer comparison is the safe kind of
 * finding. Severity gets the ramp, because that is what it means. */
.iam-tier,
.iam-sev {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.iam-tier {
  border: 1px solid var(--border, #ccc);
}

.iam-tier-1 { border-style: solid; }
.iam-tier-2 { border-style: dashed; }
.iam-tier-3 { border-style: dotted; }

.iam-sev-high {
  background: #b3261e;
  color: #fff;
}

.iam-sev-medium {
  background: #8a5a00;
  color: #fff;
}

.iam-sev-low {
  background: transparent;
  border: 1px solid var(--border, #ccc);
}

/* The controls. */
.iam-stage {
  border: 1px solid var(--border, #ccc);
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0 2rem;
}

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

.iam-control label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.iam-control input[type="range"],
.iam-control select {
  width: 100%;
}

.iam-control-note {
  font-size: 0.82rem;
  opacity: 0.8;
  margin: 0.35rem 0 0;
}

.iam-control-toggle label {
  font-weight: 600;
}

.iam-status {
  margin: 1rem 0 0;
  font-size: 0.9rem;
  opacity: 0.9;
}

.iam-live-figures {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.iam-decisions {
  opacity: 0.85;
}

/* The queue. */
.iam-queue {
  list-style: none;
  padding-left: 0;
}

.iam-finding {
  border: 1px solid var(--border, #ccc);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.iam-finding-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.iam-rule-title {
  font-weight: 600;
}

.iam-who {
  margin-bottom: 0.25rem;
}

.iam-detail,
.iam-grants {
  margin-bottom: 0.5rem;
}

.iam-grants code {
  font-size: 0.85em;
}

/* The assessment panel is visually distinct from the engine's own output,
 * because they have different authors and different standing: one is a
 * deterministic rule and the other is a model's prose. A reader who cannot tell
 * them apart has been given a worse page. */
.iam-assessment {
  border-left: 3px solid var(--border, #ccc);
  background: rgba(127, 127, 127, 0.06);
  padding: 0.6rem 0.9rem;
  margin: 0.75rem 0;
  border-radius: 0 6px 6px 0;
}

.iam-assessment-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.75;
  margin: 0 0 0.4rem;
}

.iam-narrative {
  margin-bottom: 0.5rem;
}

.iam-action {
  margin-bottom: 0;
  font-size: 0.92rem;
}

/* The no-assessment case is ITALIC AND MUTED rather than hidden or blank. A
 * blank panel reads as "nothing to say about this finding", which is the
 * opposite of "nobody has been asked about this finding". */
.iam-no-assessment {
  font-style: italic;
  opacity: 0.8;
  margin-bottom: 0;
}

.iam-decide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.iam-certify,
.iam-revoke {
  border: 1px solid var(--border, #ccc);
  background: transparent;
  color: inherit;
}

.iam-certify:hover,
.iam-revoke:hover {
  border-color: currentColor;
}

/* A decided finding is dimmed but STAYS IN THE LIST. Removing it would make the
 * queue shorter as a reader works, which looks like progress and loses the
 * record of what they decided — and the end summary is a count of exactly
 * that. */
.iam-finding[data-decision] {
  opacity: 0.6;
}

.iam-finding[data-decision] .iam-decide button {
  visibility: hidden;
}

.iam-decided {
  font-weight: 600;
  font-size: 0.85rem;
}

.iam-summary {
  border: 1px solid var(--border, #ccc);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-weight: 600;
}

.iam-limits li {
  margin-bottom: 0.4rem;
}

.iam-source {
  font-size: 0.9rem;
  opacity: 0.9;
}

@media (max-width: 576px) {
  .iam-figure-value {
    font-size: 1.5rem;
  }

  .iam-finding-head {
    gap: 0.35rem;
  }
}