/* ============================================================
   Raising Agents — v3
   notebook.css  ·  Notion-notebook overlay
   Loaded AFTER base.css.

   What this layer adds:
   · swappable --accent (CSS var; default oxide)
   · block-level hover with Notion-style drag-handle hint
   · callout blocks (default / warn / note)
   · margin annotations (sidenotes)
   · highlighter washes (yellow + accent)
   · ruled-paper background (body.ruled)
   · sticky notes (used sparingly)
   · toggle blocks (Notion ▸ collapsible)
   · code blocks with header bar + copy
   · page-properties dl (Notion-style page header)
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@500;600&display=swap");

:root {
  --accent:           #9C3A24;
  --accent-wash:      color-mix(in srgb, var(--accent) 7%, transparent);
  --accent-soft:      color-mix(in srgb, var(--accent) 18%, transparent);
  --accent-line:      color-mix(in srgb, var(--accent) 35%, transparent);
  --hl-yellow:        rgba(214, 178, 107, 0.36);
  --regression:       var(--accent);
  --regression-wash:  var(--accent-wash);
}

/* font: handwritten margin notes */
.hand {
  font-family: "Caveat", "Bradley Hand", "Source Serif 4", cursive;
}

/* ============================================================
   Block hover — Notion drag-handle hint on prose paragraphs
   ============================================================ */

main.prose p,
main.prose ul,
main.prose ol,
main.prose blockquote,
main.prose pre,
main.prose .data-wrap,
main.prose .callout {
  position: relative;
  border-radius: 3px;
  transition: background .12s ease;
}

main.prose p:not(.kicker):not(.breadcrumb):not(.subtitle):not(.next):not(.data-caption):not(.subscribe-meta):not(.page-lede):not(.hero-lede):not(.lede):hover {
  background: rgba(26, 24, 18, 0.025);
}

main.prose p:not(.kicker):not(.breadcrumb):not(.subtitle):not(.next):not(.data-caption):not(.subscribe-meta):not(.page-lede):not(.hero-lede):not(.lede):hover::before,
main.prose ul:hover::before,
main.prose ol:hover::before,
main.prose blockquote:hover::before,
main.prose .data-wrap:hover::before,
main.prose .callout:hover::before {
  content: "⋮⋮";
  position: absolute;
  left: -22px; top: 8px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-4);
  letter-spacing: -2px;
  line-height: 1;
  opacity: 0.55;
  pointer-events: none;
}

@media (max-width: 800px) {
  main.prose p:hover::before,
  main.prose ul:hover::before,
  main.prose ol:hover::before { display: none; }
}

/* h2 / h3 also get the handle hint */
main.prose h2,
main.prose h3 { position: relative; }
main.prose h2:hover::before,
main.prose h3:hover::before {
  content: "⋮⋮";
  position: absolute;
  left: -22px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-4);
  letter-spacing: -2px;
  line-height: 1;
  opacity: 0.55;
  pointer-events: none;
}

/* ============================================================
   Callout block
   ============================================================ */

.callout {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  background: var(--paper-2);
  border-radius: 4px;
  padding: 18px 22px 18px 18px;
  margin: 28px 0;
  max-width: 70ch;
  border: 1px solid var(--rule-soft);
}
.callout .ic {
  width: 22px; height: 22px;
  border: 1.5px solid var(--ink-2);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-2);
  margin-top: 2px;
  letter-spacing: -0.02em;
}
.callout > div > p { margin: 0 0 10px; }
.callout > div > p:last-child { margin-bottom: 0; }
.callout > div > h3 { margin: 0 0 8px; font-size: 17px; font-weight: 600; }
.callout p { max-width: 64ch; }

.callout.warn {
  background: var(--accent-wash);
  border-color: var(--accent-line);
}
.callout.warn .ic { border-color: var(--accent); color: var(--accent); }

.callout.note { background: var(--paper-3); }

/* ============================================================
   Highlighter washes
   ============================================================ */

.hl, .hl-y {
  background: linear-gradient(transparent 58%, var(--hl-yellow) 58% 92%, transparent 92%);
  padding: 0 2px;
  border-radius: 1px;
}
.hl-a {
  background: linear-gradient(transparent 58%, var(--accent-soft) 58% 92%, transparent 92%);
  padding: 0 2px;
  border-radius: 1px;
}

/* ============================================================
   Margin annotations (sidenotes)
   ============================================================ */

.with-margin {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 44px;
  align-items: start;
  margin: 0 0 28px;
}
.with-margin > :first-child { margin: 0; }
.margin-note {
  font-family: "Caveat", "Bradley Hand", "Source Serif 4", cursive;
  font-size: 18.5px;
  color: var(--ink-2);
  line-height: 1.35;
  padding: 6px 0 6px 18px;
  border-left: 2px solid var(--accent);
  transform: rotate(-0.4deg);
  max-width: 24ch;
  position: relative;
}
.margin-note::before {
  content: "↳";
  position: absolute;
  left: -22px; top: 2px;
  font-family: var(--mono);
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
}
.margin-note .by {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 6px;
  font-style: normal;
}

body.no-margin .margin-note { display: none; }
body.no-margin .with-margin { display: block; }
body.no-margin .with-margin > :first-child { width: 100%; }

@media (max-width: 920px) {
  .with-margin { grid-template-columns: 1fr; gap: 14px; }
  .margin-note {
    transform: none;
    border-left: 2px solid var(--accent);
    margin-top: 8px;
  }
  .margin-note::before { display: none; }
}

/* ============================================================
   Ruled paper background (toggleable)
   ============================================================ */

