/*
  bulleted.app's reading surface, carried as a tile.

  The tokens, the two typefaces and the row geometry are bulleted-app's own
  (src-js/styles/base/variables.css, theme.css, outline/node.css), so a bound outline reads as
  the same document it is on bulleted.app rather than as a lookalike. Copied rather than linked:
  a served site's CSP is `default-src 'self'`, so the fonts are blobs in this tile and nothing
  here names another origin. Latin subsets only; any other script falls back to the platform.

  Everything editing-shaped is left out — drag handles, carets, hover actions, comments. Folding
  is kept, because folding is reading.
*/

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/archivo.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/bricolage.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font-display: "Bricolage Grotesque", "Archivo", system-ui, sans-serif;
  --font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", roboto, sans-serif;
  --font-mono: ui-monospace, sfmono-regular, "SF Mono", menlo, consolas, monospace;

  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: clamp(1.75rem, 1.25rem + 1.8vw, 2.375rem);
  --line-tight: 1.2;
  --line-snug: 1.38;
  --line-base: 1.55;
  --track-tight: -0.02em;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --measure: min(100%, 88ch);

  --outline-indent: 1.75rem;
  --marker-col: 1.125rem;
  --fold-col: 0.75rem;
  --row-gap: 0.25rem;
  --radius: 5px;
  --radius-sm: 3px;

  --color-bg: oklch(98.6% 0.005 78);
  --color-bg-subtle: oklch(96.3% 0.007 76);
  --color-fg: oklch(24% 0.014 62);
  --color-fg-muted: oklch(48% 0.013 64);
  --color-fg-faint: oklch(62% 0.011 68);
  --color-border: oklch(87.5% 0.01 74);
  --color-rule: oklch(92.5% 0.008 74);
  --color-accent: oklch(56% 0.155 55);
  --color-accent-text: oklch(47% 0.145 50);
  --color-focus: oklch(56% 0.155 55);
}

/* The dark palette is bulleted-app's authored one, not an inversion, and it opens the line
   height because light type on a dark ground reads tighter. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: oklch(20.5% 0.01 72);
    --color-bg-subtle: oklch(24.5% 0.011 72);
    --color-fg: oklch(92.5% 0.008 80);
    --color-fg-muted: oklch(70% 0.013 76);
    --color-fg-faint: oklch(57% 0.013 74);
    --color-border: oklch(34% 0.013 72);
    --color-rule: oklch(29.5% 0.012 72);
    --color-accent: oklch(76% 0.13 62);
    --color-accent-text: oklch(78% 0.12 64);
    --color-focus: oklch(76% 0.13 62);
    --line-snug: 1.45;
    --line-base: 1.62;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--line-base);
}

[hidden] {
  display: none !important;
}

a {
  color: var(--color-accent-text);
  text-underline-offset: 0.15em;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.page {
  flex: 1 0 auto;
  width: 100%;
  max-width: 52rem;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4) var(--space-6);
}

.banner {
  margin: 0 0 var(--space-6);
}

.banner img {
  display: block;
  width: 100%;
  aspect-ratio: 1.91;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--color-bg-subtle);
}

.head {
  margin-block-end: var(--space-6);
}

.title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: var(--line-tight);
  overflow-wrap: anywhere;
}

.description {
  margin: var(--space-2) 0 0;
  max-width: var(--measure);
  color: var(--color-fg-muted);
  white-space: pre-wrap;
}

.empty {
  color: var(--color-fg-muted);
}

/* ── The tree ─────────────────────────────────────────────────────────────── */

.outline,
.outline-children {
  list-style: none;
  margin: 0;
  padding: 0;
}

.outline-children {
  padding-inline-start: var(--outline-indent);
  position: relative;
}

/* The rail hangs from the fold triangle, which is what folds these children away. */
.outline-children::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(var(--fold-col) / 2);
  width: 1px;
  background: var(--color-rule);
  border-radius: 1px;
}

.bullet:hover > .outline-children::before {
  background: var(--color-accent);
}

@media (prefers-reduced-motion: no-preference) {
  .outline-children::before {
    transition: background-color 160ms ease-out;
  }
}

.bullet {
  position: relative;
}

.bullet-row {
  display: flex;
  align-items: flex-start;
  gap: var(--row-gap);
  min-height: 1.55rem;
  padding-block: 1px;
}

.bullet-fold {
  flex: 0 0 auto;
  width: var(--fold-col);
  height: 1.5em;
}

.bullet-fold-button {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-fg-faint);
  font: inherit;
  cursor: pointer;
  position: relative;
}

/* 24px of pointer target without moving a drawn pixel. */
.bullet-fold-button::after {
  content: "";
  position: absolute;
  inset: -1px -6px;
}

.bullet-fold-button::before {
  content: "";
  border-inline-start: 4px solid transparent;
  border-inline-end: 4px solid transparent;
  border-block-start: 5px solid currentcolor;
}

.bullet-fold-button[aria-expanded="false"]::before {
  transform: rotate(-90deg);
}

@media (hover: hover) {
  .bullet-fold-button:hover {
    color: var(--color-fg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .bullet-fold-button::before {
    transition: transform 120ms ease-out;
  }
}

.bullet-marker {
  flex: 0 0 auto;
  width: var(--marker-col);
  height: 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-fg-faint);
}

.bullet-marker::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentcolor;
}

.bullet-text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font: inherit;
  line-height: var(--line-base);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.bullet-text .link,
.bullet-text .mention,
.bullet-note .link,
.bullet-note .mention {
  color: var(--color-accent-text);
}

.bullet-text .tag,
.bullet-note .tag {
  color: var(--color-accent-text);
}

