/**
 * Claims audit — product styles.
 *
 * The source design (Claims Audit.dc.html) carries its styling inline
 * on every element, which is how the canvas emits it. Here those styles are
 * lifted into classes so a change lands in one place. Values are unchanged
 * from the design; every colour resolves through a token in tokens.css, so
 * re-skinning stays a tokens-only edit.
 */

* { box-sizing: border-box; }

/* Must outrank the display rules below — .modal sets display:flex, which
   would otherwise win over the UA's [hidden] and show the letter on load. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--az-font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--az-on-surface);
  background: var(--azp-surface-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--azp-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Shell ───────────────────────────────────────────────── */
/* The sidebar is the outer column and runs the full height; the topbar sits
   inside the main column. That is the inverse of the previous shell, where a
   dark bar spanned the top and a light rail hung beneath it. */

.app { display: flex; height: 100vh; min-height: 620px; overflow: hidden; }

/* ── Sidebar ─────────────────────────────────────────────── */

.nav {
  width: 236px; flex: none;
  background: var(--az-background-dark);
  color: var(--azp-on-dark);
  display: flex; flex-direction: column;
}
.nav__brand {
  padding: 22px 20px 18px;
  border-bottom: 1px solid var(--azp-on-dark-rule);
}
.nav__word {
  font-family: var(--az-font-medium); font-weight: 500;
  font-size: 17px; letter-spacing: 0.14em; color: var(--azp-on-dark-strong);
}
.nav__tagline {
  font-family: var(--az-font-medium);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--azp-on-dark-label); margin-top: 4px;
}

.nav__items { flex: 1; overflow-y: auto; padding: 14px 0; display: flex; flex-direction: column; gap: 2px; }
.nav__item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 20px 10px 18px;
  font-size: 13.5px; color: var(--azp-on-dark-faint);
  border-left: 3px solid transparent;
  transition: background var(--az-duration-fast) var(--az-ease),
              color var(--az-duration-fast) var(--az-ease);
}
.nav__item:hover { background: var(--azp-on-dark-wash); color: var(--azp-on-dark-strong); text-decoration: none; }
.nav__item--on {
  color: var(--azp-on-dark-strong);
  background: var(--azp-on-dark-wash);
  border-left-color: var(--azp-nav-marker);
  font-weight: 500; font-family: var(--az-font-medium);
}
.nav__count {
  font-size: 11px; padding: 2px 7px; border-radius: var(--az-radius-pill);
  background: var(--azp-on-dark-rule); color: var(--azp-on-dark-strong);
}

.nav__sub-group { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--azp-on-dark-rule); }
.nav__group-head {
  padding: 0 20px 6px; font-family: var(--az-font-medium);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--azp-on-dark-muted);
}
.nav__claim { padding: 0 20px 8px; font-size: 12px; color: var(--azp-on-dark-strong); }
.nav__item--sub { font-size: 12.5px; padding-left: 20px; }

.nav__status {
  padding: 14px 20px; border-top: 1px solid var(--azp-on-dark-rule);
  color: var(--azp-on-dark-strong); display: block;
}
.nav__status:hover { background: var(--azp-on-dark-wash); text-decoration: none; }
.nav__status-head {
  font-family: var(--az-font-medium);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--azp-on-dark-muted);
}
.nav__status-body { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; }
.nav__dot {
  width: 8px; height: 8px; flex: none; border-radius: var(--az-radius-pill);
  background: var(--azp-status-ok); animation: cnPulse 2s ease infinite;
}
.nav__dot--off { background: var(--az-accent); animation: none; }
@keyframes cnPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.nav__user {
  padding: 14px 20px; border-top: 1px solid var(--azp-on-dark-rule);
  display: flex; align-items: center; gap: 10px;
}
.nav__avatar {
  width: 32px; height: 32px; flex: none; border-radius: var(--az-radius-pill);
  background: var(--az-primary-light); color: var(--azp-on-dark-strong);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 500; font-family: var(--az-font-medium);
}
.nav__who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.nav__name { font-size: 12.5px; font-weight: 500; color: var(--azp-on-dark-strong); }
.nav__role { font-size: 10.5px; color: var(--azp-on-dark-muted); }

.nav__foot {
  padding: 12px 20px 16px; border-top: 1px solid var(--azp-on-dark-rule);
  font-size: 10.5px; line-height: 1.5; color: var(--azp-on-dark-muted);
}

/* ── Main column and topbar ──────────────────────────────── */

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }

.hdr {
  height: 56px; flex: none; background: var(--az-surface);
  border-bottom: 1px solid var(--azp-divider);
  display: flex; align-items: center; gap: 16px; padding: 0 24px;
}
.hdr__crumbs {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--az-on-surface-variant);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hdr__sep { color: var(--az-outline); }
.hdr__here { color: var(--az-on-surface); font-weight: 500; font-family: var(--az-font-medium); }
.hdr__plan {
  display: flex; align-items: center; gap: 8px; flex: none;
  font-size: 12.5px; color: var(--az-on-surface-variant);
  border: 1px solid var(--azp-divider); border-radius: var(--az-radius-md);
  padding: 7px 12px; background: var(--az-surface);
}
.hdr__plan-dot { width: 8px; height: 8px; border-radius: var(--az-radius-pill); background: var(--az-primary); }

.hdr__search { position: relative; width: 280px; flex: none; }
.hdr__search-icon {
  position: absolute; left: 12px; top: 10px;
  color: var(--az-outline); pointer-events: none;
}
.hdr__search input {
  width: 100%; font-family: inherit; font-size: 13px;
  padding: 8px 12px 8px 34px;
  border: 1px solid var(--azp-chart-track); border-radius: var(--az-radius-md);
  background: var(--az-surface); color: var(--az-on-surface); outline: none;
}
.hdr__search input:focus { border-color: var(--az-primary-light); }

.scroll { flex: 1; overflow: auto; min-height: 0; }
.page { padding: 28px 32px 40px; }

/* ── Page headers ────────────────────────────────────────── */

.page__top {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 20px;
}
h1.title {
  margin: 4px 0 0; font-size: 30px; font-weight: 400; line-height: 1.1;
  letter-spacing: -0.02em; font-family: var(--az-font-display);
}
.lede { margin: 8px 0 0; font-size: 14px; color: var(--az-on-surface-variant); }
.lede--gap { margin: 8px 0 20px; }

/* ── Buttons ─────────────────────────────────────────────── */

.btn {
  height: 36px; padding: 0 16px; border-radius: var(--az-radius-lg);
  border: 1px solid var(--azp-chart-track); background: #fff;
  font-family: inherit; font-size: 13px; color: var(--az-primary);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: border-color var(--az-duration-fast) var(--az-ease),
              background var(--az-duration-fast) var(--az-ease);
}
.btn:hover { border-color: var(--az-primary); text-decoration: none; }
.btn--primary {
  border: 1px solid transparent; padding: 0 16px;
  background: var(--az-primary); color: var(--az-on-primary);
  font-weight: 500; font-family: var(--az-font-medium);
}
.btn--primary:hover { background: var(--az-primary-dark); }
.btn--outline { border-color: var(--azp-chart-track); color: var(--az-primary); font-weight: 500; font-family: var(--az-font-medium); }
.btn--outline:hover { background: var(--azp-row-hover); }
.btn--block { width: 100%; height: 36px; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn:disabled:hover { border-color: var(--az-outline-variant); }

.btn--icon {
  border: none; background: none; font-size: 20px; line-height: 1;
  cursor: pointer; color: var(--az-on-surface-variant); height: auto; padding: 0;
}

/* ── Cards ───────────────────────────────────────────────── */

.card {
  background: var(--az-surface); border: 1px solid var(--azp-divider);
  border-radius: var(--az-radius-lg);
}
.card--pad { padding: 20px; }
.card--clip { overflow: hidden; }
.card__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 14px;
}
/* The design sets a card title in the display face at 18px rather than in
   body weight, which is what separates a card header from a row. */
