/* Code viewer styles (SPEC-0003 REQ "Code Viewer", REQ "Code Annotation
   Anchors", issue #68). Typography per the design tokens: JetBrains Mono for
   both the source and the line-number gutter (--mono). Loaded for every shell
   page but scoped under .code-viewer, so it is inert on non-code bodies. The
   syntax colors themselves come from the generated chroma.css (github-dark);
   this file owns layout, the line gutter, and the annotation affordances.
   All colors carry sufficient contrast for WCAG 2.1 AA and nothing is
   conveyed by color alone (reacted state also flips aria-pressed; the react
   affordance also carries a text aria-label). */

.code-viewer {
  display: grid;
  gap: 16px;
  max-width: 1040px;
  margin: 0 auto;
  padding: 26px 30px 60px;
}

/* SYMBOLS — collapsible outline (native <details>/<summary> => keyboard-
   operable and exposes aria-expanded on the caret with no JS), mirrors the
   markdown viewer's CONTENTS block. */
.code-outline {
  border: 1px solid var(--border-2);
  border-radius: var(--radius-card);
  background: var(--well-2);
  padding: 12px 16px;
}
.code-outline-summary {
  cursor: pointer;
  font: 600 11px/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t5);
  list-style: none;
}
.code-outline-summary::-webkit-details-marker { display: none; }
.code-outline-summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  color: var(--t6);
  transition: transform 0.12s ease;
}
.code-outline-fold[open] > .code-outline-summary::before { transform: rotate(90deg); }
.code-outline-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  columns: 2;
  column-gap: 20px;
}
@media (max-width: 640px) {
  .code-outline-list { columns: 1; }
}
.code-outline-item { margin: 1px 0; break-inside: avoid; }
.code-outline-link {
  display: flex;
  gap: 7px;
  align-items: baseline;
  padding: 3px 6px;
  border-radius: 4px;
  color: var(--t3);
  text-decoration: none;
  font: 400 13px var(--sans);
}
.code-outline-link:hover { background: var(--well); color: var(--t0); }
.code-outline-link:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.code-outline-kind {
  font: 500 10px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--t7);
  flex: none;
}
.code-outline-name { font-family: var(--mono); color: inherit; }

.code-stats {
  margin: 0;
  font: 400 11px/1.5 var(--mono);
  color: var(--t6);
}

/* SOURCE — a table so a react/comment affordance sits in a dedicated cell,
   never shifting the line's text. Horizontal overflow scrolls inside the
   wrapper, never the page body. */
.code-source-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-card);
}
.code-table {
  border-collapse: collapse;
  width: 100%;
  font: 400 13px/1.6 var(--mono);
}
.code-row { position: relative; }
.code-row:target,
.code-row.code-line-active {
  background: rgba(86, 227, 159, 0.09);
}
.code-row.code-range-active { background: rgba(125, 86, 244, 0.1); }

.code-lineno {
  width: 1%;
  min-width: 40px;
  padding: 0 12px 0 16px;
  text-align: right;
  vertical-align: top;
  -webkit-user-select: none;
  user-select: none;
  border-right: 1px solid var(--border-3);
}
.code-lineno-link {
  color: var(--t7);
  text-decoration: none;
  font: 400 12px var(--mono);
}
.code-row:hover .code-lineno-link,
.code-lineno-link:focus-visible { color: var(--t4); }

.code-line-cell {
  position: relative;
  padding: 0 14px 0 14px;
  vertical-align: top;
  white-space: pre;
}
.code-line-code { white-space: pre; }

/* React `＋` / comment `💬` affordances — one pair per line, revealed on
   hover/focus/touch, always keyboard-reachable (mirrors .md-react). */
.code-react {
  position: absolute;
  right: 30px;
  top: 0;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--border-2);
  border-radius: 5px;
  background: var(--card);
  color: var(--t5);
  font: 600 13px/1 var(--sans);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}
.code-comment-btn { right: 6px; font-size: 11px; }
.code-row:hover .code-react,
.code-row:focus-within .code-react,
.code-react.code-react-visible { opacity: 1; }
.code-react:hover, .code-react:focus-visible { color: var(--green); border-color: var(--green-3); }
.code-comment-btn:hover, .code-comment-btn:focus-visible { color: var(--blue); border-color: var(--blue); }

/* Persisted reaction pills (code.js fetches tallies on load and appends these
   under a reacted-on line; the picker's click-time insert builds the same
   markup so the two never look different) and comment marker, both anchored
   under the line's code cell. */
.code-annotations {
  display: none;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  padding: 2px 0 4px;
  white-space: normal;
}
.code-annotations:empty { display: none; }
.code-annotations.code-annotations-visible { display: flex; }
.code-react-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--well);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  padding: 1px 8px;
  cursor: pointer;
  color: var(--t4);
  font: 500 11px var(--mono);
}
.code-react-pill.on { border-color: #244034; background: rgba(86, 227, 159, 0.12); color: var(--green-2); }
.code-react-count { color: var(--t3); }
.code-react-pill.on .code-react-count { color: var(--green-2); }
.code-comment-marker {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--t6);
  font: 500 11px var(--mono);
  text-decoration: none;
}
.code-comment-marker:hover { color: var(--t2); }
.code-range-chip {
  font: 500 10px var(--mono);
  color: var(--purple);
  background: rgba(125, 86, 244, 0.12);
  border-radius: 999px;
  padding: 1px 8px;
}

/* Reaction picker + selection-to-comment toolbar (mirrors .md-sel-toolbar /
   trajectory.css .react-picker: same floating chrome across every viewer). */
.code-react-picker,
.code-sel-toolbar {
  position: absolute;
  z-index: 30;
  display: flex;
  gap: 4px;
  padding: 5px 7px;
  background: var(--header);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.code-react-picker button {
  background: transparent;
  border: 0;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 3px 5px;
  border-radius: 6px;
}
.code-react-picker button:hover, .code-react-picker button:focus-visible { background: var(--well); }
.code-sel-toolbar button {
  font: 600 12px/1 var(--sans);
  color: var(--t1);
  background: var(--well);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
}
.code-sel-toolbar button:hover { color: var(--green); border-color: var(--green-3); }

/* A shift/drag-selected code_range gets the same soft highlight as an active
   single line, plus a range affordance chip anchored on the last selected
   row. */
.code-row.code-range-selecting { background: rgba(125, 86, 244, 0.08); }
.code-range-react {
  position: absolute;
  right: 30px;
  top: 0;
  font: 600 11px var(--sans);
  color: var(--purple);
  background: var(--card);
  border: 1px solid var(--border-2);
  border-radius: 5px;
  padding: 2px 8px;
  cursor: pointer;
}
.code-range-react:hover { border-color: var(--purple); }

@media (max-width: 720px) {
  .code-viewer { padding: 18px 16px 48px; }
  .code-react { opacity: 1; }
}