/* prpl — app pages stylesheet.
 *
 * Pairs with /static/colors_and_type.css (loaded first by layout.html and
 * base.html). The CSS custom properties from that file are the only source
 * of color/type tokens used here. Tailwind utilities cover the chrome and
 * structural layout; this file defines the legacy template classes
 * (.muted, .filters, .panel, .state, .env-status, .finding-grid, etc.)
 * so the existing Jinja templates render in the prpl design system
 * without per-template rewrites.
 */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* Light app pages — body.app-page (layout.html: /cves, /envs, /jobs).
 * Dark console pages — body.app-console (base.html: /jobs/<id>, /jobs/<id>/s/<…>)
 * inherit Tailwind utilities (bg-stone-950, text-stone-100, etc.) and skip
 * the rules below. Theme-neutral utilities (.muted, .num, .finding-grid,
 * .state-*, .env-status-*, .btn) live outside this scope and apply to
 * both bodies. */
body.app-page {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: var(--lh-relaxed);
  background: var(--bg-page);
  color: var(--stone-800);
  -webkit-font-smoothing: antialiased;
}
/* Use :where() so we don't outrank Tailwind's text-* utilities on
 * anchors that carry their own color (e.g. CTA buttons with
 * text-white). For anchors without an explicit color class, inherit
 * the body text color rather than the browser blue. */
:where(body.app-page) a { color: inherit; text-decoration: none; }
:where(body.app-page) a:hover { color: var(--violet-700); }

code, .mono, pre { font-family: var(--font-mono); font-size: 0.92em; }
.muted { color: var(--stone-500); }
.small { font-size: 0.88em; }
.nowrap { white-space: nowrap; }
.truncate { max-width: 600px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ok { color: var(--emerald-700); }
.warn { color: var(--amber-700); }
.error { color: var(--rose-700); }

/* Section headings — light pages only. Dark console templates style their
 * own h1/h2 inline with Tailwind utilities to keep contrast on stone-950. */
body.app-page h1 {
  font-size: 28px;
  margin: 0 0 20px;
  font-weight: 600;
  color: var(--fg-heading);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
}
body.app-page h2 {
  font-size: 11px;
  margin: 0 0 12px;
  font-weight: 400;
  color: var(--stone-400);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
}

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 1100px) { .two-col { grid-template-columns: 1fr; } }

/* Card / panel surface */
.panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: 20px 24px;
  margin-bottom: 18px;
}
.panel-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.panel-head h2 { margin: 0; }
.panel-head h2 a { color: var(--stone-500); }
.placeholder { opacity: 0.7; }

/* Tables — light card surface. Dark console templates use Tailwind utilities. */
body.app-page table {
  border-collapse: collapse;
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
body.app-page th, body.app-page td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border-default);
  vertical-align: top;
}
body.app-page tr:last-child td { border-bottom: none; }
body.app-page th {
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--stone-400);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  background: rgba(245, 245, 244, 0.5);
}
body.app-page tr:hover td { background: rgba(245, 245, 244, 0.6); }
body.app-page table.compact th, body.app-page table.compact td { padding: 6px 10px; }

/* CVE state pill */
.state {
  display: inline-block;
  padding: 2px 10px;
  font-size: 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  border: 1px solid transparent;
}
.state-published { background: var(--emerald-50); color: var(--emerald-700); border-color: rgb(167 243 208 / 0.5); }
.state-rejected  { background: var(--rose-50);    color: var(--rose-700);    border-color: rgb(254 205 211 / 0.5); }
.state-reserved  { background: var(--amber-50);   color: var(--amber-700);   border-color: rgb(253 230 138 / 0.5); }
.state-unknown   { background: var(--stone-100);  color: var(--stone-500);   border-color: var(--stone-200); }

/* Severity pills — same shape as .state, with a score number wedged in.
   Colors mirror CVSS conventions: critical=red, high=orange, medium=amber,
   low=emerald. "none"/unknown stays neutral so unscored REJECTED rows
   don't shout. */
