/* Mizan live results surfaces: dense, inspectable, and status-first. */
.results-ui,
.results-ui * {
  letter-spacing: 0;
}

.results-ui {
  background: #0b0c0e;
}

.results-ui h1,
.results-ui h2,
.results-ui h3 {
  letter-spacing: 0;
}

.results-ui .nav {
  overflow-x: auto;
  scrollbar-width: none;
}

.results-ui .nav::-webkit-scrollbar {
  display: none;
}

.results-intro,
.home-intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  padding-top: 3rem;
  padding-bottom: 2.25rem;
}

.home-intro {
  min-height: 360px;
  align-items: center;
}

.home-intro-copy {
  max-width: 720px;
}

.results-intro h1,
.home-intro h1,
.pair-header h1 {
  margin: 0;
  color: var(--ink);
  font-size: 3.25rem;
  line-height: 1.05;
}

.home-intro h1 {
  font-size: 4rem;
}

.results-lede {
  max-width: 700px;
  margin: .8rem 0 0;
  color: #c4c8ce;
  font-size: 1.15rem;
  line-height: 1.65;
}

.home-explainer,
.section-copy {
  max-width: 760px;
  color: var(--muted);
}

.home-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin-top: 1.4rem;
}

.command-button,
.quiet-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .65rem 1rem;
  border-radius: 6px;
  font: 600 .82rem/1 'Inter', sans-serif;
  cursor: pointer;
  text-decoration: none;
}

.command-button {
  border: 1px solid var(--brass-br);
  background: var(--brass-br);
  color: #111216;
}

.command-button:hover {
  background: #e1bd84;
  color: #111216;
}

.quiet-button {
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--ink);
}

.quiet-button:hover {
  border-color: var(--brass-br);
  color: var(--brass-br);
}

.run-stamp,
.freshness {
  flex: 0 0 auto;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: .78rem;
}

.run-stamp {
  min-width: 220px;
  border-left: 2px solid var(--brass);
  padding: .65rem 0 .65rem 1.1rem;
}

.run-stamp span,
.run-stamp small,
.run-stamp strong {
  display: block;
}

.run-stamp strong {
  margin: .2rem 0;
  color: var(--ink);
  font-size: 1.3rem;
}

.status-band {
  border-top: 1px solid #74302d;
  border-bottom: 1px solid #74302d;
  background: #3b1716;
}

.status-band-inner {
  display: grid;
  grid-template-columns: minmax(260px, .85fr) minmax(320px, 1.15fr);
  gap: 2rem;
  align-items: center;
  padding-top: 1.4rem;
  padding-bottom: 1.4rem;
}

.status-label {
  display: block;
  color: #f1aaa5;
  font: 600 .72rem/1.2 'JetBrains Mono', monospace;
  text-transform: uppercase;
}

.status-band h2 {
  margin: .35rem 0 0;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 1.35rem;
}

.status-band p {
  margin: 0;
  color: #f6d4d2;
  line-height: 1.55;
}

.results-section {
  padding-top: 3.25rem;
  padding-bottom: 3.25rem;
}

.section-band {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #101216;
}

.section-heading,
.panel-title,
.pair-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
}

.section-heading h2,
.pair-section h2 {
  margin: 0;
  font-size: 2rem;
}

.text-link,
.back-link {
  font-weight: 600;
  color: var(--brass-br);
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
  margin-top: 1.5rem;
}

.metric {
  min-width: 0;
  min-height: 126px;
  padding: 1rem;
  border: 1px solid var(--line2);
  border-radius: 6px;
  background: #14161a;
}

.metric span,
.metric small {
  display: block;
  color: var(--muted);
}

.metric span {
  font: 600 .76rem/1.3 'JetBrains Mono', monospace;
  text-transform: uppercase;
}

.metric strong {
  display: block;
  margin: .55rem 0 .35rem;
  color: var(--ink);
  font: 500 1.8rem/1 'JetBrains Mono', monospace;
}

.metric small {
  font-size: .78rem;
  line-height: 1.35;
}

.chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin-top: .75rem;
}

.data-panel {
  min-width: 0;
  min-height: 190px;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #111317;
}

.panel-title {
  align-items: baseline;
}

.panel-title h3 {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: .95rem;
}

.panel-title span,
.result-count {
  color: var(--faint);
  font: .72rem/1.3 'JetBrains Mono', monospace;
}

.segmented-bar {
  display: flex;
  width: 100%;
  height: 18px;
  margin-top: 1.6rem;
  overflow: hidden;
  border: 1px solid var(--line2);
  border-radius: 4px;
  background: #08090b;
}

.segment {
  display: block;
  height: 100%;
}

.segment.adjudicated,
.legend-swatch.adjudicated { background: var(--brass-br); }
.segment.triaged,
.legend-swatch.triaged { background: #73879b; }
.segment.pending,
.legend-swatch.pending { background: #343941; }
.segment.survived,
.legend-swatch.survived { background: var(--survived); }
.segment.broke,
.legend-swatch.broke { background: var(--broke); }
.segment.indeterminate,
.legend-swatch.indeterminate { background: var(--indet); }
.segment.reviewed,
.legend-swatch.reviewed { background: #5f9b7b; }
.segment.provisional,
.legend-swatch.provisional { background: #756d62; }

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1rem;
  margin-top: 1rem;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--muted);
  font-size: .75rem;
}

.legend-item strong {
  color: var(--ink);
  font-family: 'JetBrains Mono', monospace;
}

.legend-swatch {
  width: 9px;
  height: 9px;
  border-radius: 2px;
}

.floor-chart {
  position: relative;
  height: 52px;
  margin-top: 1.35rem;
}

.floor-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 18px;
  height: 12px;
  border: 1px solid var(--line2);
  border-radius: 4px;
  background: #08090b;
}

.floor-observed {
  height: 100%;
  background: var(--broke);
}

.floor-marker {
  position: absolute;
  top: 6px;
  bottom: 5px;
  width: 2px;
  background: #f4d28d;
}

.floor-marker-label {
  position: absolute;
  top: -18px;
  transform: translateX(-50%);
  color: #f4d28d;
  font: .68rem/1 'JetBrains Mono', monospace;
  white-space: nowrap;
}

.panel-note {
  margin: .6rem 0 0;
  color: var(--muted);
  font-size: .78rem;
}

.timeline-chart {
  width: 100%;
  height: 125px;
  margin-top: .65rem;
}

.timeline-chart svg {
  display: block;
  width: 100%;
  height: 100%;
}

.timeline-chart .axis-line { stroke: #353a42; stroke-width: 1; }
.timeline-chart .data-line { fill: none; stroke: var(--brass-br); stroke-width: 2; }
.timeline-chart .data-area { fill: rgba(184,145,90,.12); }
.timeline-chart text { fill: var(--faint); font: 10px 'JetBrains Mono', monospace; }

.result-filters {
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) minmax(160px, .7fr) minmax(180px, .8fr) auto auto;
  gap: .65rem;
  align-items: end;
  margin: 1.4rem 0 1rem;
}

.result-filters label span {
  display: block;
  margin-bottom: .35rem;
  color: var(--muted);
  font-size: .72rem;
}

.result-filters input,
.result-filters select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line2);
  border-radius: 5px;
  background: #0b0c0e;
  color: var(--ink);
  padding: .65rem .75rem;
  font: .85rem 'Inter', sans-serif;
}

.result-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.result-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
}

