/* ============================================================
   Consensus Engine — design system
   ------------------------------------------------------------
   Functional palette: the accent colors ARE the semantics.
   --agree    teal  = consensus / agreement
   --conflict rust  = contradiction / disagreement
   Everything else is grayscale. Hairlines, no shadows, square
   data panels; rounding is reserved for interactive elements.
   ============================================================ */

:root {
  --ink: #14161A;
  --panel: #1C1F26;
  --line: #2A2E38;
  --text: #E8E6E1;
  --muted: #8B8F98;
  --agree: #4FA69C;
  --conflict: #D9772E;
}

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--ink);
  color: var(--text);
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.mono { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ---------- Scrollbars: thin, grayscale ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--line); border: 2px solid var(--ink); }
::-webkit-scrollbar-thumb:hover { background: #3A4150; }
* { scrollbar-color: var(--line) var(--ink); }

/* ---------- The single motion moment ----------
   When a critique round completes, the new round slides into the
   thread. Nothing else animates on hover. */
@keyframes round-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.round-in { animation: round-in .45s cubic-bezier(.2, .7, .3, 1) both; }

@keyframes msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.msg-in { animation: msg-in .3s ease-out both; }

@keyframes dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.dot-pulse { animation: dot-pulse 1.2s ease-in-out infinite; }

/* ---------- Provenance / thread rails (1px lines) ---------- */
.rail-node { position: relative; padding-left: 16px; }
.rail-node::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 1px; background: var(--line);
}
.rail-node:first-child::before { top: 7px; }
.rail-node:last-child::before { bottom: calc(100% - 7px); }
.rail-dot {
  position: absolute; left: -3px; top: 5px;
  width: 7px; height: 7px; border-radius: 9999px;
  background: var(--panel); border: 1px solid var(--muted);
}
.rail-dot.is-agree { border-color: var(--agree); background: var(--agree); }
.rail-dot.is-conflict { border-color: var(--conflict); background: var(--conflict); }

/* ---------- Heatmap cells ---------- */
.heat-cell {
  display: flex; align-items: center; justify-content: center;
  height: 34px; border: 1px solid var(--line);
  font-family: "IBM Plex Mono", monospace; font-size: 12px;
}

/* ---------- Quiet focus ring for interactive elements only ---------- */
:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
input, textarea, select, button { font: inherit; }
::selection { background: var(--agree); color: var(--ink); }

/* ---------- Diff readout ---------- */
.diff-add { background: rgba(79, 166, 156, .18); color: #A8DED7; }
.diff-rem { background: rgba(217, 119, 46, .18); color: #EDB585; text-decoration: line-through; }

/* ---------- Expandable answer toggles ---------- */
details.answer > summary { cursor: pointer; list-style: none; }
details.answer > summary::-webkit-details-marker { display: none; }
details.answer > summary .when-open { display: none; }
details.answer[open] > summary .when-open { display: inline; }
details.answer[open] > summary .when-closed { display: none; }
details.answer > summary .chev { display: inline-block; width: 1em; color: var(--muted); }
details.answer > summary .chev::before { content: "\25B8"; }
details.answer[open] > summary .chev::before { content: "\25BE"; }

/* ---------- Markdown readout ---------- */
.md { font-size: 14px; line-height: 1.7; color: var(--text); }
.md > *:first-child { margin-top: 0; }
.md > *:last-child { margin-bottom: 0; }
.md p { margin: 0 0 .72em; }
.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 {
  color: var(--text); font-weight: 600; line-height: 1.3; margin: 1.25em 0 .5em;
}
.md h1 { font-size: 20px; }
.md h2 { font-size: 16px; }
.md h3, .md h4, .md h5, .md h6 { font-size: 14px; }
.md ul, .md ol { margin: 0 0 .72em 1.2em; }
.md ul { list-style: disc; }
.md ol { list-style: decimal; }
.md li { margin: .22em 0; }
.md li > ul, .md li > ol { margin-bottom: 0; }
.md a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.md a:hover { color: var(--agree); }
.md strong, .md b { font-weight: 600; }
.md code {
  font-family: "IBM Plex Mono", monospace; font-size: 12px;
  background: var(--ink); border: 1px solid var(--line); padding: 1px 5px;
}
.md pre {
  background: var(--ink); border: 1px solid var(--line);
  padding: 12px; overflow-x: auto; margin: 0 0 .8em;
}
.md pre code { border: 0; padding: 0; background: none; font-size: 12px; }
.md blockquote {
  border-left: 2px solid var(--line); padding: 0 0 0 12px;
  color: var(--muted); margin: 0 0 .8em;
}
.md table { width: 100%; border-collapse: collapse; margin: 0 0 .8em; font-size: 13px; }
.md th, .md td { border: 1px solid var(--line); padding: 6px 9px; text-align: left; vertical-align: top; }
.md th { color: var(--muted); font-weight: 500; }
.md hr { border: 0; border-top: 1px solid var(--line); margin: 1.25em 0; }
.md img { max-width: 100%; }

/* ---------- Responsive · small screens ---------- */
@media (max-width: 640px) {
  body { font-size: 13px; }
  nav a, nav button { font-size: 11px; padding-left: 2px; padding-right: 2px; }
  input, textarea, select, button { font-size: 16px; }  /* prevent iOS zoom */
  .md h1 { font-size: 17px; }
  .md h2 { font-size: 15px; }
  .md h3, .md h4, .md h5, .md h6 { font-size: 13px; }
  .md table { font-size: 12px; }
  .md pre { font-size: 11px; }
  .md code { font-size: 11px; }
}

/* ---------- Responsive · extra-large screens ---------- */
@media (min-width: 1920px) {
  body { font-size: 15px; }
  .md h1 { font-size: 22px; }
  .md h2 { font-size: 18px; }
  .md { font-size: 15px; line-height: 1.8; }
  .md pre { font-size: 13px; }
}

/* ---------- Responsive · very small screens ---------- */
@media (max-width: 480px) {
  .md { font-size: 13px; }
  .md table { font-size: 11px; }
  .md pre { font-size: 10px; padding: 8px; }
  nav { gap: 0.25rem; }
  nav a, nav button { padding-left: 1.5px; padding-right: 1.5px; }
}

/* ---------- Print ---------- */
@media print {
  body { background: #fff; color: #000; }
  aside, header, footer, nav, .no-print { display: none !important; }
  .md { color: #000; }
}