/* Geist 1.7.0, vendored so the demo makes no third-party request and renders the
   same offline. SIL OFL 1.1 — see fonts/LICENSE.txt. */
@font-face {
  font-family: "Geist";
  src: url("/fonts/Geist-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/GeistMono-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* NyxWorks light-theme tokens */
  --color-bg: #f4f3fa;
  --color-bg-card: #ffffff;
  --color-bg-card-hover: #eeedf8;
  --color-border: #d8d6e8;
  --color-text-primary: #0b0f1a;
  --color-text-secondary: #4a4e5c;
  --color-text-muted: #8b8fa0;
  --color-accent: #5b3fd6;
  --color-accent-light: #7b5aef;
  --color-accent-dark: #4a2fc0;
  --color-success: #22c55e;
  --color-success-light: #4ade80;
  --color-warning: #f59e0b;
  --color-warning-light: #fbbf24;
  --color-error: #ef4444;
  --color-error-light: #f87171;
  --color-info: #3b82f6;
  --color-info-light: #60a5fa;
  --color-on-accent: #ffffff;
  --color-document-text: #2f3340;
  --color-success-strong: #16803c;
  --color-warning-strong: #a56807;
  --color-error-strong: #b91c1c;
  --color-negative-strong: #c02626;

  /* Transparent applications of the guide palette */
  --accent-soft: rgb(91 63 214 / 0.08);
  --accent-softer: rgb(91 63 214 / 0.05);
  --accent-ring: rgb(91 63 214 / 0.24);
  --accent-border: rgb(91 63 214 / 0.3);
  --accent-shadow: rgb(91 63 214 / 0.2);
  --accent-aura-light: rgb(123 90 239 / 0.08);
  --accent-aura-dark: rgb(91 63 214 / 0.05);
  --success-soft: rgb(34 197 94 / 0.08);
  --success-border: rgb(34 197 94 / 0.25);
  --warning-soft: rgb(245 158 11 / 0.08);
  --warning-border: rgb(245 158 11 / 0.25);
  --error-soft: rgb(239 68 68 / 0.07);
  --error-border: rgb(239 68 68 / 0.25);
  --info-soft: rgb(59 130 246 / 0.08);
  --info-border: rgb(59 130 246 / 0.25);
  --color-info-strong: #1d4ed8;
  --highlight: rgb(245 158 11 / 0.15);
  --highlight-strong: rgb(245 158 11 / 0.42);
  --header-surface: rgb(244 243 250 / 0.82);
  --document-surface: rgb(255 255 255 / 0.93);
  --document-inset: rgb(255 255 255 / 0.85);
  --shadow-subtle: rgb(11 15 26 / 0.03);
  --shadow-soft: rgb(11 15 26 / 0.04);

  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", "SFMono-Regular", Consolas, monospace;
  --shadow-card: 0 1px 2px var(--shadow-subtle), 0 12px 30px var(--shadow-soft);
  --shadow-accent: 0 0 24px -10px var(--color-accent);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-image:
    radial-gradient(circle at 8% 0%, var(--accent-aura-light), transparent 24rem),
    radial-gradient(circle at 92% 8%, var(--accent-aura-dark), transparent 22rem);
}

button,
select,
input {
  font: inherit;
}

button,
select,
input,
a {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
select:focus-visible,
input:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hidden {
  display: none !important;
}

/* ---------- application header ---------- */

.app-header {
  height: 64px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 24px;
  border-bottom: 1px solid var(--color-border);
  background: var(--header-surface);
  backdrop-filter: blur(16px);
  position: relative;
  z-index: 10;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text-primary);
  text-decoration: none;
}

.brand-mark {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--color-on-accent);
  background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent-dark));
  box-shadow: 0 8px 20px var(--accent-shadow);
}