.card__title {
  margin: 0; font-size: 18px; font-weight: 400;
  font-family: var(--az-font-display); letter-spacing: -0.01em;
}
.card__meta { font-size: 12.5px; color: var(--az-on-surface-variant); }
.card__cap {
  padding: 18px 20px; border-bottom: 1px solid var(--azp-divider);
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
}

.grid { display: grid; gap: 24px; }
.grid--kpi { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 24px; }
.grid--two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); margin-bottom: 24px; }
.grid--facts { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); margin-bottom: 24px; }

/* ── KPI tiles ───────────────────────────────────────────── */

.kpi {
  background: var(--az-surface); border: 1px solid var(--azp-divider);
  border-radius: var(--az-radius-lg); padding: 16px 18px;
}
.kpi__label {
  font-family: var(--az-font-medium); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--az-on-surface-variant);
}
.kpi__value {
  font-family: var(--az-font-display); font-size: 30px; font-weight: 400;
  line-height: 1; letter-spacing: -0.02em; margin: 10px 0 6px;
}
.kpi__delta { font-size: 12px; color: var(--az-on-surface-variant); }
.kpi__delta--good { color: var(--az-success); }
.kpi__delta--warn { color: var(--azp-severity-high); }

/* ── Meters ──────────────────────────────────────────────── */

.meters { display: flex; flex-direction: column; gap: 12px; }
.meter__row { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 5px; }
.meter__val { color: var(--az-on-surface-variant); }
.meter__track { height: 5px; background: var(--azp-track); border-radius: var(--az-radius-pill); overflow: hidden; }
.meter__fill { height: 100%; background: var(--az-primary); }
.meter__fill--light { background: var(--az-primary-light); }
.meter__fill--secondary { background: var(--azp-chart-track); }

/* ── SLA list ────────────────────────────────────────────── */

.sla { display: flex; flex-direction: column; }
.sla__row {
  display: flex; align-items: center; gap: 12px; padding: 9px 0;
  border-top: 1px solid var(--azp-divider);
  font-size: 12.5px; color: var(--az-on-surface);
}
.sla__row:hover { color: var(--az-on-surface); background: var(--azp-row-hover); }
.sla__id { width: 104px; flex: none; color: var(--az-primary); white-space: nowrap; }
.sla__reason { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sla__amt { color: var(--az-on-surface-variant); }

/* ── Tables ──────────────────────────────────────────────── */

.tw { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.t--queue { min-width: 1080px; }
/* The workspace's left column is 577px at 1440px wide, so a 620px floor
   clipped the Result pill on every claim and left the most important
   table in the app permanently scrolled. */
table.t--lines { min-width: 560px; }
.t thead tr { text-align: left; color: var(--az-on-surface-variant); background: var(--azp-surface-th); }
.t--zebra thead tr { background: var(--azp-surface-th); }
.t th {
  font-family: var(--az-font-medium); font-weight: 500;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 10px 16px;
  border-bottom: 1px solid var(--azp-divider);
}
.t--queue th { padding: 9px 14px; }
.t--lines th { border-top: 1px solid var(--azp-divider); }
.t td { padding: 13px 16px; border-bottom: 1px solid var(--azp-divider-soft); }
.t--queue td { padding: 13px 14px; }
.t--tight td { padding: 11px 16px; }
.t .r { text-align: right; }
.t tbody tr.click { cursor: pointer; }
.t tbody tr.click:hover { background: var(--azp-row-hover); }
.t tbody tr.deny { background: var(--azp-row-deny); }
.t__sub { font-size: 11px; color: var(--az-on-surface-variant); }
/* An identifier is a single token — it wraps badly and reads worse. The
   design sets every column but the recommendation to nowrap for this reason. */
.t__id { color: var(--azp-link); white-space: nowrap; }
.t--queue td { white-space: nowrap; }
.t--queue td.t__wrap { white-space: normal; }

/* ── Pills ───────────────────────────────────────────────── */

.pill {
  display: inline-block; padding: 3px 9px; border-radius: var(--az-radius-pill);
  font-family: var(--az-font-medium); font-weight: 500;
  font-size: 11.5px; white-space: nowrap;
  background: var(--azp-severity-low-bg); color: var(--azp-severity-low);
}
.pill--critical { background: var(--azp-severity-critical-bg); color: var(--azp-severity-critical); }
.pill--high     { background: var(--azp-severity-high-bg);     color: var(--azp-severity-high); }
.pill--medium   { background: var(--azp-severity-medium-bg);   color: var(--azp-severity-medium); }
.pill--low      { background: var(--azp-severity-low-bg);      color: var(--azp-severity-low); }
.pill--pay      { background: var(--azp-positive-bg);          color: var(--azp-positive); }
.pill--deny     { background: var(--azp-severity-critical-bg); color: var(--azp-severity-critical); }
.pill--reprice  { background: var(--azp-severity-medium-bg);   color: var(--azp-severity-medium); }
.pill--hold     { background: var(--azp-severity-low-bg);      color: var(--azp-severity-low); }
.pill--review   { background: var(--azp-code-bg);              color: var(--az-primary); }
.pill--brand    { background: var(--azp-code-bg);              color: var(--az-primary); }
.pill--neutral  { background: var(--azp-code-bg-neutral);      color: var(--azp-code-identifier); }
.pill--warn     { background: var(--azp-severity-high-bg);     color: var(--azp-severity-high); }
.pill--diagnosis  { background: var(--azp-code-bg);         color: var(--azp-code-diagnosis); }
.pill--procedure  { background: var(--azp-code-bg);         color: var(--azp-code-procedure); }
.pill--identifier { background: var(--azp-code-bg-neutral); color: var(--azp-code-identifier); }

/* ── Filter chips ────────────────────────────────────────── */

.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.chip {
  height: 32px; padding: 0 12px; border-radius: var(--az-radius-pill);
  border: 1px solid var(--az-outline-variant); background: #fff;
  color: var(--az-on-surface); font-family: inherit; font-size: 12.5px; cursor: pointer;
  transition: border-color var(--az-duration-fast) var(--az-ease);
}
.chip:hover { border-color: var(--az-primary); }
.chip--on { border-color: var(--az-primary); background: var(--az-surface-variant); color: var(--az-primary); }
.search {
  height: 34px; min-width: 240px; flex: 1; max-width: 340px; padding: 0 12px;
  border: 1px solid var(--az-outline-variant); border-radius: var(--az-radius-sm);
  font-family: inherit; font-size: 13px; color: var(--az-on-surface); background: #fff;
}
.search:focus { outline: none; border-color: var(--az-primary); }
.filters__spacer { flex: 1; }
.filters__note { font-size: 12px; color: var(--az-on-surface-variant); }

/* ── Claim workspace ─────────────────────────────────────── */

.ws__head { background: #fff; border-bottom: 1px solid var(--azp-divider); padding: 14px 28px; }
.crumbs {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--az-on-surface-variant); margin-bottom: 8px;
}
.ws__bar {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.ws__title { margin: 0 0 6px; font-size: 24px; font-weight: 400; letter-spacing: -0.02em; font-family: var(--az-font-display); }
.ws__facts { display: flex; flex-wrap: wrap; gap: 18px; font-size: 12.5px; color: var(--az-on-surface-variant); }
.ws__sla { color: var(--azp-severity-high); }
.ws__actions { display: flex; gap: 8px; flex-wrap: wrap; }

.ws__body {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr));
  gap: 16px; padding: 18px 28px 40px; align-items: start;
}
.ws__col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.edits { display: flex; flex-direction: column; gap: 10px; }
.edit {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 12px; border: 1px solid var(--azp-divider); border-radius: var(--az-radius-md);
}
.edit__title { font-size: 13px; }
.edit__detail { font-size: 12px; color: var(--az-on-surface-variant); line-height: 1.5; margin-top: 2px; }
.edit__spacer { flex: 1; }
.edit__src { font-size: 11px; color: var(--az-on-surface-variant); white-space: nowrap; }

.tl { display: flex; flex-direction: column; }
.tl__row { display: flex; gap: 14px; padding: 9px 0; border-top: 1px solid var(--azp-divider); font-size: 12.5px; }
.tl__when { width: 110px; color: var(--az-on-surface-variant); flex: none; }
.tl__what { flex: 1; }
.tl__who { color: var(--az-on-surface-variant); }

/* ── Recommendation rail ─────────────────────────────────── */

.rail {
  background: #fff; border: 1px solid var(--az-outline-variant);
  border-radius: var(--az-radius-lg); overflow: hidden;
  position: sticky; top: 18px;
}
.rail__hero { background: var(--az-gradient-hero); color: #fff; padding: 16px 18px; }
.rail__headline { font-size: 17px; margin: 8px 0 4px; line-height: 1.3; }
.rail__detail { font-size: 12.5px; opacity: 0.8; }
.rail__conf { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.rail__track { flex: 1; height: 5px; background: var(--azp-on-dark-track); border-radius: var(--az-radius-sm); overflow: hidden; }
.rail__fill { height: 100%; background: var(--az-accent); }
.rail__pct { font-size: 12px; }
.rail__body { padding: 16px 18px; }

.ev { display: flex; flex-direction: column; gap: 2px; }
.ev__item { padding: 10px 0; border-bottom: 1px solid var(--azp-divider); display: flex; gap: 8px; align-items: baseline; }
.ev__dot {
  width: 6px; height: 6px; border-radius: var(--az-radius-pill);
  background: var(--az-primary); flex: none; margin-top: 6px; display: block;
}
.ev__claim { font-size: 12.5px; line-height: 1.45; }
.ev__src { margin-top: 6px; }

.rail__acts { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.rail__acts-row { display: flex; gap: 8px; }
.rail__acts-row .btn { flex: 1; font-size: 12.5px; }
.rail__note { font-size: 11px; color: var(--az-on-surface-variant); line-height: 1.5; margin: 14px 0 0; }

.notice {
  margin-top: 12px; padding: 10px 12px; border-radius: var(--az-radius-md);
  font-size: 12px; line-height: 1.5;
  background: var(--azp-positive-bg); color: var(--azp-positive);
}
.notice--warn { background: var(--azp-severity-high-bg); color: var(--azp-severity-high); }
.notice--info { background: var(--az-surface-variant); color: var(--az-primary); }

/* ── Live agent result ───────────────────────────────────── */

.live { margin-top: 14px; border-top: 1px solid var(--azp-divider); padding-top: 14px; }
.live__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.live__meta { font-size: 11px; color: var(--az-on-surface-variant); }
.live__headline { font-size: 13.5px; line-height: 1.4; margin: 0 0 4px; }
.live__detail { font-size: 12px; color: var(--az-on-surface-variant); margin: 0 0 8px; }
.live__narrative {
  font-size: 12px; line-height: 1.55; white-space: pre-wrap;
  max-height: 320px; overflow: auto; margin: 0;
  font-family: inherit; color: var(--az-on-surface);
}
.live__finding { padding: 8px 0; border-top: 1px solid var(--azp-divider); }
.live__finding-title { font-size: 12.5px; }
.live__finding-detail { font-size: 11.5px; color: var(--az-on-surface-variant); line-height: 1.45; margin-top: 2px; }

.spinner {
  width: 12px; height: 12px; border-radius: var(--az-radius-pill);
  border: 2px solid var(--az-outline-variant); border-top-color: var(--az-primary);
  display: inline-block; animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2s; }
}

/* ── Facts lists ─────────────────────────────────────────── */

.facts__row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 8px 0; border-bottom: 1px solid var(--azp-divider); font-size: 12.5px;
}
.facts__k { color: var(--az-on-surface-variant); }
.facts__v { text-align: right; }

/* ── Analytics ───────────────────────────────────────────── */

.bars { display: flex; align-items: flex-end; gap: 6px; height: 130px; }
.bars__col {
  flex: 1; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center; gap: 6px; height: 100%;
}
.bars__bar { width: 100%; background: var(--azp-chart-track); border-radius: 3px 3px 0 0; }
.bars__bar--last { background: var(--az-primary); }
.bars__label { font-size: 9px; color: var(--az-on-surface-variant); }

/* ── Modal ───────────────────────────────────────────────── */

.modal {
  position: fixed; inset: 0; background: var(--azp-scrim);
  display: flex; align-items: center; justify-content: center;
  padding: 32px; z-index: 40;
}
.modal__panel {
  background: #fff; border-radius: var(--az-radius-lg);
  width: 720px; max-width: 100%; max-height: 100%;
  overflow: auto; display: flex; flex-direction: column;
}
.modal__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding: 18px 22px 14px; border-bottom: 1px solid var(--azp-divider);
}
.modal__title { margin: 6px 0 0; font-size: 18px; font-weight: 400; font-family: var(--az-font-display); }
.modal__body { padding: 20px 22px; font-size: 13px; line-height: 1.65; color: var(--az-on-surface); }
.modal__body p { margin: 0 0 12px; }
.modal__body p:last-child { margin: 0; }
.modal__foot {
  padding: 14px 22px; border-top: 1px solid var(--azp-divider);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.modal__badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--az-radius-pill);
  background: var(--az-surface-variant); font-size: 11px; color: var(--az-primary);
}
.modal__spacer { flex: 1; }

