/* Research site house style v0, pilot (life-itself/design: research-flowershow-theme/, project 2640).
   From the Claude Markdown previewer: one sans (Inter) at 16px on a 1.6 line, a 36em column, headings in the
   same face with the hierarchy carried by space, warm greys with every border and fill a tint of the ink, one
   accent. Titles in the same face, as the viewer and Anthropic's research pages do. js/house.js (loaded
   through config.json "head") adds footnote cards and a contents rail, which replaces the contents panel. */

@import url("https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400..650&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  --body: 16px;
  --leading: 1.6;
  --measure: 36em;
  --sans: "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --ink-3: #898781;
  --accent: #184f95;
  --accent-bg: #e7f1fb;
  --line: hsl(0 0% 4% / 10%);
  --line-2: hsl(0 0% 4% / 20%);
  --line-3: hsl(0 0% 4% / 40%);
  --tint: hsl(0 0% 4% / 5%);
  --tick: hsl(0 0% 4% / 25%);
  --paper: #fff;

  --font-body: var(--sans);
  --font-heading: var(--sans);
}

body { font-family: var(--sans); color: var(--ink); background: var(--paper); font-optical-sizing: auto; }

/* Frame: quieter navbar and footer in the same face. */
.site-navbar-site-name { font-family: var(--sans); font-weight: 600; letter-spacing: -0.01em; }
.site-footer { font-family: var(--sans); }

/* Contents: the rail from js/house.js replaces the right-hand panel, so drop its grid column and centre the text. */
.page-toc-container, .layout-inner-right { display: none !important; }
@media (min-width: 1024px) {
  .layout-inner.has-toc { grid-template-columns: minmax(0, 1fr) !important; padding-left: 3rem !important; }
  .layout-inner.has-sidebar-and-toc { grid-template-columns: var(--width-sidebar, 16rem) minmax(0, 1fr) !important; }
}
.layout-inner-center { width: 100%; max-width: var(--measure); margin-inline: auto; }

/* Page header. */
.page-header { max-width: var(--measure); }
.page-header-title { font-family: var(--sans) !important; font-weight: 600 !important; font-size: clamp(30px, 4vw, 40px) !important; line-height: 1.15 !important; letter-spacing: -0.022em !important; color: var(--ink); text-wrap: balance; }
.page-header-description { font-family: var(--sans); font-size: 1.15rem; line-height: 1.45; color: var(--ink-2); text-wrap: balance; }

/* ── Prose ─────────────────────────────────────────────────── */
.page-body { max-width: var(--measure); }
.rendered-mdx:not(.is-plain) { font-family: var(--sans) !important; font-size: var(--body) !important; line-height: var(--leading) !important; color: var(--ink); max-width: var(--measure); overflow-wrap: break-word; }
.rendered-mdx:not(.is-plain) :is(p, li, blockquote) { font-size: inherit; line-height: inherit; text-wrap: pretty; }
.rendered-mdx:not(.is-plain) > * { margin-block: 0; }
.rendered-mdx:not(.is-plain) > * + * { margin-block-start: 1em; }
.rendered-mdx:not(.is-plain) :is(h1, h2, h3, h4) { font-family: var(--sans); color: var(--ink); letter-spacing: -0.01em; text-wrap: balance; }
.rendered-mdx:not(.is-plain) h2 { font-size: 1.6em; line-height: 1.2; font-weight: 460; }
.rendered-mdx:not(.is-plain) h3 { font-size: 1.25em; line-height: 1.3; font-weight: 540; }
.rendered-mdx:not(.is-plain) h4 { font-size: 1.05em; line-height: 1.3; font-weight: 540; }
.rendered-mdx:not(.is-plain) * + h2 { margin-block-start: 2.75em; }
.rendered-mdx:not(.is-plain) * + h3 { margin-block-start: 2em; }
.rendered-mdx:not(.is-plain) * + h4 { margin-block-start: 1.667em; }
.rendered-mdx:not(.is-plain) :is(h2, h3, h4) + * { margin-block-start: 0.667em; }
.rendered-mdx:not(.is-plain) :is(h2, h3, h4) + :is(h3, h4) { margin-block-start: 0.9em; }
.rendered-mdx:not(.is-plain) :is(table, ul, ol, pre, figure, [data-callout]) + * { margin-block-start: 1.5em; }

