/* ---------------------------------------------------------------------------
   Shared foundation: typefaces, theme tokens, controls, and the rendered
   markdown that the editor preview and the viewer both use, so the owner sees
   exactly what the client sees.

   The reading surface is set like project documentation — Sphinx, Flask,
   Read the Docs: sans running text, a contents rail down the left, tinted
   literals, and admonitions that announce themselves. Source Sans 3 and IBM
   Plex Mono, self-hosted, so a client reading these notes makes no request to
   anyone but us.
   ------------------------------------------------------------------------- */

@font-face {
  font-family: "Doc Sans";
  src: url("/static/fonts/sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Doc Sans";
  src: url("/static/fonts/sans-400i.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Doc Sans";
  src: url("/static/fonts/sans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Doc Mono";
  src: url("/static/fonts/plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Doc Mono";
  src: url("/static/fonts/plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* --- theme ---------------------------------------------------------------
   Light is the default. Dark applies when the reader's system asks for it,
   and either can be forced by a `data-theme` attribute the Worker renders
   from a cookie — so a chosen theme is already correct in the first painted
   frame rather than flashing the other one first.
   ------------------------------------------------------------------------ */

:root {
  color-scheme: light;

  --paper: #ffffff;
  --page: #ffffff;
  --surface: #ffffff;
  --sunk: #f4f6f8;
  --rail: #f6fafd;
  --ink: #32363c;
  --ink-soft: #5b6169;
  --ink-faint: #858c95;
  --rule: #e2e6ea;
  --rule-soft: #eef1f4;

  --accent: #0d5c86;
  --literal: #e9eff3;
  --literal-ink: #1d2b36;
  --code-bg: #f2f8fc;
  --code-edge: #bcd9ec;
  --code-cap: #dceaf4;
  --th-bg: #e4f0f8;
  --th-ink: #0b4a6f;
  --row-hover: rgba(13, 92, 134, 0.045);
  --quote-edge: #a9cee4;
  --rule-accent: #cfe1ed;

  --air: #b8382a;
  --air-ink: #ffffff;
  --air-wash: rgba(184, 56, 42, 0.09);
  --calm: #2e8555;
  --focus: #0d5c86;
  --danger: #c1382c;
  --mark: #b3690f;
  --mark-wash: rgba(179, 105, 15, 0.07);

  --note-fg: #1a6fd4;   --note-bg: #e8f1fd;
  --tip-fg: #2e8555;    --tip-bg: #e7f4ed;
  --warn-fg: #b3690f;   --warn-bg: #fdf2e4;
  --danger-fg: #c1382c; --danger-bg: #fdeceb;
  --imp-fg: #7b3fbf;    --imp-bg: #f3ecfb;

  --sans: "Doc Sans", ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
  --serif: var(--sans);
  --mono: "Doc Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --radius: 4px;
  --shadow: 0 1px 2px rgba(20, 30, 40, 0.06), 0 8px 24px -16px rgba(20, 30, 40, 0.3);
}

/* Dark values live in two places because a media query and an attribute
   selector cannot be combined into one rule. Keep them in step. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --paper: #16181c;
    --page: #16181c;
    --surface: #1c1f25;
    --sunk: #1f232a;
    --rail: #141a20;
    --ink: #d7dbe1;
    --ink-soft: #a2a9b3;
    --ink-faint: #7d848e;
    --rule: #2c3138;
    --rule-soft: #23272d;

    --accent: #6fb3d9;
    --literal: #242a32;
    --literal-ink: #cdd6de;
    --code-bg: #172028;
    --code-edge: #2e4553;
    --code-cap: #1d2b36;
    --th-bg: #1b2b36;
    --th-ink: #9ccbe6;
    --row-hover: rgba(111, 179, 217, 0.06);
    --quote-edge: #35525f;
    --rule-accent: #2b3a45;

    --air: #e2604c;
    --air-ink: #17110f;
    --air-wash: rgba(226, 96, 76, 0.14);
    --calm: #63c08d;
    --focus: #6fb3d9;
    --danger: #ef8175;
    --mark: #e2a04a;
    --mark-wash: rgba(226, 160, 74, 0.08);

    --note-fg: #6ab0f3;   --note-bg: rgba(26, 111, 212, 0.15);
    --tip-fg: #63c08d;    --tip-bg: rgba(46, 133, 85, 0.17);
    --warn-fg: #e2a04a;   --warn-bg: rgba(179, 105, 15, 0.2);
    --danger-fg: #ef8175; --danger-bg: rgba(193, 56, 44, 0.2);
    --imp-fg: #b58ae8;    --imp-bg: rgba(123, 63, 191, 0.2);

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 30px -18px rgba(0, 0, 0, 0.8);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --paper: #16181c;
  --page: #16181c;
  --surface: #1c1f25;
  --sunk: #1f232a;
  --rail: #141a20;
  --ink: #d7dbe1;
  --ink-soft: #a2a9b3;
  --ink-faint: #7d848e;
  --rule: #2c3138;
  --rule-soft: #23272d;

  --accent: #6fb3d9;
  --literal: #242a32;
  --literal-ink: #cdd6de;
  --code-bg: #172028;
  --code-edge: #2e4553;
  --code-cap: #1d2b36;
  --th-bg: #1b2b36;
  --th-ink: #9ccbe6;
  --row-hover: rgba(111, 179, 217, 0.06);
  --quote-edge: #35525f;
  --rule-accent: #2b3a45;

  --air: #e2604c;
  --air-ink: #17110f;
  --air-wash: rgba(226, 96, 76, 0.14);
  --calm: #63c08d;
  --focus: #6fb3d9;
  --danger: #ef8175;
  --mark: #e2a04a;
  --mark-wash: rgba(226, 160, 74, 0.08);

  --note-fg: #6ab0f3;   --note-bg: rgba(26, 111, 212, 0.15);
  --tip-fg: #63c08d;    --tip-bg: rgba(46, 133, 85, 0.17);
  --warn-fg: #e2a04a;   --warn-bg: rgba(179, 105, 15, 0.2);
  --danger-fg: #ef8175; --danger-bg: rgba(193, 56, 44, 0.2);
  --imp-fg: #b58ae8;    --imp-bg: rgba(123, 63, 191, 0.2);

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 30px -18px rgba(0, 0, 0, 0.8);
}

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

/* Several things here are flex/grid containers, which would otherwise beat
   the user-agent rule for [hidden]. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.muted { color: var(--ink-soft); }
.hint, .fineprint { color: var(--ink-faint); font-size: 0.8125rem; }
.wrap { max-width: 60rem; margin: 0 auto; padding: 1.5rem 1.25rem 5rem; }

.wordmark {
  font-family: var(--mono);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
}

/* --- controls ------------------------------------------------------------ */

.btn {
  font: inherit;
  font-size: 0.875rem;
  line-height: 1;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
}
.btn:hover { border-color: var(--ink-faint); }
.btn.primary { background: var(--ink); color: var(--page); border-color: var(--ink); }
.btn.primary:hover { opacity: 0.9; }
.btn.quiet { background: transparent; border-color: transparent; color: var(--ink-soft); }
.btn.quiet:hover { background: var(--sunk); color: var(--ink); }
.btn[disabled] { opacity: 0.45; cursor: default; }

.field { display: flex; flex-direction: column; gap: 0.3125rem; }
.field > span {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.field input {
  font: inherit;
  padding: 0.5625rem 0.625rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  min-width: 0;
}
.field.grow { flex: 1; }

.stack { display: flex; flex-direction: column; gap: 0.875rem; }
.stack-h { display: flex; gap: 0.625rem; align-items: flex-end; flex-wrap: wrap; }

.alert {
  margin: 0;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius);
  background: var(--air-wash);
  color: var(--air);
  border: 1px solid color-mix(in srgb, var(--air) 30%, transparent);
  font-size: 0.875rem;
}

.badge {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.125rem 0.4375rem;
  border-radius: 999px;
  border: 1px solid var(--rule);
  color: var(--ink-faint);
}
.badge.on-air { color: var(--air-ink); background: var(--air); border-color: var(--air); }
.badge.paused { color: var(--ink-faint); }

/* The on-air lamp. Same object everywhere it appears. */
.lamp {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--ink-faint);
  box-shadow: none;
  flex: none;
}
.is-live .lamp, .live .lamp {
  background: var(--air);
  box-shadow: 0 0 0 3px var(--air-wash);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  50% { box-shadow: 0 0 0 6px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .is-live .lamp, .live .lamp { animation: none; }
}

/* --- centred single-card pages ------------------------------------------- */

body.centered {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 1.5rem;
}
.card {
  width: min(24rem, 100%);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 1.75rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.card .stack { gap: 1rem; }
.unlock-title { font-family: var(--serif); font-size: 1.35rem; margin: 0; line-height: 1.3; }
.setup {
  background: var(--sunk);
  padding: 0.75rem;
  border-radius: var(--radius);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.8125rem;
  margin: 0;
}

/* --- owner index ---------------------------------------------------------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 5;
}
.topbar-actions { display: flex; gap: 0.5rem; align-items: center; }
.topbar-actions input[type="search"] {
  font: inherit;
  font-size: 0.875rem;
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  width: 11rem;
}

.create { margin: 0 0 1.5rem; align-items: flex-end; }
.notes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-soft); }
.note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 0.25rem;
  border-bottom: 1px solid var(--rule-soft);
}
.note.archived { opacity: 0.55; }
.note-title { font-weight: 600; text-decoration: none; }
.note-title:hover { text-decoration: underline; }
.note-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--ink-faint);
}
.slug { font-family: var(--mono); font-size: 0.75rem; }
.note-actions { display: flex; gap: 0.25rem; align-items: center; position: relative; }
.empty { color: var(--ink-faint); padding: 2rem 0; text-align: center; }

.warned {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid color-mix(in srgb, var(--warn-fg) 40%, transparent);
  border-left: 4px solid var(--warn-fg);
  border-radius: var(--radius);
  background: var(--warn-bg);
  font-size: 0.9375rem;
}
.warned strong { color: var(--warn-fg); }

.flash {
  border: 1px solid color-mix(in srgb, var(--calm) 45%, var(--rule));
  background: color-mix(in srgb, var(--calm) 8%, var(--surface));
  border-radius: 10px;
  padding: 1rem 1.125rem;
  margin: 0 0 1.5rem;
  box-shadow: var(--shadow);
}
.flash-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.flash-body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.875rem;
  margin: 0.75rem 0;
  font-size: 0.875rem;
}
.flash-body dt { color: var(--ink-faint); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; padding-top: 0.15rem; }
.flash-body dd { margin: 0; }
.flash-value { font-family: var(--mono); font-size: 0.8125rem; overflow-wrap: anywhere; user-select: all; }
.flash-value.pass { font-size: 1rem; letter-spacing: 0.02em; }
.flash-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.flash .hint { margin: 0; }

.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-body {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 10;
  min-width: 11rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.25rem;
  display: flex;
  flex-direction: column;
}
.menu-item {
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  text-decoration: none;
  background: none;
  border: 0;
  color: var(--ink);
  padding: 0.4375rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
}
.menu-item:hover { background: var(--sunk); }
.menu-item.danger { color: var(--danger); }

@media (max-width: 620px) {
  .topbar { flex-wrap: wrap; }
  .topbar-actions input[type="search"] { width: 100%; }
  .note { flex-direction: column; align-items: flex-start; }
}

/* --- rendered documentation ----------------------------------------------
   Sans running text, tinted literals, admonitions that announce themselves,
   and headings that carry a link to themselves. Shared by the editor preview
   and the viewer so the owner sees exactly what the client sees.
   ------------------------------------------------------------------------ */

.md {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  overflow-wrap: break-word;
}
.md > *:first-child { margin-top: 0; }
.md > *:last-child { margin-bottom: 0; }

.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 {
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  margin: 2em 0 0.6em;
  scroll-margin-top: 4.5rem;
}
.md h1 {
  font-size: 2.05em;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: -0.015em;
  margin: 0 0 0.7em;
}
.md h2 {
  font-size: 1.5em;
  padding-bottom: 0.25em;
  border-bottom: 1px solid var(--rule-accent);
}
.md h3 { font-size: 1.2em; }
.md h4 { font-size: 1.05em; }
.md h5, .md h6 {
  font-size: 0.85em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* A heading you can point someone at. Appears on hover, like every wiki. */
.md .anchor {
  float: right;
  margin-left: 0.5em;
  padding: 0 0.15em;
  color: var(--ink-faint);
  text-decoration: none;
  opacity: 0;
  font-weight: 400;
  transition: opacity 100ms ease;
}
.md :is(h1, h2, h3, h4, h5, h6):hover .anchor,
.md .anchor:focus-visible { opacity: 1; }
.md .anchor:hover { color: var(--accent); }

.md p, .md ul, .md ol, .md blockquote, .md pre, .md table { margin: 0 0 1em; }

.md ul, .md ol { padding-left: 1.6em; }
.md li { margin: 0.3em 0; }
.md li::marker { color: var(--ink-faint); }
.md li > input[type="checkbox"] {
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.5em;
  margin-left: -1.6em;
  vertical-align: -0.06em;
  accent-color: var(--calm);
}
/* Done items step back so the remaining work is what stands out. */
.md li:has(> input[type="checkbox"]:checked) { color: var(--ink-faint); }
.md ul:has(> li > input[type="checkbox"]) { list-style: none; padding-left: 1.6em; }

.md blockquote {
  border-left: 3px solid var(--quote-edge);
  padding-left: 1em;
  margin-left: 0;
  color: var(--ink-soft);
}
.md blockquote > *:last-child { margin-bottom: 0; }

.md hr { border: 0; border-top: 1px solid var(--rule-accent); margin: 2em 0; }

.md a {
  color: var(--accent);
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.15em;
}

/* Inline literals read as literals, the way every docs theme sets them. */
.md :not(pre) > code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--literal);
  color: var(--literal-ink);
  padding: 0.13em 0.35em;
  border-radius: 3px;
}

.md pre {
  position: relative;
  background: var(--code-bg);
  border: 1px solid var(--code-edge);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 0.85em 1em;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.86em;
  line-height: 1.55;
}
.md pre code { background: none; padding: 0; font-size: inherit; }

/* The break-word above is for prose; inherited into code it would re-wrap a
   long config line mid-token, so one command reads as two. */
.md pre, .md pre code {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/* highlight.js ships `pre code.hljs { padding: 1em; overflow-x: auto }`, which
   ties our padding and makes the inner <code> a second scroll container inside
   the <pre>. Take both back: one box, one scrollbar, our spacing. */
.md pre code.hljs {
  padding: 0;
  background: none;
  overflow: visible;
}

/* Copy the block, which is the whole reason a config is in the notes. */
.md .copy {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--code-edge);
  border-radius: 3px;
  background: var(--code-cap);
  color: var(--accent);
  cursor: pointer;
  opacity: 0;
  transition: opacity 100ms ease;
}
.md pre:hover .copy, .md .copy:focus-visible { opacity: 1; }
.md .copy:hover { color: var(--ink); border-color: var(--ink-faint); }
.md .copy.done { color: var(--calm); border-color: var(--calm); opacity: 1; }

.md table {
  border-collapse: collapse;
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  font-size: 0.94em;
  line-height: 1.5;
  border: 1px solid var(--code-edge);
  border-radius: var(--radius);
}
.md th, .md td {
  padding: 0.5em 0.9em;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule-soft);
}
.md thead th {
  font-weight: 600;
  color: var(--th-ink);
  background: var(--th-bg);
  border-bottom: 2px solid var(--code-edge);
}
.md tbody tr:hover { background: var(--row-hover); }
.md tbody tr:last-child td { border-bottom: 0; }

.md img { max-width: 100%; height: auto; }

/* Numbered figures, captioned from the image's alt text. */
.md figure { margin: 1.6em 0; }
.md figure img {
  display: block;
  border: 1px solid var(--code-edge);
  border-radius: var(--radius);
}
.md figcaption {
  font-size: 0.86em;
  line-height: 1.45;
  color: var(--ink-soft);
  margin-top: 0.6em;
}
.md .fig-label { font-weight: 600; color: var(--ink); }

/* Admonitions, from GitHub-style `> [!NOTE]` blockquotes. */
.md .callout {
  --callout-fg: var(--note-fg);
  --callout-bg: var(--note-bg);
  margin: 1.4em 0;
  padding: 0.8em 1em;
  border-left: 4px solid var(--callout-fg);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--callout-bg);
}
.md .callout > *:last-child { margin-bottom: 0; }
.md .callout-label {
  font-size: 0.76em;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--callout-fg);
  margin: 0 0 0.35em;
}
.md .callout-tip { --callout-fg: var(--tip-fg); --callout-bg: var(--tip-bg); }
.md .callout-warning { --callout-fg: var(--warn-fg); --callout-bg: var(--warn-bg); }
.md .callout-caution { --callout-fg: var(--danger-fg); --callout-bg: var(--danger-bg); }
.md .callout-important { --callout-fg: var(--imp-fg); --callout-bg: var(--imp-bg); }

.md-fallback {
  font-family: var(--mono);
  font-size: 0.875rem;
  white-space: pre-wrap;
  background: var(--sunk);
  padding: 1rem;
  border-radius: var(--radius);
}