/* ── Error page ──────────────────────────────────────────── */

.err { padding: 64px 28px; max-width: 560px; }
.err__code { font-size: 44px; font-weight: 400; letter-spacing: -0.02em; margin: 0 0 8px; }

/* ── Narrow screens ──────────────────────────────────────── */

@media (max-width: 860px) {
  .nav { display: none; }
  .page, .ws__body, .ws__head { padding-left: 16px; padding-right: 16px; }
  .rail { position: static; }
  .hdr__cycle, .hdr__tenant, .hdr__rule { display: none; }
}


/* ── Audit queue: selection ──────────────────────────────── */

.t__check { width: 34px; padding-right: 0 !important; }
.t__check input {
  cursor: pointer;
  accent-color: var(--az-primary);
  width: 14px; height: 14px;
}
.t tbody tr.picked {
  background: var(--azp-row-picked);
  box-shadow: inset 3px 0 0 var(--az-primary);
}
.t tbody tr.picked:hover { background: var(--azp-row-picked); }
.t__risk { color: var(--azp-severity-critical); font-weight: 500; }
.t__muted { color: var(--az-on-surface-variant); }

/* Sticky header, so the columns stay readable down a long batch. */
.tw--tall { max-height: calc(100vh - 260px); overflow-y: auto; }
.t--sticky thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--azp-surface-th);
}

/* ── Bulk action bar ─────────────────────────────────────── */

.bulk {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 10px;
  border-radius: var(--az-radius-lg);
  background: var(--az-surface-variant);
  border: 1px solid var(--az-primary);
}
.bulk__count { font-size: 12.5px; color: var(--az-primary); }
.bulk__amount { font-size: 12.5px; color: var(--az-on-surface-variant); }
.bulk__spacer { flex: 1; }

.btn--sm { height: 30px; padding: 0 12px; font-size: 12.5px; }
.btn--xs { height: 26px; padding: 0 10px; font-size: 12px; border-radius: var(--az-radius-md); }
.is-disabled {
  opacity: 0.45; cursor: not-allowed;
  display: inline-flex; align-items: center; justify-content: center;
}
.is-disabled:hover { border-color: var(--az-outline-variant); }