.rendered-mdx:not(.is-plain) a { color: var(--accent); font-weight: inherit; text-decoration-line: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.rendered-mdx:not(.is-plain) a:hover { text-decoration-color: currentColor; }
.rendered-mdx:not(.is-plain) :is(h2, h3, h4) a { color: inherit; text-decoration: none; }
.rendered-mdx:not(.is-plain) :is(strong, b) { font-weight: 600; color: inherit; }

.rendered-mdx:not(.is-plain) :is(ul, ol) { padding-inline-start: 2em; }
.rendered-mdx:not(.is-plain) li { padding-inline-start: 0.5em; margin: 0; }
.rendered-mdx:not(.is-plain) li + li { margin-block-start: 0.333em; }
.rendered-mdx:not(.is-plain) li > p { margin: 0; }
.rendered-mdx:not(.is-plain) li::marker { color: var(--ink-2); }

.rendered-mdx:not(.is-plain) blockquote:not([data-callout]) { margin-inline: 0; padding: 0 0 0 1.1em; border: 0; border-inline-start: 2px solid var(--line-3); font-style: normal; font-weight: 400; color: var(--ink); quotes: none; }
.rendered-mdx:not(.is-plain) blockquote p::before, .rendered-mdx:not(.is-plain) blockquote p::after { content: none; }

.rendered-mdx:not(.is-plain) :not(pre) > code { font-family: var(--mono); font-size: calc(var(--body) - 2px); font-weight: 400; background: var(--tint); border: 0.5px solid var(--line-2); border-radius: 4px; padding: 0.12em 0.36em; }
.rendered-mdx:not(.is-plain) :not(pre) > code::before, .rendered-mdx:not(.is-plain) :not(pre) > code::after { content: none; }
.rendered-mdx:not(.is-plain) pre { font-family: var(--mono); font-size: calc(var(--body) - 2px); line-height: 1.54; border-radius: 9px; }

.rendered-mdx:not(.is-plain) table { display: table; width: 100%; max-width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: 6px; font-size: 0.9375em; line-height: 1.5; font-variant-numeric: tabular-nums lining-nums; }
.rendered-mdx:not(.is-plain) :is(th, td) { padding: 0.5em 0.875em; text-align: start; vertical-align: top; border: 0; }
.rendered-mdx:not(.is-plain) th { font-weight: 600; line-height: 1.3; vertical-align: bottom; background: var(--tint); box-shadow: inset 0 -1px var(--line); color: var(--ink); }
.rendered-mdx:not(.is-plain) tbody tr + tr td { border-top: 1px solid var(--line); }
.rendered-mdx:not(.is-plain) hr { border: 0; border-top: 1px solid var(--line); margin-block: 2.75em; }
.rendered-mdx:not(.is-plain) img { border-radius: 4px; }

/* Callouts: each type in its own colour: a soft tint of it, a fine border, the title and icon in a deeper shade.
   The course reader boxes below set --callout-color per type (reflect, exercise, poll, key ideas). */
.rendered-mdx [data-callout] { --c: var(--callout-color, var(--accent)); font-family: var(--sans); font-size: 0.95em; line-height: 1.55; color: var(--ink); background: color-mix(in srgb, var(--c) 8%, var(--paper)) !important; border: 1px solid color-mix(in srgb, var(--c) 28%, var(--paper)) !important; border-radius: 10px !important; padding: 0.95em 1.15em 1.05em !important; box-shadow: none !important; }
.rendered-mdx [data-callout] > [data-callout-title] { font-family: var(--sans); font-weight: 600; font-size: 0.95em; letter-spacing: 0; color: color-mix(in srgb, var(--c) 72%, var(--ink)) !important; margin-bottom: 0.4em; }
.rendered-mdx [data-callout] > [data-callout-title]::before { background-color: color-mix(in srgb, var(--c) 72%, var(--ink)) !important; }
.rendered-mdx [data-callout] [data-callout-body] > * + * { margin-block-start: 0.75em; }
.rendered-mdx [data-callout] [data-callout-body] > :first-child { margin-top: 0; }
.rendered-mdx [data-callout] [data-callout-body] > :last-child { margin-bottom: 0; }
.rendered-mdx [data-callout] [data-callout-body] :is(p, li) { font-size: inherit; line-height: inherit; }
.rendered-mdx [data-callout] [data-callout-body] p:empty { display: none; }
.rendered-mdx [data-callout] [data-callout] { background: var(--paper) !important; }

/* Footnotes: small markers and a quiet end section; js/house.js opens them as cards. */
.rendered-mdx sup { font-size: 0.75em; line-height: 0; }
.rendered-mdx sup a[data-footnote-ref] { color: var(--ink-2) !important; text-decoration-color: var(--line-3) !important; padding-inline: 0.15em; border-radius: 3px; font-weight: 500; }
.rendered-mdx sup a[aria-expanded="true"] { background: var(--accent-bg); }
.rendered-mdx .footnotes { margin-block-start: 3em; padding-block-start: 1em; border-top: 1px solid var(--line); font-size: 0.875em; color: var(--ink-2); }
.rendered-mdx .footnotes h2 { font-size: 0.875rem !important; font-weight: 600 !important; margin: 0 0 0.75em !important; color: var(--ink-2) !important; }
.rendered-mdx .footnotes li + li { margin-block-start: 0.5em; }
.rendered-mdx .footnotes a { color: var(--ink-2); overflow-wrap: anywhere; }
.rendered-mdx .landed { animation: landed 1.6s ease-out; border-radius: 3px; }
@keyframes landed { from { background: var(--accent-bg); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .rendered-mdx .landed { animation: none; } }

.fn-pop { position: absolute; z-index: 60; width: 20rem; max-width: calc(100vw - 2rem); padding: 1rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; background: var(--paper); color: var(--ink); border: 0.5px solid var(--line-2); border-radius: 10px; box-shadow: 0 4px 20px hsl(0 0% 0% / 10%), 0 1px 3px hsl(0 0% 0% / 8%); font: 15px/1.55 var(--sans); }
.fn-pop p { margin: 0; overflow-wrap: anywhere; }
.fn-pop a { color: var(--accent); text-underline-offset: 3px; }
.fn-pop button { font: 500 13px/1 var(--sans); color: var(--ink-2); background: none; border: 0; border-radius: 6px; padding: 6px 8px; margin: 0 -8px -6px; cursor: pointer; }
.fn-pop button:hover { background: var(--tint); color: var(--ink); }

/* Contents rail (js/house.js): ticks in the gutter; hover opens the outline. */
.rail { position: fixed; z-index: 40; font-family: var(--sans); }
.rail[hidden] { display: none; }
.rail .ticks { list-style: none; margin: 0; padding: 6px 0 6px 6px; width: 2rem; display: flex; flex-direction: column; }
.rail .ticks li { flex: 0 0 8px; display: flex; align-items: center; }
.rail .ticks span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--tick); transform-origin: 0; scale: 0.78 1; }
.rail .ticks li[data-level="1"] span { translate: 3px; scale: 0.5 1; }
.rail .ticks li[data-read] span { background: var(--ink-3); }
.rail .ticks li[data-current] span { background: var(--accent); translate: 0; scale: 1 1.5; }
.rail .outline { position: absolute; top: 0; left: -4px; width: 17rem; max-height: calc(100vh - 7rem); overflow-y: auto; padding: 5px 4px; border-radius: 8px; background: var(--paper); border: 0.5px solid var(--line-2); box-shadow: 0 4px 20px hsl(0 0% 0% / 10%); opacity: 0; visibility: hidden; transition: opacity 0.15s ease-out, visibility 0.15s; }
.rail:hover .outline, .rail:focus-within .outline { opacity: 1; visibility: visible; }
.rail .outline ol { list-style: none; margin: 0; padding: 0; }
.rail .outline button { width: 100%; min-height: 1.5rem; display: flex; align-items: center; gap: 8px; padding: 2px 8px 2px 6px; font: 13px/1.25 var(--sans); color: var(--ink-2); background: none; border: 0; border-radius: 6px; text-align: start; cursor: pointer; }
.rail .outline button:hover { background: var(--tint); color: var(--ink); }
.rail .outline .t { flex: none; width: 18px; display: flex; align-items: center; }
.rail .outline .t::before { content: ""; display: block; width: 14px; height: 2px; border-radius: 2px; background: var(--tick); }
.rail .outline li[data-level="1"] .t::before { width: 9px; margin-inline-start: 3px; }
.rail .outline li[data-read] .t::before { background: var(--ink-3); }
.rail .outline li[data-current] .t::before { background: var(--accent); width: 18px; height: 3px; margin: 0; }
.rail .outline li[data-current] button { color: var(--ink); font-weight: 500; }
.rail .outline .x { flex: 1; min-width: 0; }
.rail .outline li[data-level="1"] .x { padding-inline-start: 0.625rem; }

.inline-toc { margin-top: 1.5em; font-family: var(--sans); font-size: 14px; border: 1px solid var(--line); border-radius: 6px; }
.inline-toc summary { cursor: pointer; padding: 0.6em 0.9em; color: var(--ink-2); font-weight: 500; }
.inline-toc ol { list-style: none; margin: 0; padding: 0 0.9em 0.75em; }
.inline-toc li { margin-block: 0.35em; }
.inline-toc li[data-level="1"] { padding-inline-start: 1em; color: var(--ink-2); }
.inline-toc a { color: inherit; text-decoration: none; }
.inline-toc a:hover { color: var(--accent); }
.inline-toc[hidden] { display: none; }

@media print { .rail, .inline-toc, .fn-pop { display: none !important; } }