/* ═══════════════════════════════════════════════════════════════════════════
   DNS Panopticon — Guides
   Shared styles for support guide article pages.
   ═══════════════════════════════════════════════════════════════════════════ */

.breadcrumb-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: var(--text-caption);
  color: var(--txt-4);
}

.breadcrumb-row a {
  color: var(--primary);
  text-decoration: none;
}

.breadcrumb-row a:hover {
  text-decoration: underline;
}

.guide-shell {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.guide-header {
  margin-bottom: 0;
}

/* Flatten support article eyebrow so it reads like editorial metadata. */
.guide-shell .page-eyebrow {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  margin-bottom: 10px;
  font-size: var(--text-caption);
  letter-spacing: 0.11em;
}

.guide-article .prose-section h2,
.related-guides-wrap h2 {
  font-size: var(--text-h2);
  font-weight: 800;
  letter-spacing: normal;
  text-transform: none;
  color: var(--txt);
  margin-bottom: 14px;
}

.guide-article .prose-section h3 {
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--txt);
  margin: 14px 0 8px;
}

/* Remove rounded/boxed highlight treatments inside support articles. */
.guide-article .prose-section--highlight {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.guide-article .prose-section--highlight h2 {
  margin-bottom: 12px;
}

.guide-article .callout-box,
.guide-article .callout-box--tip {
  margin-top: 14px;
  padding: 0 0 0 14px;
  border: 0;
  border-left: 2px solid color-mix(in srgb, var(--primary) 36%, var(--border));
  border-radius: 0;
  background: transparent;
}

.guide-article .callout-box--tip {
  border-left-color: color-mix(in srgb, #059669 42%, var(--border));
}

.command-block {
  margin-top: 12px;
  padding: 16px 18px;
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: #09111f;
  color: #e5eefb;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  line-height: 1.8;
}

.callout-box {
  margin-top: 14px;
  padding: 16px 18px;
  border-radius: var(--radius-card);
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
}

.callout-box--tip {
  border-color: color-mix(in srgb, #059669 25%, var(--border));
  background: color-mix(in srgb, #059669 7%, var(--surface));
}

.callout-box strong {
  display: block;
  margin-bottom: 6px;
  color: var(--txt);
}

.callout-box p { margin: 0; }

.guide-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  font-size: var(--text-small);
}

.guide-table th,
.guide-table td {
  text-align: left;
  vertical-align: top;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.guide-table thead th {
  background: var(--surface2);
  color: var(--txt);
  font-weight: 700;
}

.guide-table tbody tr:last-child td { border-bottom: none; }

/* Rows and sections linked from the tools (e.g. #status-404) clear the sticky header. */
.guide-table tbody tr[id],
.guide-article .prose-section[id] { scroll-margin-top: 84px; }
.guide-table tbody tr:target td { background: color-mix(in srgb, var(--primary) 10%, transparent); }

.diagram-card,
.diagram-stack {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface2);
  padding: 16px;
}

.diagram-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.diagram-step {
  flex: 1 1 160px;
  min-width: 160px;
  padding: 14px;
  border-radius: var(--radius-card);
  background: var(--surface);
  border: 1px solid var(--border);
  text-align: center;
  line-height: 1.5;
  color: var(--txt-2);
}

.diagram-arrow {
  color: var(--primary);
  font-weight: 800;
}

.diagram-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.diagram-stack-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 14px;
  border-radius: var(--radius-card);
  background: var(--surface);
  border: 1px solid var(--border);
}

.diagram-stack-row span {
  color: var(--txt-3);
  font-size: var(--text-compact);
}

.diagram-stack-row strong {
  color: var(--txt);
  font-size: var(--text-compact);
}

/* Inline SVG flow diagrams. Each figure carries a wide and a narrow drawing
   of the same flow; only one is shown, so text stays legible on phones.
   All colours come from tokens, so both themes work without extra rules. */
.flow-figure {
  margin: 18px 0 0;
  padding: 20px 16px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface2);
}

.flow-figure svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--font-sans);
}

.flow-figure .flow-svg-wide { display: none; }
.flow-figure .flow-svg-narrow { max-width: 460px; margin: 0 auto; }

@media (min-width: 880px) {
  .flow-figure .flow-svg-wide { display: block; }
  .flow-figure .flow-svg-narrow { display: none; }
}

