/* Marginalia site demo margin.
 * Reads the product's own --m-* tokens when the page defines them, and falls
 * back to the values in marginalia-v2-package/ui/tokens.css when it does not.
 * Local alias names are used so a page-level token always wins.
 * No frameworks, no network, no fonts loaded here.
 */

.mgd, .mgd-card, .mgd-open-fab, .mgd-scrim {
  --c-page: var(--m-page, oklch(0.990 0.004 255));
  --c-margin: var(--m-margin, oklch(0.968 0.007 255));
  --c-surface: var(--m-surface, oklch(0.993 0.003 255));
  --c-sunken: var(--m-sunken, oklch(0.940 0.008 255));
  --c-ink: var(--m-ink, oklch(0.245 0.016 255));
  --c-ink-2: var(--m-ink-2, oklch(0.400 0.014 255));
  --c-ink-3: var(--m-ink-3, oklch(0.475 0.012 255));
  --c-rule: var(--m-rule, oklch(0.895 0.008 255));
  --c-rule-strong: var(--m-rule-strong, oklch(0.800 0.010 255));
  --c-edge: var(--m-edge, oklch(0.620 0.012 255));
  --c-accent: var(--m-accent, oklch(0.500 0.120 255));
  --c-accent-soft: var(--m-accent-soft, oklch(0.925 0.030 255));
  --c-highlight: var(--m-highlight, oklch(0.935 0.065 95));
  --c-1: var(--m-sec-1, oklch(0.630 0.060 255));
  --c-2: var(--m-sec-2, oklch(0.570 0.060 195));
  --c-3: var(--m-sec-3, oklch(0.510 0.060 145));
  --c-4: var(--m-sec-4, oklch(0.630 0.060 85));
  --c-danger: var(--m-danger, oklch(0.520 0.140 28));
  --c-sans: var(--m-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif);
  --c-serif: var(--m-serif, Georgia, "Iowan Old Style", "Times New Roman", serif);
  --c-mono: var(--m-mono, ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --t-1: 12.4px; --t0: 14px; --t1: 15.75px; --t2: 17.7px;
  --radius: 6px; --radius-s: 4px; --target: 28px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --fast: 150ms; --base: 200ms; --slow: 250ms;
}
@media (prefers-color-scheme: dark) {
  .mgd, .mgd-card, .mgd-open-fab, .mgd-scrim {
    --c-page: var(--m-page, oklch(0.185 0.010 255));
    --c-margin: var(--m-margin, oklch(0.215 0.011 255));
    --c-surface: var(--m-surface, oklch(0.250 0.012 255));
    --c-sunken: var(--m-sunken, oklch(0.180 0.010 255));
    --c-ink: var(--m-ink, oklch(0.925 0.008 255));
    --c-ink-2: var(--m-ink-2, oklch(0.800 0.010 255));
    --c-ink-3: var(--m-ink-3, oklch(0.700 0.010 255));
    --c-rule: var(--m-rule, oklch(0.310 0.012 255));
    --c-rule-strong: var(--m-rule-strong, oklch(0.420 0.012 255));
    --c-edge: var(--m-edge, oklch(0.540 0.012 255));
    --c-accent: var(--m-accent, oklch(0.760 0.095 255));
    --c-accent-soft: var(--m-accent-soft, oklch(0.330 0.050 255));
    --c-highlight: var(--m-highlight, oklch(0.380 0.055 95));
    --c-1: var(--m-sec-1, oklch(0.560 0.060 255));
    --c-2: var(--m-sec-2, oklch(0.620 0.060 195));
    --c-3: var(--m-sec-3, oklch(0.680 0.060 145));
    --c-4: var(--m-sec-4, oklch(0.560 0.060 85));
    --c-danger: var(--m-danger, oklch(0.740 0.110 28));
  }
}

/* ---- page marks, drawn with the CSS Custom Highlight API ---- */
::highlight(marginalia-demo-kept) {
  text-decoration: underline var(--m-highlight, oklch(0.935 0.065 95)) 2px;
  text-underline-offset: 3px;
}
::highlight(marginalia-demo-highlighted) {
  background: var(--m-highlight, oklch(0.935 0.065 95));
  color: var(--m-ink, oklch(0.245 0.016 255));
}
::highlight(marginalia-demo-focus) {
  background: var(--m-accent-soft, oklch(0.925 0.030 255));
  color: var(--m-ink, oklch(0.245 0.016 255));
}

/* ---- shell ---- */
.mgd, .mgd * { box-sizing: border-box; }
.mgd {
  position: fixed;
  inset: 0 0 auto auto;
  height: 100dvh;
  width: 400px;
  display: flex;
  background: var(--c-margin);
  border-inline-start: 1px solid var(--c-rule);
  color: var(--c-ink);
  font: var(--t0)/1.5 var(--c-sans);
  z-index: 60;
}
.mgd :where(h2, h3, h4, p, ul, ol, figure) { margin: 0; padding: 0; }
.mgd ul, .mgd ol { list-style: none; }
/* The host page styles its own prose. :where keeps this reset at one class of
   specificity: it beats a bare element rule and loses to every rule below. */
.mgd :where(p, li, h2, h3, h4, label, summary, figure, blockquote, a, span, b, i, div, input, textarea) {
  font: var(--t0)/1.5 var(--c-sans);
  letter-spacing: normal;
  color: inherit;
  max-width: none;
}
.mgd button {
  border: 0; background: transparent; color: inherit; font: inherit;
  border-radius: var(--radius-s); min-height: var(--target);
  padding: 3px 6px; text-align: start; cursor: pointer;
}
.mgd button:hover { background: var(--c-sunken); }
.mgd button:active { background: var(--c-accent-soft); }
.mgd :focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.mgd [hidden] { display: none !important; }
.mgd input, .mgd textarea {
  font: inherit; color: inherit; background: var(--c-surface);
  border: 1px solid var(--c-edge); border-radius: var(--radius-s);
  padding: 6px var(--s2); min-height: 32px; max-width: 100%; width: 100%;
}
.mgd textarea { min-height: 76px; resize: vertical; line-height: 1.5; }

.mgd-panel { display: flex; flex-direction: column; flex: 1; min-width: 0; overflow: hidden; }
.mgd.is-collapsed { width: 44px; }
.mgd.is-collapsed .mgd-panel { display: none; }
.mgd:not(.is-collapsed) .mgd-rail { display: none; }

.mgd-rail {
  display: flex; flex-direction: column; align-items: center; gap: var(--s2);
  width: 44px; padding: var(--s2) 0; flex-shrink: 0;
}
.mgd-rail-open { width: 32px; min-height: 32px; font-size: 0; padding: 0; }
.mgd-rail-open::before { content: '\2261'; font-size: 20px; display: block; text-align: center; }
.mgd-rail-ticks { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mgd-rail-tick { display: block; width: 4px; height: 22px; border-radius: 2px; background: var(--c-1); }
.mgd-rail-tick[data-parked="true"] { background: var(--c-4); }
.mgd-rail-count { font-size: 11px; color: var(--c-ink-3); }

.mgd-bar {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s2) var(--s2) var(--s4);
  border-bottom: 1px solid var(--c-rule);
}
.mgd-wordmark { font-weight: 600; letter-spacing: -0.02em; margin-inline-end: auto; }
.mgd-views { display: flex; gap: 2px; }
.mgd-views button { font-size: var(--t-1); min-height: 26px; }
.mgd-views button[aria-pressed="true"] { background: var(--c-accent-soft); color: var(--c-ink); }
.mgd-icon { width: 30px; min-height: 30px; padding: 0; text-align: center; font-size: 15px; line-height: 1; }

.mgd-demo-note {
  padding: var(--s2) var(--s4);
  font-size: var(--t-1); line-height: 1.45; color: var(--c-ink-2);
  background: var(--c-sunken);
  border-bottom: 1px solid var(--c-rule);
}
.mgd-head { padding: var(--s3) var(--s4) var(--s2); border-bottom: 1px solid var(--c-rule); }
.mgd-head h2 {
  font-size: var(--t1); font-weight: 600; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mgd-meta { font-size: var(--t-1); line-height: 1.5; color: var(--c-ink-3); }
.mgd-head .mgd-meta { margin-top: 3px; }

.mgd-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--s4) var(--s5); scrollbar-gutter: stable; }
.mgd-empty { color: var(--c-ink-2); padding: var(--s5) 0; max-width: 40ch; }
.mgd-notice { color: var(--c-ink-2); font-size: var(--t-1); padding: var(--s2) 0; }