.brand-copy {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.brand-name {
  font-size: 1.15rem;
  font-weight: 720;
  letter-spacing: -0.035em;
}

/* The brand block names the product, not the page — the nav beside it says
   which section you are in, and a header that printed both said the same
   thing twice. */

/* Shared by every page, so it lives here rather than in a per-page sheet.

   Navigation is text with a rule under the current item, and that holds at
   both levels: this header nav, and the in-pane view switchers below it
   (`.tabs`). The pill shape is reserved for labels that state a fact and
   cannot be clicked — status, counts, hit policy, priority, Computed/Fixture.
   Keeping those two vocabularies apart is the whole point: a pill you can
   click would be the only one in the app, so the switchers stopped being
   pills rather than becoming the exception. */
.app-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  /* Primary navigation belongs beside the identity it navigates, not floating
     next to the status readout. `margin-right: auto` is what pushes the
     status pill to the far right, so the header reads brand → sections →
     state, left to right. */
  margin-right: auto;
}

.app-nav a {
  position: relative;
  padding: 3px 0;
  color: var(--color-text-secondary);
  font-size: 0.82rem;
  font-weight: 520;
  text-decoration: none;
  white-space: nowrap;
  transition: color 160ms ease;
}

.app-nav a:hover {
  color: var(--color-text-primary);
}

.app-nav a[aria-current="page"] {
  color: var(--color-text-primary);
  font-weight: 600;
}

.app-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset: auto 0 -3px 0;
  height: 2px;
  background: var(--color-accent);
  border-radius: 2px;
}

/* In-pane view switchers: the studio's pack views, the evidence browser's
   document views, the receipt viewer's report views. All three were separate
   copies of one pill row in three per-page sheets; they are one rule here
   because they are one control, and three copies is how they drifted from the
   header nav in the first place.

   The rule under the row is what the tab attaches to — a pill floated above
   that border used it for nothing, and read as a row of the status labels
   sitting inches away rather than as somewhere to click. */
.tabs {
  display: flex;
  gap: 20px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--color-border);
}

.tab {
  position: relative;
  padding: 0 0 9px;
  color: var(--color-text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 550;
  white-space: nowrap;
  transition: color 160ms ease;
}

.tab:hover:not(:disabled) {
  color: var(--color-text-primary);
}

/* Weight stays at 550 across states, unlike the header nav above, which bolds
   the current page. There the current item only changes on a page load, so the
   reflow is never seen; here the tabs sit in one flex row and switching is
   constant, so bolding the active one shifts its neighbours sideways on every
   click. Colour and the rule carry the state instead. */
.tab.active {
  color: var(--color-text-primary);
}

/* The 2px accent sits one pixel low so it covers the container's 1px rule
   rather than stacking on top of it. */
.tab.active::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 2px;
  background: var(--color-accent);
  border-radius: 2px;
}

.tab:disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
  opacity: 0.6;
}

.header-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 5px 11px;
  color: var(--color-text-secondary);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 550;
  box-shadow: 0 1px 2px var(--shadow-subtle);
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 0 3px var(--success-soft);
}

.header-status.loading .status-dot {
  background: var(--color-accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  animation: status-pulse 1.1s ease-in-out infinite;
}

/* Fixture mode is not a computed decision. Tint the whole pill in the same amber
   the engine badge uses, so it never reads as an authoritative result. */
.header-status.fixture {
  color: var(--color-warning-strong);
  background: var(--warning-soft);
  border-color: var(--warning-border);
}

.header-status.fixture .status-dot {
  background: var(--color-warning);
  box-shadow: 0 0 0 3px var(--warning-soft);
}

.header-status.error {
  color: var(--color-error-strong);
  background: var(--error-soft);
  border-color: var(--error-border);
}

.header-status.error .status-dot {
  background: var(--color-error);
  box-shadow: 0 0 0 3px var(--error-soft);
}

/* Informational transitions (a correction was applied and re-adjudicated):
   distinct from ready/fixture/error so the flip moment reads as an event. */
.header-status.info {
  color: var(--color-info-strong);
  background: var(--info-soft);
  border-color: var(--info-border);
}

.header-status.info .status-dot {
  background: var(--color-info);
  box-shadow: 0 0 0 3px var(--info-soft);
}

@keyframes status-pulse {
  50% { opacity: 0.35; }
}

/* ---------- workspace controls ---------- */

.workspace-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  padding: 22px 24px 20px;
}