/* ── Workspace additions ─────────────────────────────────── */

.crumbs { flex-wrap: wrap; }
.crumbs__spacer { flex: 1; }
.crumbs__pos { color: var(--az-on-surface-variant); }
.card__head--inset { padding: 14px 18px 10px; margin: 0; flex-wrap: wrap; gap: 8px; }

/* A clean claim gets a calmer rail than a finding does. */
.rail__hero--clean { background: var(--azp-hero-clean); }
.rail__half { flex: 1; display: flex; }
.rail__half .btn { flex: 1; font-size: 12.5px; }
.rail__undo { margin-top: 8px; }

/* ── Focus ───────────────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--az-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

abbr {
  text-decoration: underline dotted var(--az-outline);
  text-underline-offset: 3px;
  cursor: help;
}

/* ── Source document viewer ──────────────────────────────── */

.doc__meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 20px;
}
.doc__meta-k { font-size: 11px; color: var(--az-on-surface-variant); }
.doc__meta-v { font-size: 12.5px; margin-top: 2px; word-break: break-all; }

.doc__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.doc__tab {
  display: flex; flex-direction: column; gap: 1px;
  padding: 8px 14px; border-radius: var(--az-radius-lg);
  border: 1px solid var(--az-outline-variant); background: #fff;
  color: var(--az-on-surface); font-size: 13px;
  transition: border-color var(--az-duration-fast) var(--az-ease);
}
.doc__tab:hover { border-color: var(--az-primary); color: var(--az-on-surface); }
.doc__tab-sub { font-size: 10.5px; color: var(--az-on-surface-variant); }
.doc__tab--on {
  border-color: var(--az-primary); background: var(--az-surface-variant);
  color: var(--az-primary); font-weight: 500;
}
.doc__tab--on .doc__tab-sub { color: var(--az-primary); }

/* The page the document sits on. Deliberately paper-like, so it reads as a
   document rather than as another panel of the app. */
.doc__page {
  background: #fff; border: 1px solid var(--az-outline-variant);
  border-radius: var(--az-radius-lg); padding: 22px 26px; overflow-x: auto;
}

/* "As received": the same generated form with fax artefacts. It is a styling
   treatment of synthetic data, never an image of a real document. */
.doc__page--scan {
  filter: grayscale(1) contrast(1.22) brightness(0.99);
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.035) 0 1px, transparent 1px 3px),
    var(--azp-paper);
  transform: rotate(-0.25deg);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
}
.doc__page--scan .form1500 { opacity: 0.9; }
.doc__faxline {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px; letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(0,0,0,0.35);
  padding-bottom: 5px; margin-bottom: 14px; color: var(--azp-ink-fax);
}

/* ── CMS-1500 ────────────────────────────────────────────── */

.form1500 { font-size: 12px; color: var(--azp-ink); }
.form1500__head {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  border-bottom: 2px solid var(--az-on-surface); padding-bottom: 10px; margin-bottom: 14px;
}
.form1500__title { font-size: 15px; font-weight: 500; letter-spacing: 0.04em; }
.form1500__sub { font-size: 9.5px; color: var(--az-on-surface-variant); letter-spacing: 0.02em; }
.form1500__carrier { font-size: 10.5px; line-height: 1.5; text-align: right; }

.form1500__boxes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0; border: 1px solid var(--az-outline-variant); margin-bottom: 14px;
}
.form1500__box {
  display: flex; gap: 8px; padding: 7px 10px;
  border-right: 1px solid var(--az-outline-variant);
  border-bottom: 1px solid var(--az-outline-variant);
}
.form1500__box-n {
  font-size: 9px; color: var(--az-primary); font-weight: 500;
  min-width: 16px; padding-top: 2px;
}
.form1500__box-l { font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em;
                   color: var(--az-on-surface-variant); }
.form1500__box-v { font-size: 12px; margin-top: 2px; }

.form1500__dx {
  border: 1px solid var(--az-outline-variant); padding: 8px 10px; margin-bottom: 14px;
}
.form1500__dx-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 4px 16px; margin-top: 6px; font-size: 12px;
}
.form1500__ptr { color: var(--az-primary); font-weight: 500; }
.form1500__dx-desc { color: var(--az-on-surface-variant); }

.form1500__lines { border: 1px solid var(--az-outline-variant); }
.form1500__lines th { font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; }
.form1500__foot {
  display: flex; gap: 32px; flex-wrap: wrap; margin-top: 14px;
  padding-top: 10px; border-top: 2px solid var(--az-on-surface); font-size: 12px;
}
.form1500__total { font-size: 15px; margin-left: 6px; }

/* ── Raw EDI ─────────────────────────────────────────────── */

.edi { padding: 4px 0 10px; }
.edi__row {
  display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px;
  padding: 5px 18px; border-bottom: 1px solid var(--azp-divider); align-items: baseline;
}
.edi__row:last-child { border-bottom: none; }
.edi__seg {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px; white-space: pre-wrap; word-break: break-all;
  color: var(--az-on-surface);
}
.edi__note { font-size: 11px; color: var(--az-on-surface-variant); line-height: 1.45; }

@media (max-width: 860px) {
  .edi__row { grid-template-columns: 1fr; gap: 4px; }
}

/* ── Source-document card on the workspace ───────────────── */

.srcdoc { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.srcdoc__icon {
  width: 34px; height: 42px; flex: none; border-radius: 3px;
  border: 1px solid var(--az-outline-variant); background: #fff;
  display: grid; place-items: center; font-size: 9px;
  color: var(--az-on-surface-variant); letter-spacing: 0.04em;
}
.srcdoc__body { min-width: 0; }
.srcdoc__name { font-size: 12.5px; }
.srcdoc__sub { font-size: 11px; color: var(--az-on-surface-variant); margin-top: 2px; }
.srcdoc__spacer { flex: 1; }
.t__doc { width: 58px; text-align: center; }
.t__doc a { font-size: 11.5px; }

/* UB-04 DRG block — the payment arithmetic an auditor redoes by hand. */
.form1500__drg {
  border: 1px solid var(--az-outline-variant);
  padding: 8px 10px; margin-bottom: 14px;
}
.form1500__drg-grid {
  display: flex; flex-direction: column; gap: 4px; margin-top: 6px; font-size: 12px;
}
.form1500__drg-fix { color: var(--azp-severity-critical); }

/* The open-claim sub-nav is styled with the rest of the sidebar at the top of
   this file. It used to be restyled here, from the era when the rail was a
   light surface — which left navy text on a navy sidebar once the shell
   inverted. Rules for one component in two places is how that happens. */

/* ── Empty state ─────────────────────────────────────────── */
/* A filtered-to-nothing table used to render blank, which reads as broken. */
.empty {
  border: 1px solid var(--az-outline-variant);
  border-radius: var(--az-radius-lg);
  background: #fff; padding: 34px 24px; text-align: center;
}
.empty__title { margin: 0 0 4px; font-size: 15px; font-weight: 500; }
.empty__body {
  margin: 0 0 16px; font-size: 13px; color: var(--az-on-surface-variant);
}

kbd {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px; padding: 1px 5px;
  border: 1px solid var(--az-outline-variant);
  border-bottom-width: 2px;
  border-radius: var(--az-radius-sm);
  background: var(--azp-surface-th);
}

/* ── Secondary paths and technical detail ────────────────── */
.rail__alt { margin-top: 8px; }
.live__raw { margin-top: 8px; }
.live__raw summary {
  font-size: 11.5px; color: var(--az-on-surface-variant);
  cursor: pointer; list-style: revert;
}
.live__raw summary:hover { color: var(--az-primary); }
.live__raw .live__narrative { margin-top: 6px; font-size: 11.5px; }

/* ── Batch undo ──────────────────────────────────────────── */
.undo-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 12px;
}
.undo-bar__spacer { flex: 1; }

