/* ═══════════════════════════════════════════════════════════════════════════
   Marginalia — Typographic Callout Library
   v0.1.0 | MIT License | github.com/andyed/marginalia
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Theme tokens ────────────────────────────────────────────────────────── */

:root {
  --mg-bg:          #0a0a0f;
  --mg-bg2:         #0f1117;
  --mg-text:        #e0e0ec;
  --mg-text-muted:  #8a8aa0;
  --mg-border:      rgba(255, 255, 255, 0.08);
  --mg-accent:      #50b4c8;
  --mg-accent-rgb:  80, 180, 200;
  --mg-accent-ink:  #7dd4e4;
  --mg-note:        #50b4c8; /* 8.19:1 on #0a0a0f (WCAG AAA border) */
  --mg-tip:         #66bb6a; /* 8.35:1 on #0a0a0f — bumped from #4caf50 (7.11) */
  --mg-warning:     #e6a817; /* 9.38:1 on #0a0a0f */
  --mg-important:   #ff8282; /* 8.25:1 on #0a0a0f — bumped from #e05252 (5.17) */
  --mg-radius:      4px;
  --mg-font-mono:   'SF Mono', 'Fira Code', Consolas, 'Liberation Mono', monospace;
}

/* Light theme — activate with data-theme="light" on any ancestor or via OS preference */
[data-theme="light"],
[data-mg-theme="light"] {
  --mg-bg:          #fafafa;
  --mg-bg2:         #f0f0f4;
  --mg-text:        #1a1a2e;
  --mg-text-muted:  #404055; /* 9.66:1 on #fafafa — bumped from #555570 (6.89) */
  --mg-border:      rgba(0, 0, 0, 0.1);
  --mg-accent:      #0e7490; /* kept — border/accent role only, not used as text */
  --mg-accent-rgb:  14, 116, 144;
  --mg-accent-ink:  #0c4a6e; /* 9.06:1 on #fafafa — bumped from #0e7490 (5.13) */
  --mg-note:        #164e63; /* 8.73:1 on #fafafa — bumped from #0e7490 (5.13) */
  --mg-tip:         #14532d; /* 8.73:1 on #fafafa — bumped from #2e7d32 (4.91) */
  --mg-warning:     #78350f; /* 8.69:1 on #fafafa — bumped from #c67f00 (3.13 ← AA fail) */
  --mg-important:   #7f1d1d; /* 9.60:1 on #fafafa — bumped from #c62828 (5.39) */
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-mg-theme="dark"]) {
    --mg-bg:          #fafafa;
    --mg-bg2:         #f0f0f4;
    --mg-text:        #1a1a2e;
    --mg-text-muted:  #404055; /* 9.66:1 on #fafafa */
    --mg-border:      rgba(0, 0, 0, 0.1);
    --mg-accent:      #0e7490; /* border/accent only */
    --mg-accent-rgb:  14, 116, 144;
    --mg-accent-ink:  #0c4a6e; /* 9.06:1 on #fafafa */
    --mg-note:        #164e63; /* 8.73:1 on #fafafa */
    --mg-tip:         #14532d; /* 8.73:1 on #fafafa */
    --mg-warning:     #78350f; /* 8.69:1 on #fafafa */
    --mg-important:   #7f1d1d; /* 9.60:1 on #fafafa */
  }
}


/* ── 1. Callout ──────────────────────────────────────────────────────────── */

