:root {
  --navy-950: #10263a;
  --navy-900: #17324d;
  --navy-800: #244865;
  --slate-800: #33475b;
  --slate-700: #4c5f70;
  --slate-600: #617385;
  --slate-500: #748595;
  --slate-300: #c7d0d8;
  --slate-200: #dce3e9;
  --slate-150: #e7ecf0;
  --slate-100: #f1f4f6;
  --paper: #ffffff;
  --canvas: #f5f7f8;
  --accent: #16766e;
  --accent-dark: #105f59;
  --accent-soft: #e6f3f1;
  --amber: #9b5f08;
  --amber-soft: #fff4d9;
  --red: #a32d2d;
  --red-soft: #fff0ef;
  --green: #176b43;
  --green-soft: #e7f5ed;
  --shadow: 0 1px 2px rgba(16, 38, 58, 0.06), 0 10px 28px rgba(16, 38, 58, 0.05);
  --radius: 10px;
  --radius-small: 6px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--navy-950);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--canvas);
}

body {
  margin: 0;
  min-width: 0;
  background: var(--canvas);
  color: var(--navy-950);
}

button,
input,
textarea,
select {
  font: inherit;
}

button,
summary,
label {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
}

a {
  color: var(--navy-800);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--accent-dark);
}

:focus-visible {
  outline: 3px solid rgba(22, 118, 110, 0.34);
  outline-offset: 2px;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-small);
  background: var(--navy-950);
  color: #fff;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

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

.app-shell {
  display: grid;
  grid-template-columns: 306px minmax(0, 1fr);
  min-height: 100vh;
}

.library-rail {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  min-width: 0;
  padding: 28px 20px;
  overflow-y: auto;
  border-right: 1px solid var(--slate-200);
  background: #eef2f4;
}

.library-drawer {
  display: contents;
}

.rail-heading {
  display: block;
  padding: 0 4px 18px;
  border-bottom: 1px solid var(--slate-300);
  cursor: default;
  list-style: none;
}

/* Chrome/Safari draw a default disclosure triangle on <summary> even with list-style:none. */
.rail-heading::-webkit-details-marker {
  display: none;
}

.rail-heading::marker {
  content: "";
}

.rail-title-line,
.section-heading,
.answer-heading,
.receipt-footer,
.source-row,
.trace-head,
.answer-title-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.eyebrow {
  margin: 0 0 5px;
  color: var(--slate-600);
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.095em;
  line-height: 1.25;
  text-transform: uppercase;
}

h1,
h2,
h3,
h4,
p {
  overflow-wrap: anywhere;
}

h1,
h2,
h3,
h4 {
  color: var(--navy-950);
}

h1 {
  margin: 0;
  font-size: clamp(1.25rem, 1.6vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.018em;
}

h2 {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.25;
}

h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.35;
}

.count-badge {
  display: inline-flex;
  min-width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border: 1px solid var(--slate-300);
  border-radius: 999px;
  background: var(--paper);
  color: var(--slate-700);
  font-size: 0.8rem;
  font-weight: 700;
}

.run-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 16px 0;
}

.filter-button {
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-small);
  background: rgba(255, 255, 255, 0.66);
  color: var(--slate-700);
  font-size: 0.83rem;
  font-weight: 650;
  cursor: pointer;
}

.filter-button:hover {
  background: var(--paper);
}

.filter-button.is-active {
  border-color: var(--navy-800);
  background: var(--navy-900);
  color: #fff;
}

.runs-list {
  display: grid;
  gap: 9px;
}

.rail-message,
.panel-message {
  margin: 12px 4px;
  color: var(--slate-600);
  font-size: 0.9rem;
}

.run-item {
  width: 100%;
  min-width: 0;
  padding: 13px 13px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.run-item:hover {
  border-color: var(--slate-300);
  background: rgba(255, 255, 255, 0.72);
}

.run-item.is-selected {
  border-color: #9aabb9;
  background: var(--paper);
  box-shadow: 0 1px 3px rgba(16, 38, 58, 0.08);
}

.run-item-title {
  display: -webkit-box;
  margin: 6px 0 8px;
  overflow: hidden;
  color: var(--navy-950);
  font-size: 0.91rem;
  font-weight: 660;
  line-height: 1.35;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.run-item-top,
.run-item-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--slate-600);
  font-size: 0.75rem;
}

.run-kind {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 750;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.run-kind::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  content: "";
}

.run-kind.deep::before {
  background: var(--navy-800);
}

.checked-mark {
  color: var(--green);
  font-weight: 750;
}

.state-text.error,
.state-text.timeout {
  color: var(--red);
  font-weight: 700;
}

.workspace,
.main-content,
.ask-panel,
.recipes-panel,
.answer-region,
.answer-content {
  min-width: 0;
}

.workspace {
  width: 100%;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 96px;
  padding: 20px clamp(24px, 4vw, 58px);
  border-bottom: 1px solid var(--slate-200);
  background: rgba(255, 255, 255, 0.94);
}

.brand-block {
  min-width: 0;
}

.project-switcher {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--slate-200);
  border-radius: 9px;
  background: var(--slate-100);
}

.project-button {
  display: flex;
  min-height: 43px;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--radius-small);
  background: transparent;
  color: var(--slate-700);
  font-size: 0.88rem;
  font-weight: 750;
}

.project-button.is-active {
  background: var(--paper);
  color: var(--navy-950);
  box-shadow: 0 1px 3px rgba(16, 38, 58, 0.12);
}

.project-button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.project-state {
  color: var(--slate-600);
  font-size: 0.75rem;
  font-weight: 600;
}

.main-content {
  width: min(100%, 1540px);
  margin: 0 auto;
  padding: 30px clamp(24px, 4vw, 58px) 64px;
}

.ask-panel,
.recipes-panel,
.answer-region {
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.ask-panel {
  padding: 22px;
}

.section-heading.compact {
  align-items: flex-start;
  margin-bottom: 16px;
}

.connection-state {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid var(--slate-200);
  border-radius: 999px;
  background: var(--slate-100);
  color: var(--slate-700);
  font-size: 0.76rem;
  font-weight: 680;
}

.connection-state::before {
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--slate-500);
  content: "";
}

