/*
  Hive design tokens: the colours, type, spacing and base styles for every Hive page.
  Link this file, or copy it into a page's <style>, and build only with these variables.

  The look follows Claude Docs, where Hive's white papers live: a near-white page with near-black text, warm neutral
  greys, hairline borders at 10% of the text colour, serif headings over sans-serif text (Claude Docs' default), and
  a single reading column. Claude Docs draws its pages in Anthropic's own typefaces, which aren't Hive's to use, so
  Hive sets headings in Newsreader, an open-licensed editorial serif close in feel to Anthropic Serif, and text in the
  reader's system sans-serif, which is what Claude Docs falls back to. Hive amber, the colour of the honeycomb mark, is the only accent.

  Light mode is the default. Dark mode applies when the reader's system prefers it, unless the page sets
  data-theme="light" on <html>, and always when it sets data-theme="dark".

  Every text colour below has a contrast ratio of at least 4.5 against --page, --surface and --sunken, in both
  modes. --accent, --comb-* and the --state-* colours are for marks and fills; their -text variants are for words.
*/

@import url("https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400..700&display=swap");

:root {
  color-scheme: light;

  /* Surfaces, from the page outward. */
  --page: #f9f9f7;
  --surface: #ffffff;
  --sunken: #f0efec;
  --line: rgb(11 11 11 / 10%);
  --line-strong: rgb(11 11 11 / 18%);

  /* Words. */
  --ink: #0b0b0b;
  --ink-2: #383835;
  --muted: #52514e;

  /* Hive amber. --accent is for marks and fills, --accent-text for words. */
  --accent: #b5711a;
  --accent-text: #8f560c;
  --accent-soft: #f6ead6;

  /* The honeycomb mark's three cells, lightest to darkest: the same amber ramp as the Tool Comb's cells. */
  --comb-1: #ecc57c;
  --comb-2: #dc9e3f;
  --comb-3: #b5711a;

  /* A tool's STATE type: whether it reads, changes or computes. */
  --state-read: #2a78d6;
  --state-read-text: #1f62b3;
  --state-mutation: #eb6834;
  --state-mutation-text: #b44418;
  --state-computation: #1baf7a;
  --state-computation-text: #0e7a54;

  /* Status. Always shown with a word or an icon, never by colour alone. */
  --good: #2b7530;
  --good-soft: #e3f0e2;
  --warn: #8a5a00;
  --warn-soft: #fbf1dc;
  --critical: #b3261e;
  --critical-soft: #f9e3e1;

  /* Type: a serif for headings, the system sans-serif for text, and the system monospace for code. */
  --font-serif: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --text-title: clamp(34px, 5vw, 40px);
  --text-h2: 24px;
  --text-h3: 19px;
  --text-lead: 17px;
  --text-body: 17px;
  --text-small: 14px;
  --text-caption: 13px;

  /* Spacing, on a 4-pixel grid. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --radius: 8px;
  --radius-small: 6px;
  --measure: 72ch;
  --content-width: 720px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0b0b0b;
    --surface: #151515;
    --sunken: #1a1a19;
    --line: rgb(240 239 236 / 10%);
    --line-strong: rgb(240 239 236 / 18%);
    --ink: #f0efec;
    --ink-2: #c3c2b7;
    --muted: #a5a49a;
    --accent: #f0a73a;
    --accent-text: #f0a73a;
    --accent-soft: #3a2c12;
    --comb-1: #a97626;
    --comb-2: #dc9f3f;
    --comb-3: #ffd37c;
    --state-read: #3987e5;
    --state-read-text: #6aa6f0;
    --state-mutation: #d95926;
    --state-mutation-text: #f08a5d;
    --state-computation: #199e70;
    --state-computation-text: #3cc596;
    --good: #6cc76f;
    --good-soft: #1d2e1d;
    --warn: #f3b73f;
    --warn-soft: #33280f;
    --critical: #f08a84;
    --critical-soft: #3a1d1b;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0b0b0b;
  --surface: #151515;
  --sunken: #1a1a19;
  --line: rgb(240 239 236 / 10%);
  --line-strong: rgb(240 239 236 / 18%);
  --ink: #f0efec;
  --ink-2: #c3c2b7;
  --muted: #a5a49a;
  --accent: #f0a73a;
  --accent-text: #f0a73a;
  --accent-soft: #3a2c12;
  --comb-1: #a97626;
  --comb-2: #dc9f3f;
  --comb-3: #ffd37c;
  --state-read: #3987e5;
  --state-read-text: #6aa6f0;
  --state-mutation: #d95926;
  --state-mutation-text: #f08a5d;
  --state-computation: #199e70;
  --state-computation-text: #3cc596;
  --good: #6cc76f;
  --good-soft: #1d2e1d;
  --warn: #f3b73f;
  --warn-soft: #33280f;
  --critical: #f08a84;
  --critical-soft: #3a1d1b;
}

/* Base styles: a Hive page needs no other CSS for its text. */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 var(--text-body) / 1.45 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

.document {
  max-width: var(--content-width);
  margin-inline: auto;
  padding: var(--space-6) var(--space-5) var(--space-8);
}

.document > * + * {
  margin-top: var(--space-4);
}

/* Headings open a section, so they need more room above them than the 16 pixels between blocks. These rules match
   the one above in specificity and come after it, so they win. */
.document > h2 {
  margin-top: var(--space-7);
}

.document > h3 {
  margin-top: var(--space-6);
}

p,
li {
  max-width: var(--measure);
}

ul,
ol {
  padding-left: 1.4em;
}

li + li {
  margin-top: var(--space-2);
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-serif);
  text-wrap: balance;
}