.mg-callout {
  border-left: 3px solid rgba(var(--mg-accent-rgb), 0.4);
  background: var(--mg-bg2);
  padding: 0.75rem 1.25rem;
  margin: 1.5rem 0;
  border-radius: 0 var(--mg-radius) var(--mg-radius) 0;
  color: var(--mg-text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

.mg-callout strong {
  color: var(--mg-accent-ink);
  font-style: normal;
}

.mg-callout p {
  margin: 0 0 0.5rem;
}

.mg-callout p:last-child {
  margin-bottom: 0;
}

/* Variant border colors via data-type */
.mg-callout[data-type="note"]      { border-left-color: var(--mg-note); }
.mg-callout[data-type="tip"]       { border-left-color: var(--mg-tip); }
.mg-callout[data-type="warning"]   { border-left-color: var(--mg-warning); }
.mg-callout[data-type="important"] { border-left-color: var(--mg-important); }

/* Tinted backgrounds per variant */
.mg-callout[data-type="note"]      { background: rgba(var(--mg-accent-rgb), 0.06); }
.mg-callout[data-type="tip"]       { background: rgba(76, 175, 80, 0.06); }
.mg-callout[data-type="warning"]   { background: rgba(230, 168, 23, 0.06); }
.mg-callout[data-type="important"] { background: rgba(224, 82, 82, 0.06); }


/* ── 2. Pull quote ───────────────────────────────────────────────────────── */

.mg-pull {
  float: right;
  clear: right;
  width: 38%;
  margin: 0.2rem 0 1.2rem 2rem;
  padding: 0.8rem 0 0.8rem 1rem;
  border-left: 3px solid var(--mg-accent);
  font-size: 1.35rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--mg-accent-ink);
  /* Signature 3D perspective tilt — near edge points into body text */
  text-align: left;
  transform-origin: right center;
  transform: perspective(600px) rotateY(-14deg) scale(0.92);
  shape-outside: polygon(14% 0%, 100% 0%, 100% 100%, 0% 100%);
  shape-margin: 0.8rem;
}

/* Mirror: float left, near edge points into body text */
.mg-pull.mg-flip {
  float: left;
  clear: left;
  text-align: left;
  margin: 0.2rem 2rem 1.2rem 0;
  transform-origin: left center;
  transform: perspective(600px) rotateY(14deg) scale(0.92);
  shape-outside: polygon(0% 0%, 100% 0%, 100% 100%, 14% 100%);
}

/* Flat variant — sidebar float without 3D transform */
.mg-pull.mg-flat {
  transform: none;
  shape-outside: none;
}

/* Responsive: flatten on mobile */
@media (max-width: 720px) {
  .mg-pull,
  .mg-pull.mg-flip {
    float: none;
    width: auto;
    margin: 1.2rem 0;
    font-size: 1.1rem;
    transform: none;
    transform-origin: center center;
    shape-outside: none;
  }
}


/* ── 3. Code block ───────────────────────────────────────────────────────── */

.mg-code {
  font-family: var(--mg-font-mono);
  font-size: 0.85em;
  background: var(--mg-bg2);
  border-left: 3px solid rgba(var(--mg-accent-rgb), 0.3);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  border-radius: 0 var(--mg-radius) var(--mg-radius) 0;
  overflow-x: auto;
  line-height: 1.55;
  color: var(--mg-text);
  position: relative;
  tab-size: 2;
  -moz-tab-size: 2;
}

/* Language label */
.mg-code[data-lang]::before {
  content: attr(data-lang);
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mg-text-muted);
  pointer-events: none;
}

/* Inline code */
.mg-inline-code {
  font-family: var(--mg-font-mono);
  font-size: 0.85em;
  background: rgba(var(--mg-accent-rgb), 0.08);
  padding: 0.1em 0.35em;
  border-radius: 3px;
  color: var(--mg-accent-ink);
}

/* Copy button (injected by marginalia.js) */
.mg-code .mg-copy-btn {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  background: rgba(var(--mg-accent-rgb), 0.12);
  border: 1px solid rgba(var(--mg-accent-rgb), 0.2);
  border-radius: 3px;
  color: var(--mg-text-muted);
  font-family: var(--mg-font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2em 0.5em;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}

.mg-code:hover .mg-copy-btn {
  opacity: 1;
}

.mg-code .mg-copy-btn:hover {
  background: rgba(var(--mg-accent-rgb), 0.25);
  color: var(--mg-accent-ink);
}

/* Shift language label left when copy button is present */
.mg-code:has(.mg-copy-btn)[data-lang]::before {
  right: 4rem;
}


/* ── 4. Badge ────────────────────────────────────────────────────────────── */

.mg-badge {
  display: inline-block;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mg-accent);
  background: rgba(var(--mg-accent-rgb), 0.1);
  border: 1px solid rgba(var(--mg-accent-rgb), 0.3);
  padding: 0.1em 0.4em;
  border-radius: 2px;
  vertical-align: middle;
}