.mgd-footer {
  border-top: 1px solid var(--c-rule);
  padding: var(--s2) var(--s3);
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s3);
}
.mgd-footer button {
  font-size: var(--t-1);
  text-decoration: underline; text-decoration-color: var(--c-rule-strong);
  text-underline-offset: 3px;
}
.mgd-footer .mgd-forget { margin-inline-start: auto; color: var(--c-ink-2); }

/* ---- instant definition ---- */
.mgd-instant {
  border-inline-start: 2px solid var(--c-2);
  padding: var(--s3) 0 var(--s3) var(--s3);
  margin-top: var(--s4);
}
.mgd-instant h3 { font-size: var(--t0); font-weight: 600; }
.mgd-instant p { margin-top: var(--s2); }
.mgd-instant .mgd-lead { font-weight: 600; }
.mgd-instant.is-arriving { animation: mgd-arrive var(--slow) var(--ease) both; }
.mgd-skeleton { display: grid; gap: 7px; margin-top: var(--s2); }
.mgd-skeleton i { display: block; height: 9px; border-radius: 3px; background: var(--c-sunken); }
.mgd-skeleton i:nth-child(2) { width: 88%; }
.mgd-skeleton i:nth-child(3) { width: 62%; }
@keyframes mgd-arrive { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- threads ---- */
.mgd-thread {
  border-top: 1px solid var(--c-rule);
  border-inline-start: 3px solid var(--c-1);
  padding: var(--s4) 0 var(--s4) var(--s2);
  margin-top: var(--s4);
}
.mgd-thread[data-parked="true"] { border-inline-start-color: var(--c-4); }
.mgd .mgd-quote {
  font: 15px/1.55 var(--c-serif);
  color: var(--c-ink);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.mgd-thread-state { font-size: var(--t-1); color: var(--c-ink-3); margin-top: 3px; }
.mgd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s3); margin-top: var(--s2); }
.mgd-actions button {
  font-size: var(--t-1);
  text-decoration: underline; text-decoration-color: var(--c-rule-strong); text-underline-offset: 3px;
}
.mgd-note { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; margin-top: var(--s3); }
.mgd-note-meta { font-size: var(--t-1); color: var(--c-ink-3); margin-top: 2px; }
.mgd-editor { margin-top: var(--s3); }
.mgd-editor .mgd-meta { margin-bottom: var(--s1); }
.mgd-editor .mgd-actions { margin-top: var(--s2); }