.connection-state.online::before,
.connection-state.mock::before {
  background: var(--green);
}

.connection-state.offline::before {
  background: var(--red);
}

.ask-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
}

#question-input {
  width: 100%;
  min-height: 86px;
  resize: vertical;
  padding: 14px 15px;
  border: 1px solid #afbbc5;
  border-radius: 8px;
  background: #fbfcfd;
  color: var(--navy-950);
  font-size: 1rem;
  line-height: 1.45;
}

#question-input::placeholder {
  color: #697b8b;
}

#question-input:focus {
  border-color: var(--accent);
  background: var(--paper);
}

.ask-actions {
  display: flex;
  min-width: 220px;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}

.check-toggle {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  color: var(--navy-950);
  cursor: pointer;
}

.check-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.toggle-track {
  position: relative;
  display: inline-flex;
  width: 43px;
  height: 24px;
  flex: 0 0 auto;
  align-items: center;
  padding: 3px;
  border: 1px solid #9eacb8;
  border-radius: 999px;
  background: var(--slate-200);
  transition: background 140ms ease, border-color 140ms ease;
}

.toggle-knob {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 1px 3px rgba(16, 38, 58, 0.25);
  transition: transform 140ms ease;
}

.check-toggle input:checked + .toggle-track {
  border-color: var(--accent);
  background: var(--accent);
}

.check-toggle input:checked + .toggle-track .toggle-knob {
  transform: translateX(18px);
}

.check-toggle input:focus-visible + .toggle-track {
  outline: 3px solid rgba(22, 118, 110, 0.34);
  outline-offset: 2px;
}

.check-toggle strong,
.check-toggle small {
  display: block;
}

.check-toggle strong {
  font-size: 0.86rem;
}

.check-toggle small {
  color: var(--slate-600);
  font-size: 0.75rem;
}

.primary-button,
.secondary-button,
.recipe-submit,
.check-button {
  min-height: 44px;
  border-radius: 7px;
  font-weight: 720;
  cursor: pointer;
}

.primary-button,
.recipe-submit {
  border: 1px solid var(--navy-900);
  background: var(--navy-900);
  color: #fff;
}

.primary-button {
  padding: 10px 20px;
}

.primary-button:hover,
.recipe-submit:hover {
  background: var(--navy-800);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.keyboard-hint {
  grid-column: 1 / -1;
  margin: -3px 2px 0;
  color: var(--slate-600);
  font-size: 0.75rem;
}

.app-status {
  min-height: 0;
  margin: 10px 0 0;
  color: var(--slate-700);
  font-size: 0.84rem;
}

.app-status:empty {
  display: none;
}

.app-status.error {
  color: var(--red);
  font-weight: 650;
}

.recipes-panel {
  margin-top: 20px;
  padding: 20px 22px 22px;
}

.compact-heading {
  margin-bottom: 14px;
}

.section-note {
  margin: 0;
  color: var(--slate-600);
  font-size: 0.82rem;
}

.recipe-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.recipe-card {
  display: flex;
  min-width: 0;
  min-height: 174px;
  flex-direction: column;
  padding: 15px;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  background: #fbfcfd;
}

.recipe-number {
  margin-bottom: 7px;
  color: var(--accent-dark);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.recipe-card h3 {
  min-height: 2.7em;
  margin-bottom: 11px;
  font-size: 0.91rem;
}

.recipe-fields {
  display: grid;
  gap: 8px;
  margin-top: auto;
}

.recipe-field {
  display: grid;
  gap: 4px;
}

.recipe-field label {
  color: var(--slate-700);
  font-size: 0.76rem;
  font-weight: 680;
}

.required-mark {
  color: var(--red);
}

.recipe-field input {
  width: 100%;
  min-width: 0;
  min-height: 39px;
  padding: 8px 9px;
  border: 1px solid #bac5ce;
  border-radius: 6px;
  background: var(--paper);
  color: var(--navy-950);
  font-size: 0.86rem;
}

.recipe-submit {
  width: 100%;
  min-height: 40px;
  margin-top: 10px;
  padding: 8px 11px;
  font-size: 0.84rem;
}

.answer-region {
  margin-top: 20px;
  overflow: clip;
}

.answer-heading {
  min-height: 71px;
  padding: 17px 22px;
  border-bottom: 1px solid var(--slate-200);
  background: #fbfcfd;
}

.answer-content {
  padding: 0;
}

.empty-state {
  max-width: 580px;
  margin: 0 auto;
  padding: 66px 24px 72px;
  text-align: center;
}

.empty-rule {
  display: block;
  width: 46px;
  height: 3px;
  margin: 0 auto 18px;
  border-radius: 4px;
  background: var(--accent);
}

.empty-state p {
  margin: 8px 0 0;
  color: var(--slate-600);
}

.loading-block {
  padding: 28px 22px;
  color: var(--slate-700);
}

.loading-line {
  width: min(420px, 80%);
  height: 11px;
  margin-top: 10px;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--slate-100), var(--slate-200), var(--slate-100));
  background-size: 200% 100%;
  animation: loading-shift 1.5s linear infinite;
}

@keyframes loading-shift {
  to { background-position: -200% 0; }
}

.run-answer-header {
  padding: 22px;
  border-bottom: 1px solid var(--slate-200);
}

.answer-title-line {
  align-items: flex-start;
}

.answer-question {
  margin: 3px 0 0;
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  line-height: 1.38;
}

.kind-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid var(--slate-300);
  border-radius: 999px;
  background: var(--slate-100);
  color: var(--slate-700);
  font-size: 0.75rem;
  font-weight: 770;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 16px;
}

