/* The evidence-ladder drill-down. Its own file because the same component is
   mounted by the temporary review page and, once approved, by the Evidence
   tab; one stylesheet keeps the reviewed version and the shipped version from
   drifting. Everything is namespaced .dg- so it cannot collide with the
   dashboard's rules when both are loaded on the same page.

   Colours come from the dashboard's custom properties where they exist and
   fall back to literals otherwise, so this file also renders correctly on the
   standalone review page, which does not load style.css. */
.dg-ladder {
  margin: 10px 0 4px;
  border-top: 1px solid var(--border, #2b3542);
}
.dg-ladder-head {
  font-size: 12.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-dim, #8b98a5);
  padding: 12px 0 6px;
}
.dg-note-inline { text-transform: none; letter-spacing: 0; opacity: .7; }
.dg-caveat {
  margin: 0 0 10px;
  padding: 9px 12px;
  border-left: 3px solid var(--warn, #d29922);
  background: var(--panel-2, rgba(210,153,34,.07));
  color: var(--text-dim, #8b98a5);
  font-size: 13px;
  line-height: 1.6;
}

/* One rung. A row, not a diagram: it has to stay legible when a phone forces
   it to a single column. */
.dg-rung { border-top: 1px solid var(--border, #2b3542); }
.dg-rung:first-of-type { border-top: 0; }
.dg-rung-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding: 9px 2px;
  cursor: pointer;
  list-style: none;
}
.dg-rung-head::-webkit-details-marker { display: none; }
.dg-rung-head:hover { background: var(--panel-2, rgba(255,255,255,.02)); }
.dg-rung-mark {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--text-faint, #5c6773);
  flex: 0 0 auto;
}
.dg-rung.is-reached .dg-rung-mark { color: var(--ok, #3fb950); }
.dg-rung-name { font-weight: 600; font-size: 14px; }
.dg-rung.is-pending .dg-rung-name { color: var(--text-dim, #8b98a5); }
.dg-rung-meta {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  color: var(--text-faint, #5c6773);
  margin-left: auto;
}
.dg-flag {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 4px;
  border: 1px solid var(--warn, #d29922);
  color: var(--warn, #d29922);
  flex: 0 0 auto;
}
.dg-rung-body { padding: 2px 2px 14px 32px; }
.dg-rung-why {
  margin: 0 0 10px;
  color: var(--text-dim, #8b98a5);
  font-size: 13px;
  line-height: 1.6;
}

.dg-field { display: flex; gap: 12px; padding: 4px 0; font-size: 13px; }
.dg-field-label { flex: 0 0 132px; color: var(--text-dim, #8b98a5); }
.dg-field-value {
  flex: 1 1 auto;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  word-break: break-all;
}
@media (max-width: 560px) {
  .dg-field { flex-direction: column; gap: 2px; }
  .dg-field-label { flex: none; }
  .dg-rung-body { padding-left: 8px; }
  .dg-rung-meta { margin-left: 0; flex-basis: 100%; }
}
/* A hash is shown in full rather than truncated: a truncated hash cannot be
   checked, and being checkable is the only reason it is on the page. */
.dg-hash { font-size: 11.5px; color: var(--text-faint, #5c6773); word-break: break-all; }
.dg-note { margin: 6px 0 0; font-size: 12.5px; color: var(--text-faint, #5c6773); }

/* Downloadable records. A hash a reader cannot resolve to bytes is
   decoration, so the file and the hash it is claimed to be sit on one line. */
.dg-file { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 2px 0; }
.dg-file-link {
  flex: 0 0 auto; min-width: 132px;
  color: var(--accent, #58a6ff); text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
.dg-file-link:hover { text-decoration: none; opacity: .8; }
.dg-muted { color: var(--text-faint, #5c6773); font-style: italic; }

/* The run's own research program. Long, so it is folded away by default and
   scrolls inside itself rather than stretching the row. */
.dg-sub { margin: 6px 0; }
.dg-sub > summary {
  cursor: pointer; font-size: 13px; color: var(--accent, #58a6ff);
  list-style: none; padding: 3px 0;
}
.dg-sub > summary::-webkit-details-marker { display: none; }
.dg-sub > summary::before { content: "> "; font-family: ui-monospace, monospace; }
.dg-sub[open] > summary::before { content: "v "; }
.dg-program {
  margin: 6px 0 0;
  max-height: 340px; overflow: auto;
  padding: 12px 14px;
  background: var(--panel-2, rgba(255,255,255,.03));
  border: 1px solid var(--border, #2b3542);
  border-radius: 8px;
  font-size: 12px; line-height: 1.65;
  white-space: pre-wrap; word-break: break-word;
}

/* Rows and the hero headline, when the drill-down is active. Kept in this file
   rather than style.css so the whole interaction arrives and leaves as one
   unit while it is under review. */
.decision-drill { padding: 0 2px 8px; }
.decision-phrase {
  display: block;
  font-size: 13px; font-weight: 400;
  color: var(--text-dim, #8b98a5);
  margin-top: 3px;
}
.decision-against {
  display: inline-block; margin-top: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px; color: var(--text-faint, #5c6773);
}
.decision-row.is-focused {
  outline: 2px solid var(--accent, #58a6ff);
  outline-offset: 2px;
  transition: outline-color .4s ease;
}
#latestStatement.is-openable { cursor: pointer; }
#latestStatement.is-openable:hover { text-decoration: underline; text-underline-offset: 4px; }
#latestStatement.is-openable:focus-visible { outline: 2px solid var(--accent, #58a6ff); outline-offset: 3px; }