.workspace-intro {
  min-width: 0;
}

/* ---------- the orientation strip ---------- */

/* Sized like the panes it introduces rather than like the toolbar above it,
   so its left edge lines up with the first pane and it reads as belonging to
   the work area. Same measurements as `.knowledge-bar` in evidence.css, which
   sits in exactly this slot on that page. */
.guide {
  width: calc(100% - 48px);
  max-width: 1840px;
  flex: 0 0 auto;
  align-self: center;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 18px;
  padding: 13px 18px 14px;
  background: var(--accent-softer);
  border: 1px solid var(--accent-border);
  border-radius: 14px;
}

/* An author `display` declaration beats the UA stylesheet's `[hidden]`, so the
   flex above silently un-hides the strip and "Got it" stops working. The strip
   ships with the attribute set, so without this the dismissed state is broken
   from the first paint. */
.guide[hidden] {
  display: none;
}

/* Numerals, not the counter chips this pattern usually gets: a filled circle
   at the head of each step is a pill, and pills in this app are labels you
   cannot click (see `.app-nav`). */
.guide-steps {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: guide-step;
}

.guide-steps li {
  position: relative;
  flex: 1 1 250px;
  min-width: 0;
  padding-left: 19px;
  counter-increment: guide-step;
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  line-height: 1.55;
}

.guide-steps li::before {
  content: counter(guide-step) ".";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-accent);
  font-size: 0.75rem;
  font-weight: 680;
  font-variant-numeric: tabular-nums;
}

.guide-steps strong {
  color: var(--color-text-primary);
  font-weight: 600;
}

.guide-steps code {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

.guide-dismiss,
.guide-reopen {
  flex: 0 0 auto;
  padding: 4px 10px;
  color: var(--color-text-secondary);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 570;
  transition: color 160ms ease, border-color 160ms ease;
}

.guide-dismiss:hover,
.guide-reopen:hover {
  color: var(--color-accent-dark);
  border-color: var(--accent-border);
}

/* The way back in, once the strip is dismissed. It lives under the page's own
   intro copy rather than in the header, which reads brand → sections → state
   and has no room for a fourth thing. */
.guide-reopen {
  margin-top: 9px;
  background: none;
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-border);
}

.guide-reopen:hover {
  border-color: transparent;
  text-decoration-color: var(--accent-border);
}

.eyebrow,
.field-label {
  color: var(--color-text-muted);
  font-size: 0.7rem;
  line-height: 1.4;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.workspace-intro h1 {
  margin: 3px 0 1px;
  color: var(--color-text-primary);
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  line-height: 1.2;
  font-weight: 680;
  letter-spacing: -0.035em;
}

.workspace-intro p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 0.86rem;
}

.controls {
  display: flex;
  align-items: end;
  gap: 12px;
  flex: 0 0 auto;
}

.control-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.control-field label {
  color: var(--color-text-secondary);
  font-size: 0.76rem;
  font-weight: 550;
}

.scenario-field {
  width: min(320px, 30vw);
}

.date-field {
  width: 176px;
}

.control-input {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 42px;
  color: var(--color-text-muted);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.control-input:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.control-input > svg:first-child {
  position: absolute;
  left: 12px;
  pointer-events: none;
}

.control-input select,
.control-input input {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 36px;
  color: var(--color-text-primary);
  background: transparent;
  border: 0;
  border-radius: inherit;
  outline: none;
  font-size: 0.82rem;
}

.control-input select {
  appearance: none;
  padding-right: 36px;
  cursor: pointer;
}

.control-input input {
  padding-right: 12px;
}

.select-chevron {
  position: absolute;
  right: 11px;
  pointer-events: none;
}

/* ---------- three-pane workspace ---------- */

#workspace {
  width: calc(100% - 48px);
  max-width: 1840px;
  min-height: 0;
  flex: 1 1 auto;
  align-self: center;
  display: grid;
  grid-template-columns: minmax(320px, 1.16fr) minmax(290px, 0.9fr) minmax(330px, 1.08fr);
  gap: 20px;
  padding-bottom: 24px;
}