.flow-figure figcaption {
  margin-top: 14px;
  color: var(--txt-3);
  font-size: var(--text-compact);
  line-height: 1.55;
  text-align: center;
}

/* c1-c3 are the same three accents for diagrams that are not about email. */
.flow-figure {
  --fl-spf: var(--primary-ink);
  --fl-dkim: var(--rtype-cname-fg);
  --fl-dmarc: color-mix(in srgb, var(--rtype-aaaa-fg) 72%, var(--txt));
}

.fl-card { fill: var(--surface); stroke: var(--border); stroke-width: 1.5; }
.fl-card--spf,
.fl-card--c1 { stroke: color-mix(in srgb, var(--fl-spf) 45%, var(--border)); }
.fl-card--dkim,
.fl-card--c2 { stroke: color-mix(in srgb, var(--fl-dkim) 45%, var(--border)); }
.fl-card--dmarc,
.fl-card--c3 { stroke: color-mix(in srgb, var(--fl-dmarc) 55%, var(--border)); stroke-width: 2; }
.fl-card--pass { stroke: color-mix(in srgb, var(--green) 45%, var(--border)); }
.fl-card--fail { stroke: color-mix(in srgb, var(--red) 40%, var(--border)); }
.fl-card--warn { stroke: color-mix(in srgb, var(--amber) 45%, var(--border)); }
.fl-zone { fill: var(--surface2); stroke: var(--border); stroke-width: 1.5; stroke-dasharray: 6 5; }
.fl-chip { fill: var(--surface2); }

.fl-title { fill: var(--txt); font-size: 16px; font-weight: 700; }
.fl-subtitle { fill: var(--txt); font-size: 14.5px; font-weight: 700; }
.fl-text { fill: var(--txt-2); font-size: 14px; }
.fl-small { fill: var(--txt-3); font-size: 12.5px; }
.fl-mono { fill: var(--txt-2); font-family: var(--font-mono); font-size: 12.5px; }
.fl-mono-dim { fill: var(--txt-3); }

.fl-tag--spf,
.fl-tag--c1 { fill: color-mix(in srgb, var(--fl-spf) 15%, var(--surface)); }
.fl-tag--dkim,
.fl-tag--c2 { fill: color-mix(in srgb, var(--fl-dkim) 15%, var(--surface)); }
.fl-tag--dmarc,
.fl-tag--c3 { fill: color-mix(in srgb, var(--fl-dmarc) 16%, var(--surface)); }
.fl-tagtext { font-size: 12px; font-weight: 800; letter-spacing: 0.04em; }
.fl-tagtext--spf,
.fl-tagtext--c1 { fill: var(--fl-spf); }
.fl-tagtext--dkim,
.fl-tagtext--c2 { fill: var(--fl-dkim); }
.fl-tagtext--dmarc,
.fl-tagtext--c3 { fill: var(--fl-dmarc); }

.fl-pill--pass { fill: var(--badge-ok-bg); stroke: color-mix(in srgb, var(--green) 35%, transparent); }
.fl-pill--fail { fill: var(--badge-err-bg); stroke: color-mix(in srgb, var(--red) 35%, transparent); }
.fl-pill--warn { fill: var(--badge-warn-bg); stroke: color-mix(in srgb, var(--amber) 35%, transparent); }
.fl-pill--none { fill: var(--surface2); stroke: var(--border); }
.fl-pilltext { font-size: 12.5px; font-weight: 700; }
.fl-pilltext--pass { fill: var(--green); }
.fl-pilltext--fail { fill: var(--red); }
.fl-pilltext--warn { fill: var(--amber); }
.fl-pilltext--none { fill: var(--txt-2); }

