/*
  Stylepack default1: a quiet, harbor-toned reading style for HTML snippets.

  NOTE: This file is frozen. Snippets link to it by path and expect it to look the same forever, so a fix or a new idea
  goes into the next stylepack (default2, ...) rather than into this file. See README.md next to it.

  The design comes from a Claude artifact ("The Harbor Almanac", a specimen page that exercises every Markdown-ish
  construct). Inter for text, JetBrains Mono Nerd Font for code, a single reading column about 102 characters wide, and
  a blue-teal accent with a warm "sun" secondary. Light and dark themes follow the OS setting, and a page can force one
  with <html data-theme="light"> or <html data-theme="dark">.

  Sections, in order: fonts, tokens, page and headings, inline text, lists, quotes, code and terminal, tables, figures,
  odds and ends, Mermaid.
*/

/* ---- Fonts --------------------------------------------------------------------------------------------------------

   Both families are vendored so the pack never changes underneath a snippet. Inter is the official variable build from
   rsms/inter v4.1. JetBrains Mono comes from the Nerd Fonts v3.5.1 release ("Nerd Font" variant, so icons are wider
   than one cell and ligatures are kept), converted from TTF to WOFF2 without other changes. Google Fonts does not serve
   the Nerd Font variant at all, which is the main reason to vendor rather than link.

   Each mono file is about 1 MB because of the icon glyphs. Browsers only fetch a face once text actually uses it, so
   a page without bold italic code never downloads that file. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/InterVariable.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/InterVariable-Italic.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrainsMono Nerd Font";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/JetBrainsMonoNerdFont-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrainsMono Nerd Font";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/JetBrainsMonoNerdFont-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrainsMono Nerd Font";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/JetBrainsMonoNerdFont-Italic.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrainsMono Nerd Font";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/JetBrainsMonoNerdFont-BoldItalic.woff2") format("woff2");
}

/* ---- Tokens -------------------------------------------------------------------------------------------------------

   Snippets that add their own CSS should build on these custom properties rather than hard-code colors, so that custom
   pieces follow the light/dark switch along with everything else. The terminal tokens are the same in both themes on
   purpose: a terminal block reads as a dark screen embedded in the page either way.

   The dark palette appears twice because there are two ways into it: the OS preference (unless the page pinned light)
   and an explicit data-theme="dark". CSS has no way to share one block between those two selectors. */

:root {
  --bg: #f3f5f6;
  --surface: #ffffff;
  --fg: #1b2530;
  --muted: #5a6875;
  --rule: #d4dbe0;
  --accent: #1f6f8b;
  --accent-soft: #dcecf2;
  --mark: #fbe7b5;
  --sun: #e3a44a;
  --term-bg: #0d1b24;
  --term-fg: #d7e3ea;
  --term-seg2: #24404f;
  --term-dim: #7890a0;
  --term-ok: #7fd18b;
  --term-bad: #ef7d7d;
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrainsMono Nerd Font", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f161d;
    --surface: #16212b;
    --fg: #e3e9ee;
    --muted: #93a3b1;
    --rule: #2a3a47;
    --accent: #6cc0dc;
    --accent-soft: #173341;
    --mark: #5a4a1f;
    --sun: #f0b863;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f161d;
  --surface: #16212b;
  --fg: #e3e9ee;
  --muted: #93a3b1;
  --rule: #2a3a47;
  --accent: #6cc0dc;
  --accent-soft: #173341;
  --mark: #5a4a1f;
  --sun: #f0b863;
  color-scheme: dark;
}