.chip {
  display: inline-flex;
  min-height: 29px;
  align-items: center;
  padding: 4px 9px;
  border: 1px solid var(--slate-200);
  border-radius: 999px;
  background: var(--slate-100);
  color: var(--slate-700);
  font-size: 0.76rem;
  font-weight: 680;
  line-height: 1.25;
}

.chip.not-verified {
  border-color: #e5c476;
  background: var(--amber-soft);
  color: #744403;
}

.chip.not-input {
  border-color: var(--slate-300);
  background: #eef1f3;
  color: #455868;
}

.chip.checked {
  border-color: #9bcdb2;
  background: var(--green-soft);
  color: var(--green);
}

.chip.running {
  border-color: #8bc5c0;
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.chip.verdict-yes {
  border-color: #9bcdb2;
  background: var(--green-soft);
  color: var(--green);
}

.chip.verdict-no {
  border-color: #e2a3a3;
  background: var(--red-soft);
  color: var(--red);
}

.fact-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  background: var(--slate-200);
}

.fact {
  min-width: 0;
  padding: 11px 12px;
  background: #fbfcfd;
}

.fact-label {
  display: block;
  margin-bottom: 3px;
  color: var(--slate-600);
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.fact-value {
  display: block;
  color: var(--navy-950);
  font-size: 0.86rem;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.evidence-section {
  padding: 22px;
  border-bottom: 1px solid var(--slate-200);
}

.evidence-section:last-child {
  border-bottom: 0;
}

.evidence-section > h3,
.sources-panel h3,
.limits-block h3 {
  margin-bottom: 12px;
}

.table-region {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  background: var(--paper);
  scrollbar-color: #aebbc5 #f0f3f5;
}

.evidence-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.8rem;
  line-height: 1.4;
}

.evidence-table th,
.evidence-table td {
  max-width: 340px;
  padding: 10px 11px;
  border-right: 1px solid var(--slate-200);
  border-bottom: 1px solid var(--slate-200);
  vertical-align: top;
  text-align: left;
  overflow-wrap: anywhere;
  white-space: normal;
}

.evidence-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #eaf0f3;
  color: var(--navy-900);
  font-size: 0.75rem;
  font-weight: 780;
  letter-spacing: 0.035em;
}

.evidence-table tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 144px;
  background: #f6f8f9;
  color: var(--navy-900);
  font-size: 0.75rem;
  font-weight: 780;
  letter-spacing: 0.02em;
}

.evidence-table tr:last-child th,
.evidence-table tr:last-child td {
  border-bottom: 0;
}

.evidence-table th:last-child,
.evidence-table td:last-child {
  border-right: 0;
}

.neutral-token,
.mismatch-token {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  padding: 3px 7px;
  border-radius: 5px;
  font-size: 0.75rem;
  font-weight: 780;
  line-height: 1.25;
}

.neutral-token {
  border: 1px solid var(--slate-300);
  background: #edf1f3;
  color: #445766;
}

.mismatch-token {
  border: 1px solid #dfb96a;
  background: var(--amber-soft);
  color: #754603;
}

.more-line {
  margin: 10px 2px 0;
  color: var(--slate-700);
  font-size: 0.84rem;
  font-weight: 650;
}

.limits-block {
  border-left: 4px solid #91a2af;
  background: #f3f6f7;
}

.limit-line {
  margin: 0;
  color: var(--slate-800);
}

.limit-line + .limit-line {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--slate-200);
}

.decision-boundary {
  margin: 0;
  padding: 18px 22px;
  border-top: 1px solid #d5b76f;
  border-bottom: 1px solid #d5b76f;
  background: #fff9e9;
  color: #644519;
  font-size: 0.91rem;
  font-weight: 690;
}

.sources-panel {
  padding: 22px;
  border-top: 1px solid var(--slate-200);
}

.source-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.source-row {
  align-items: flex-start;
  padding: 11px 12px;
  border: 1px solid var(--slate-200);
  border-radius: 7px;
  background: #fbfcfd;
}

.source-main {
  min-width: 0;
}

.source-role {
  display: block;
  margin-bottom: 3px;
  color: var(--accent-dark);
  font-size: 0.75rem;
  font-weight: 780;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.source-name,
.source-link {
  color: var(--navy-950);
  font-size: 0.89rem;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.source-meta {
  flex: 0 0 auto;
  color: var(--slate-600);
  font-size: 0.76rem;
  text-align: right;
  overflow-wrap: anywhere;
}

.sha-value {
  display: inline-block;
  padding: 2px 5px;
  border: 1px solid var(--slate-200);
  border-radius: 4px;
  background: var(--slate-100);
  color: var(--slate-700);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

.sha-value:focus {
  max-width: min(66ch, 100%);
}

.sha-full {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.sha-value:hover .sha-full,
.sha-value:focus .sha-full {
  position: static;
  width: auto;
  height: auto;
  clip: auto;
}

.sha-value:hover .sha-short,
.sha-value:focus .sha-short {
  display: none;
}

.empty-sources {
  margin: 0;
  color: var(--slate-600);
  font-size: 0.88rem;
}

.trace-panel {
  margin: 22px;
  overflow: hidden;
  border: 1px solid #b9c7d1;
  border-radius: 9px;
  background: #f7f9fa;
}

.trace-head {
  min-height: 52px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--slate-200);
  background: #edf2f4;
}

.trace-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.88rem;
  font-weight: 760;
}

.trace-title::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--slate-500);
  content: "";
}

.trace-panel.is-running .trace-title::before {
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(22, 118, 110, 0.11);
}

.trace-counter {
  color: var(--slate-600);
  font-size: 0.77rem;
  font-variant-numeric: tabular-nums;
}

.trace-log {
  max-height: 264px;
  margin: 0;
  padding: 6px 0;
  overflow-y: auto;
  list-style: none;
  scrollbar-color: #aebbc5 #f0f3f5;
}

.trace-line {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  padding: 8px 14px;
  border-bottom: 1px solid #e7ecef;
}

.trace-line:last-child {
  border-bottom: 0;
}