.fl-line { fill: none; stroke: var(--txt-3); stroke-width: 2; stroke-linejoin: round; }
.fl-line--pass { stroke: var(--green); }
.fl-line--fail { stroke: var(--red); stroke-dasharray: 6 5; }
.fl-line--c1 { stroke: var(--fl-spf); }
.fl-line--c2 { stroke: var(--fl-dkim); }
.fl-line--c3 { stroke: var(--fl-dmarc); }
.fl-head { fill: var(--txt-3); }
.fl-head--pass { fill: var(--green); }
.fl-head--fail { fill: var(--red); }
.fl-head--c1 { fill: var(--fl-spf); }
.fl-head--c2 { fill: var(--fl-dkim); }
.fl-head--c3 { fill: var(--fl-dmarc); }
.fl-label { font-size: 13px; font-weight: 700; }
.fl-label--pass { fill: var(--green); }
.fl-label--fail { fill: var(--red); }
.fl-label--c1 { fill: var(--fl-spf); }
.fl-label--c2 { fill: var(--fl-dkim); }
.fl-label--c3 { fill: var(--fl-dmarc); }
.fl-icon { fill: none; stroke: var(--txt-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fl-icon--pass { stroke: var(--green); }
.fl-icon--fail { stroke: var(--red); }
.fl-icon--fill { fill: var(--txt-2); stroke: none; }

/* A fourth accent for diagrams with four phases. */
.flow-figure { --fl-c4: var(--rtype-mx-fg); }
.fl-card--c4 { stroke: color-mix(in srgb, var(--fl-c4) 45%, var(--border)); }
.fl-tag--c4 { fill: color-mix(in srgb, var(--fl-c4) 14%, var(--surface)); }
.fl-tagtext--c4 { fill: var(--fl-c4); }
.fl-line--c4 { stroke: var(--fl-c4); }
.fl-head--c4 { fill: var(--fl-c4); }
.fl-label--c4 { fill: var(--fl-c4); }

/* Packet walkthrough (scripts/packet-walkthrough.js). Without the script the
   figure is a static ladder plus a numbered list; the script adds controls,
   dims the messages that have not been sent yet and moves a dot along the
   current arrow. */
.packet-walk .pw-msg { transition: opacity var(--t-fast); }
.packet-walk.is-walking .pw-msg.is-future { opacity: 0.14; }
.packet-walk.is-walking .pw-msg.is-past { opacity: 0.5; }
.packet-walk .pw-msg.is-current path { stroke-width: 3.25; }
.packet-walk .pw-msg.is-current text { fill: var(--txt); font-weight: 700; }

/* A halo in the band colour keeps labels readable where they cross a
   dotted lifeline. */
.packet-walk .pw-halo {
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 5px;
  stroke-linejoin: round;
}

.pw-dot { display: none; fill: var(--txt-2); stroke: var(--surface); stroke-width: 2.5; }
.pw-dot.is-on { display: inline; }
.pw-dot--c1 { fill: var(--fl-spf); }
.pw-dot--c2 { fill: var(--fl-dkim); }
.pw-dot--c3 { fill: var(--fl-dmarc); }
.pw-dot--c4 { fill: var(--fl-c4); }

.pw-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface);
}

.pw-controls .tbtn-primary { min-width: 64px; }

@media (max-width: 520px) {
  .pw-controls { gap: 6px; padding: 8px; }
  .pw-controls .tbtn { padding: 6px 10px; }
  .pw-status { flex-basis: 100%; margin: 4px 2px 0; }
}

.pw-status {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  flex: 1 1 260px;
  margin: 0 0 0 6px;
  font-size: var(--text-compact);
  line-height: 1.45;
}

.pw-counter {
  color: var(--txt-3);
  font-family: var(--font-mono);
  white-space: nowrap;
}

.pw-now { color: var(--txt); font-weight: 600; }

.pw-steps {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: pw;
}

@media (min-width: 880px) {
  .pw-steps { grid-template-columns: 1fr 1fr; }
}

