/* cell.css — View 2: cell header, CONTEXT panel, runs list.
   The CONTEXT panel is the load-bearing feature. measured (blue) annotations are
   the trusted default and sit flush; inferred (amber) annotations are promoted to
   a distinct tinted CARD that visually pops out of the panel — the team must never
   over-claim unproven ground truth, so "inferred" must look different, not just
   read different. The distinction is reinforced by badge + left rail + fill, never
   by hue alone. */

.cell-header {
  margin-bottom: 24px;
}
.cell-header-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cell-header h1 {
  font-family: var(--mono);
  font-size: 21px;
  letter-spacing: 0.01em;
  margin: 0;
}
.cell-spine-badge {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-on-active);
  background: var(--accent);
  border-radius: var(--radius-pill);
  padding: 3px 11px;
}
.cell-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--text-meta);
}
.cell-meta strong {
  color: var(--text-secondary);
  font-weight: 600;
}
.cell-id-mono {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-faint);
}
.cell-strategic {
  margin: 14px 0 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.55;
  max-width: 820px;
}
.cell-metrics {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--text-meta);
}

/* CONTEXT panel — the propagation payload. A recessed well (inset bg + blue rail)
   so it reads as a distinct body of pre-existing context, above the live runs. */
.context {
  background: var(--panel-bg);
  border: 1px solid var(--edge);
  border-left: 3px solid var(--measured);
  border-radius: var(--radius);
  padding: 15px 18px 6px;
  margin-bottom: 26px;
  box-shadow: var(--shadow-card);
}
.context-title {
  display: flex;
  align-items: baseline;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin: 0 0 4px;
  color: var(--accent-strong);
}
.context-sub {
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-meta);
  margin-left: 8px;
}
.context-empty {
  color: var(--text-faint);
  font-size: 13px;
  font-style: italic;
  margin: 8px 0 12px;
}
.context-harness-sep {
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  text-transform: uppercase;
  margin: 10px 0;
  padding-top: 8px;
  border-top: 1px dashed var(--edge);
}

/* MEASURED annotation — the trusted default; flush on the panel, hairline divider. */
.anno {
  padding: 13px 0;
  border-top: 1px solid var(--divider);
}
.anno:first-of-type {
  border-top: none;
  padding-top: 6px;
}

/* INFERRED annotation — promoted to a distinct amber card so unproven ground truth
   visually separates from measured. Tinted fill + amber rail + negative margin so
   it breaks the panel's flush column and reads as "set apart, treat with caution". */
.anno--inferred {
  border: 1px solid var(--inferred-border);
  border-left: 2px solid var(--inferred);
  background: var(--inferred-bg);
  margin: 8px -10px;
  padding: 12px 12px;
  border-radius: var(--radius-sm);
}
.anno--inferred + .anno {
  border-top: none;
}
.anno-head {
  display: flex;
  align-items: center;
  gap: 9px;
}
.anno-badge {
  font-family: var(--mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 3px;
  padding: 2px 7px;
  font-weight: 600;
  flex-shrink: 0;
}
.anno-badge--measured {
  color: var(--measured-bright);
  background: var(--measured-tab);
  border: 1px solid var(--measured-border);
}
.anno-badge--inferred {
  color: var(--inferred-bright);
  background: var(--inferred-tab);
  border: 1px solid var(--inferred-border);
}
.anno-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
}
.anno--inferred .anno-title {
  color: var(--inferred-bright);
}
.anno-body {
  margin: 7px 0 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.anno-note {
  margin: 7px 0 0;
  font-size: 12px;
  color: var(--inferred);
}
.anno-source {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-faint);
}

/* Runs list — the live evidence. Each run wears its verdict on a left rail. */
.runs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.runs-head h2 {
  font-size: 16px;
  margin: 0;
}
.runs-count {
  color: var(--text-meta);
  font-weight: 400;
}
.runs-empty {
  color: var(--text-faint);
  font-style: italic;
}
.run {
  background: var(--card-bg);
  border: 1px solid var(--edge);
  border-left: 3px solid var(--none);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-card);
}
.run--clean {
  border-left-color: var(--clean);
}
.run--suspect-confound {
  border-left-color: var(--warn);
}
.run--invalid {
  border-left-color: var(--invalid);
}
.run-head {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.run-verdict {
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
}
.run--clean .run-verdict {
  color: var(--clean-bright);
}
.run--suspect-confound .run-verdict {
  color: var(--warn-bright);
}
.run--invalid .run-verdict {
  color: var(--invalid-bright);
}
.run-when {
  font-family: var(--mono);
  color: var(--text-primary);
}
.run-edit {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--text-meta);
  transition: color var(--t-quick);
}
.run-edit:hover {
  color: var(--accent-strong);
}
.run-line {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}
.run-k {
  display: inline-block;
  min-width: 64px;
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
}
.run-confound {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px dashed var(--edge);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-primary);
}
.run-attach {
  color: var(--text-faint);
}

@media (max-width: 560px) {
  .cell-header h1 {
    font-size: 18px;
  }
}