h1 {
  font-size: var(--text-title);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

h2 {
  margin-top: var(--space-7);
  font-size: var(--text-h2);
  font-weight: 470;
  line-height: 1.3;
}

h3 {
  margin-top: var(--space-6);
  font-size: var(--text-h3);
  font-weight: 500;
  line-height: 1.4;
}

.byline,
figcaption {
  color: var(--muted);
  font: 400 var(--text-caption) / 1.45 var(--font-sans);
}

.lead {
  color: var(--ink);
  font-size: var(--text-lead);
  line-height: 1.45;
}

a {
  color: var(--accent-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-thickness: 2px;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

strong {
  font-weight: 600;
}

code {
  padding: 1px var(--space-1);
  border-radius: 4px;
  background: var(--sunken);
  font: 400 0.86em / 1.4 var(--font-mono);
}

pre {
  overflow-x: auto;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font: 400 var(--text-small) / 1.6 var(--font-mono);
}

pre code {
  padding: 0;
  background: none;
  font-size: inherit;
}

/* The honeycomb mark: three cells filled from --comb-1 to --comb-3, so it follows the theme. */
.mark {
  display: block;
}

.mark .cell-1 {
  fill: var(--comb-1);
}

.mark .cell-2 {
  fill: var(--comb-2);
}

.mark .cell-3 {
  fill: var(--comb-3);
}

/* Tables scroll sideways inside their wrapper on a phone, so the page itself never does. */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

table {
  width: 100%;
  border-collapse: collapse;
  font: 400 var(--text-small) / 1.5 var(--font-sans);
}

th,
td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

th {
  background: var(--sunken);
  color: var(--ink-2);
  font-weight: 600;
}

tr:last-child td {
  border-bottom: 0;
}

td.number,
th.number {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* A note sits on the plain surface with an amber edge. A warning is the only callout with a warm fill, so the
   two never look alike: Hive amber and the warning yellow are close in hue. */
.callout {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface);
}

.callout.warning {
  border-color: transparent;
  border-left-color: var(--warn);
  background: var(--warn-soft);
}

.badge {
  display: inline-block;
  padding: 1px var(--space-2);
  border: 1px solid currentColor;
  border-radius: var(--radius-small);
  font: 600 12px / 1.6 var(--font-sans);
  letter-spacing: 0.02em;
}

.badge.read {
  color: var(--state-read-text);
}

.badge.mutation {
  color: var(--state-mutation-text);
}

.badge.computation {
  color: var(--state-computation-text);
}

button {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: 500 var(--text-small) / 1.4 var(--font-sans);
  cursor: pointer;
}

button:hover {
  background: var(--sunken);
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
}

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

figure svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--font-sans);
}

figcaption {
  margin-top: var(--space-2);
}

/* The site header on Hive's own web pages: a bar across the full width of the window, with the mark and name at its
   left edge and a few links at its right edge, over a hairline. */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--line);
}

.site-header .brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
}

.site-header nav {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-5);
  font-size: var(--text-small);
  white-space: nowrap;
}


.site-header nav a {
  color: var(--ink-2);
  text-decoration: none;
}

.site-header nav a:hover,
.site-header nav a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
}

.site-footer {
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--text-caption);
}

/* An icon button that copies something: a copy icon that turns into a check mark once the copy has worked. Give the
   button the class copy-button and two SVG children with the classes idle and done; a script adds "copied". */
.copy-button {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  flex: none;
  border: 0;
  border-radius: var(--radius-small);
  background: transparent;
  color: var(--muted);
}

.copy-button:hover {
  background: var(--sunken);
  color: var(--ink);
}

.copy-button .done,
.copy-button.copied .idle {
  display: none;
}

.copy-button.copied .done {
  display: block;
  color: var(--good);
}

/* A page title with an action, such as a copy button, at the right end of its line. */
.title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

/* Centres the button on the title's first line at any title size: half of what the line (the title size times h1's
   1.1 line height) is taller than the 36-pixel button. A title that wraps keeps the button beside its first line. */
.title-row .copy-button {
  margin-top: calc((var(--text-title) * 1.1 - 36px) / 2);
}

/* A minimal list of pages to open: one row per page, with its title and a one-line description, a chevron at the
   right, and hairlines between rows. The whole row is the link. */
.link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.link-list li {
  max-width: none;
  margin: 0;
  border-bottom: 1px solid var(--line);
}

/* The row's text lines up with the column, and its hover highlight reaches 8 pixels past it on each side. */
.link-list a {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-inline: calc(var(--space-2) * -1);
  padding: var(--space-4) var(--space-2);
  color: var(--ink);
  text-decoration: none;
}

.link-list a:hover {
  background: var(--sunken);
}

/* Titles are set like subheadings, in the heading serif, so a list of pages reads like the headings it leads to. */
.link-list .title {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  font-weight: 500;
  line-height: 1.3;
}

.link-list .description {
  display: block;
  margin-top: var(--space-1);
  color: var(--muted);
  font-size: var(--text-small);
}

.link-list .chevron {
  flex: none;
  margin-left: auto;
  color: var(--muted);
}