.bullet-unresolved {
  color: var(--color-fg-muted);
  font-style: italic;
}

/* ── Layouts. Every rule is scoped `> .bullet-row`, because a bullet's children live inside
   its own <li> and a descendant selector would restyle the whole subtree. ───────────── */

.bullet[data-layout="h1"] > .bullet-row .bullet-text,
.bullet[data-layout="h2"] > .bullet-row .bullet-text,
.bullet[data-layout="h3"] > .bullet-row .bullet-text {
  font-family: var(--font-display);
  letter-spacing: var(--track-tight);
  line-height: var(--line-tight);
}

.bullet[data-layout="h1"] > .bullet-row .bullet-text {
  font-size: var(--text-xl);
  font-weight: 700;
}

.bullet[data-layout="h2"] > .bullet-row .bullet-text {
  font-size: var(--text-lg);
  font-weight: 650;
}

.bullet[data-layout="h3"] > .bullet-row .bullet-text {
  font-weight: 650;
  letter-spacing: 0;
}

.bullet[data-layout="h1"]:not(:first-child),
.bullet[data-layout="h2"]:not(:first-child),
.bullet[data-layout="h3"]:not(:first-child) {
  margin-block-start: var(--space-4);
}

.bullet[data-layout="h1"] > .bullet-row .bullet-marker::before,
.bullet[data-layout="h2"] > .bullet-row .bullet-marker::before,
.bullet[data-layout="h3"] > .bullet-row .bullet-marker::before {
  display: none;
}

.bullet[data-layout="h1"] > .bullet-row > .bullet-fold,
.bullet[data-layout="h1"] > .bullet-row > .bullet-marker,
.bullet[data-layout="h2"] > .bullet-row > .bullet-fold,
.bullet[data-layout="h2"] > .bullet-row > .bullet-marker {
  height: calc(var(--text-lg) * var(--line-tight));
}

.bullet[data-layout="codeBlock"] > .bullet-row .bullet-text {
  font-family: var(--font-mono);
  line-height: var(--line-snug);
  background: var(--color-bg-subtle);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  overflow-x: auto;
  overflow-wrap: normal;
}

.bullet[data-layout="quoteBlock"] > .bullet-row .bullet-text {
  padding-inline-start: var(--space-3);
  border-inline-start: 1px solid var(--color-border);
  color: var(--color-fg-muted);
  font-style: italic;
}

/* ── Todos: a drawn square in the marker slot, ticked in the accent when complete. ─── */

.bullet-check {
  flex: 0 0 auto;
  width: var(--marker-col);
  height: 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-fg-faint);
}

.bullet-check::before {
  content: "";
  width: 0.8em;
  height: 0.8em;
  border: 1.5px solid currentcolor;
  border-radius: 2px;
}

.bullet[data-completed] > .bullet-row > .bullet-check {
  color: var(--color-accent);
  position: relative;
}

.bullet[data-completed] > .bullet-row > .bullet-check::after {
  content: "";
  position: absolute;
  width: 0.24em;
  height: 0.45em;
  margin-block-start: -0.08em;
  border: solid currentcolor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.bullet[data-completed] > .bullet-row > .bullet-text {
  color: var(--color-fg-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* ── Mirrors: a rotated square in the accent, and a dashed rail under what they bring in. ── */

.bullet[data-kind="mirror"] > .bullet-row .bullet-marker {
  color: var(--color-accent);
}

.bullet[data-kind="mirror"] > .bullet-row .bullet-marker::before {
  width: 6px;
  height: 6px;
  border-radius: 1px;
  transform: rotate(45deg);
}

.bullet[data-kind="mirror"] > .outline-children::before {
  background: none;
  border-inline-start: 1px dashed var(--color-accent);
  opacity: 0.6;
  width: 0;
}

.bullet.is-transcluded > .bullet-row .bullet-marker {
  color: var(--color-fg-faint);
}

/* A contributor's bullet: the marker becomes a ring, so authorship survives greyscale. */
.bullet[data-contributed] > .bullet-row .bullet-marker::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px currentcolor;
  width: 6px;
  height: 6px;
}

/* ── Notes and embeds, aligned under the bullet's text. ─────────────────────── */

.bullet-note,
.bullet > .bullet-embed {
  margin-inline-start: calc(var(--fold-col) + var(--row-gap) + var(--marker-col) + var(--row-gap));
}

.bullet-note {
  margin-block: var(--space-1) 0;
  max-width: var(--measure);
  color: var(--color-fg-muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.bullet-embed {
  display: grid;
  gap: 2px;
  max-width: 32rem;
  margin-block: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
}

a.bullet-embed:hover .bullet-embed-title {
  text-decoration: underline;
}

.bullet-embed-image {
  width: 100%;
  aspect-ratio: 1.91;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin-block-end: var(--space-2);
  background: var(--color-bg-subtle);
}

.bullet-embed-site {
  font-size: var(--text-xs);
  color: var(--color-fg-faint);
}

.bullet-embed-title {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.bullet-embed-uri {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 400;
}

.bullet-embed-subtitle {
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
  overflow-wrap: anywhere;
}

/* ── Colophon ───────────────────────────────────────────────────────────── */

.colophon {
  width: 100%;
  max-width: 52rem;
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-fg-faint);
  overflow-wrap: anywhere;
}

.colophon p {
  margin: var(--space-1) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
}

.colophon a {
  color: var(--color-fg-muted);
}

@media (max-width: 30rem) {
  :root {
    --outline-indent: 1.125rem;
  }

  .page {
    padding-block-start: var(--space-6);
  }
}