/* verbin.dev — project additions on top of styles.css.
   Only what the design system does not cover: Wagtail rich-text output,
   highlight.js re-skinning, StreamField blocks and the comments embed. */

/* ---- Wagtail rich text inside .prose ---- */
.prose .rich-text > * + * { margin-top: var(--s-6); }
.prose img, .prose .richtext-image {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-inline: auto;
}
.prose hr { margin: var(--s-8) 0; }

/* The design caps the reading panel at 72ch + padding, which leaves it visibly
   narrower than the post header, footer and prev/next in the same column.
   Let it fill the column so every block on the page lines up. */
.prose-panel { max-width: none; }
.prose h4 { font-family: var(--mono); font-size: var(--fs-base); font-weight: 600; margin-top: var(--s-6); scroll-margin-top: 80px; }

/* ---- highlight.js (atom-one-dark) re-skinned onto the tokens ----
   atom-one-dark paints its own background and padding; the .code shell already
   provides both, so strip them and keep only the token colours. */
.code pre code.hljs {
  background: transparent;
  padding: 0;
  color: var(--text-primary);
}
.hljs-comment, .hljs-quote { color: var(--text-muted); font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-doctag { color: var(--magenta); }
.hljs-string, .hljs-regexp, .hljs-addition { color: var(--accent); }
.hljs-number, .hljs-symbol, .hljs-bullet { color: var(--amber); }
.hljs-title, .hljs-name, .hljs-section, .hljs-attr, .hljs-attribute { color: var(--cyan); }
.hljs-variable, .hljs-template-variable, .hljs-type, .hljs-built_in { color: var(--text-primary); }
.hljs-deletion { color: var(--red); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }

/* ---- StreamField alert block ---- */
.callout {
  display: flex; gap: var(--s-3);
  border: 1px solid var(--border-strong); border-left-width: 2px;
  border-radius: var(--r-md); padding: var(--s-3) var(--s-4);
  background: var(--bg-inset); font-family: var(--sans);
  font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--text-secondary);
}
.callout .icon { color: var(--text-muted); margin-top: 3px; }
/* margin-top resets the `.prose h4` rule above — a callout heading starts the box. */
.callout h4 {
  font-family: var(--mono); font-size: var(--fs-sm); color: var(--text-primary);
  margin-top: 0; margin-bottom: var(--s-1);
}
.callout p + p { margin-top: var(--s-2); }
.callout.alert-success, .callout.alert-primary { border-left-color: var(--accent); }
.callout.alert-success .icon, .callout.alert-primary .icon { color: var(--accent); }
.callout.alert-info, .callout.alert-light { border-left-color: var(--cyan); }
.callout.alert-info .icon, .callout.alert-light .icon { color: var(--cyan); }
.callout.alert-warning { border-left-color: var(--amber); }
.callout.alert-warning .icon { color: var(--amber); }
.callout.alert-danger { border-left-color: var(--red); }
.callout.alert-danger .icon { color: var(--red); }

/* ---- icon rows in .opt-list ----
   The reset makes every svg display:block, which drops an inline icon onto its
   own line inside a link. Lay those rows out as a flex row instead. */
.opt-list > a { display: flex; align-items: center; gap: var(--s-2); }

/* ---- sidebar: breathing room and the expandable Blog group ---- */
.nav-item + .nav-item, .nav-group + .nav-item, .nav-item + .nav-group { margin-top: 3px; }

.nav-group summary { list-style: none; cursor: pointer; }
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group .nav-caret {
  margin-left: auto; color: var(--text-muted);
  transition: transform var(--t-base) var(--ease), color var(--t-fast) var(--ease);
}
.nav-group[open] .nav-caret { transform: rotate(90deg); color: var(--accent); }
.nav-sub {
  display: flex; flex-direction: column; gap: 2px;
  margin: 3px 0 3px 21px; padding-left: var(--s-3);
  border-left: 1px solid var(--border);
}
.nav-sub a {
  color: var(--text-muted); font-size: var(--fs-xs);
  padding: 5px var(--s-2); border-radius: var(--r-sm);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav-sub a:hover { color: var(--text-primary); background: var(--bg-panel); text-decoration: none; }
.nav-sub a[aria-current="page"] { color: var(--accent); }

/* ---- numeric table columns ----
   styles.css right-aligns td.num but leaves every th left-aligned, so a numeric
   column's heading floated away from its figures. Let th.num follow the cells. */
table.data th.num { text-align: right; }

/* ---- inline tool controls line up with the .well beside them ----
   A .well is taller than a bare button or select, which left the WHOIS row ragged. */
.input-row > .field > .well,
.input-row select.bare,
.input-row .btn { min-height: 42px; }

/* ---- range slider ----
   The design's track is a hairline of --bg-inset, which is darker than the panel
   it sits on and so reads as almost nothing. Thicken it, give the empty half a
   colour that actually contrasts, and paint the selected half in the accent.
   --fill is the value as a percentage, set by verbin.js on input; WebKit has no
   equivalent of ::-moz-range-progress, hence the gradient. */
input[type="range"] { --fill: 0%; }
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border: 0;
  background: linear-gradient(to right, var(--accent) var(--fill), var(--border-strong) var(--fill));
}
input[type="range"]::-webkit-slider-thumb { margin-top: -5px; }
input[type="range"]::-moz-range-track { height: 6px; border: 0; background: var(--border-strong); }
input[type="range"]::-moz-range-progress {
  height: 6px; border-radius: var(--r-pill); background: var(--accent);
}
input[type="range"]::-moz-range-thumb { margin-top: 0; }

/* ---- comments embed ---- */
.comments { margin-top: var(--s-12); }

/* ---- search results ---- */
.result-list { display: flex; flex-direction: column; }
.result {
  display: block; padding: var(--s-3) var(--s-1);
  border-bottom: 1px solid var(--border);
}
.result:hover { background: rgba(255, 255, 255, .014); text-decoration: none; }
.result:hover h3 { color: var(--accent); }
.result h3 { font-size: var(--fs-base); font-weight: 600; color: var(--text-primary); transition: color var(--t-fast) var(--ease); }
.result p { font-family: var(--sans); font-size: var(--fs-sm); color: var(--text-muted); margin-top: 4px; }
.result .path { font-size: var(--fs-xs); color: var(--text-muted); }
.pager { display: flex; gap: var(--s-2); justify-content: center; margin-top: var(--s-6); }