/* ---- replies ---- */
.mgd-replies { margin-top: var(--s4); margin-inline-start: var(--s4); border-top: 1px solid var(--c-rule); }
.mgd-reply {
  background: var(--c-surface);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius);
  padding: var(--s3);
  margin-top: var(--s3);
}
.mgd-reply h3 { font-size: var(--t1); font-weight: 600; line-height: 1.3; text-wrap: pretty; }
.mgd-reply .mgd-kind { font-size: var(--t-1); color: var(--c-ink-3); }
.mgd-reply .mgd-summary { margin-top: var(--s2); color: var(--c-ink-2); text-wrap: pretty; }
.mgd-reply .mgd-replay { margin-top: var(--s2); font-size: var(--t-1); color: var(--c-ink-3); }
.mgd-block { margin-top: var(--s3); text-wrap: pretty; }
.mgd-block > p { line-height: 1.55; overflow-wrap: anywhere; }
.mgd-block-label { font-size: var(--t-1); font-weight: 600; color: var(--c-ink-2); margin-bottom: 2px; }
.mgd-block-note {
  border-inline-start: 2px solid var(--c-rule-strong);
  padding-inline-start: var(--s2);
  color: var(--c-ink-2);
}
.mgd-equation {
  font: 13.5px/1.6 var(--c-mono);
  background: var(--c-sunken); border: 1px solid var(--c-rule); border-radius: var(--radius-s);
  padding: var(--s2) var(--s3); overflow-x: auto; white-space: nowrap;
}
.mgd-illustration { margin-top: var(--s2); color: var(--c-ink-2); font-size: var(--t-1); line-height: 1.5; }
.mgd-reply details { margin-top: var(--s3); border-top: 1px solid var(--c-rule); padding-top: var(--s2); }
.mgd-reply summary { cursor: pointer; min-height: var(--target); padding-block: 4px; font-size: var(--t-1); color: var(--c-ink-2); }
.mgd-reply details ul { display: grid; gap: var(--s2); margin-top: var(--s2); }
.mgd-reply details li { font-size: var(--t-1); line-height: 1.55; color: var(--c-ink-2); padding-inline-start: var(--s3); position: relative; }
.mgd-reply details li::before { content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 1px; background: var(--c-rule-strong); }
.mgd-link { color: var(--c-accent); text-underline-offset: 3px; }