/* Semantic badge variants */
.mg-badge[data-type="tip"]       { color: var(--mg-tip);       background: rgba(76, 175, 80, 0.1);  border-color: rgba(76, 175, 80, 0.3); }
.mg-badge[data-type="warning"]   { color: var(--mg-warning);   background: rgba(230, 168, 23, 0.1); border-color: rgba(230, 168, 23, 0.3); }
.mg-badge[data-type="important"] { color: var(--mg-important); background: rgba(224, 82, 82, 0.1);  border-color: rgba(224, 82, 82, 0.3); }


/* ── 5. Collapse ─────────────────────────────────────────────────────────── */

.mg-collapse {
  border: 1px solid var(--mg-border);
  border-radius: var(--mg-radius);
  margin: 1.5rem 0;
  overflow: hidden;
}

.mg-collapse summary {
  padding: 0.85rem 1.2rem;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--mg-accent);
  background: var(--mg-bg2);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  user-select: none;
}

.mg-collapse summary::-webkit-details-marker {
  display: none;
}

.mg-collapse summary::before {
  content: '\25B6'; /* ▶ */
  font-size: 0.6rem;
  transition: transform 0.15s;
  flex-shrink: 0;
}

.mg-collapse[open] summary::before {
  transform: rotate(90deg);
}

.mg-collapse .mg-collapse-body {
  padding: 1.2rem 1.5rem;
  background: var(--mg-bg2);
  border-top: 1px solid var(--mg-border);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--mg-text);
}

.mg-collapse .mg-collapse-body p {
  margin: 0 0 0.8rem;
}

.mg-collapse .mg-collapse-body p:last-child {
  margin-bottom: 0;
}


/* ── 6. Highlight ────────────────────────────────────────────────────────── */

.mg-mark {
  background: rgba(var(--mg-accent-rgb), 0.15);
  color: var(--mg-accent-ink);
  padding: 0.05em 0.25em;
  border-radius: 2px;
}


/* ── 7. Drop Cap ─────────────────────────────────────────────────────────── */

.mg-dropcap::first-letter {
  float: left;
  font-size: 3.8em;
  line-height: 0.8;
  padding-right: 0.08em;
  margin-top: 0.05em;
  font-weight: 700;
  color: var(--mg-accent-ink);
}

/* Ornate variant — adds the signature left border accent */
.mg-dropcap[data-type="ornate"]::first-letter {
  border-left: 3px solid var(--mg-accent);
  padding-left: 0.12em;
}

/* Lead-in — colored opening words of a section */
.mg-lede {
  font-weight: 700;
  color: var(--mg-accent-ink);
  letter-spacing: 0.02em;
}

/* Small-caps variant */
.mg-lede[data-type="caps"] {
  font-variant: small-caps;
  text-transform: lowercase;
  font-size: 1.05em;
}

/* Responsive: reduce size on small viewports */
@media (max-width: 720px) {
  .mg-dropcap::first-letter {
    font-size: 2.8em;
  }
}


/* ── 8. Footnotes ───────────────────────────────────────────────────────── */

/* Counter on the nearest scoping ancestor (article, section, or body) */
article, section, .mg-fn-scope, body {
  counter-reset: mg-fn;
}

.mg-fn {
  position: relative;
  display: inline;
}

.mg-fn-ref {
  counter-increment: mg-fn;
  cursor: pointer;
  font-size: 0.7em;
  font-weight: 700;
  color: var(--mg-accent);
  vertical-align: super;
  line-height: 1;
  text-decoration: none;
  padding: 0 0.15em;
}

/* Auto-number when content is empty (JS or CSS counter) */
.mg-fn-ref:empty::after {
  content: counter(mg-fn);
}

.mg-fn-ref:hover,
.mg-fn-ref:focus {
  color: var(--mg-accent-ink);
}