/* ---- Page and headings --------------------------------------------------------------------------------------------

   Content goes in a <main>. Its direct children get even vertical rhythm from the "* + *" rule rather than from their
   own margins, so block elements zero the browser's default margins. That reset is wrapped in :where() on purpose:
   :where() has zero specificity, so the rhythm rule beats it. A plain "p { margin-block: 0 }" would tie with
   "main > * + *" and, coming later, win, leaving consecutive paragraphs flush against each other. The artifact this
   pack came from had exactly that bug. Headings do override the rhythm, with their own larger margin-top.

   Wide things (tables, code, figures) never widen the page; they scroll inside their own boxes. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding: 0 16px;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.65 var(--font-body);
}
main { max-width: 102ch; margin: 0 auto; padding-block: 48px 96px; }
:where(p, ul, ol, pre, dl, blockquote, figure) { margin-block: 0; }
main > * + * { margin-top: 1.1em; }
img, svg, video { max-width: 100%; }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); line-height: 1.2; text-wrap: balance; margin-bottom: 0; }
h1 { font-size: 2.6rem; font-weight: 700; margin-top: 0; letter-spacing: -0.025em; }
h2 { font-size: 1.75rem; font-weight: 700; margin-top: 2.2em; padding-bottom: .3em; border-bottom: 1px solid var(--rule); }
h3 { font-size: 1.35rem; font-weight: 600; margin-top: 1.8em; }
h4 { font-size: 1.12rem; font-weight: 700; margin-top: 1.6em; }
h5 { font-size: 1rem; font-weight: 700; margin-top: 1.4em; }
h6 { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-top: 1.4em; }

/* A small mono kicker above the h1, and a muted italic standfirst below it. */
.eyebrow { font: 600 .75rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--accent); }
.lede { font-size: 1.2rem; color: var(--muted); font-style: italic; }

/* ---- Inline text -------------------------------------------------------------------------------------------------- */

a { color: var(--accent); text-underline-offset: 3px; }
a:focus-visible, summary:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
mark { background: var(--mark); color: inherit; padding: 0 .15em; }
code, kbd, pre, samp { font-family: var(--font-mono); font-size: .86em; }
:not(pre) > code { background: var(--accent-soft); padding: .1em .35em; border-radius: 4px; }
kbd { border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 4px; padding: 0 .4em; background: var(--surface); }
del { color: var(--muted); }

/* ---- Lists --------------------------------------------------------------------------------------------------------

   ul.tasks is a checklist: each li holds a disabled checkbox and a label, like a rendered Markdown task list. */

ul, ol { padding-left: 1.5em; }
li + li { margin-top: .25em; }
li > ul, li > ol { margin-top: .25em; }
ul.tasks { list-style: none; padding-left: .2em; }
ul.tasks li { display: flex; gap: .6em; align-items: baseline; }
ul.tasks input { accent-color: var(--accent); }

/* ---- Quotes ------------------------------------------------------------------------------------------------------- */

blockquote { margin-inline: 0; padding: .2em 0 .2em 1.2em; border-left: 3px solid var(--accent); color: var(--muted); font-style: italic; }
blockquote blockquote { border-left-color: var(--rule); margin-top: .6em; }
blockquote cite { display: block; font-style: normal; font-size: .85em; margin-top: .5em; }

/* ---- Code and terminal --------------------------------------------------------------------------------------------

   There is no syntax highlighter. For light coloring, wrap tokens by hand in <span class="cm"> (comments),
   <span class="kw"> (keywords) or <span class="st"> (strings and number literals). Anything else stays plain.

   pre.term imitates a shell with a powerline prompt: .seg1/.sep1/.seg2/.sep2 are the prompt segments and their
   separator glyphs, and .ok, .bad, .dim and .hi color output. The icon glyphs (U+E000 and up, the Private Use Area)
   only render because the Nerd Font is loaded; with a fallback font they show as boxes.

   pre.wrap is for prose shown in a code block (quoted messages, transcripts, log lines). It keeps the newlines that are
   there and also wraps at the box edge, breaking long paths and URLs if it has to. Plain pre never wraps, because
   code's line breaks carry meaning. pre.wrap was added after default1 was first pushed, as a new class name that no
   snippet used in a way it could change; that kind of addition is the only change a frozen stylepack allows. */