.pw-step {
  counter-increment: pw;
  margin: 0;
  padding: 10px 12px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

/* With the script, the whole card is a button. */
.pw-step:has(.pw-jump) { padding: 0; }
.pw-jump {
  display: block;
  width: 100%;
  padding: 10px 12px 12px;
  border: 0;
  border-radius: inherit;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pw-jump:focus-visible { outline: 2px solid var(--border-hi); outline-offset: 2px; }
.pw-step:hover { border-color: var(--border-hi); }
.pw-step.is-current {
  border-color: var(--border-hi);
  box-shadow: 0 0 0 1px var(--border-hi);
}

.pw-step-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.pw-step-head::before {
  content: counter(pw);
  color: var(--txt-3);
  font-family: var(--font-mono);
  font-size: var(--text-compact);
  min-width: 1.4em;
}

.pw-tag {
  padding: 1px 9px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.pw-tag--c1 { color: var(--fl-spf); background: color-mix(in srgb, var(--fl-spf) 12%, var(--surface)); }
.pw-tag--c2 { color: var(--fl-dkim); background: color-mix(in srgb, var(--fl-dkim) 12%, var(--surface)); }
.pw-tag--c3 { color: var(--fl-dmarc); background: color-mix(in srgb, var(--fl-dmarc) 12%, var(--surface)); }
.pw-tag--c4 { color: var(--fl-c4); background: color-mix(in srgb, var(--fl-c4) 12%, var(--surface)); }

.pw-route {
  color: var(--txt-3);
  font-size: var(--text-compact);
}

.pw-step-title {
  display: block;
  color: var(--txt);
  font-size: var(--text-small);
}

.pw-step-text {
  display: block;
  margin-top: 2px;
  color: var(--txt-2);
  font-size: var(--text-compact);
  line-height: 1.55;
}

/* With the script, only the current step shows its explanation, so the list
   stays a compact index of titles. */
.packet-walk.pw-ready .pw-step-text { display: none; }
.packet-walk.pw-ready .pw-step.is-current .pw-step-text { display: block; }
.packet-walk.pw-ready .pw-steps { align-items: start; }

@media (prefers-reduced-motion: reduce) {
  .packet-walk .pw-msg,
  .pw-step { transition: none; }
}

.faq-list details {
  border-top: 1px solid var(--border);
  padding: 14px 0;
}

.faq-list details:first-of-type {
  padding-top: 0;
  border-top: none;
}

.faq-list summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--txt);
}

.faq-list summary + p {
  margin-top: 10px;
}

.related-guides {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--border);
}

.related-guide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--txt);
  font-weight: 600;
  text-decoration: none;
  transition: color .12s ease;
}

.related-guide:hover {
  color: var(--primary);
  text-decoration: none;
}

.related-guide::after {
  content: '→';
  color: var(--txt-4);
  transition: transform .12s ease, color .12s ease;
}

.related-guide:hover::after {
  color: var(--primary);
  transform: translateX(3px);
}

.related-guide:last-child { border-bottom: 0; }

@media (max-width: 960px) {
  .related-guides {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .related-guides {
    grid-template-columns: 1fr;
  }

  .diagram-card,
  .diagram-stack {
    padding: 14px;
  }

  .guide-table {
    display: block;
    overflow-x: auto;
  }
}

/* Scoring section — dynamic loading state */
.scoring-loading {
  color: var(--txt-4);
  font-style: italic;
  font-size: var(--text-compact);
  padding: 10px 12px;
}

.scoring-subheading {
  margin-top: 20px !important;
}

/* ── Article layout ────────────────────────────────────────────────────────
   Articles use the full page grid. Body copy keeps a comfortable measure
   (~72 characters, 16px); tables, code and diagrams take the whole column,
   and wide screens add a sticky "On this page" rail (built by site-shell.js). */
.guide-header {
  max-width: none;
}

.guide-header > p,
.guide-article .prose-section ol,
.guide-article .callout-box {
  max-width: 72ch;
}

.guide-article .prose-section h2 {
  scroll-margin-top: 84px;
}

/* Metadata reads as one row instead of four stacked lines. */
@media (min-width: 720px) {
  .guide-shell .page-meta-list {
    display: flex;
    flex-wrap: wrap;
    column-gap: 24px;
  }

  .guide-shell .page-meta-chip {
    width: auto;
    padding: 12px 0;
    white-space: nowrap;
  }

  .guide-shell .page-meta-chip + .page-meta-chip {
    border-top: 0;
  }
}

.guide-toc {
  display: none;
}

@media (min-width: 1100px) {
  /* The rail spans every row; row gaps become margins so its unused
     implicit rows add no space. */
  .guide-shell:has(> .guide-toc) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    column-gap: 56px;
    row-gap: 0;
    align-items: start;
  }

  .guide-shell:has(> .guide-toc) > :not(.guide-toc) {
    grid-column: 1;
  }

  /* Beside the rail the column is ~800px, so body copy fills it. */
  .guide-shell:has(> .guide-toc) .guide-header > p,
  .guide-shell:has(> .guide-toc) .guide-article .prose-section--highlight,
  .guide-shell:has(> .guide-toc) .guide-article .prose-section :is(p, ul, ol, .callout-box) {
    max-width: none;
  }

  .guide-shell:has(> .guide-toc) > :not(.guide-toc) + :not(.guide-toc) {
    margin-top: 18px;
  }

  .guide-toc {
    display: block;
    grid-column: 2;
    grid-row: 1 / span 12;
    position: sticky;
    top: 88px;
    max-height: calc(100vh - 112px);
    overflow-y: auto;
    padding-top: 4px;
  }
}