/* ── Model status ────────────────────────────────────────── */

.status__head { display: flex; align-items: flex-start; gap: 12px; }
.status__dot {
  width: 10px; height: 10px; border-radius: var(--az-radius-pill);
  flex: none; margin-top: 5px;
}
.status__dot--ok  { background: var(--az-success); }
.status__dot--off { background: var(--az-accent); }
.status__state { font-size: 14px; }
.status__sub {
  font-size: 12px; color: var(--az-on-surface-variant);
  margin-top: 2px; word-break: break-all;
}
.status__role { font-size: 11px; color: var(--az-on-surface-variant); margin-top: 2px; }

.status__raw { margin-top: 16px; }
.status__raw summary {
  font-size: 13px; cursor: pointer; list-style: revert;
  color: var(--az-on-surface);
}
.status__raw summary:hover { color: var(--az-primary); }
.status__json {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px; line-height: 1.5; margin: 10px 0 0;
  padding: 12px 14px; overflow-x: auto;
  background: var(--azp-surface-th);
  border: 1px solid var(--azp-divider);
  border-radius: var(--az-radius-md);
}

/* The status pill moved into the sidebar with the Centene shell; its styling
   lives with the rest of the sidebar at the top of this file. */

/* ── Run your own claim ──────────────────────────────────── */

.upload__warn { display: block; margin-bottom: 16px; line-height: 1.55; }
.upload__row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px;
}
.upload__label {
  display: block; font-size: 12px; font-weight: 500; margin-bottom: 6px;
}
.upload__file { font-size: 12.5px; font-family: inherit; }
.upload__paste {
  width: 100%; font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px; line-height: 1.5; padding: 10px 12px; resize: vertical;
  border: 1px solid var(--az-outline-variant);
  border-radius: var(--az-radius-sm);
  color: var(--az-on-surface); background: #fff;
}
.upload__paste:focus { outline: none; border-color: var(--az-primary); }
.upload__hint {
  font-size: 11.5px; color: var(--az-on-surface-variant);
  line-height: 1.5; margin: 6px 0 0;
}
.upload__ack {
  display: flex; gap: 9px; align-items: flex-start;
  margin: 18px 0 0; font-size: 12.5px; cursor: pointer;
}
.upload__ack input { margin-top: 2px; accent-color: var(--az-primary); }
.upload__actions { display: flex; gap: 8px; margin-top: 16px; }
.upload__phi {
  margin: 0 0 12px; padding-left: 20px;
  font-size: 12.5px; color: var(--azp-severity-critical); line-height: 1.7;
}

/* ── Knowledge Center: the policy list ───────────────────── */

.pol { display: flex; flex-direction: column; }
.pol__row {
  display: flex; align-items: flex-start; gap: 14px; padding: 12px 0;
  border-top: 1px solid var(--azp-divider);
  color: var(--az-on-surface); text-decoration: none;
}
.pol__row:first-child { border-top: none; }
.pol__row:hover { background: var(--azp-row-hover); }
.pol__id { width: 78px; flex: none; color: var(--az-primary); font-size: 12.5px; }
.pol__body { flex: 1; min-width: 0; display: block; }
.pol__title { display: block; font-size: 13px; }
.pol__sum {
  display: block; font-size: 12px; color: var(--az-on-surface-variant);
  line-height: 1.5; margin-top: 3px;
}
.pol__meta {
  display: block; font-size: 11px; color: var(--az-on-surface-variant); margin-top: 5px;
}
.pol__ver { flex: none; text-align: right; }
.pol__since {
  display: block; font-size: 10.5px; color: var(--az-on-surface-variant); margin-top: 4px;
}

/* ── Version history ─────────────────────────────────────── */

.ver { display: flex; flex-direction: column; gap: 10px; }
.ver__row {
  padding: 12px 14px; border-radius: var(--az-radius-md);
  border: 1px solid var(--azp-divider); background: #fff;
}
/* The version in force now is the one a reader defaults to, so it is the one
   that carries the emphasis. Every other row is deliberately quieter. */
.ver__row--on { border-color: var(--az-primary); background: var(--azp-code-bg); }
.ver__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ver__dates { font-size: 11.5px; color: var(--az-on-surface-variant); }
.ver__spacer { flex: 1; }
.ver__status { font-size: 11px; color: var(--az-on-surface-variant); }
.ver__change { font-size: 12.5px; line-height: 1.5; }
.ver__crit {
  margin: 8px 0 0; padding-left: 18px;
  font-size: 12px; line-height: 1.65; color: var(--az-on-surface-variant);
}

/* ── Policy references on a claim ────────────────────────── */

.polref { display: flex; flex-direction: column; gap: 10px; }
.polref__row {
  padding: 11px 12px; border-radius: var(--az-radius-md);
  border: 1px solid var(--azp-divider); background: #fff;
}
.polref__row--key { border-color: var(--az-primary); background: var(--azp-code-bg); }
.polref__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.polref__id { color: var(--az-primary); font-size: 12.5px; text-decoration: none; }
.polref__id:hover { text-decoration: underline; }
.polref__title { font-size: 12.5px; flex: 1; min-width: 0; }
.polref__why {
  font-size: 12px; line-height: 1.5;
  color: var(--az-on-surface-variant); margin: 6px 0 0;
}
.polref__ver {
  display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center;
  margin-top: 8px; font-size: 11px; color: var(--az-on-surface-variant);
}

/* ── Eligibility verification trace ──────────────────────── */

.trace { display: flex; flex-direction: column; }
.trace__row {
  display: flex; gap: 12px; align-items: baseline; padding: 9px 0;
  border-top: 1px solid var(--azp-divider); font-size: 12px;
}
.trace__row:first-child { border-top: none; }
.trace__src { width: 210px; flex: none; }
.trace__when { width: 122px; flex: none; color: var(--az-on-surface-variant); font-size: 11.5px; }
.trace__res { flex: 1; min-width: 0; color: var(--az-on-surface-variant); line-height: 1.5; }
.trace__stage { flex: none; }

/* ── Coding direction: up-code in, down-code out ─────────── */

.dir { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; }
.dir__box {
  padding: 7px 11px; border-radius: var(--az-radius-md);
  border: 1px solid var(--azp-divider); background: #fff;
}
.dir__box--billed { border-color: var(--azp-severity-critical); }
.dir__box--supported { border-color: var(--azp-positive); }
.dir__label {
  display: block; font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--az-on-surface-variant); margin-bottom: 3px;
}
.dir__arrow { color: var(--az-on-surface-variant); flex: none; }
.dir__note { font-size: 12px; line-height: 1.55; color: var(--az-on-surface-variant); margin: 12px 0 0; }

/* ── Automation pipeline ─────────────────────────────────── */

.stages { display: flex; flex-direction: column; }
.stage {
  display: flex; gap: 12px; align-items: flex-start; padding: 11px 0;
  border-top: 1px solid var(--azp-divider);
}
.stage:first-child { border-top: none; }
.stage__n {
  width: 22px; height: 22px; flex: none; border-radius: var(--az-radius-pill);
  background: var(--azp-code-bg); color: var(--az-primary);
  font-size: 11px; display: flex; align-items: center; justify-content: center;
}
.stage__body { flex: 1; min-width: 0; }
.stage__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.stage__name { font-size: 12.5px; }
.stage__what { font-size: 12px; line-height: 1.5; color: var(--az-on-surface-variant); margin-top: 4px; }
.stage__meta { font-size: 11px; color: var(--az-on-surface-variant); margin-top: 5px; }

@media (max-width: 860px) {
  .pol__row { flex-wrap: wrap; }
  .pol__id { width: auto; }
  .pol__ver { text-align: left; }
  .trace__row { flex-wrap: wrap; }
  .trace__src, .trace__when { width: auto; }
}