body.ruled main {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 27px,
    rgba(26, 24, 18, 0.055) 27px,
    rgba(26, 24, 18, 0.055) 28px
  );
  background-position: 0 14px;
  background-attachment: local;
}

/* ============================================================
   Sticky note
   ============================================================ */

.sticky {
  display: block;
  background: #F5E48F;
  color: var(--ink);
  padding: 14px 16px 16px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  box-shadow:
    0 1px 1px rgba(0,0,0,0.08),
    0 6px 14px rgba(0,0,0,0.08);
  transform: rotate(-1.2deg);
  max-width: 24ch;
  position: relative;
  border-radius: 1px;
}
.sticky.right { transform: rotate(1.4deg); }
.sticky::before {
  content: "";
  position: absolute;
  top: -7px; left: 50%;
  width: 38px; height: 11px;
  background: rgba(26, 24, 18, 0.13);
  transform: translateX(-50%) rotate(-1.5deg);
  border-radius: 1px;
}
.sticky .lbl {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  opacity: .75;
  display: block;
  margin-bottom: 6px;
}

/* ============================================================
   Toggle (Notion ▸ collapsible)
   ============================================================ */

details.toggle {
  border-top: 1px solid var(--rule);
  padding: 16px 0;
}
details.toggle:last-of-type { border-bottom: 1px solid var(--rule); }
details.toggle[open] { padding-bottom: 22px; }
details.toggle summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 12px;
  user-select: none;
}
details.toggle summary::marker,
details.toggle summary::-webkit-details-marker { display: none; }
details.toggle summary::before {
  content: "▸";
  font-size: 11px;
  color: var(--ink-3);
  transition: transform .15s ease;
  display: inline-block;
  width: 12px;
  line-height: 1;
}
details.toggle[open] summary::before { transform: rotate(90deg); }
details.toggle summary .tg-meta {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  text-transform: uppercase;
}
details.toggle .tg-body {
  padding: 16px 0 0 24px;
  max-width: 66ch;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.55;
}
details.toggle .tg-body p { margin: 0 0 12px; max-width: 64ch; }
details.toggle .tg-body p:last-child { margin-bottom: 0; }
details.toggle .tg-body ul { margin: 6px 0 0; }

/* ============================================================
   Code block with header bar
   ============================================================ */

.code-h {
  margin: 22px 0 26px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #2B271F;
  background: var(--code-bg);
}
.code-h .head {
  background: #221F18;
  color: var(--code-dim);
  padding: 9px 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #2B271F;
}
.code-h .head .lang {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.code-h .head .lang::before {
  content: "";
  width: 8px; height: 8px;
  background: var(--code-mark);
  border-radius: 50%;
  display: inline-block;
  opacity: 0.7;
}
.code-h .copy {
  font-family: var(--mono);
  font-size: 10px;
  background: transparent;
  border: 1px solid #3A352B;
  color: var(--code-dim);
  padding: 3px 10px;
  border-radius: 2px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: color .15s, border-color .15s;
}
.code-h .copy:hover { color: var(--code-fg); border-color: #555; }
.code-h .copy.copied { color: var(--code-mark); border-color: var(--code-mark); }
.code-h pre {
  margin: 0;
  border-radius: 0;
  border: none;
}

/* ============================================================
   Page properties (Notion-style page header)
   ============================================================ */

.page-props {
  display: grid;
  grid-template-columns: 140px 1fr;
  row-gap: 2px;
  column-gap: 20px;
  margin: 0 0 36px;
  padding: 16px 0 18px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  max-width: 620px;
}
.page-props dt {
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 6px 7px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.page-props dt::before {
  content: "";
  width: 8px; height: 8px;
  background: var(--rule);
  border-radius: 1px;
  display: inline-block;
}
.page-props dd {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13.5px;
  padding: 7px 6px;
  border-radius: 2px;
  transition: background .12s;
}
.page-props dd:hover { background: rgba(26, 24, 18, 0.04); }
.page-props dd code { font-size: 12px; }
.page-props .pill { font-size: 10px; padding: 2px 8px; }

/* ============================================================
   Recolor existing accent-using elements via --accent
   ============================================================ */

.trace-col.regression {
  background:
    linear-gradient(to right, var(--accent-wash), transparent 6px),
    var(--paper-2);
}
.trace-col.regression .trace-tag,
.v-fail,
.trace-col.regression .trace-step.consequential .tool {
  color: var(--accent);
}
.trace-col.regression .trace-step.consequential .marker { background: var(--accent); }
.trace-col.regression .trace-step.consequential::before,
.trace-col.regression .trace-step.in-violation::before { background: var(--accent); }
.trace-foot .leg-marker.regression { background: var(--accent); }
.pill.fail { background: var(--accent); border-color: var(--accent); }

/* ============================================================
   Link underline color picks up accent on prose pages
   ============================================================ */

main.prose a { text-decoration-color: var(--accent-line); }
main.prose a:hover { text-decoration-color: var(--accent); }

/* ============================================================
   Tweaks floating panel
   ============================================================ */

.tweaks-fab {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  border: none;
  border-radius: 999px;
  width: 46px;
  height: 46px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.05em;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18), 0 1px 3px rgba(0,0,0,0.1);
  display: grid;
  place-items: center;
  padding: 0;
  transition: transform .15s;
}
.tweaks-fab:hover { transform: translateY(-1px); }
.tweaks-fab .dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
  display: block;
}


/* ============================================================
   Pre-apply (avoid flash before tweaks.js runs)
   ============================================================ */

/* These get set inline immediately in <head> via a tiny script */