pre { background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; padding: 14px 16px; overflow-x: auto; line-height: 1.5; }
pre .cm { color: var(--muted); }
pre .kw { color: var(--accent); font-weight: 600; }
pre .st { color: var(--sun); }
pre.wrap { white-space: pre-wrap; overflow-wrap: anywhere; }

pre.term { background: var(--term-bg); color: var(--term-fg); border-color: var(--term-bg); }
pre.term .seg1 { background: var(--accent); color: var(--term-bg); }
pre.term .sep1 { color: var(--accent); background: var(--term-seg2); }
pre.term .seg2 { background: var(--term-seg2); color: var(--term-fg); }
pre.term .sep2 { color: var(--term-seg2); }
pre.term .ok { color: var(--term-ok); }
pre.term .bad { color: var(--term-bad); }
pre.term .dim { color: var(--term-dim); }
pre.term .hi { color: var(--sun); font-weight: 700; }

hr { border: 0; border-top: 1px dashed var(--rule); margin-block: 2.4em; }

/* ---- Tables -------------------------------------------------------------------------------------------------------

   Wrap every table in <div class="table-wrap">. The wrapper draws the rounded border and scrolls horizontally, which a
   bare <table> cannot do. Cells don't wrap, so a wide table scrolls rather than squashing. Put .r (right) or .c
   (center) on th/td for alignment; numbers use tabular figures so right-aligned columns line up. */

.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 6px; background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: .92rem; font-variant-numeric: tabular-nums; }
caption { caption-side: bottom; text-align: left; padding: 8px 12px; font-size: .8rem; color: var(--muted); }
th, td { padding: 8px 12px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
th { font: 600 .72rem/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); text-align: left; }
tbody tr:last-child td { border-bottom: 0; }
.r { text-align: right; }
.c { text-align: center; }

/* ---- Figures ------------------------------------------------------------------------------------------------------

   .fig-svg is a card for hand-drawn inline SVG charts. Its classes (.axis, .curve, .area, .dot, .now) take their
   colors from the tokens, so a chart drawn with them follows the theme without any script. */

figure { margin-inline: 0; }
figure img, figure svg { display: block; width: 100%; height: auto; max-width: 100%; border-radius: 6px; }
figcaption { font-size: .85rem; color: var(--muted); margin-top: .5em; }
.fig-svg { background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; padding: 8px; }
.fig-svg text { font-family: var(--font-mono); font-size: 11px; fill: var(--muted); }
.fig-svg .axis { stroke: var(--rule); }
.fig-svg .curve { stroke: var(--accent); fill: none; stroke-width: 2.5; }
.fig-svg .area { fill: var(--accent-soft); }
.fig-svg .dot { fill: var(--sun); }
.fig-svg .now { stroke: var(--sun); stroke-dasharray: 4 4; }

/* ---- Odds and ends ------------------------------------------------------------------------------------------------ */

dl { display: grid; grid-template-columns: max-content 1fr; gap: .4em 1.2em; }
dt { font-weight: 600; }
dd { margin: 0; min-width: 0; }

details { border: 1px solid var(--rule); border-radius: 6px; padding: 10px 14px; background: var(--surface); }
summary { cursor: pointer; font-weight: 600; }
details[open] summary { margin-bottom: .5em; }

.footnotes { font-size: .85rem; color: var(--muted); }
.footnotes ol { padding-left: 1.2em; }
sup a { text-decoration: none; }

/* On phones the two-column definition list gets too cramped, and the h1 too big. */
@media (max-width: 480px) {
  dl { grid-template-columns: 1fr; }
  dd { margin-bottom: .5em; }
  h1 { font-size: 2rem; }
}

/* ---- Mermaid ------------------------------------------------------------------------------------------------------

   <pre class="mermaid"> holds diagram source until mermaid.js (next to this file) replaces it with an SVG. Until then,
   or if the script fails, the source shows as muted plain text instead of a broken box. */

pre.mermaid { background: none; border: 0; padding: 0; text-align: center; color: var(--muted); }
pre.mermaid svg { display: inline-block; max-width: 100%; height: auto; }