.mg-fn-body {
  display: none;
  position: absolute;
  left: 50%;
  top: calc(100% + 0.4rem);
  transform: translateX(-50%);
  width: max(16rem, 30vw);
  max-width: 90vw;
  padding: 0.6rem 1rem;
  border-left: 3px solid var(--mg-accent);
  background: var(--mg-bg2);
  border-radius: 0 var(--mg-radius) var(--mg-radius) 0;
  color: var(--mg-text);
  font-size: 0.85rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  z-index: 10;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Show on hover, keyboard focus, or tap (JS adds mg-fn-open) */
.mg-fn:hover .mg-fn-body,
.mg-fn:focus-within .mg-fn-body,
.mg-fn.mg-fn-open .mg-fn-body {
  display: block;
}

/* Anchor the popover to right edge if near left margin */
.mg-fn-body.mg-fn-anchor-right {
  left: auto;
  right: 0;
  transform: none;
}

/* Anchor to left edge if near right margin */
.mg-fn-body.mg-fn-anchor-left {
  left: 0;
  transform: none;
}

/* Light theme: softer shadow */
[data-theme="light"] .mg-fn-body,
[data-mg-theme="light"] .mg-fn-body {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* Mobile: larger tap target, full-width popover */
@media (max-width: 720px) {
  .mg-fn-ref {
    padding: 0.3em;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .mg-fn-body {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    top: auto;
    width: auto;
    max-width: none;
    transform: none;
    border-radius: var(--mg-radius);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
  }
  .mg-fn-body.mg-fn-anchor-left,
  .mg-fn-body.mg-fn-anchor-right {
    left: 1rem;
    right: 1rem;
    transform: none;
  }
}


/* ── 9. Gallery / Lightbox ──────────────────────────────────────────────── */

.mg-gallery { margin: 1.5rem 0; }
.mg-gallery figure { margin: 0; }
.mg-gallery img { width: 100%; display: block; cursor: zoom-in; border-radius: var(--mg-radius); }
.mg-gallery figcaption {
  font-size: 0.82rem; line-height: 1.45; color: var(--mg-text-muted);
  padding: 0.5rem 0.25rem 0;
}
.mg-gallery[data-type="compare"] {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem;
}
@media (max-width: 720px) {
  .mg-gallery[data-type="compare"] { grid-template-columns: 1fr; }
}

/* Lightbox overlay (injected by marginalia.js) */
.mg-lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, 0.92);
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  cursor: zoom-out; padding: 2rem;
}
.mg-lightbox img {
  max-width: 90vw; max-height: 85vh; object-fit: contain;
  border-radius: var(--mg-radius); cursor: default;
}
.mg-lightbox figcaption {
  color: var(--mg-text-muted); font-size: 0.85rem;
  margin-top: 0.75rem; text-align: center; max-width: 60ch;
}


/* ── 10. Inline Skew — perspective-tilted block callout ─────────────────── */

.mg-callout.mg-skew {
  transform-origin: left center;
  transform: perspective(600px) rotateY(4deg) scale(0.98);
  border-left-width: 4px;
}

@media (max-width: 720px) {
  .mg-callout.mg-skew {
    transform: none;
  }
}


/* ── 11. Sidebar — float-right body-copy tangential content ────────────── */

.mg-sidebar {
  float: right;
  clear: right;
  width: 180px;
  margin: 0 0 1rem 1.5rem;
  padding: 0.75rem;
  background: var(--mg-bg2);
  border: 1px solid var(--mg-border);
  border-radius: 6px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--mg-text-muted);
}

.mg-sidebar strong {
  display: block;
  color: var(--mg-text);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

.mg-sidebar p {
  margin: 0 0 0.4rem;
}

.mg-sidebar p:last-child {
  margin-bottom: 0;
}

/* Wider variant for longer content */
.mg-sidebar.mg-wide {
  width: 220px;
}

@media (max-width: 720px) {
  .mg-sidebar,
  .mg-sidebar.mg-wide {
    float: none;
    width: auto;
    margin: 1rem 0;
  }
}


/* ── 12. Margin note — positioned outside content column ───────────────── */

/* Parent container must opt in */
.mg-margin-scope {
  position: relative;
  overflow: visible;
}

.mg-margin {
  /* Mobile/narrow: inline callout */
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--mg-accent);
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
  border-left: 3px solid rgba(var(--mg-accent-rgb), 0.4);
  background: rgba(var(--mg-accent-rgb), 0.04);
  border-radius: 0 var(--mg-radius) var(--mg-radius) 0;
}