.trace-time {
  color: var(--slate-600);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.trace-summary {
  min-width: 0;
  color: var(--slate-800);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.trace-empty {
  padding: 18px 14px;
  color: var(--slate-600);
  font-size: 0.84rem;
}

.deep-status {
  margin: 0 22px 22px;
  padding: 13px 14px;
  border: 1px solid var(--slate-200);
  border-radius: 7px;
  background: var(--slate-100);
  color: var(--slate-800);
  font-weight: 650;
}

.deep-status.error,
.deep-status.timeout {
  border-color: #e2a8a2;
  background: var(--red-soft);
  color: var(--red);
}

.deep-answer {
  padding: 0 22px 22px;
}

.answer-part {
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  background: var(--paper);
}

.answer-part + .answer-part {
  margin-top: 10px;
}

.answer-part summary {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 15px;
  color: var(--navy-900);
  font-size: 0.88rem;
  font-weight: 790;
  letter-spacing: 0.045em;
  list-style: none;
  cursor: pointer;
}

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

.answer-part summary::after {
  color: var(--slate-600);
  font-size: 1.25rem;
  font-weight: 400;
  content: "+";
}

.answer-part[open] summary {
  border-bottom: 1px solid var(--slate-200);
  background: #f7f9fa;
}

.answer-part[open] summary::after {
  content: "−";
}

.markdown-body {
  padding: 17px 17px 19px;
  color: #263b4e;
  font-size: 0.96rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.markdown-body > :first-child {
  margin-top: 0;
}

.markdown-body > :last-child {
  margin-bottom: 0;
}

.markdown-body p {
  margin: 0.85em 0;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  margin: 1.2em 0 0.55em;
  line-height: 1.35;
}

.markdown-body ul,
.markdown-body ol {
  margin: 0.7em 0;
  padding-left: 1.6em;
}

.markdown-body li + li {
  margin-top: 0.35em;
}

.markdown-body code {
  padding: 0.12em 0.34em;
  border: 1px solid #d5dde3;
  border-radius: 4px;
  background: #f0f3f5;
  color: #203a50;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.88em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.markdown-body pre {
  max-width: 100%;
  padding: 13px;
  overflow-x: auto;
  border: 1px solid var(--slate-200);
  border-radius: 6px;
  background: #f3f6f7;
}

.markdown-body pre code {
  padding: 0;
  border: 0;
  background: transparent;
}

.markdown-table-wrap {
  max-width: 100%;
  margin: 1em 0;
  overflow-x: auto;
  border: 1px solid var(--slate-200);
  border-radius: 6px;
}

.markdown-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.markdown-table th,
.markdown-table td {
  padding: 8px 10px;
  border-right: 1px solid var(--slate-200);
  border-bottom: 1px solid var(--slate-200);
  text-align: left;
  vertical-align: top;
}

.markdown-table th {
  background: #eef2f4;
}

.markdown-table tr:last-child td {
  border-bottom: 0;
}

.error-block {
  margin: 22px;
  padding: 14px 15px;
  border: 1px solid #dda39d;
  border-left: 4px solid var(--red);
  border-radius: 7px;
  background: var(--red-soft);
  color: #812323;
}

.error-block h3 {
  color: #812323;
}

.error-block pre {
  max-width: 100%;
  margin: 9px 0 0;
  overflow-x: auto;
  color: inherit;
  font-size: 0.82rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.receipt-footer {
  align-items: flex-end;
  padding: 18px 22px;
  border-top: 1px solid var(--slate-200);
  background: #f7f9fa;
}

.receipt-facts {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 7px 18px;
  margin: 0;
}

.receipt-fact {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.receipt-fact dt {
  color: var(--slate-600);
  font-size: 0.69rem;
  font-weight: 760;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.receipt-fact dd {
  min-width: 0;
  margin: 0;
  color: var(--slate-800);
  font-size: 0.79rem;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.check-button {
  flex: 0 0 auto;
  padding: 9px 13px;
  border: 1px solid #7ea88f;
  background: var(--paper);
  color: var(--green);
}

.check-button:hover {
  background: var(--green-soft);
}

.gate-button {
  border-color: var(--slate-300);
  color: var(--slate-700);
}

.gate-button:hover {
  background: var(--slate-100);
}

.receipt-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.gate-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.gate-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.gate-reading {
  margin: 0;
  max-width: 320px;
  text-align: right;
  font-size: 0.78rem;
  color: var(--slate-700);
}

.gate-failing {
  margin: 0;
  max-width: 320px;
  text-align: right;
  font-size: 0.78rem;
  color: #744403;
}

.checked-receipt {
  display: grid;
  flex: 0 0 auto;
  justify-items: end;
  gap: 5px;
}

.checked-time {
  color: var(--slate-600);
  font-size: 0.75rem;
}

.noscript-message {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 32px;
  background: var(--paper);
  color: var(--red);
  font-weight: 700;
  text-align: center;
}

@media (min-width: 1600px) {
  .recipe-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .recipe-card h3 {
    min-height: 4.05em;
  }
}

@media (max-width: 1180px) {
  .recipe-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ask-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .ask-actions {
    min-width: 0;
    flex-direction: row;
    align-items: center;
  }
}

@media (max-width: 820px) {
  .app-shell {
    display: block;
  }

  .library-rail {
    position: static;
    width: 100%;
    height: auto;
    max-height: none;
    padding: 20px;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--slate-200);
  }

  .run-filters {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .runs-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 320px;
    padding-right: 3px;
    overflow-y: auto;
  }

  .topbar {
    min-height: auto;
    align-items: flex-start;
    padding: 20px;
  }

  .main-content {
    padding: 20px;
  }
}

@media (max-width: 600px) {
  .topbar,
  .section-heading,
  .answer-title-line,
  .receipt-footer,
  .receipt-actions,
  .gate-block,
  .source-row {
    align-items: stretch;
    flex-direction: column;
  }

  .project-switcher {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-button {
    justify-content: center;
  }

  .main-content,
  .library-rail,
  .topbar {
    padding-right: 14px;
    padding-left: 14px;
  }

  .ask-panel,
  .recipes-panel,
  .run-answer-header,
  .evidence-section,
  .sources-panel,
  .receipt-footer {
    padding-right: 15px;
    padding-left: 15px;
  }

  .recipe-grid,
  .runs-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .recipe-card {
    min-height: 0;
  }

  .recipe-card h3 {
    min-height: 0;
  }

  .ask-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .check-toggle {
    width: 100%;
  }

  .primary-button {
    width: 100%;
  }

  .keyboard-hint {
    line-height: 1.55;
  }

  .section-note {
    text-align: left;
  }

  .fact-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .source-meta {
    text-align: left;
  }

  .trace-panel,
  .error-block {
    margin-right: 15px;
    margin-left: 15px;
  }

  .trace-line {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .deep-answer {
    padding-right: 15px;
    padding-left: 15px;
  }

  .decision-boundary {
    padding-right: 15px;
    padding-left: 15px;
  }

  .checked-receipt {
    width: 100%;
    justify-items: stretch;
  }

  .checked-receipt .chip,
  .checked-time {
    justify-content: center;
    text-align: center;
  }
}

/* N28 phone pass: the projector and tablet breakpoints above already exist; this is the
   pocket-phone layer the demo room's phones over the LAN actually use. Three things only --
   the library becomes a real drawer, every scrollable table stays inside its own container
   instead of widening the page, and every tappable control reaches a 44px touch target. */
@media (max-width: 480px) {
  /* Library drawer: the summary becomes a full-width tappable bar with its own disclosure
     marker; the desktop/tablet ::marker suppression above is undone just for this width. */
  .rail-heading {
    position: relative;
    min-height: 44px;
    padding: 11px 34px 11px 4px;
    cursor: pointer;
  }

  .rail-heading::after {
    position: absolute;
    top: 50%;
    right: 6px;
    color: var(--slate-600);
    content: "▾";
    transform: translateY(-50%);
  }

  .library-drawer:not([open]) .rail-heading::after {
    content: "▸";
  }

  .library-drawer:not([open]) .rail-heading {
    border-bottom: 0;
  }

  /* Every evidence/markdown table keeps its own horizontal scroll region at phone width
     rather than forcing the whole page to scroll sideways -- restated explicitly here (the
     base rules already set this) so a phone-width layout regression is caught at this
     breakpoint specifically. */
  .table-region,
  .markdown-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .evidence-table,
  .markdown-table {
    min-width: 480px;
  }

  /* 44px is the minimum comfortable touch target (WCAG 2.5.5); several controls are sized
     for a mouse-driven projector view and fall short of it on a phone. */
  .filter-button,
  .recipe-submit,
  .drawing-open,
  .how-button,
  .project-button {
    min-height: 44px;
  }

  .run-item {
    min-height: 44px;
  }
}

@media (max-width: 410px) {
  .run-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .answer-heading {
    padding-right: 15px;
    padding-left: 15px;
  }
}

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

@media print {
  @page {
    size: landscape;
    margin: 0.45in;
  }

  :root {
    font-size: 11pt;
  }

  body,
  html {
    background: #fff;
  }

  .app-shell {
    display: block;
  }

  .library-rail,
  .ask-panel,
  .recipes-panel,
  .project-switcher,
  .connection-state,
  .check-button,
  .keyboard-hint {
    display: none !important;
  }

  .topbar {
    min-height: 0;
    padding: 0 0 18px;
    border-bottom: 2px solid #17324d;
  }

  .main-content {
    width: 100%;
    padding: 18px 0 0;
  }

  .answer-region {
    margin: 0;
    overflow: visible;
    border: 0;
    box-shadow: none;
  }

  .table-region,
  .markdown-table-wrap,
  .trace-log {
    max-height: none;
    overflow: visible;
  }

  .markdown-table {
    width: 100%;
    font-size: 7pt;
  }

  .evidence-table,
  .evidence-table tbody,
  .evidence-table tr,
  .evidence-table th,
  .evidence-table td {
    display: block;
    width: 100%;
    max-width: none;
  }

  .evidence-table {
    font-size: 9pt;
  }

  .evidence-table thead {
    display: none;
  }

  .evidence-table tbody tr {
    margin-bottom: 10pt;
    overflow: hidden;
    border: 1px solid #c7d0d8;
    border-radius: 4px;
    break-inside: avoid-page;
  }

  .evidence-table tbody th {
    position: static;
    min-width: 0;
    padding: 7pt;
    border-right: 0;
    background: #eaf0f3;
  }

  .evidence-table tbody td {
    display: grid;
    grid-template-columns: minmax(120px, 28%) minmax(0, 1fr);
    gap: 10pt;
    padding: 5pt 7pt;
    border-right: 0;
  }

  .evidence-table tbody td::before {
    color: #4c5f70;
    font-size: 8pt;
    font-weight: 700;
    content: attr(data-label);
  }

  .evidence-table tbody td.is-absent-field {
    display: none;
  }

  .answer-part:not([open]) > :not(summary) {
    display: block !important;
  }

  .answer-part summary::after {
    display: none;
  }

  .receipt-footer {
    break-inside: avoid;
  }

  .source-row,
  .trace-line,
  .limit-line {
    break-inside: avoid-page;
  }
}

.sources-subhead { margin: 0.6rem 0 0.3rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted, #5b6b7a); }

/* How it answers */
.how-button {
  margin-left: auto; margin-right: 0.75rem; padding: 0.45rem 0.8rem; border: 1px solid var(--slate-300);
  border-radius: 8px; background: var(--paper); color: var(--navy-900); font: inherit; font-size: 0.85rem; font-weight: 600;
  cursor: pointer;
}
.how-button:hover { border-color: var(--navy-800); }
.how-dialog { width: min(760px, 92vw); border: 1px solid var(--slate-200); border-radius: 14px; padding: 1.4rem 1.6rem 1.6rem;
  color: var(--navy-950); background: var(--paper); box-shadow: 0 24px 60px rgba(16, 38, 58, 0.25); }
.how-dialog::backdrop { background: rgba(16, 38, 58, 0.45); }
.how-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; }
.how-head h2 { margin: 0.1rem 0 0; font-size: 1.35rem; }
.how-close { padding: 0.4rem 0.75rem; border: 1px solid var(--slate-300); border-radius: 8px; background: var(--paper);
  font: inherit; font-size: 0.85rem; cursor: pointer; }
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.how-steps li { display: grid; grid-template-columns: 2rem 1fr; gap: 0.75rem; align-items: start; line-height: 1.45; font-size: 0.95rem; }
.how-num { display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--navy-900);
  color: #fff; font-weight: 700; font-size: 0.85rem; }
.how-rules { margin-top: 1.1rem; padding: 0.9rem 1rem; border-left: 3px solid var(--accent); background: var(--accent-soft);
  border-radius: 6px; font-size: 0.92rem; line-height: 1.45; }
.how-rules p { margin: 0 0 0.5rem; }
.how-rules p:last-child { margin-bottom: 0; }
@media (max-width: 720px) { .how-button { margin-left: 0; } }

/* G-153 (owner 2026-09-16 01:05Z): the library toggle. The button sits in the header beside "How
   this works" and wears the same plain chrome -- nothing new to learn. With .is-library-closed on
   the shell the rail's 306px column collapses and the workspace takes the whole width; the rail
   itself carries the `hidden` attribute. Below 820px the shell is already display:block, so the
   hidden attribute alone does the work there. Nothing inside the panel is restyled. */
.library-button {
  margin-right: 0.75rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--slate-300);
  border-radius: 8px;
  background: var(--paper);
  color: var(--navy-900);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.library-button:hover { border-color: var(--navy-800); }

.library-button[aria-expanded="true"] {
  border-color: var(--navy-800);
  background: var(--slate-100);
}

.library-button:focus-visible {
  outline: 2px solid var(--navy-950);
  outline-offset: 2px;
}

.app-shell.is-library-closed {
  grid-template-columns: minmax(0, 1fr);
}

.library-rail[hidden] {
  display: none;
}

@media (max-width: 480px) {
  /* 44px is the minimum comfortable touch target (WCAG 2.5.5), as the phone block does for the
     rail's own controls. */
  .library-button {
    min-height: 44px;
  }
}

/* Drawing card: the sheet itself, its current issue, and the copy-you-have verdict */
.drawing-cards { display: grid; gap: 14px; margin-top: 18px; }
.drawing-card {
  padding: 16px 18px;
  border: 1px solid var(--slate-200);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
}
.drawing-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px; }
.drawing-sheet { font-size: 1.35rem; font-weight: 800; letter-spacing: 0.02em; color: var(--navy-950); }
.drawing-title { font-size: 1rem; color: var(--slate-700); }
.drawing-current { margin: 10px 0 0; font-size: 1rem; }
.drawing-verdict { margin: 8px 0 0; padding: 8px 10px; border-radius: var(--radius-small); font-weight: 650; }
.drawing-verdict.is-stale { background: var(--amber-soft); color: var(--amber); }
.drawing-verdict.is-current { background: var(--green-soft); color: var(--green); }
.drawing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 12px; }
.drawing-open {
  display: inline-block; padding: 9px 14px; border-radius: var(--radius-small);
  background: var(--accent); color: #fff; font-weight: 700; text-decoration: none;
}
.drawing-open:hover { background: var(--accent-dark); }
.drawing-where { color: var(--slate-600); font-size: 0.85rem; }
.drawing-history { margin-top: 10px; color: var(--slate-700); font-size: 0.9rem; }
.drawing-history summary { cursor: pointer; font-weight: 650; }
.drawing-history ul { margin: 6px 0 0; padding-left: 20px; }
.drawing-note { margin: 10px 0 0; color: var(--slate-600); font-size: 0.8rem; }

/* RFI card (N23): HDR's verbatim response with page, status/dates, Open-the-response --
   same drawing-card treatment (border-left accent, card shadow), never a substitute for
   the report facts below it. */
.rfi-cards { display: grid; gap: 14px; margin-top: 18px; }
.rfi-card {
  padding: 16px 18px;
  border: 1px solid var(--slate-200);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
}
.rfi-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px; }
.rfi-number { font-size: 1.35rem; font-weight: 800; letter-spacing: 0.02em; color: var(--navy-950); }
.rfi-status { padding: 3px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; }
.rfi-status.is-closed { background: var(--green-soft); color: var(--green); }
.rfi-status.is-open { background: var(--amber-soft); color: var(--amber); }
.rfi-title { margin: 6px 0 0; font-size: 1rem; color: var(--slate-700); }
.rfi-meta { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--slate-600); font-size: 0.88rem; }
.rfi-verdict { margin: 8px 0 0; padding: 8px 10px; border-radius: var(--radius-small); font-weight: 650; }
.rfi-verdict.is-stale { background: var(--amber-soft); color: var(--amber); }
.rfi-verdict.is-current { background: var(--green-soft); color: var(--green); }
.rfi-quote {
  margin: 12px 0 0; padding: 10px 14px;
  border-left: 3px solid var(--slate-300);
  background: var(--slate-100);
  font-size: 0.95rem; line-height: 1.5; color: var(--navy-950);
}
.rfi-quote p { margin: 0 0 0.5em; }
.rfi-quote p:last-child { margin-bottom: 0; }
.rfi-quote-ref { margin: 4px 0 0; color: var(--slate-600); font-size: 0.8rem; }
.rfi-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 12px; }
.rfi-open {
  display: inline-block; padding: 9px 14px; border-radius: var(--radius-small);
  background: var(--accent); color: #fff; font-weight: 700; text-decoration: none;
}
.rfi-open:hover { background: var(--accent-dark); }
.rfi-attachments, .rfi-related { margin-top: 10px; color: var(--slate-700); font-size: 0.9rem; }
.rfi-attachments summary, .rfi-related summary { cursor: pointer; font-weight: 650; }
.rfi-attachments ul, .rfi-related ul { margin: 6px 0 0; padding-left: 20px; }
.rfi-note { margin: 10px 0 0; color: var(--slate-600); font-size: 0.8rem; }

/* Answer card: the synthesized lead sentence a fast report's evidence table is combined into, on top of
   (never instead of) the report -- see product notes in QA_Q1/Q3_20260913.md for why this exists. */
.answer-card {
  margin-top: 18px;
  padding: 18px 20px;
  border: 1px solid var(--slate-200);
  border-left: 4px solid var(--navy-800);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
}
.answer-card-head { display: flex; align-items: center; gap: 10px; }
.verdict-chip {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid var(--slate-300);
  background: var(--slate-100);
  color: var(--slate-700);
}
.verdict-chip.verdict-yes { border-color: #9bcdb2; background: var(--green-soft); color: var(--green); }
.verdict-chip.verdict-no { border-color: #e2a3a3; background: var(--red-soft); color: var(--red); }
.verdict-chip.verdict-not-found { border-color: #e2a3a3; background: var(--red-soft); color: var(--red); }
.verdict-chip.verdict-limit { border-color: #e5c476; background: var(--amber-soft); color: var(--amber); }
.verdict-chip.verdict-value,
.verdict-chip.verdict-list { border-color: #8bc5c0; background: var(--accent-soft); color: var(--accent-dark); }
/* N52: stale data/status snapshot line on every answer card */
.answer-card-currentness {
  margin: 10px 0 0;
  padding: 6px 10px;
  border-left: 4px solid #b45309;
  background: #fff7ed;
  color: #7c2d12;
  font-weight: 700;
  font-size: 0.92rem;
}

.answer-card-lead {
  margin: 12px 0 0;
  font-size: 1.12rem;
  font-weight: 650;
  line-height: 1.48;
  color: var(--navy-950);
}
.answer-card-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  background: var(--slate-200);
}
.answer-card-fact { min-width: 0; padding: 10px 12px; background: #fbfcfd; }
.answer-card-fact-label {
  display: block;
  margin-bottom: 3px;
  color: var(--slate-600);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.answer-card-fact-value { display: block; color: var(--navy-950); font-size: 0.85rem; font-weight: 650; overflow-wrap: anywhere; }
.answer-card-fact-ref { display: block; margin-top: 2px; color: var(--slate-500); font-size: 0.72rem; overflow-wrap: anywhere; }


/* =============================================================================================
   W-01 (D-20260914-125) — the corner: a badge only the owner ever sees, and the language toggle
   everyone uses. Nothing else about the page's layout changes, so switching language moves
   nothing: the toggle sits in the topbar's own flex row, between the "How this works" button and
   the project switcher, and both buttons are the same width in both languages ("EN" / "ES").
   ============================================================================================= */

.corner-controls {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
}

.owner-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--slate-200);
  border-radius: 999px;
  background: #fbfcfd;
  color: var(--slate-600);
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.owner-badge[hidden] {
  display: none;
}

.lang-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  background: var(--slate-200);
}

.lang-button {
  min-width: 40px;
  padding: 5px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--slate-600);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.lang-button:hover {
  color: var(--navy-950);
}

.lang-button.is-active {
  background: #ffffff;
  color: var(--navy-950);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

.lang-button:focus-visible {
  outline: 2px solid var(--navy-950);
  outline-offset: 2px;
}

/* The team's receipt line: "took 5 minutes", where the owner's dl of run id / kind / UTC sits. */
.receipt-plain {
  margin: 0;
  color: var(--slate-500);
  font-size: 0.8rem;
}

@media (prefers-reduced-motion: reduce) {
  .lang-button {
    transition: none;
  }
}

@media (max-width: 720px) {
  .corner-controls {
    gap: 6px;
  }
  .owner-badge {
    padding: 3px 7px;
    font-size: 0.62rem;
    letter-spacing: 0.04em;
  }
}

/* N28's phone pass gave every control a crew member taps a 44px touch target. The language
   toggle is one of those controls -- it is the first thing a Spanish-speaking foreman reaches
   for -- so it gets the same treatment. This is a second (max-width: 480px) block, appended
   after the existing one, so tests/test_layout_rules.py still reads N28's block as its first
   match and this only adds to it. */
@media (max-width: 480px) {
  .lang-button {
    min-height: 44px;
    min-width: 48px;
  }
}

/* =============================================================================================
   W-02 (D-20260914-125) — "Where this comes from": the team's evidence as plain lines under the
   lead, and the owner's "Raw record" fold that holds the report's own tables. The block sits
   inside the answer card, so it takes the card's width at every breakpoint and adds no new one.
   ============================================================================================= */

.plain-evidence {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--slate-200);
}

.plain-evidence-title {
  margin: 0 0 8px;
  color: var(--slate-600);
  font-size: 0.8rem;
  font-weight: 700;
}

.plain-evidence-empty,
.plain-evidence-compare {
  margin: 0 0 8px;
  color: var(--navy-950);
  font-size: 0.92rem;
}

.plain-evidence-compare {
  font-weight: 650;
}

.plain-evidence-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.plain-evidence-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  min-width: 0;
}

.plain-evidence-label {
  color: var(--slate-600);
  font-size: 0.86rem;
}

.plain-evidence-label::after {
  content: ":";
}

.plain-evidence-value {
  color: var(--navy-950);
  font-size: 0.92rem;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.plain-evidence-source {
  flex-basis: 100%;
  color: var(--slate-500);
  font-size: 0.78rem;
}

.plain-empty {
  margin-top: 18px;
}

.raw-record {
  margin-top: 18px;
  padding: 10px 14px;
  border: 1px dashed var(--slate-300);
  border-radius: var(--radius);
  background: #fbfcfd;
}

.raw-record > summary {
  color: var(--slate-600);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.raw-record[open] > summary {
  margin-bottom: 10px;
}

/* W-03 (D-20260914-126): files at the desk — the Attach control, one chip per file, the drop cue. */
.attach-zone {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 10px 0 4px;
}

.attach-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-small);
  background: var(--paper);
  color: var(--accent-dark);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.attach-button:hover {
  background: var(--accent-soft);
}

.attach-button:focus-visible,
.attach-remove:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.attach-button:disabled {
  opacity: 0.55;
  cursor: default;
}

.attach-help {
  font-size: 0.85rem;
  opacity: 0.75;
}

.attach-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex-basis: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.attach-list[hidden] {
  display: none;
}

.attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 4px 4px 4px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
}

.attach-chip-name {
  overflow: hidden;
  max-width: 28ch;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.attach-chip-size {
  font-size: 0.85rem;
  opacity: 0.75;
  white-space: nowrap;
}

.attach-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.attach-remove:hover {
  background: var(--paper);
}

.attach-error {
  flex-basis: 100%;
  margin: 0;
  color: var(--red);
}

.attach-drop {
  flex-basis: 100%;
  margin: 0;
  font-weight: 600;
  color: var(--accent-dark);
}

.ask-form.is-dragging {
  outline: 2px dashed var(--accent);
  outline-offset: 4px;
  background: var(--accent-soft);
}

.run-attachments {
  margin-top: 8px;
}

.run-attachments p {
  margin: 2px 0;
}

.attach-fast-note {
  color: var(--amber);
}

@media (max-width: 480px) {
  .attach-button,
  .attach-remove {
    min-height: 44px;
  }

  .attach-remove {
    min-width: 44px;
  }
}

/* W-04 (D-20260914-125): a full check waiting in line, the Bulletin 04 picture, the viewer's own questions first. */
.deep-status.queued {
  border-color: #e8cf9a;
  background: var(--amber-soft);
  color: var(--amber);
}

.state-text.queued {
  color: var(--amber);
}

.rail-group {
  margin: 14px 4px 6px;
  color: var(--slate-600);
  font-size: 0.78rem;
  font-weight: 700;
}

.rail-group:first-child {
  margin-top: 2px;
}

.crop-pictures {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.crop-picture {
  margin: 0;
  min-width: 0;
}

.crop-picture[hidden] {
  display: none;
}

.crop-open {
  display: inline-block;
  max-width: 100%;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-small);
  background: var(--paper);
  line-height: 0;
}

.crop-open:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.crop-image {
  display: block;
  max-width: 100%;
  max-height: 320px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.crop-caption {
  margin-top: 4px;
  color: var(--slate-500);
  font-size: 0.8rem;
}

.crop-missing {
  color: var(--slate-600);
  font-size: 0.9rem;
}

@media (max-width: 480px) {
  .crop-image {
    max-height: 220px;
  }
}

/* G-155 --- the library's own search box, at the top of the panel's list region. Plain: one input, one status
   line, and the match rows reuse the panel's own .run-item styling. Nothing here changes the header, the
   filters, the drawer or the list. */
.library-search {
  padding: 0 4px 8px;
}

.library-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--slate-300, #cbd5e1);
  border-radius: 8px;
  font: inherit;
  font-size: 0.92rem;
  color: inherit;
  background: #fff;
}

.library-search-input:focus-visible {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: 1px;
}

.library-search-hits {
  margin: 6px 2px 0;
  min-height: 1em;
  color: var(--slate-500, #64748b);
  font-size: 0.8rem;
}

.library-search-more {
  margin-top: 8px;
  width: 100%;
}

/* The ask-box card's matches (the same rows, in the answer). */
.library-matches {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.library-match {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
  padding: 8px 0;
  border-top: 1px solid var(--slate-200, #e2e8f0);
}

.library-match-text {
  flex: 1 1 auto;
}

.library-match-meta {
  display: block;
  color: var(--slate-500, #64748b);
  font-size: 0.82rem;
}

.library-match-open {
  flex: 0 0 auto;
}

/* G156 (owner 2026-09-16 01:15Z): the private-ask note under the ask box, and the owner's one count line in the
   library rail. The "Only me" switch itself reuses .check-toggle, so it looks exactly like "Full check". */
.ask-note {
  grid-column: 1 / -1;
  margin: 6px 2px 0;
  color: var(--slate-600);
  font-size: 0.78rem;
}

.private-count {
  margin-top: 16px;
  color: var(--slate-500);
  font-size: 0.78rem;
}

/* G-164: the light path -- a private text utility answered on this page in seconds. The answer is the person's
   OWN text worked on, so it keeps its line breaks and its bullets exactly as they came back. */
.answer-card-light {
  margin: 0.6rem 0 0.2rem;
  padding: 0.85rem 1rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
  line-height: 1.55;
  background: var(--slate-100);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-small);
}
.answer-card-light-note {
  margin: 0.35rem 0 0;
  font-size: 0.86em;
  opacity: 0.75;
}
/* Plan section 7.5: the Simplify button and its plain-language view beside the unchanged full answer. */
.simplify-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0.6rem 0 0;
}
.simplify-button {
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--navy-800);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--navy-800);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.simplify-button:disabled { opacity: 0.6; cursor: wait; }
.simplify-view {
  margin: 0.6rem 0 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--slate-200);
  border-left: 4px solid var(--navy-800);
  border-radius: var(--radius);
  background: var(--slate-100);
}
.simplify-view-title { margin: 0 0 0.3rem; font-size: 1em; }
.simplify-view-binding { margin: 0 0 0.5rem; font-size: 0.86em; opacity: 0.8; }
.simplify-view-body { line-height: 1.55; }
.simplify-view-body ol, .simplify-view-body ul { margin: 0.2rem 0 0.4rem 1.2rem; }
.simplify-full-toggle { margin-top: 0.4rem; }
.simplify-full-hidden > *:not(.simplify-bar):not(.simplify-view):not(.answer-card-head) { display: none; }
.run-kind.light { font-weight: 600; }