.pane {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}

.pane-head {
  flex: 0 0 auto;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border);
}

.pane-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.pane-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--color-accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: 8px;
}

.pane-head h2 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 0.94rem;
  line-height: 1.3;
  font-weight: 630;
  letter-spacing: -0.015em;
}

.pane-head p {
  margin: 2px 0 0;
  color: var(--color-text-muted);
  font-size: 0.72rem;
}

.pane-badge {
  flex: 0 0 auto;
  padding: 3px 8px;
  color: var(--color-text-muted);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 550;
}

.pane-body {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px;
}

/* ---------- source evidence ---------- */

.document-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 190px;
  overflow-y: auto;
  padding: 1px;
}

.document-option {
  position: relative;
  width: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  overflow: hidden;
  color: var(--color-text-secondary);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.document-option::before {
  content: "";
  position: absolute;
  inset: 7px auto 7px 0;
  width: 3px;
  background: var(--color-accent);
  border-radius: 0 3px 3px 0;
  opacity: 0;
  transform: scaleY(0.5);
  transition: opacity 160ms ease, transform 160ms ease;
}

.document-option:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-card-hover);
  border-color: var(--accent-border);
}

.document-option.active {
  color: var(--color-accent-dark);
  background: var(--accent-soft);
  border-color: var(--accent-border);
  box-shadow: 0 0 0 2px var(--accent-softer);
}

.document-option.active::before {
  opacity: 1;
  transform: scaleY(1);
}

.document-option-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: var(--color-text-muted);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.document-option.active .document-option-icon {
  color: var(--color-accent);
  background: var(--color-bg-card);
  border-color: var(--accent-border);
}

.document-option-copy {
  min-width: 0;
  display: block;
}

.document-option-title,
.document-option-meta {
  display: block;
}

.document-option-title {
  overflow: hidden;
  color: inherit;
  font-size: 0.76rem;
  font-weight: 580;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-option-meta {
  margin-top: 1px;
  color: var(--color-text-muted);
  font-size: 0.65rem;
}

.document-option-arrow {
  color: var(--color-text-muted);
  font-size: 0.8rem;
  transition: color 160ms ease, transform 160ms ease;
}

.document-option:hover .document-option-arrow {
  color: var(--color-accent);
  transform: translateX(2px);
}

.document-option.active .document-option-arrow {
  color: var(--color-accent);
}

.document-meta {
  position: sticky;
  top: -18px;
  z-index: 3;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin: 14px -2px 8px;
  padding: 10px 3px 7px;
  color: var(--color-text-muted);
  background: var(--color-bg-card);
  border-bottom: 1px solid var(--color-border);
  font-size: 0.68rem;
}

.document-active-copy {
  min-width: 0;
}

#document-title {
  display: block;
  min-width: 0;
  margin-top: 2px;
  overflow: hidden;
  color: var(--color-text-secondary);
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#doc-evidence-count {
  flex: 0 0 auto;
}

.doc-text {
  min-height: 240px;
  padding: 22px;
  color: var(--color-document-text);
  background:
    linear-gradient(var(--document-surface), var(--document-surface)),
    repeating-linear-gradient(0deg, transparent 0 27px, var(--color-border) 27px 28px);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  line-height: 1.8;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  box-shadow: inset 0 1px 0 var(--document-inset);
}

.doc-text mark {
  padding: 0.08em 0.14em;
  color: inherit;
  background: var(--highlight);
  border-bottom: 2px solid var(--color-warning);
  border-radius: 3px;
  transition: background 300ms ease, box-shadow 300ms ease;
}

.doc-text mark.flash {
  background: var(--highlight-strong);
  box-shadow: 0 0 0 4px var(--highlight-strong);
}

/* ---------- decision ---------- */

.chips {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0 18px;
}

.chip {
  position: relative;
  width: 100%;
  padding: 12px 40px 12px 14px;
  color: var(--color-text-secondary);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-size: 0.82rem;
  font-weight: 500;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.chip::after {
  content: "→";
  position: absolute;
  right: 14px;
  top: 50%;
  color: var(--color-text-muted);
  transform: translateY(-50%);
  transition: color 160ms ease, transform 160ms ease;
}

.chip:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-card-hover);
  border-color: var(--accent-border);
}