/* ---- try it: sliders, plot, classification ---- */
.mgd-sliders { display: grid; gap: var(--s3); margin-top: var(--s3); }
.mgd-slider label { display: block; font-size: var(--t-1); color: var(--c-ink-2); }
.mgd-slider .mgd-value { float: inline-end; font-family: var(--c-mono); color: var(--c-ink); }
.mgd-slider input[type="range"] {
  width: 100%; min-height: 24px; padding: 0; margin-top: 4px;
  border: 0; background: transparent; accent-color: var(--c-accent);
}
.mgd-plot { margin-top: var(--s3); background: var(--c-sunken); border: 1px solid var(--c-rule); border-radius: var(--radius-s); }
.mgd-plot svg { display: block; width: 100%; height: auto; }
.mgd-axis { stroke: var(--c-rule-strong); stroke-width: 1; }
.mgd-curve { fill: none; stroke: var(--c-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.mgd-tick-text { font: 10px var(--c-sans); fill: var(--c-ink-3); }
.mgd-classification { margin-top: var(--s2); font-size: var(--t0); line-height: 1.5; }
.mgd-classification b { font-weight: 600; }
.mgd-rule-text { margin-top: var(--s2); font-size: var(--t-1); line-height: 1.55; color: var(--c-ink-2); }

/* ---- diagram ---- */
.mgd-diagram { margin-top: var(--s3); }
.mgd-diagram svg { display: block; width: 100%; height: auto; }
.mgd-diagram .node-box { fill: var(--c-sunken); stroke: var(--c-rule-strong); stroke-width: 1; }
.mgd-diagram .node-text { font: 14px var(--c-sans); fill: var(--c-ink); }
.mgd-diagram .edge-line { fill: none; stroke: var(--c-edge); stroke-width: 1; }
.mgd-diagram .edge-text { font: 12px var(--c-sans); fill: var(--c-ink-3); }

/* ---- shelf ---- */
.mgd-shelf { margin-top: var(--s3); display: grid; }
.mgd-shelf li { border-top: 1px solid var(--c-rule); padding: var(--s2) 0 var(--s2) var(--s3); position: relative; line-height: 1.5; }
.mgd-shelf li::before { content: ''; position: absolute; left: 0; top: 16px; width: 6px; height: 1px; background: var(--c-rule-strong); }

/* ---- ask menu ---- */
.mgd-ask-menu { margin-top: var(--s3); border-inline-start: 2px solid var(--c-accent); padding-inline-start: var(--s3); }
.mgd-ask-menu h3 { font-size: var(--t0); font-weight: 600; }
.mgd-ask-menu ul { margin-top: var(--s2); display: grid; gap: 2px; }
.mgd-ask-menu li button { display: flex; width: 100%; align-items: center; gap: var(--s3); }
.mgd-ask-menu .mgd-time { margin-inline-start: auto; font-size: var(--t-1); color: var(--c-ink-3); white-space: nowrap; }

/* ---- library ---- */
.mgd-library h3 { font-size: var(--t0); font-weight: 600; margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--c-rule); }
.mgd-library .mgd-search { margin-top: var(--s4); }
.mgd-library ul { display: grid; gap: var(--s2); margin-top: var(--s2); }
.mgd-library li { line-height: 1.5; }
.mgd-library li .mgd-meta { display: block; }
.mgd-journey { margin-top: var(--s2); border-inline-start: 2px solid var(--c-3); padding-inline-start: var(--s3); }
.mgd-journey h4 { font-size: var(--t-1); font-weight: 600; color: var(--c-ink-2); }

/* ---- selection card ---- */
.mgd-card, .mgd-card * { box-sizing: border-box; }
.mgd-card :where(p, span, div, b, i) { font: var(--t0)/1.5 var(--c-sans); color: inherit; }
.mgd-card button {
  border: 0; background: transparent; color: inherit; font: inherit;
  border-radius: var(--radius-s); min-height: var(--target); padding: 3px 6px; cursor: pointer;
}
.mgd-card button:hover { background: var(--c-sunken); }
.mgd-card :focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.mgd-card .mgd-actions { display: flex; flex-wrap: wrap; align-items: center; }
.mgd-card {
  position: absolute; z-index: 70; width: 268px; max-width: calc(100vw - 24px);
  background: var(--c-surface); color: var(--c-ink);
  border: 1px solid var(--c-edge); border-radius: var(--radius);
  box-shadow: 0 10px 28px -12px rgb(0 0 0 / 28%);
  padding: var(--s3);
  font: var(--t0)/1.5 var(--c-sans);
}
.mgd-card .mgd-card-quote {
  font: 13.5px/1.5 var(--c-serif); color: var(--c-ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mgd-card .mgd-actions { gap: var(--s4); margin-top: var(--s2); }
.mgd-card .mgd-actions button { font-size: var(--t0); text-decoration: none; min-height: var(--target); }
.mgd-card .mgd-actions button:hover { text-decoration: underline; }

/* ---- scrim and sheet handle (narrow screens) ---- */
.mgd-scrim { position: fixed; inset: 0; z-index: 59; background: rgb(0 0 0 / 34%); border: 0; padding: 0; }
.mgd-handle { display: none; }
.mgd-open-fab {
  position: fixed; right: 12px; bottom: 12px; z-index: 58;
  background: var(--m-ink, oklch(0.245 0.016 255));
  color: var(--m-surface, oklch(0.993 0.003 255));
  border: 0; border-radius: 999px; padding: 9px 14px;
  font: 600 13px/1 var(--m-sans, system-ui, sans-serif); cursor: pointer;
  box-shadow: 0 8px 22px -10px rgb(0 0 0 / 45%);
}

@media (max-width: 999px) {
  .mgd {
    inset: auto 0 0 0;
    width: 100%;
    height: min(76dvh, 640px);
    border-inline-start: 0;
    border-top: 1px solid var(--c-rule-strong);
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -12px 34px -18px rgb(0 0 0 / 40%);
    transform: translateY(101%);
    transition: transform var(--slow) var(--ease);
  }
  .mgd.is-open { transform: none; }
  .mgd.is-collapsed { width: 100%; height: min(76dvh, 640px); transform: translateY(101%); }
  .mgd.is-collapsed .mgd-panel { display: flex; }
  .mgd .mgd-rail { display: none; }
  .mgd-handle {
    display: block; width: 40px; height: 4px; border-radius: 2px;
    background: var(--c-rule-strong); margin: var(--s2) auto 0; flex-shrink: 0;
  }
  .mgd-scroll { padding-inline: var(--s3); }
  .mgd-bar { padding-inline: var(--s3) var(--s2); }
  .mgd-demo-note, .mgd-head { padding-inline: var(--s3); }
}
@media (min-width: 1000px) { .mgd-scrim, .mgd-open-fab { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .mgd, .mgd *, .mgd-card { transition: none !important; animation: none !important; }
}