/* 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); }

/* ---- colour helpers inside data tables ----
   styles.css sets `table.data td { color: var(--text-primary) }`, which is
   specificity (0,1,2) and outranks the bare .g/.r/.a/.muted helpers at (0,1,0).
   Every coloured cell was therefore rendering as ordinary body text. Match the
   specificity so a red expiry or a green pass actually reads as one. */
table.data td.g { color: var(--accent); }
table.data td.c { color: var(--cyan); }
table.data td.a { color: var(--amber); }
table.data td.r { color: var(--red); }
table.data td.muted { color: var(--text-muted); }
table.data td.sec { color: var(--text-secondary); }

/* ---- ip lookup hero ----
   The address people came for is the lookup field's own value, so one control
   answers the question and takes the next one. Sized to lead the page without
   shouting: --fs-2xl, and clamped because a full IPv6 is 39 characters and
   would otherwise overflow a narrow phone. */
.ip-panel { margin-bottom: var(--s-6); }
.ip-lead {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  margin-bottom: var(--s-3); font-size: var(--fs-xs); color: var(--text-muted);
  text-transform: uppercase; letter-spacing: var(--track-label);
}
.ip-lead .icon-sm { color: var(--accent); }
.ip-lead .sep { color: var(--border-strong); }
/* Pushed to the far end of the heading row rather than trailing the label:
   the field arrives prefilled with an answer, so the one thing the panel does
   not otherwise say is that the answer can be replaced. */
.ip-hint { margin-left: auto; color: var(--text-muted); opacity: .8; }

.ip-out { gap: var(--s-3); border-radius: var(--r-md); padding: var(--s-2) var(--s-4); }
.ip-out .prefix { font-size: var(--fs-lg); }
/* The .well rule this overrides is (0,1,1); .ip-out .ip-addr matches it at
   (0,2,0) and wins on order, but state it as one selector rather than relying
   on either. */
.ip-out input.ip-addr {
  font-weight: 600; font-size: clamp(1.25rem, 5vw, var(--fs-2xl));
  line-height: 1.2; letter-spacing: -.02em; color: var(--accent);
  padding: var(--s-2) 0;
}
.ip-out input.ip-addr::placeholder { color: var(--text-muted); font-weight: 400; }
.ip-out .actions { display: flex; align-items: center; gap: var(--s-2); flex: none; }

.ip-panel .field-msg { margin-top: var(--s-2); }

.ip-facts {
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4);
  margin-top: var(--s-3); font-size: var(--fs-xs); color: var(--text-muted);
}
.ip-facts b { color: var(--text-secondary); font-weight: 500; }

@media (max-width: 640px) {
  /* Wrapped onto its own line, auto margin would shove it against the edge. */
  .ip-hint { margin-left: 0; }
  .ip-out { flex-wrap: wrap; padding: var(--s-3) var(--s-3); }
  /* Let the address take the full row and drop the buttons beneath it, rather
     than squeezing a 2rem value into whatever the two buttons leave behind. */
  .ip-out input.ip-addr { flex: 1 0 100%; order: 1; }
  .ip-out .prefix { order: 0; }
  .ip-out .actions { order: 2; width: 100%; justify-content: flex-end; }
}

/* ---- mail check tables ----
   styles.css top-aligns every cell, which is right for a table of short values
   but wrong here: an MX host spanning six address rows, or a banner that wraps
   to three lines, leaves the cells beside it stranded at the top. Centre them
   so a row reads as one row. Scoped to this page — elsewhere the tables are
   single-line and top alignment is what the design intends. */
.template-mail table.data td { vertical-align: middle; }

/* ---- cells spanning to the last row ----
   `table.data tr:last-child td` drops the closing border, but a rowspan cell
   belongs to the row it *starts* on, so a span reaching the bottom keeps a
   hairline the cells beside it no longer have. */
table.data td.no-b { border-bottom: 0; }

/* ---- 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 app.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); }