.guide-toc-title {
  margin: 0 0 10px;
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--txt-4);
}

.guide-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--border);
}

.guide-toc a {
  display: block;
  margin-left: -1px;
  padding: 6px 0 6px 14px;
  border-left: 2px solid transparent;
  font-size: var(--text-compact);
  line-height: 1.45;
  color: var(--txt-3);
  text-decoration: none;
}

.guide-toc a:hover {
  color: var(--txt);
}

.guide-toc a[aria-current] {
  border-left-color: var(--primary);
  color: var(--primary-ink);
  font-weight: 600;
}

.guide-article .prose-section p,
.guide-article .prose-section ul,
.guide-article .prose-section ol {
  font-size: var(--text-body);
  line-height: var(--leading-prose);
}

/* Inline links must not rely on colour alone (WCAG 1.4.1). */
.guide-article .prose-section p a,
.guide-article .prose-section li a,
.guide-header > p a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* ── Author byline and card (support articles, /authors/warden/) ───────── */

.guide-header > p a {
  color: var(--primary-ink);
}

.page-meta-chip a {
  color: var(--primary-ink);
  font-weight: 600;
  text-decoration: none;
}

.page-meta-chip a:hover {
  text-decoration: underline;
}

.article-author {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 8px;
  padding: 18px 0 0;
  border-top: 1px solid var(--border);
}

.article-author-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-control);
  background: var(--brand-tile);
  color: var(--brand-mark);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-mark) 10%, transparent);
}

.article-author-mark svg {
  width: 26px;
  height: 26px;
}

.warden-avatar-badge {
  color: var(--brand-pupil);
}

.article-author-mark--large {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-card);
}

.article-author-mark--large svg {
  width: 42px;
  height: 42px;
}

.article-author-body p {
  margin: 0;
}

.article-author-name {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--txt);
}

.article-author-name a {
  color: var(--primary-ink);
  text-decoration: none;
}

.article-author-name a:hover {
  text-decoration: underline;
}

.article-author-bio {
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--txt-3);
}

.author-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.author-header .page-eyebrow {
  margin-bottom: 8px;
}

.author-articles {
  columns: 2 280px;
  column-gap: 32px;
  margin: 0 0 18px;
  padding-left: 18px;
}

.author-articles li {
  break-inside: avoid;
  margin-bottom: 6px;
}

.author-header + .prose .prose-section > h3 {
  margin: 16px 0 8px;
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--txt-2);
}

/* Internet protocols reference: one card per protocol, with an anchor
   (#protocol-<id>) other pages can link to. */
.proto-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.proto-jump a {
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--primary-ink);
  font-size: var(--text-compact);
  font-weight: 600;
  text-decoration: none;
}

.proto-jump a:hover { border-color: var(--border-hi); }

.proto-grid {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

@media (min-width: 880px) {
  .proto-grid { grid-template-columns: 1fr 1fr; }
}

.proto-card {
  display: flex;
  flex-direction: column;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  scroll-margin-top: 96px;
}

.proto-card:target {
  border-color: var(--border-hi);
  box-shadow: 0 0 0 1px var(--border-hi);
}

.prose .proto-card h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0 0 6px;
}

.proto-name {
  color: var(--txt);
  font-size: 1.05rem;
  font-weight: 800;
}

.proto-full {
  color: var(--txt-3);
  font-size: var(--text-compact);
  font-weight: 600;
}

.prose .proto-card > p { margin: 0 0 12px; font-size: var(--text-small); }

.proto-facts {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: var(--text-compact);
}

.proto-facts div {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 8px;
}

.proto-facts dt { color: var(--txt-3); font-weight: 600; }
.proto-facts dd { margin: 0; color: var(--txt-2); }

.prose .proto-guides {
  display: grid;
  justify-items: start;
  gap: 4px;
  margin: 12px 0 0;
  font-size: var(--text-compact);
  line-height: 1.45;
}

.proto-guides span { color: var(--txt-3); font-weight: 600; }

.prose .proto-card .proto-guides {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}