.chip:hover::after {
  color: var(--color-accent);
  transform: translate(2px, -50%);
}

.chip.active {
  color: var(--color-accent-dark);
  background: var(--accent-soft);
  border-color: var(--accent-border);
  box-shadow: 0 0 0 2px var(--accent-softer);
}

.chip.active::after {
  content: "✓";
  color: var(--color-accent);
}

.answer-card {
  --answer-ring: var(--accent-ring);
  --determination-color: var(--color-accent-dark);
  --determination-soft: var(--accent-soft);
  position: relative;
  overflow: hidden;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}

.answer-card.pos {
  --answer-ring: rgb(34 197 94 / 0.24);
  --determination-color: var(--color-success-strong);
  --determination-soft: var(--success-soft);
}

.answer-card.neg {
  --answer-ring: rgb(239 68 68 / 0.22);
  --determination-color: var(--color-negative-strong);
  --determination-soft: var(--error-soft);
}

.answer-card.warn {
  --answer-ring: rgb(245 158 11 / 0.22);
  --determination-color: var(--color-warning-strong);
  --determination-soft: var(--warning-soft);
}

.answer-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  padding: 17px 18px;
  background: var(--color-bg-card);
}

.determination-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--determination-color);
  background: var(--determination-soft);
  border-radius: 50%;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
}

.answer-copy {
  min-width: 0;
}

.answer-card.pulse {
  animation: answer-pulse 800ms ease-out 1;
}

@keyframes answer-pulse {
  0% { box-shadow: 0 0 0 5px var(--answer-ring), var(--shadow-card); }
  100% { box-shadow: 0 0 0 0 transparent, var(--shadow-card); }
}

.answer-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 14px 9px 18px;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
}

.badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.badge::before {
  content: "";
  width: 5px;
  height: 5px;
  margin-right: 4px;
  background: currentColor;
  border-radius: 50%;
}

.badge.live {
  color: var(--color-text-muted);
  background: var(--color-bg-card);
  border-color: var(--color-border);
}

.badge.live::before {
  background: var(--color-accent);
}

.badge.fixture {
  color: var(--color-warning-strong);
  background: var(--warning-soft);
  border-color: var(--warning-border);
}

.answer-asof {
  min-width: 0;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-align: right;
}

.answer-asof span {
  white-space: nowrap;
}