/* The governing policy, cited on the finding itself. Sits on the dark hero,
   so it takes the on-dark treatment the eyebrow above it uses. */
.rail__policy {
  margin-top: 10px; font-size: 11.5px; line-height: 1.5;
  color: var(--azp-on-dark-faint);
}
.rail__policy a { color: var(--azp-on-dark-strong); }

/* The second filter row: clinical and cost criteria, set apart from the
   disposition-state chips above so ten chips read as two questions. */
.filters--sub { margin-top: -6px; }
.filters__label {
  font-family: var(--az-font-medium); font-size: var(--az-label-xs);
  font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--az-on-surface-variant); margin-right: 2px;
}

/* The trend card sits beside a much taller one, so its 130px chart used to
   float in a field of whitespace. Let the chart take the height the grid row
   gives the card instead of leaving it empty. */
.card--fill { display: flex; flex-direction: column; }
/* Fills the height the grid row gives it, but only so far: the current period
   dwarfs the four before it, so an uncapped chart turns one honest bar into a
   wall and the comparison stops being readable. */
.card--fill .bars { flex: 1; min-height: 140px; max-height: 240px; }

/* Seven columns at the default 18px gutter need 612px; the workspace column
   is 577px. Tightening the gutter fits the table rather than leaving the
   Result pill permanently scrolled off the right edge. */
.t--lines th, .t--lines td { padding-left: 10px; padding-right: 10px; }

/* ── Knowledge Center: the document index ────────────────── */

/* A version's source document, or the absence of one, under its change note. */
.ver__src {
  margin-top: 8px; font-size: 11.5px; line-height: 1.5;
  color: var(--az-on-surface-variant);
}
.ver__src--none { font-style: italic; }

/* Retrieval hits on the search screen. */
.hits { display: flex; flex-direction: column; gap: 10px; }
.hit {
  padding: 12px 14px; border-radius: var(--az-radius-md);
  border: 1px solid var(--azp-divider); background: #fff;
}
.hit__head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 8px; font-size: 11.5px;
}
.hit__doc { font-size: 12.5px; }
.hit__meta { color: var(--az-on-surface-variant); }
.hit__spacer { flex: 1; }
.hit__text { margin: 0; font-size: 12.5px; line-height: 1.6; }

/* A chunk, as it sits in the index. Monospaced because the boundaries are the
   point: an auditor is reading where the splitter cut, not prose. */
.chunks { display: flex; flex-direction: column; gap: 10px; }
.chunk {
  padding: 11px 13px; border-radius: var(--az-radius-md);
  border: 1px solid var(--azp-divider); background: var(--azp-surface-app);
}
.chunk__head {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 7px; font-size: 11px; color: var(--az-on-surface-variant);
}
.chunk__spacer { flex: 1; }
.chunk__text {
  margin: 0; font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px; line-height: 1.6; white-space: pre-wrap;
  color: var(--az-on-surface);
}

/* A retrieved passage quoted on a claim. */
.quote { margin-top: 10px; }
.quote__cap { margin-bottom: 6px; }
.quote__item {
  padding: 9px 11px; margin-bottom: 6px;
  border-left: 2px solid var(--az-primary);
  border-radius: 0 var(--az-radius-sm) var(--az-radius-sm) 0;
  background: #fff;
}
.quote__meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 10.5px; color: var(--az-on-surface-variant); margin-bottom: 6px;
}
.quote__spacer { flex: 1; }
.quote__text {
  margin: 0; font-size: 11.5px; line-height: 1.55;
}

/* The dataset / version selects on the search bar. */
.kc__sel { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.kc__sel-label { color: var(--az-on-surface-variant); }
.kc__sel select {
  height: 32px; padding: 0 8px; font-family: inherit; font-size: 12.5px;
  color: var(--az-on-surface); background: #fff;
  border: 1px solid var(--az-outline-variant); border-radius: var(--az-radius-sm);
}
.kc__sel select:focus { outline: none; border-color: var(--az-primary); }

/* ── The determination, in three layers ──────────────────── */

.layers { display: flex; flex-direction: column; gap: 14px; }
.layer {
  padding: 12px 13px; border-radius: var(--az-radius-md);
  border: 1px solid var(--azp-divider); background: #fff;
}
/* An absent layer is a finding too, so it is present on the page and quiet
   rather than omitted. */
.layer--absent { background: var(--azp-surface-app); border-style: dashed; }
.layer__head {
  display: flex; align-items: baseline; gap: 10px;
  flex-wrap: wrap; margin-bottom: 10px;
}
.layer__blurb { font-size: 11.5px; color: var(--az-on-surface-variant); }
.layer__none {
  margin: 0; font-size: 12px; line-height: 1.55;
  color: var(--az-on-surface-variant);
}

/* ── Citation chip ───────────────────────────────────────── */
/* The design's signature element: every fact on a screen carries the source
   it came from, as a small outlined chip you can click through to. It is the
   visual encoding of the rule this build already followed — a figure with no
   source does not go on screen. */

.cite {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--az-font-medium); font-size: 11px; line-height: 1.3;
  padding: 3px 8px; border-radius: var(--az-radius-sm);
  border: 1px solid var(--azp-code-border);
  background: var(--azp-code-bg); color: var(--az-primary);
  white-space: nowrap; max-width: 100%;
}
a.cite:hover { background: var(--azp-code-border); text-decoration: none; }
.cite__n { opacity: 0.75; font-variant-numeric: tabular-nums; }
.cite__label { overflow: hidden; text-overflow: ellipsis; }
.cites { display: flex; flex-wrap: wrap; gap: 6px; }
.cites--tight { gap: 4px; }

/* ── Overview hero ───────────────────────────────────────── */
/* Full-bleed navy with a lighter bloom off the top right, and the period's
   headline figures set into it on hairline rules. The design puts the four
   numbers that matter here rather than in tiles, which is why this screen
   opens with a sentence instead of a grid. */

.hero {
  background: var(--az-gradient-hero);
  color: var(--azp-on-dark-strong);
  padding: 36px 32px 32px;
}
.hero__top {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; flex-wrap: wrap;
}
.hero__intro { max-width: 640px; }
.hero__eyebrow {
  font-family: var(--az-font-medium); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--azp-on-dark-label); margin-bottom: 10px;
}
.hero__title {
  font-family: var(--az-font-display); font-weight: 400;
  font-size: 38px; line-height: 1.1; letter-spacing: -0.02em;
  margin: 0; color: var(--azp-on-dark-strong); text-wrap: pretty;
}
.hero__sub {
  margin: 14px 0 0; font-size: 13.5px; line-height: 1.55;
  color: var(--azp-on-dark-faint); max-width: 620px;
}
.hero__acts { display: flex; gap: 8px; flex-wrap: wrap; }
.hero__btn {
  padding: 10px 18px; border-radius: var(--az-radius-lg);
  border: 1px solid var(--azp-on-dark-muted); background: transparent;
  color: var(--azp-on-dark-strong); font-size: 13.5px; cursor: pointer;
  font-family: var(--az-font-medium); font-weight: 500;
  display: inline-flex; align-items: center;
}
.hero__btn:hover { background: var(--azp-on-dark-wash); text-decoration: none; }
.hero__btn--solid {
  border-color: transparent; background: var(--az-surface); color: var(--az-primary);
}
.hero__btn--solid:hover { background: var(--azp-code-bg); }

.hero__stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-top: 36px; border-top: 1px solid var(--azp-on-dark-rule);
}
.hero__stat { padding: 18px 20px 0; border-right: 1px solid var(--azp-on-dark-rule); }
.hero__stat:first-child { padding-left: 0; }
.hero__stat:last-child { border-right: none; }
.hero__stat-label {
  font-family: var(--az-font-medium); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--azp-on-dark-muted);
}
.hero__stat-value {
  font-family: var(--az-font-display); font-size: 40px; line-height: 1;
  margin-top: 8px; letter-spacing: -0.02em;
}
.hero__stat-value--warn { color: var(--azp-warn-num); }
.hero__stat-note { font-size: 12px; color: var(--azp-on-dark-faint); margin-top: 6px; }

