/* ─── cells.css ──────────────────────────────────────────────
   Cell anatomy: markdown, code, output.
   Syntax highlighting classes.
   Project card component (used in output cells).
   Badge component.
   ─────────────────────────────────────────────────────────── */

/* ── Cell base ── */
.cell {
  display: flex;
  padding: 2px var(--sp-4) 2px var(--sp-2);
  margin-bottom: 2px;
  position: relative;
}

.cell__run-btn {
  width: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.1s;
  cursor: pointer;
  user-select: none;
  background: none;
  border: none;
}
.cell:hover .cell__run-btn { opacity: 0.5; }
.cell__run-btn:hover { opacity: 1 !important; color: var(--accent); }

/* ── Run animation states ── */
.cell__output--running {
  opacity: 0.25;
  transition: opacity 0.15s ease;
}

@keyframes cell-output-reveal {
  from { opacity: 0.25; }
  to   { opacity: 1; }
}
.cell__output--ran {
  animation: cell-output-reveal 0.35s ease forwards;
}

.cell__prompt {
  width: 64px;
  flex-shrink: 0;
  padding: 8px var(--sp-2) 6px 0;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  text-align: right;
  user-select: none;
}
.cell__prompt--ran { color: var(--accent); }

.cell__body { flex: 1; min-width: 0; }

/* ── Markdown cell ── */
.cell--md .cell__inner {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: var(--sp-1) var(--sp-3);
}
.cell--md:hover .cell__inner {
  background: rgba(255, 255, 255, 0.02);
}

/* Markdown content styles */
.cell--md h1 { margin-bottom: var(--sp-2); }
.cell--md h2 {
  margin: var(--sp-3) 0 var(--sp-2);
  padding-bottom: var(--sp-1);
  border-bottom: 1px solid var(--border);
}
.cell--md p { margin-bottom: var(--sp-2); }
.cell--md em { font-style: italic; color: var(--text-muted); }
.cell--md strong { font-weight: 600; color: var(--text-primary); }

.cell--md code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--border);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--syn-fn);
}

/* ── Code cell ── */
.cell--code .cell__inner {
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.cell--code.cell--active .cell__inner {
  border-color: var(--syn-fn);
  border-left-width: 3px;
}

.cell__code {
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--text-primary);
  tab-size: 2;
  white-space: pre-wrap;
}

/* Syntax highlighting */
.syn-kw  { color: var(--syn-kw); }
.syn-str { color: var(--syn-str); }
.syn-fn  { color: var(--syn-fn); }
.syn-num { color: var(--syn-num); }
.syn-cm  { color: var(--syn-cm); font-style: italic; }

/* ── Output cell ── */
.cell__output {
  margin: 0 var(--sp-4) 2px 64px;
  padding-left: var(--sp-2);
}
.cell__output-inner {
  border-left: 3px solid var(--border);
  background: var(--bg-output);
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.65;
  color: var(--text-dim);
  border-radius: 0 3px 3px 0;
}

/* Output key-value pairs */
.out__key { color: var(--text-muted); }
.out__val { color: var(--text-primary); }
.out__green { color: var(--green); font-weight: 600; }

/* ── Project card ── */
/* Used inside output cells. border-left accent overrides the output border. */
.cell__output--project .cell__output-inner {
  border-left-color: var(--accent);
  background: var(--bg-code);
  padding: 0;
}

.proj-card {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.proj-card:last-child { border-bottom: none; }

.proj-card__title {
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--sp-1);
}
.proj-card__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: var(--sp-2);
}
.proj-card__desc {
  font-size: 11.5px;
  color: var(--text-dim);
  line-height: 1.6;
  margin-bottom: var(--sp-2);
  font-family: var(--font-ui);
}
.proj-card__tags {
  display: flex;
  gap: var(--sp-1);
  flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}
.proj-card__links {
  display: flex;
  gap: var(--sp-3);
}
.proj-card__link {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--syn-fn);
}
.proj-card__link:hover { text-decoration: underline; }
.proj-card__link--primary {
  color: var(--accent);
  font-weight: 600;
}

/* ── Badge ── */
.badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  background: var(--bg-notebook);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 2px 7px;
  border-radius: 3px;
}
.badge--green {
  background: #1e2e1e;
  border-color: #3a5a3a;
  color: var(--green);
}

/* ── Contact output links ── */
.out__link {
  color: var(--syn-fn);
  font-family: var(--font-mono);
  font-size: 11px;
}
.out__link:hover { text-decoration: underline; }

/* ── Expandable findings section ── */

.cell__run-row {
  margin: var(--sp-2) var(--sp-4) var(--sp-2) 64px;
  padding-left: var(--sp-2);
}

.cell__run-findings-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--bg-code);
  border: 1px solid var(--accent);
  border-radius: 3px;
  padding: 5px var(--sp-3);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
  transition: background 0.15s;
}
.cell__run-findings-btn:hover {
  background: rgba(243, 118, 38, 0.07);
}
.cell__run-findings-btn--ran {
  border-color: var(--green);
  color: var(--green);
  cursor: default;
}
.cell__run-findings-btn--ran:hover {
  background: var(--bg-code);
}

.cell__run-findings-icon {
  font-size: 10px;
}

.cell__run-btn--ran {
  opacity: 1 !important;
  color: var(--green) !important;
}

.cell__output--findings {
  display: none;
}
.cell__output--findings.cell__output--findings-visible {
  display: block;
  animation: findings-reveal 0.45s ease forwards;
}

@keyframes findings-reveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.cell__output--findings .cell__output-inner {
  border-left-color: var(--green);
  padding: var(--sp-3) var(--sp-4);
}

.findings__charts {
  display: flex;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.findings__chart-hero {
  flex: 2;
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--border);
  border-radius: 3px;
}

.findings__chart-stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.findings__chart-small {
  flex: 1;
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--border);
  border-radius: 3px;
}

.findings__analysis {
  font-family: var(--font-ui);
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.7;
}
.findings__analysis strong {
  color: var(--text-primary);
  font-weight: 600;
}