.verdict {
  margin: 1px 0 3px;
  color: var(--color-text-primary);
  font-size: 1.35rem;
  font-weight: 680;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.answer-text {
  color: var(--color-text-secondary);
  font-size: 0.82rem;
  line-height: 1.5;
}

.answer-text:empty {
  display: none;
}

.fixture-note,
.error-card {
  display: flex;
  gap: 10px;
  padding: 12px;
  border: 1px solid;
  border-radius: 12px;
  font-size: 0.75rem;
  line-height: 1.5;
}

.fixture-note {
  grid-column: 1 / -1;
  margin-top: 5px;
  color: var(--color-warning-strong);
  background: var(--warning-soft);
  border-color: var(--warning-border);
}

.fixture-note svg {
  flex: 0 0 auto;
  margin-top: 1px;
}

.error-card {
  color: var(--color-error-strong);
  background: var(--error-soft);
  border-color: var(--error-border);
}

/* ---------- audit trail ---------- */

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.section-heading p,
.export-copy p {
  margin: 2px 0 0;
  color: var(--color-text-muted);
  font-size: 0.7rem;
}

.rules-heading {
  margin-top: 26px;
}

.derivation {
  padding: 13px 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
}

.derivation:empty::before {
  content: "Run a decision to inspect its derivation.";
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

.derivation details {
  margin: 3px 0 3px 2px;
  padding-left: 12px;
  border-left: 1px solid var(--color-border);
}

.derivation > details {
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
}

.derivation summary {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 4px 2px;
  border-radius: 8px;
  cursor: pointer;
  list-style: none;
  transition: background 160ms ease;
}

.derivation summary:hover {
  background: var(--color-bg-card-hover);
}

.derivation summary::-webkit-details-marker {
  display: none;
}

.derivation summary::before {
  content: "›";
  width: 14px;
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1;
  transform-origin: center;
  transition: transform 160ms ease;
}

.derivation details[open] > summary::before {
  transform: rotate(90deg);
}

.node-attr,
.node-value,
.rule-id,
.rule-version {
  font-family: var(--font-mono);
}

.node-attr {
  color: var(--color-text-primary);
  font-size: 0.74rem;
  font-weight: 600;
}

.node-value {
  color: var(--color-accent);
  font-size: 0.74rem;
  font-weight: 650;
}

.node-rule,
.rule-priority,
.defeated-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 550;
}

.node-rule {
  padding: 2px 7px;
  color: var(--color-text-muted);
  background: var(--color-bg-card);
  border-color: var(--color-border);
}

.premises {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  margin: 3px 0 4px;
}

.fact-chip {
  max-width: 100%;
  padding: 7px 9px;
  overflow: hidden;
  color: var(--color-text-secondary);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-align: left;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.fact-chip:hover {
  color: var(--color-accent-dark);
  background: var(--accent-soft);
  border-color: var(--accent-border);
}

.fact-chip .fc-attr {
  color: var(--color-text-primary);
  font-weight: 600;
}

.fact-chip .fc-value {
  color: var(--color-accent);
}

.fact-chip .fc-quote {
  display: block;
  max-width: 36ch;
  margin-top: 2px;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: 0.62rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rule-card {
  padding: 13px 14px;
  margin-bottom: 8px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.rule-card:hover {
  background: var(--color-bg-card-hover);
  border-color: var(--accent-border);
  transform: translateY(-1px);
}

.rule-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
}

.rule-id {
  color: var(--color-text-primary);
  font-size: 0.76rem;
  font-weight: 650;
}

.rule-version {
  color: var(--color-text-muted);
  font-size: 0.64rem;
}

.rule-priority {
  margin-left: auto;
  padding: 2px 7px;
  color: var(--color-text-muted);
  background: var(--color-bg);
  border-color: var(--color-border);
}

.rule-citation {
  color: var(--color-text-secondary);
  font-size: 0.76rem;
}

.rule-citation a {
  color: var(--color-accent);
  text-decoration: none;
}

.rule-citation a:hover {
  text-decoration: underline;
}

.rule-window {
  margin-top: 3px;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.61rem;
}

.defeated-badge {
  margin-top: 8px;
  padding: 2px 8px;
  color: var(--color-error-strong);
  background: var(--error-soft);
  border-color: var(--error-border);
}

/* ---------- extraction provenance ---------- */

.extraction-label {
  margin: 10px 1px 0;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  line-height: 1.5;
}

/* ---------- abstentions and the review flow ---------- */

.abstention-card {
  padding: 13px 14px;
  margin-bottom: 8px;
  background: var(--warning-soft);
  border: 1px solid var(--warning-border);
  border-radius: 12px;
}

.abstention-reason {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  color: var(--color-warning-strong);
  background: var(--color-bg-card);
  border: 1px solid var(--warning-border);
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.abstention-threshold {
  margin: 4px 0 8px;
}

.abstention-score {
  color: var(--color-warning-strong);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 650;
}

.abstention-floor-source {
  margin-top: 2px;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.61rem;
}

.review-note,
.review-session-note {
  margin: 8px 0 0;
  color: var(--color-text-muted);
  font-size: 0.68rem;
  line-height: 1.5;
}

.review-controls {
  margin-top: 10px;
}

.review-toggle[aria-pressed="true"] {
  color: var(--color-accent-dark);
  background: var(--accent-soft);
  border-color: var(--accent-border);
}

.review-form {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 10px;
  padding: 12px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 12px;
}

.review-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.review-field input {
  min-height: 34px;
  padding: 6px 10px;
  color: var(--color-text-primary);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.78rem;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.review-field input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
  outline: none;
}

.review-error {
  margin: 0;
  padding: 8px 10px;
  color: var(--color-error-strong);
  background: var(--error-soft);
  border: 1px solid var(--error-border);
  border-radius: 8px;
  font-size: 0.7rem;
  line-height: 1.5;
}

.review-actions {
  display: flex;
  gap: 7px;
}

.review-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 12px;
  color: var(--color-on-accent);
  background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent-dark));
  border: 1px solid var(--color-accent-dark);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 600;
  transition: filter 160ms ease;
}

.review-submit:hover:not(:disabled) {
  filter: brightness(1.06);
}

.review-submit:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.calibration-note {
  margin: 4px 0 8px;
  padding: 9px 11px;
  color: var(--color-info-strong);
  background: var(--info-soft);
  border: 1px solid var(--info-border);
  border-radius: 8px;
  font-size: 0.68rem;
  line-height: 1.5;
}

.correction-card {
  padding: 13px 14px;
  margin-bottom: 8px;
  background: var(--success-soft);
  border: 1px solid var(--success-border);
  border-radius: 12px;
}

.correction-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  color: var(--color-success-strong);
  background: var(--color-bg-card);
  border: 1px solid var(--success-border);
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.correction-actor {
  color: var(--color-text-secondary);
  font-size: 0.74rem;
}

.correction-supersedes {
  margin-top: 2px;
  overflow: hidden;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.61rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.correction-card .download-btn {
  margin-top: 10px;
}

.fc-prov {
  display: block;
  margin-top: 2px;
  color: var(--color-text-muted);
  font-size: 0.6rem;
}

.fc-prov.human {
  color: var(--color-info-strong);
  font-weight: 600;
}

.export-panel {
  margin-top: 24px;
  padding: 14px;
  background: var(--color-bg-card-hover);
  border-radius: 12px;
}

.download-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 12px;
}

.download-btn {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 8px;
  color: var(--color-text-primary);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.66rem;
  font-weight: 550;
  line-height: 1.2;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.download-btn:hover:not(:disabled) {
  color: var(--color-accent-dark);
  background: var(--accent-soft);
  border-color: var(--accent-border);
}

.download-btn:disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
  opacity: 0.55;
}

/* ---------- responsive behavior ---------- */

@media (max-width: 1180px) {
  html,
  body {
    height: auto;
  }

  #workspace {
    grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);
  }

  #reason-pane {
    grid-column: 1 / -1;
  }

  .pane {
    min-height: 560px;
  }

  #reason-pane {
    min-height: 0;
  }

  .download-row {
    grid-template-columns: repeat(3, max-content);
  }
}