/* A page that opens with the hero has no top padding of its own. */
.page--hero { padding-top: 28px; }

@media (max-width: 900px) {
  .hero { padding: 28px 20px 24px; }
  .hero__title { font-size: 30px; }
  .hero__stat, .hero__stat:first-child { padding: 16px 0 0; border-right: none; }
}

/* ── SOP reasoner ────────────────────────────────────────── */

/* What resolved a node. Six methods, and the badge is the point of the
   screen: an audit trail where every step says how it was decided. */
.method {
  display: inline-block; padding: 2px 7px; border-radius: var(--az-radius-sm);
  font-family: var(--az-font-medium); font-size: 9.5px;
  letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
}
.method--rule      { background: var(--azp-method-rule-bg);      color: var(--azp-method-rule); }
.method--lookup    { background: var(--azp-method-lookup-bg);    color: var(--azp-method-lookup); }
.method--formula   { background: var(--azp-method-formula-bg);   color: var(--azp-method-formula); }
.method--retrieval { background: var(--azp-method-retrieval-bg); color: var(--azp-method-retrieval); }
.method--drafted   { background: var(--azp-method-drafted-bg);   color: var(--azp-method-drafted); }
.method--scoped    { background: var(--azp-method-scoped-bg);    color: var(--azp-method-scoped); }

/* The traversal itself: a dot per node on a hairline spine. */
.trace2 { display: flex; flex-direction: column; }
.tnode { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; align-items: start; }
.tnode__rail { display: flex; flex-direction: column; align-items: center; height: 100%; }
.tnode__dot {
  width: 10px; height: 10px; border-radius: var(--az-radius-pill);
  margin-top: 5px; flex: none; border: 2px solid var(--az-surface);
}
.tnode__dot--pay      { background: var(--azp-positive); box-shadow: 0 0 0 1px var(--azp-positive); }
.tnode__dot--critical { background: var(--azp-severity-critical); box-shadow: 0 0 0 1px var(--azp-severity-critical); }
.tnode__dot--medium   { background: var(--azp-severity-medium); box-shadow: 0 0 0 1px var(--azp-severity-medium); }
.tnode__dot--high     { background: var(--azp-severity-high); box-shadow: 0 0 0 1px var(--azp-severity-high); }
.tnode__dot--low      { background: var(--azp-chart-track); box-shadow: 0 0 0 1px var(--azp-chart-track); }
.tnode__line { flex: 1; width: 1px; background: var(--azp-divider); margin: 4px 0; }
.tnode:last-child .tnode__line { display: none; }
.tnode__body { padding-bottom: 18px; min-width: 0; }
.tnode__head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.tnode__ref { font-size: 11px; color: var(--az-on-surface-variant); font-family: var(--az-font-medium); }
.tnode__title { font-size: 14px; font-weight: 500; font-family: var(--az-font-medium); }
.tnode__check { font-size: 13px; color: var(--azp-severity-low); margin-top: 4px; line-height: 1.5; }
.tnode__foot { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
.tnode__platform {
  font-size: 11px; color: var(--az-on-surface-variant);
  margin-top: 6px; font-style: italic;
}

/* The terminal decision, tinted by outcome. */
.terminal {
  margin-top: 8px; border-radius: var(--az-radius-lg); padding: 18px 20px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px;
  align-items: center;
}
.terminal--pay    { background: var(--azp-positive-bg); color: var(--azp-positive); }
.terminal--medium { background: var(--azp-severity-medium-bg); color: var(--azp-severity-medium); }
.terminal__label {
  font-family: var(--az-font-medium); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.8;
}
.terminal__decision {
  font-family: var(--az-font-display); font-size: 24px;
  letter-spacing: -0.01em; margin-top: 4px;
}
.terminal__summary { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; }
.terminal__stats { text-align: right; font-size: 12px; line-height: 1.7; white-space: nowrap; }

/* The claim picker on the reasoner. */
.picker { display: flex; gap: 6px; flex-wrap: wrap; }
.picker__btn {
  font-size: 11.5px; padding: 4px 10px; border-radius: var(--az-radius-pill);
  border: 1px solid var(--azp-chart-track); background: var(--az-surface);
  color: var(--azp-severity-low); font-family: var(--az-font-medium);
}
.picker__btn:hover { border-color: var(--az-primary); text-decoration: none; }
.picker__btn--on {
  background: var(--az-primary); color: var(--az-on-primary);
  border-color: var(--az-primary);
}

/* A navy stat tile, for the one figure that leads the reasoner. */
.kpi--dark {
  background: var(--az-background-dark); border-color: transparent;
  color: var(--azp-on-dark-strong);
}
.kpi--dark .kpi__label { color: var(--azp-on-dark-muted); }
.kpi--dark .kpi__delta { color: var(--azp-on-dark-faint); }

/* ── Determination letter ────────────────────────────────── */
/* A letter is read as a document, not as a dashboard: one column, generous
   leading, and the section numbers doing the work of headings so a provider
   can write back "I dispute section 2" and mean something exact. Colour comes
   from the existing severity and code tokens — a determination is not the
   place to introduce a new palette. */
.det {
  padding: 20px 22px 22px;
  font-size: 13px; line-height: 1.7; color: var(--az-on-surface);
}
.det p { margin: 0 0 14px; }
.det__ref {
  font-family: var(--az-font-medium);
  padding-bottom: 12px; margin-bottom: 16px;
  border-bottom: 1px solid var(--azp-divider);
}

.det__basis {
  background: var(--az-surface-variant);
  border-radius: var(--az-radius-sm);
  padding: 12px 14px; margin: 0 0 18px;
}
.det__basis--drift {
  background: var(--azp-severity-high-bg);
  box-shadow: inset 2px 0 0 var(--azp-severity-high);
}
.det__basis p:last-child { margin: 0; }
.det__basis-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--az-font-medium); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--az-on-surface-variant); margin-bottom: 6px;
}

.det__sec {
  padding: 16px 0 4px;
  border-top: 1px solid var(--azp-divider);
}
/* A section with nothing in it is still a statement, but it should not read
   with the weight of one that found something. */
.det__sec--none { color: var(--az-on-surface-variant); }
.det__sec-head {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; font-family: var(--az-font-medium);
  color: var(--az-on-surface); margin: 0 0 10px;
}
.det__sec-head > span:nth-child(2) { flex: 1; }
.det__q {
  display: block; font-family: var(--az-font-body);
  font-size: 12px; font-weight: 400; line-height: 1.45;
  color: var(--az-on-surface-variant); margin-top: 2px;
}
.det__n {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: var(--az-radius-sm);
  background: var(--az-primary); color: var(--az-on-primary);
  font-size: 11.5px; line-height: 1;
}
.det__n--off { background: var(--azp-code-bg-neutral); color: var(--azp-code-identifier); }

.det__overturn {
  background: var(--azp-code-bg);
  border-radius: var(--az-radius-sm);
  padding: 10px 12px; margin: 12px 0 4px;
  font-size: 12.5px; line-height: 1.6;
}
.det__overturn-k {
  display: block; font-family: var(--az-font-medium); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--az-primary); margin-bottom: 3px;
}

.det__rights {
  border-top: 1px solid var(--azp-divider);
  padding-top: 16px; margin-top: 16px;
}
.det__rights ul, .det__not { margin: 0; padding-left: 18px; }
.det__rights li, .det__not li { margin-bottom: 7px; }
.det__rights li:last-child, .det__not li:last-child { margin-bottom: 0; }
.det__not { font-size: 12.5px; line-height: 1.6; color: var(--az-on-surface-variant); }

