/* =============================================================================
   ct-notation.css — Cover Test console: "Examiner sees" feed, running
   record, result step.
   Source: Cover-Test Clinical Reference §6.
   ============================================================================= */

.ctc-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* ── Observation feed ────────────────────────────────────────────────────── */
.ct-obs {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 232px; overflow-y: auto;
  margin: 0; padding: 0; list-style: none;
}
.ct-obs-empty { padding: 10px; border: 1px dashed var(--border); border-radius: 10px; font-size: 12px; color: var(--text-soft); }
.ct-obs-item {
  display: flex; flex-direction: column; gap: 1px;
  padding: 7px 10px;
  border: 1px solid var(--border-soft); border-radius: 10px;
  background: var(--surface);
}
.ct-obs-item:first-child { border-color: var(--border); box-shadow: 0 1px 2px hsl(var(--shadow-color) / 0.08); }
.ct-obs-what { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-soft); }
.ct-obs-how { font-size: 12.5px; color: var(--text); font-variant-numeric: tabular-nums; }
.ct-obs-item[data-kind="still"] .ct-obs-how { color: var(--text-soft); }
.ct-obs-item[data-kind="move"] .ct-obs-how { font-weight: 600; color: var(--accent-strong); }
.ct-obs-item[data-kind="special"] .ct-obs-how { font-weight: 600; color: var(--note-strong); }

/* ── Running record ──────────────────────────────────────────────────────── */
.ctc-record {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: auto; padding: 12px;
  border: 1px solid var(--border-soft); border-radius: 12px;
  background: var(--surface);
}
.ctc-record-value { font-family: var(--ct-mono); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); overflow-wrap: anywhere; }
.ctc-record-verdict { margin: 0; font-size: 12px; color: var(--text-soft); }
.ct-result-tag { font-size: 11px; color: var(--text-soft); }

.ct-check { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 0; padding: 0; list-style: none; }
.ct-check li {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px 2px 4px;
  border-radius: 999px;
  background: var(--surface-sunken);
  font-size: 10.5px; font-weight: 600; color: var(--text-soft);
}
.ct-tick { width: 12px; height: 12px; flex: none; border: 1.5px solid var(--border); border-radius: 50%; }
.ct-check li[data-done="true"] { background: var(--accent-tint); color: var(--accent-strong); }
.ct-check li[data-done="true"] .ct-tick {
  border-color: var(--accent);
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2 5 8.2 9 3.8' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

/* ── When & why (indications, expected findings, sources) ────────────────── */
.ctc-about { display: flex; flex-direction: column; gap: 12px; }
.ct-about-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px;
  border: 1px solid var(--border-soft); border-radius: 14px;
  background: var(--surface);
}
.ct-about-card section { display: flex; flex-direction: column; gap: 6px; }
.ct-about-card p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text); }
.ct-about-card h4 { margin: 4px 0 0; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-strong); }
.ct-about-title { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; color: var(--text); }

.ct-expect { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.ct-expect > div {
  display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 10px;
  padding: 8px 10px; border-radius: 10px; background: var(--surface-sunken);
}
.ct-expect dt { font-size: 11.5px; font-weight: 700; color: var(--accent-strong); }
.ct-expect dd { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text); }
@container ctc (max-width: 640px) { .ct-expect > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

.ct-tips { display: flex; flex-direction: column; gap: 4px; margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.5; color: var(--text); }
.ct-sources { display: flex; flex-direction: column; gap: 4px; margin: 0; padding-left: 20px; font-size: 12px; line-height: 1.45; color: var(--text-soft); }
.ct-sources a { color: var(--note-strong); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(58, 110, 168, 0.35); }
.ct-sources a:hover { text-decoration-color: currentColor; }

.ct-apply-group { display: flex; flex-direction: column; gap: 5px; }
.ct-apply-name { font-size: 11px; font-weight: 700; color: var(--text-soft); }
.ct-apply-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-apply-chips .ct-chip[aria-current="true"] { border-color: var(--accent); background: var(--accent); color: #fff; }
.ct-about-run { align-self: flex-start; }

/* ── Result step ─────────────────────────────────────────────────────────── */
.ctc-result { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--border-soft); border-radius: 14px; background: var(--surface-sunken); }
.ctc-result-notation { font-family: var(--ct-mono); font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: var(--text); overflow-wrap: anywhere; }
.ct-verdict { margin: 0; font-size: 14px; font-weight: 650; color: var(--text); }
.ct-notes { display: flex; flex-direction: column; gap: 4px; margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--text-soft); }
.ct-notes:empty { display: none; }
.ct-result { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 8px 10px; border-radius: 10px; }
.ct-result-key { border: 1px dashed var(--border); background: var(--surface); }
.ct-result-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); }
.ct-result-value { font-family: var(--ct-mono); font-size: 13.5px; font-weight: 600; color: var(--text-soft); }