@media (max-width: 780px) {
  .app-header {
    padding: 0 16px;
    gap: 14px;
  }

  .app-nav {
    gap: 14px;
  }

  .app-nav a {
    font-size: 0.76rem;
  }

  .workspace-toolbar {
    display: block;
    padding: 18px 16px;
  }

  .workspace-intro p {
    max-width: 34rem;
  }

  .controls {
    width: 100%;
    margin-top: 16px;
  }

  .scenario-field,
  .date-field {
    width: auto;
    flex: 1 1 0;
  }

  #workspace {
    width: calc(100% - 32px);
    display: block;
  }

  .pane {
    min-height: 0;
    margin-bottom: 16px;
  }

  .pane-body {
    overflow-y: visible;
  }

  .doc-text {
    max-height: 560px;
    overflow-y: auto;
  }
}

@media (max-width: 520px) {
  .header-status {
    padding: 5px 8px;
  }

  .workspace-intro p {
    display: none;
  }

  .controls {
    display: grid;
    grid-template-columns: 1fr;
  }

  .pane-head {
    padding: 13px 14px;
  }

  .pane-body {
    padding: 14px;
  }

  .pane-badge {
    display: none;
  }

  .document-meta {
    display: block;
  }

  #doc-evidence-count {
    display: block;
    margin-top: 2px;
  }

  .answer-footer {
    display: block;
  }

  .answer-asof {
    display: block;
    margin-top: 7px;
    text-align: left;
  }

  .download-row {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }
}