.det__foot {
  margin: 18px 0 0; padding-top: 14px;
  border-top: 1px solid var(--azp-divider);
  font-size: 12px; color: var(--az-on-surface-variant);
}

.det__row { display: flex; align-items: flex-start; gap: 10px; }

/* The payment section is authorised by the schedule it was priced against,
   not by a policy, so it names the schedule where the other sections carry a
   citation chip. */
.det__src { margin: 10px 0 0; }
.det__src-row { margin-top: 5px; font-size: 12.5px; line-height: 1.55; }
.det__src-claim { display: block; }
.det__src-from {
  display: block; font-size: 11px; color: var(--az-on-surface-variant);
  margin-top: 1px;
}

/* ── Appeal analyzer ─────────────────────────────────────── */
.arg {
  border-left: 2px solid var(--azp-divider);
  padding: 0 0 0 12px; margin: 0 0 14px;
}
.arg:last-child { margin-bottom: 0; }
.arg__head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 5px;
}
.arg__meta { font-size: 11px; color: var(--az-on-surface-variant); }
.arg__text { margin: 0; font-size: 13px; line-height: 1.6; }

.appealf { padding: 16px 18px 18px; }
.appealf textarea {
  width: 100%; margin-top: 6px; padding: 10px 12px;
  font-family: var(--az-font-body); font-size: 12.5px; line-height: 1.6;
  color: var(--az-on-surface); background: var(--az-surface);
  border: 1px solid var(--azp-divider); border-radius: var(--az-radius-sm);
  resize: vertical;
}
.appealf textarea:focus {
  outline: 2px solid var(--az-primary); outline-offset: -1px;
  border-color: var(--az-primary);
}
.appealf__foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px;
}

/* ── Finding revision ────────────────────────────────────── */
.fedit { padding: 16px 18px 18px; }
.fedit__k {
  display: block; font-family: var(--az-font-medium); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--az-on-surface-variant); margin: 14px 0 5px;
}
.fedit__k:first-child { margin-top: 0; }
.fedit__k--req { color: var(--az-primary); }
.fedit__k--req span {
  font-size: 10px; letter-spacing: 0.04em;
  color: var(--azp-severity-high); margin-left: 4px;
}
.fedit input[type=text], .fedit textarea, .fedit select {
  width: 100%; padding: 8px 11px;
  font-family: var(--az-font-body); font-size: 12.5px; line-height: 1.55;
  color: var(--az-on-surface); background: var(--az-surface);
  border: 1px solid var(--azp-divider); border-radius: var(--az-radius-sm);
}
.fedit textarea { resize: vertical; }
.fedit input:focus, .fedit textarea:focus, .fedit select:focus {
  outline: 2px solid var(--az-primary); outline-offset: -1px;
}
.fedit input:disabled, .fedit textarea:disabled, .fedit select:disabled {
  background: var(--az-surface-variant); color: var(--az-on-surface-variant);
}
.fedit__row {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}
.fedit__foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--azp-divider);
}

.rev { padding: 12px 0; border-top: 1px solid var(--azp-divider); }
.rev:first-of-type { border-top: 0; padding-top: 0; }
.rev__head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.rev__n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 20px; padding: 0 6px;
  border-radius: var(--az-radius-sm);
  background: var(--azp-code-bg-neutral); color: var(--azp-code-identifier);
  font-size: 11px;
}
.rev--on .rev__n { background: var(--az-primary); color: var(--az-on-primary); }
.rev__meta { font-size: 11px; color: var(--az-on-surface-variant); }
.rev__from {
  font-size: 11.5px; color: var(--az-on-surface-variant);
  margin: 5px 0 0; line-height: 1.5;
}
.rev__diff { margin-top: 7px; }
.rev__field {
  display: grid; gap: 2px 8px; margin-bottom: 5px;
  grid-template-columns: 76px 1fr;
  font-size: 12px; line-height: 1.5;
}
.rev__fk {
  grid-row: span 2; font-family: var(--az-font-medium); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--az-on-surface-variant); padding-top: 2px;
}
.rev__was { color: var(--az-on-surface-variant); text-decoration: line-through; }
.rev__to { color: var(--az-on-surface); }
.rev__roll { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.rev__roll input {
  flex: 1; min-width: 150px; padding: 5px 9px; font-size: 12px;
  font-family: var(--az-font-body); color: var(--az-on-surface);
  background: var(--az-surface);
  border: 1px solid var(--azp-divider); border-radius: var(--az-radius-sm);
}
.edit__rev {
  font-size: 11px; line-height: 1.5; margin-top: 3px;
  color: var(--az-on-surface-variant);
}

/* ── Branch taken, and the paths a node read ─────────────── */
/* The engine's own branch vocabulary. `on_field_missing` gets the warning
   colour because it is the one that is NOT an answer: the check could not be
   evaluated, which a reviewer must not read as a pass or a fail. */
.branch {
  display: inline-flex; align-items: center;
  padding: 2px 7px; border-radius: var(--az-radius-pill);
  font-family: var(--az-font-medium); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.branch--on_match { background: var(--azp-positive-bg); color: var(--azp-positive); }
.branch--on_no_match { background: var(--azp-severity-medium-bg); color: var(--azp-severity-medium); }
.branch--on_field_missing { background: var(--azp-severity-high-bg); color: var(--azp-severity-high); }

.tnode__paths {
  margin: 7px 0 0; font-size: 11.5px; line-height: 1.6;
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.tnode__pk {
  font-family: var(--az-font-medium); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--az-on-surface-variant);
}
.tnode__paths code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px;
  padding: 1px 5px; border-radius: var(--az-radius-sm);
  background: var(--azp-code-bg-neutral); color: var(--azp-code-identifier);
}
.tnode__paths--missing code {
  background: var(--azp-severity-high-bg); color: var(--azp-severity-high);
}
.tnode__pw {
  flex-basis: 100%; color: var(--az-on-surface-variant); font-size: 11.5px;
}

/* ── Review chain ────────────────────────────────────────── */
.chain {
  display: flex; flex-wrap: wrap; gap: 4px 18px;
  list-style: none; margin: 0 0 16px; padding: 0;
}
.chain__step {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--az-on-surface-variant);
}
.chain__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--azp-divider);
}
.chain__step--done .chain__dot { background: var(--azp-positive); }
.chain__step--on { color: var(--az-on-surface); font-family: var(--az-font-medium); }
.chain__step--on .chain__dot { background: var(--az-primary); }

.chainf { margin-top: 4px; }
.chainf select, .chainf textarea {
  width: 100%; padding: 8px 11px;
  font-family: var(--az-font-body); font-size: 12.5px; line-height: 1.55;
  color: var(--az-on-surface); background: var(--az-surface);
  border: 1px solid var(--azp-divider); border-radius: var(--az-radius-sm);
}
.chainf textarea { resize: vertical; }
.chainf__foot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* The engine's disposition code, shown beside its label so the vocabulary is
   legible to someone who knows the engine and the label to someone who does
   not. */
.disp {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10.5px; letter-spacing: 0.02em;
  padding: 1px 6px; border-radius: var(--az-radius-sm);
  background: var(--azp-code-bg-neutral); color: var(--azp-code-identifier);
  white-space: nowrap;
}
/* A translucent white chip on the terminal composites against the hero
   gradient and lands white-on-white. An opaque dark token is unambiguous. */
.terminal .disp {
  background: var(--az-primary-dark);
  color: var(--azp-on-dark-strong);
}
.tbl__search {
  padding: 6px 11px; min-width: 190px;
  font-family: var(--az-font-body); font-size: 12.5px;
  color: var(--az-on-surface); background: var(--az-surface);
  border: 1px solid var(--azp-divider); border-radius: var(--az-radius-sm);
}
.tbl__search:focus { outline: 2px solid var(--az-primary); outline-offset: -1px; }