.mg-margin small {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--mg-text-muted);
  margin-top: 0.35rem;
  line-height: 1.4;
}

/* Desktop: escape into the gutter */
@media (min-width: 1200px) {
  .mg-margin {
    position: absolute;
    width: 380px;
    padding: 1.4rem 1.6rem;
    border-left: none;
    border-right: 5px solid rgba(var(--mg-accent-rgb), 0.5);
    border-radius: 6px 0 0 6px;
    background: rgba(var(--mg-accent-rgb), 0.04);
    text-align: right;
    transform-origin: right center;
    transform: perspective(600px) rotateY(-14deg) scale(0.95);
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    word-break: break-word;
    hyphens: auto;
    left: -410px;
    top: -0.5rem;
  }

  .mg-margin.mg-right {
    left: auto;
    right: -410px;
    text-align: left;
    border-right: none;
    border-left: 5px solid rgba(var(--mg-accent-rgb), 0.5);
    border-radius: 0 6px 6px 0;
    transform-origin: left center;
    transform: perspective(600px) rotateY(14deg) scale(0.95);
  }

  .mg-margin small {
    font-size: 1rem;
    margin-top: 0.5rem;
  }
}


/* ── 13. Content mode — repeat vs insert ───────────────────────────────── */

/* Repeat: duplicated body text, styled to signal "you read this already" */
[data-content="repeat"] {
  font-style: italic;
}

/* Insert: new standalone content, normal weight */
[data-content="insert"] {
  font-style: normal;
}

/* Visual hint for repeated content — slightly dimmed */
.mg-pull[data-content="repeat"],
.mg-margin[data-content="repeat"] {
  opacity: 0.88;
}


/* ── 14. Spread — two-column magazine layout ───────────────────────────── */

.mg-spread {
  column-count: 2;
  column-gap: 2.5rem;
  column-rule: 1px solid var(--mg-border);
}

/* Callouts bridge both columns — center-break pull quote */
.mg-spread .mg-callout,
.mg-spread .mg-pull,
.mg-spread .mg-gallery {
  column-span: all;
  margin: 1.5rem 2.5rem;
}

/* Pull quotes inside spreads: full-width centered, no float */
.mg-spread .mg-pull {
  float: none;
  width: auto;
  text-align: center;
  transform-origin: center center;
  transform: perspective(600px) rotateX(2deg) scale(0.97);
  shape-outside: none;
  padding: 1.2rem 2rem;
}

.mg-spread .mg-pull.mg-flat {
  transform: none;
}

/* Sidebar stays floated within a single column */
.mg-spread .mg-sidebar {
  break-inside: avoid;
}

@media (max-width: 720px) {
  .mg-spread {
    column-count: 1;
    column-rule: none;
  }
  .mg-spread .mg-pull {
    transform: none;
  }
}


/* ── Utilities ──────────────────────────────────────────────────────────── */

/* Remove left border from any bordered component */
[data-bar="none"].mg-callout,
[data-bar="none"].mg-pull,
[data-bar="none"].mg-code {
  border-left: 0 none;
  border-radius: var(--mg-radius);
}

/* Stronger tint when bar is removed — background carries the semantic signal */
.mg-callout[data-bar="none"][data-type="note"]      { background: rgba(var(--mg-accent-rgb), 0.10); }
.mg-callout[data-bar="none"][data-type="tip"]       { background: rgba(76, 175, 80, 0.10); }
.mg-callout[data-bar="none"][data-type="warning"]   { background: rgba(230, 168, 23, 0.10); }
.mg-callout[data-bar="none"][data-type="important"] { background: rgba(224, 82, 82, 0.10); }