.result-table th,
.result-table td {
  padding: .85rem .9rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.result-table th {
  color: var(--faint);
  background: #0d0f12;
  font: 600 .7rem/1.2 'JetBrains Mono', monospace;
  text-transform: uppercase;
}

.result-table td {
  color: var(--muted);
  font-size: .84rem;
}

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

.result-table tbody tr:hover td {
  background: #15181d;
}

.pair-link {
  color: var(--ink);
  font: 600 .86rem/1.2 'JetBrains Mono', monospace;
}

.signal-note {
  display: block;
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: .25rem .5rem;
  border: 1px solid var(--line2);
  border-radius: 4px;
  color: var(--muted);
  font: 600 .68rem/1 'JetBrains Mono', monospace;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-chip.broke { color: #f09a94; border-color: #8c3c37; background: #311515; }
.status-chip.indeterminate { color: #e2bd80; border-color: #755d38; background: #2d2519; }
.status-chip.survived { color: #a8d5ad; border-color: #436649; background: #17241a; }
.status-chip.reviewed { color: #b2dcc2; border-color: #437056; }
.status-chip.provisional { color: #f2c677; border-color: #765f36; }
.status-chip.neutral { color: var(--steel); }

.table-state,
.page-state {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--muted);
}

.page-state.error {
  color: #f0aaa5;
}

.pagination {
  min-height: 42px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: .85rem;
}

.pagination span {
  color: var(--muted);
  font-size: .8rem;
}

.distribution-chart {
  display: grid;
  gap: .7rem;
  margin-top: 1.4rem;
}

.distribution-row {
  display: grid;
  grid-template-columns: minmax(220px, .9fr) minmax(260px, 1.4fr) 90px;
  gap: .8rem;
  align-items: center;
}

.distribution-label {
  color: var(--muted);
  font-size: .82rem;
}

.distribution-label strong {
  color: var(--ink);
  font-family: 'JetBrains Mono', monospace;
}

.distribution-track {
  height: 12px;
  overflow: hidden;
  border-radius: 3px;
  background: #08090b;
  border: 1px solid var(--line);
}

.distribution-fill {
  height: 100%;
  background: #7a8b9b;
}

.distribution-value {
  text-align: right;
  color: var(--ink);
  font: .75rem 'JetBrains Mono', monospace;
}

.limitations {
  display: grid;
  gap: .45rem;
  margin-top: 1.2rem;
}

.limitation {
  padding-left: .8rem;
  border-left: 2px solid var(--indet);
  color: var(--muted);
  font-size: .82rem;
}

.review-list {
  display: grid;
  gap: .55rem;
  margin-top: 1.2rem;
}

.review-row {
  display: grid;
  grid-template-columns: 130px 150px 1fr auto;
  gap: .8rem;
  align-items: center;
  min-height: 66px;
  padding: .7rem .85rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #111317;
}

.review-row .review-pair {
  color: var(--ink);
  font: 600 .8rem 'JetBrains Mono', monospace;
}

.review-row p {
  margin: 0;
  color: var(--muted);
  font-size: .8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.method-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  margin: 1.5rem 0 0;
  list-style: none;
}

.method-flow li {
  min-width: 0;
  padding: 0 1rem 0 1.2rem;
  border-left: 2px solid var(--line2);
}

.method-flow li:first-child {
  padding-left: 0;
  border-left: 0;
}

.method-flow strong,
.method-flow span {
  display: block;
}

.method-flow strong {
  margin-bottom: .35rem;
  color: var(--ink);
  font-size: .86rem;
}

.method-flow span {
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.5;
}

.witness-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.witness-band h2,
.witness-band p {
  margin: .25rem 0 0;
}

.witness-band p {
  color: var(--muted);
}

/* Pair detail */
.pair-main {
  padding-top: 2rem;
  padding-bottom: 4rem;
}

.back-link {
  display: inline-block;
  margin-bottom: 2rem;
}

.pair-header {
  padding-bottom: 1.5rem;
}

.pair-statuses {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .5rem;
}

.provisional-notice,
.transcript-note {
  padding: .9rem 1rem;
  border-left: 3px solid var(--indet);
  background: #272117;
  color: #e8cf9f;
  font-size: .88rem;
}

.provisional-notice.reviewed {
  border-left-color: var(--survived);
  background: #162219;
  color: #b9d7be;
}

.pair-section {
  padding: 2.5rem 0;
  border-top: 1px solid var(--line);
}

.verse-comparison,
.translation-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.verse-card {
  min-width: 0;
  padding: 1.2rem;
  border: 1px solid var(--line2);
  border-radius: 6px;
  background: #111317;
}

.verse-ref {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
  color: var(--brass-br);
  font: 600 .8rem 'JetBrains Mono', monospace;
}

.arabic-verse {
  margin: 0;
  color: #f3f0e9;
  font-family: 'Noto Naskh Arabic', 'Amiri', serif;
  font-size: 1.7rem;
  line-height: 2.1;
  text-align: right;
  direction: rtl;
}

.translation-list {
  display: grid;
  gap: .75rem;
  margin-top: .75rem;
}

.translation-block {
  border-top: 1px solid var(--line);
  padding-top: .75rem;
}

.translation-block h3 {
  margin: 0 0 .55rem;
  color: var(--steel);
  font: 600 .75rem 'Inter', sans-serif;
}

.translation-copy {
  margin: 0;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.6;
}

.decision-reason {
  max-width: 900px;
  color: #d6d8db;
  font-size: 1rem;
  line-height: 1.75;
}

.metadata-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 1.3rem 0 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.metadata-item {
  min-width: 0;
  margin: 0;
  padding: .8rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.metadata-item dt {
  color: var(--faint);
  font: .68rem 'JetBrains Mono', monospace;
  text-transform: uppercase;
}

.metadata-item dd {
  margin: .3rem 0 0;
  color: var(--ink);
  font-size: .8rem;
  overflow-wrap: anywhere;
}

.procedure-list {
  display: grid;
  gap: .5rem;
  padding-left: 1.4rem;
  color: var(--muted);
}

.procedure-list li {
  padding-left: .35rem;
}

.transcript-note {
  margin-top: 1.2rem;
}

.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;
}

@media (max-width: 900px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search-field { grid-column: 1 / -1; }
  .method-flow { grid-template-columns: 1fr; gap: .9rem; }
  .method-flow li,
  .method-flow li:first-child { padding-left: 1rem; border-left: 2px solid var(--line2); }
  .review-row { grid-template-columns: 110px 140px 1fr; }
  .review-row .text-link { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .results-intro,
  .home-intro,
  .status-band-inner,
  .witness-band { display: block; }
  .home-intro { min-height: 0; }
  .home-intro h1,
  .results-intro h1,
  .pair-header h1 { font-size: 2.55rem; }
  .run-stamp,
  .freshness { margin-top: 1.5rem; }
  .status-band-inner p { margin-top: .8rem; }
  .chart-grid,
  .verse-comparison,
  .translation-pair { grid-template-columns: 1fr; }
  .section-heading,
  .pair-header { align-items: flex-start; flex-direction: column; }
  .pair-statuses { justify-content: flex-start; }
  .distribution-row { grid-template-columns: minmax(0, 1fr) 72px; }
  .distribution-track { grid-column: 1 / -1; grid-row: 2; }
  .metadata-grid { grid-template-columns: 1fr; }
  .witness-band .home-actions { margin-top: 1rem; }
  .result-table-wrap { overflow: visible; border: 0; }
  .result-table,
  .result-table tbody,
  .result-table tr,
  .result-table td { display: block; width: 100%; min-width: 0; }
  .result-table { min-width: 0; }
  .result-table thead { display: none; }
  .result-table tr {
    margin-bottom: .65rem;
    padding: .8rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #111317;
  }
  .result-table td {
    padding: .35rem 0;
    border: 0;
  }
  .result-table td:first-child { padding-top: 0; }
  .result-table td:last-child { padding-bottom: 0; }
  .signal-note { max-width: none; white-space: normal; }
}

@media (max-width: 480px) {
  .wrap { padding-left: 1rem; padding-right: 1rem; }
  .metric-grid { grid-template-columns: 1fr; }
  .result-filters { grid-template-columns: 1fr; }
  .search-field { grid-column: auto; }
  .review-row { grid-template-columns: 1fr; }
  .review-row p { white-space: normal; }
  .home-actions .command-button,
  .home-actions .quiet-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .results-ui * { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}