.sev {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 2px 8px;
  font-size: 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  border: 1px solid transparent;
  white-space: nowrap;
}
.sev .sev-num { font-size: 11px; font-weight: 600; letter-spacing: 0; }
.sev-critical { background: #fee2e2; color: #991b1b; border-color: rgb(252 165 165 / 0.6); }
.sev-high     { background: #ffedd5; color: #9a3412; border-color: rgb(253 186 116 / 0.6); }
.sev-medium   { background: var(--amber-50);   color: var(--amber-700);   border-color: rgb(253 230 138 / 0.5); }
.sev-low      { background: var(--emerald-50); color: var(--emerald-700); border-color: rgb(167 243 208 / 0.5); }
.sev-none     { background: var(--stone-100);  color: var(--stone-500);   border-color: var(--stone-200); }

/* KEV badge — red dot for CISA Known Exploited Vulnerabilities. RANSOM
   variant uses a slightly darker red so it pops out of a row of KEVs. */
.kev-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  background: #b91c1c;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  vertical-align: middle;
}
.kev-badge.ransom { background: #7f1d1d; }
.kev-row { background: #fef2f2; }

/* CWE chip — small, neutral, links out. */
.cwe {
  display: inline-block;
  padding: 1px 6px;
  margin-right: 4px;
  border-radius: 3px;
  background: var(--stone-100);
  color: var(--stone-700);
  font-family: var(--font-mono);
  font-size: 10px;
  border: 1px solid var(--border-default);
  text-decoration: none;
}
.cwe:hover { background: var(--stone-200); }

.crumbs { color: var(--stone-500); margin: 0 0 12px; font-family: var(--font-mono); font-size: 11px; }

.badges { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.badge {
  background: var(--stone-100);
  border: 1px solid var(--border-default);
  color: var(--stone-700);
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11px;
}
.badge.ok    { background: var(--emerald-50); color: var(--emerald-700); border-color: rgb(167 243 208 / 0.5); }
.badge.warn  { background: var(--amber-50);   color: var(--amber-700);   border-color: rgb(253 230 138 / 0.5); }
.badge.err   { background: var(--rose-50);    color: var(--rose-700);    border-color: rgb(254 205 211 / 0.5); }
.badge.muted { color: var(--stone-500); }

/* Status bar — header strip on /cves */
.status-bar {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: 12px 18px;
  margin-bottom: 14px;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--stone-500);
}

/* Filter row */
.filters { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
.filters input[type=text] {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  color: var(--stone-800);
  padding: 8px 12px;
  border-radius: var(--radius-lg);
  min-width: 280px;
  font-family: var(--font-sans);
  font-size: 14px;
}
.filters input[type=text]:focus {
  outline: 2px solid var(--violet-400);
  outline-offset: 2px;
  border-color: transparent;
}
.filters select {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  color: var(--stone-700);
  padding: 8px 12px;
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 14px;
}
.filters button {
  background: var(--stone-900);
  border: 1px solid var(--stone-900);
  color: white;
  padding: 8px 16px;
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
}
.filters button:hover { background: var(--stone-800); }

/* Threat-filter panel (collapsed by default on /cves). */
details.threat-filter {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: 10px 16px;
  margin-bottom: 14px;
}
details.threat-filter > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  color: var(--stone-700);
  user-select: none;
}
details.threat-filter > summary::-webkit-details-marker { display: none; }
details.threat-filter > summary .tf-status { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
details.threat-filter > summary .tf-on { color: var(--emerald-700, #047857); }
details.threat-filter > summary .tf-bypass { color: var(--amber-700, #b45309); }
details.threat-filter > summary .tf-off { color: var(--stone-500); }
details.threat-filter[open] > summary .tf-toggle::after { content: " ▴"; }
details.threat-filter:not([open]) > summary .tf-toggle { display: inline; }
details.threat-filter[open] > summary .tf-toggle { display: inline; }
.tf-form {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-default);
}
.tf-form p.small { margin: 0 0 10px 0; }
.tf-enable {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--stone-700);
}
.tf-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 12px;
}
.tf-cols.tf-cols-3 { grid-template-columns: 1fr 1fr 1.2fr; }
/* Full-width deny-list row above the allow-list columns. Reuses the
 * .tf-col-disabled greying rules (applied to .tf-block when its toggle
 * is off). Tinted to read as a "deny" zone distinct from the allow cols. */
.tf-block {
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--rose-400, #fb7185);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}
.tf-block .tf-label { margin-bottom: 6px; }
.tf-block p { margin: 6px 0 0; }
.tf-block.tf-col-disabled .tf-label { color: var(--stone-400); }
.tf-block.tf-col-disabled textarea { opacity: 0.45; }
.tf-label {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--stone-700);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.tf-label input.tf-type-toggle {
  margin-right: 6px;
  vertical-align: -2px;
}
/* Visually grey out a column when its type toggle is off. The
 * inputs remain functional so the user can flip the box back on. */
.tf-col-disabled .tf-label { color: var(--stone-400); }
.tf-col-disabled textarea,
.tf-col-disabled .tf-score { opacity: 0.45; }
.tf-form textarea {
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  color: var(--stone-800);
  padding: 8px 10px;
  border-radius: var(--radius-lg);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
  resize: vertical;
}
.tf-form textarea:focus {
  outline: 2px solid var(--violet-400);
  outline-offset: 2px;
  border-color: transparent;
}
.tf-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.tf-actions button {
  background: var(--stone-900);
  border: 1px solid var(--stone-900);
  color: white;
  padding: 8px 16px;
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
}
.tf-actions button:hover { background: var(--stone-800); }
.tf-actions button.tf-secondary {
  background: transparent;
  color: var(--stone-700);
  border-color: var(--border-default);
}
.tf-actions button.tf-secondary:hover {
  background: var(--stone-100);
  color: var(--stone-900);
}
@media (max-width: 720px) {
  .tf-cols, .tf-cols.tf-cols-3 { grid-template-columns: 1fr; }
}

/* Reputation-scoring controls (col 3 of .tf-cols-3). */
.tf-score {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}
.tf-score-row {
  display: grid;
  grid-template-columns: 130px 72px 1fr;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}
.tf-score-label {
  color: var(--stone-700);
  font-weight: 500;
}
.tf-score input[type=number] {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  color: var(--stone-800);
  padding: 4px 8px;
  border-radius: var(--radius-md, 6px);
  font-family: var(--font-mono);
  font-size: 12px;
  width: 100%;
}
.tf-score input[type=number]:focus {
  outline: 2px solid var(--violet-400);
  outline-offset: 1px;
  border-color: transparent;
}
.tf-score-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--stone-700);
  margin-top: 2px;
}
.tf-cache-panel {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-default);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.tf-cache-stats { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.tf-cache-panel button {
  background: transparent;
  color: var(--stone-700);
  border: 1px solid var(--border-default);
  padding: 6px 12px;
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 12px;
}
.tf-cache-panel button:hover:not(:disabled) {
  background: var(--stone-100);
  color: var(--stone-900);
}
.tf-cache-panel button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

pre.code {
  background: var(--stone-100);
  color: var(--stone-800);
  border: 1px solid var(--border-default);
  padding: 14px 16px;
  border-radius: var(--radius-xl);
  overflow-x: auto;
  margin: 0;
  font-size: 13px;
  line-height: var(--lh-loose);
}
pre.code.wrap { white-space: pre-wrap; word-break: break-word; }

/* -------------------------------------------------------------------------
 * Rich run viewer additions (templates that extend base.html — dark console).
 * Keeps the job-viewer's dark stone-950 aesthetic; matches the prototype's
 * "Live console" section.
 * ------------------------------------------------------------------------- */

/* Prism light theme tweaks — let the surrounding card carry the bg color. */
pre[class*="language-"],
code[class*="language-"] { background: transparent !important; color: var(--stone-800); }
pre[class*="language-"] { padding: 0 !important; margin: 0 !important; }

/* Tabular nums for duration columns */
.num { font-variant-numeric: tabular-nums; font-family: var(--font-mono); }

/* When user jumps to #finding-N via anchor link, auto-expand the <details>. */
details:target { box-shadow: 0 0 0 1px var(--emerald-700) inset; }
details:target[open] summary { color: var(--emerald-300); }

/* Hide refuted findings by default; the #toggle-refuted checkbox flips the
 * body class and reveals them. :target override keeps anchor links working. */
body:not(.show-refuted) [data-status="refuted"]:not(:target) { display: none; }

/* Findings row grid — header and row summaries share this template.
 * sink (flex)  cvss  summary (flex)  events  tools  files */
.finding-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1.3fr)
    56px
    minmax(0, 2.2fr)
    56px
    56px
    56px;
  align-items: baseline;
  column-gap: 8px;
}

/* Subtle chevron on expandable finding rows */
details > summary.finding-grid { list-style: none; position: relative; }
details > summary.finding-grid::-webkit-details-marker { display: none; }
details > summary.finding-grid::before {
  content: "▸";
  position: absolute;
  margin-left: -14px;
  color: #52525b;
  transition: transform 120ms ease;
  font-size: 11px;
}
details[open] > summary.finding-grid::before {
  content: "▾";
  color: #a1a1aa;
}

/* Launch form on env detail */
.launch-form {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.launch-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--stone-400);
}
.launch-form input[type=text],
.launch-form select {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  color: var(--stone-800);
  padding: 8px 12px;
  border-radius: var(--radius-lg);
  min-width: 200px;
  font-family: var(--font-sans);
  font-size: 14px;
}
.launch-form button {
  background: var(--stone-900);
  border: 1px solid var(--stone-900);
  color: white;
  padding: 10px 20px;
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
}
.launch-form button:hover { background: var(--stone-800); }

/* Inline action button in cves table (e.g., "synth env") */
table form button {
  background: var(--violet-50);
  border: 1px solid var(--violet-200);
  color: var(--violet-700);
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}
table form button:hover { background: var(--violet-100); border-color: var(--violet-300); }

/* Env status pill */
.env-status {
  display: inline-block;
  padding: 2px 10px;
  font-size: 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  border: 1px solid transparent;
}
.env-status-healthy, .env-status-running   { background: var(--emerald-50); color: var(--emerald-700); border-color: rgb(167 243 208 / 0.5); }
.env-status-stopped, .env-status-exited    { background: var(--stone-100);  color: var(--stone-500);   border-color: var(--stone-200); }
.env-status-starting, .env-status-mixed    { background: var(--amber-50);   color: var(--amber-700);   border-color: rgb(253 230 138 / 0.5); }
.env-status-unhealthy, .env-status-fail, .env-status-failed
                                           { background: var(--rose-50);    color: var(--rose-700);    border-color: rgb(254 205 211 / 0.5); }
.env-status-no-docker, .env-status-unknown { background: var(--stone-100);  color: var(--stone-500);   border-color: var(--stone-200); }

.env-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.env-actions button {
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  color: var(--stone-700);
  padding: 8px 16px;
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-size: 14px;
  font-family: var(--font-sans);
}
.env-actions button:hover:not(:disabled) {
  border-color: var(--stone-400);
  background: rgba(245, 245, 244, 0.5);
}
.env-actions button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.env-actions button.danger {
  border-color: rgb(254 205 211 / 0.7);
  color: var(--rose-700);
}
.env-actions button.danger:hover:not(:disabled) {
  background: var(--rose-50);
  border-color: var(--rose-500);
}

.action-banner {
  padding: 8px 14px;
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
}
.action-banner.ok  { background: var(--emerald-50); color: var(--emerald-700); border-color: rgb(167 243 208 / 0.5); }
.action-banner.err { background: var(--rose-50);    color: var(--rose-700);    border-color: rgb(254 205 211 / 0.5); }

/* Job-status badges (used by templates/runs.html). Keep tone-aligned with .state-*. */
.state-hunt        { background: var(--emerald-50); color: var(--emerald-700); border-color: rgb(167 243 208 / 0.5); }
.state-synth       { background: var(--violet-50);  color: var(--violet-700);  border-color: rgb(221 214 254 / 0.5); }
.state-confirmed   { background: var(--emerald-50); color: var(--emerald-700); border-color: rgb(167 243 208 / 0.5); }
.state-unconfirmed { background: var(--amber-50);   color: var(--amber-700);   border-color: rgb(253 230 138 / 0.5); }
.state-no_findings { background: var(--stone-100);  color: var(--stone-500);   border-color: var(--stone-200); }
.state-runner_fail { background: var(--rose-50);    color: var(--rose-700);    border-color: rgb(254 205 211 / 0.5); }
.state-rate_limited{ background: var(--rose-50);    color: var(--rose-700);    border-color: rgb(254 205 211 / 0.5); }
.state-ready       { background: var(--emerald-50); color: var(--emerald-700); border-color: rgb(167 243 208 / 0.5); }
.state-draft       { background: var(--amber-50);   color: var(--amber-700);   border-color: rgb(253 230 138 / 0.5); }
.state-failed      { background: var(--rose-50);    color: var(--rose-700);    border-color: rgb(254 205 211 / 0.5); }

/* Inline form buttons (used on /jobs index for archive/delete). */
.btn {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  color: var(--stone-700);
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  cursor: pointer;
}
.btn:hover { border-color: var(--stone-400); color: var(--stone-900); }
.btn-danger { border-color: rgb(254 205 211 / 0.7); color: var(--rose-700); }
.btn-danger:hover { background: var(--rose-50); border-color: var(--rose-500); color: var(--rose-700); }

/* ─────────────────────────────────────────────────────────────────
 * Shimmer — used by progress_bar(running=True) overlay.
 * .animate-shimmer slides a translucent gradient across the bar.
 * ───────────────────────────────────────────────────────────────── */
@keyframes shimmer {
  from { transform: translateX(0); }
  to   { transform: translateX(800%); }
}
.animate-shimmer { animation: shimmer 1.6s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .animate-shimmer,
  .animate-ping,
  .animate-pulse { animation: none !important; }
}

/* ─────────────────────────────────────────────────────────────────
 * Markdown rendering — used for the agent's build summary on the
 * synth result panel. Tailwind's preflight zeroes margins / list
 * styles / code backgrounds on unclassed elements; we use !important
 * so a marko-rendered subtree gets readable structure back without
 * pulling in @tailwindcss/typography.
 * ───────────────────────────────────────────────────────────────── */
.prpl-md > * + * { margin-top: 0.7em !important; }
.prpl-md h1, .prpl-md h2, .prpl-md h3, .prpl-md h4 {
  font-weight: 600 !important;
  color: var(--stone-900) !important;
  margin-top: 1.1em !important;
}
.prpl-md h1 { font-size: 1.1em !important; }
.prpl-md h2 { font-size: 1.02em !important; }
.prpl-md h3, .prpl-md h4 { font-size: 0.95em !important; }
.prpl-md p { margin: 0 !important; }
.prpl-md ul, .prpl-md ol {
  padding-left: 1.4em !important;
  margin: 0 !important;
}
.prpl-md ul { list-style: disc !important; }
.prpl-md ol { list-style: decimal !important; }
.prpl-md li { margin: 0 !important; display: list-item !important; }
.prpl-md li + li { margin-top: 0.25em !important; }
.prpl-md code {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 0.88em !important;
  background: var(--stone-100, #f5f5f4) !important;
  padding: 0.05em 0.35em !important;
  border-radius: 3px !important;
  color: var(--stone-900) !important;
}
.prpl-md pre {
  background: var(--stone-50, #fafaf9) !important;
  border: 1px solid var(--stone-200, #e7e5e4) !important;
  border-radius: 6px !important;
  padding: 0.6em 0.8em !important;
  overflow-x: auto !important;
  font-size: 0.85em !important;
}
.prpl-md pre code {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.prpl-md a {
  color: var(--emerald-700, #047857) !important;
  text-decoration: underline !important;
}
.prpl-md a:hover { color: var(--emerald-800, #065f46) !important; }
.prpl-md strong { font-weight: 600 !important; color: var(--stone-900) !important; }
.prpl-md em { font-style: italic !important; }
.prpl-md blockquote {
  border-left: 3px solid var(--stone-300, #d6d3d1) !important;
  padding-left: 0.8em !important;
  color: var(--stone-600) !important;
}
.prpl-md hr {
  border: 0 !important;
  border-top: 1px solid var(--stone-200, #e7e5e4) !important;
  margin: 1em 0 !important;
}