/* BenchBase: shared type, colour, and components.
   Editorial, in the manner of a research lab's own site: white page, one tight sans, monochrome ink,
   pill buttons, soft gray panels, whitespace instead of rules. */

:root {
  color-scheme: light;

  --paper: #ffffff;
  --paper-2: #f7f7f7;               /* panels, code fields */
  --paper-3: #efefef;
  --ink: #0d0d0d;
  --ink-2: #5d5d5d;                 /* muted text */
  --ink-3: #8f8f8f;
  --rule: #ececec;
  --rule-2: #dcdcdc;
  --accent: #0d0d0d;
  --accent-2: #0d0d0d;
  --accent-wash: #f3f3f3;
  --caution: #5d5d5d;
  --caution-wash: #f7f7f7;
  --pass: #2b6045;

  --sans: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --serif: var(--sans);

  /* type scale */
  --step--1: clamp(0.8rem, 0.78rem + 0.08vw, 0.85rem);
  --step-0: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);
  --step-1: clamp(1.1rem, 1.05rem + 0.28vw, 1.25rem);
  --step-2: clamp(1.4rem, 1.2rem + 0.9vw, 1.85rem);
  --step-3: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem);
  --step-4: clamp(2.4rem, 1.6rem + 3.2vw, 3.6rem);

  --gutter: clamp(1.15rem, 4vw, 3rem);
  --page: 76rem;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--step-0) / 1.62 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--ink); text-decoration-color: var(--rule-2); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }

.skip { position: absolute; left: -999px; top: 0.5rem; background: var(--ink); color: var(--paper); padding: 0.5rem 0.9rem; z-index: 40; border-radius: 999px; }
.skip:focus { left: 0.5rem; }

h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; }
p { margin: 0 0 1rem; text-wrap: pretty; }
ul, ol { padding-left: 1.15rem; margin: 0 0 1.1rem; }
li { margin-bottom: 0.3rem; }

.display { font-family: var(--sans); font-weight: 500; letter-spacing: -0.03em; line-height: 1.06; }
.mono { font-family: var(--mono); font-variant-ligatures: none; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-2); }
.small { font-size: var(--step--1); }

/* the small line above a headline: plain, muted, sentence case */
.kicker { font: 400 0.9rem / 1.4 var(--sans); color: var(--ink-2); margin: 0 0 1.4rem; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 20; background: rgb(255 255 255 / 0.88); backdrop-filter: saturate(160%) blur(12px); }
.header-inner { max-width: 84rem; margin: 0 auto; padding: 0.8rem var(--gutter); display: flex; align-items: center; gap: 1.2rem; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.03em; }
.brand img { display: block; width: auto; height: 1.7rem; }
.site-header nav { display: flex; align-items: center; gap: 0.15rem; flex: 1; margin-left: 0.8rem; font-size: 0.92rem; }
.site-header nav a { color: var(--ink); text-decoration: none; padding: 0.5rem 0.8rem; border-radius: 999px; transition: background-color 140ms var(--ease); }
.site-header nav a:hover { background: var(--paper-2); }
.site-header nav a[aria-current="page"] { color: var(--ink-2); }
.site-header nav .pill { background: var(--paper-2); margin-left: auto; padding: 0.55rem 1rem; }
.site-header nav .pill + .pill { margin-left: 0.4rem; }
.site-header nav .pill:hover { background: var(--paper-3); }
.site-header nav .pill.dark { background: var(--ink); color: #fff; }
.site-header nav .pill.dark:hover { background: #2b2b2b; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px;
  background: var(--ink); color: #fff; border: 0;
  font: 500 0.95rem / 1 var(--sans); padding: 0.75rem 1.35rem; border-radius: 999px; cursor: pointer; text-decoration: none;
  transition: background-color 140ms var(--ease), transform 140ms var(--ease);
}
.btn:hover { background: #2b2b2b; }
.btn-ghost { background: var(--paper-2); color: var(--ink); }
.btn-ghost:hover { background: var(--paper-3); }

/* ---------- code ---------- */
code { font: 0.88em/1.5 var(--mono); background: var(--paper-2); padding: 0.1em 0.38em; border-radius: 6px; }
.code { position: relative; margin: 0 0 1.2rem; background: var(--paper-2); border-radius: 14px; overflow: hidden; }
.code-head { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.6rem 0 1.1rem; }
.code-lang { font: 500 0.74rem/1 var(--mono); color: var(--ink-3); }
.code pre { margin: 0; padding: 0.65rem 1.1rem 1.05rem; overflow-x: auto; font: 400 0.86rem/1.7 var(--mono); tab-size: 2; }
.code pre code { background: none; padding: 0; font: inherit; }
.copy {
  margin-left: auto; min-height: 30px; font: 500 0.75rem/1 var(--sans); padding: 0.4rem 0.8rem; border-radius: 999px; cursor: pointer;
  color: var(--ink-2); background: #fff; border: 0; box-shadow: 0 0 0 1px var(--rule-2);
  transition: color 140ms, box-shadow 140ms;
}
.copy:hover { color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.copy[data-done="true"] { color: var(--pass); box-shadow: 0 0 0 1px var(--pass); }

/* syntax, subdued */
.k { color: #7b3fa0; } .v { color: #1f4fbf; } .s { color: #2b6045; } .f { color: #8a5a10; }
.cmd { color: var(--ink); font-weight: 500; } .c { color: var(--ink-3); }

/* ---------- tables ---------- */
.table { overflow-x: auto; margin: 0 0 1.3rem; }
.table table { border-collapse: collapse; width: 100%; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
th, td { padding: 0.7rem 0.9rem 0.7rem 0; text-align: right; border-bottom: 1px solid var(--rule); }
th:first-child, td:first-child { text-align: left; }
thead th { font: 500 0.8rem/1.3 var(--sans); color: var(--ink-3); border-bottom: 1px solid var(--rule-2); }
td.sig { color: var(--ink); font-weight: 600; }
td.text, th.text { text-align: left; white-space: normal; }

/* ---------- figures ---------- */
figure { margin: 1.5rem 0; }
figure img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 14px; background: #fff; }
figcaption { font: 400 var(--step--1) / 1.55 var(--sans); color: var(--ink-2); margin-top: 0.6rem; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.pair figure { margin: 1.5rem 0 0; }

/* ---------- notes ---------- */
.note { background: var(--paper-2); padding: 1.1rem 1.3rem; margin: 1.5rem 0; border-radius: 14px; }
.note p:last-child { margin: 0; }
.note-label { font: 500 0.82rem/1 var(--sans); color: var(--ink-2); display: block; margin-bottom: 0.5rem; }

/* ---------- footer ---------- */
.site-footer { margin-top: 5rem; border-top: 1px solid var(--rule); }
.site-footer > div {
  max-width: var(--page); margin: 0 auto; padding: 1.8rem var(--gutter) 2.8rem;
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.8rem; align-items: baseline; font-size: 0.9rem; color: var(--ink-2);
}
.site-footer a { color: var(--ink-2); }
.site-footer a:hover { color: var(--ink); }
.site-footer .foot-note { flex: 1 1 22rem; }

/* ---------- responsive ---------- */
@media (max-width: 52rem) {
  .site-header nav a:not(.pill) { display: none; }
  .pair { grid-template-columns: 1fr; }
}

/* ---------- Notion colours: tag pairs for pills and labels, text colours for dots and accents ---------- */
:root {
  --gray: #787774;   --gray-bg: #E3E2E0;   --gray-fg: #32302C;
  --brown: #9F6B53;  --brown-bg: #EEE0DA;  --brown-fg: #442A1E;
  --orange: #D9730D; --orange-bg: #FADEC9; --orange-fg: #49290E;
  --yellow: #CB912F; --yellow-bg: #FDECC8; --yellow-fg: #402C1B;
  --green: #448361;  --green-bg: #DBEDDB;  --green-fg: #1C3829;
  --blue: #337EA9;   --blue-bg: #D3E5EF;   --blue-fg: #183347;
  --purple: #9065B0; --purple-bg: #E8DEEE; --purple-fg: #412454;
  --pink: #C14C8A;   --pink-bg: #F5E0E9;   --pink-fg: #4C2337;
  --red: #D44C47;    --red-bg: #FFE2DD;    --red-fg: #5D1715;
  --callout-yellow: #FBF3DB;
}
.gray   { --c-bg: var(--gray-bg);   --c-fg: var(--gray-fg); }
.brown  { --c-bg: var(--brown-bg);  --c-fg: var(--brown-fg); }
.orange { --c-bg: var(--orange-bg); --c-fg: var(--orange-fg); }
.yellow { --c-bg: var(--yellow-bg); --c-fg: var(--yellow-fg); }
.green  { --c-bg: var(--green-bg);  --c-fg: var(--green-fg); }
.blue   { --c-bg: var(--blue-bg);   --c-fg: var(--blue-fg); }
.purple { --c-bg: var(--purple-bg); --c-fg: var(--purple-fg); }
.pink   { --c-bg: var(--pink-bg);   --c-fg: var(--pink-fg); }
.red    { --c-bg: var(--red-bg);    --c-fg: var(--red-fg); }

.tag {
  display: inline-block; padding: 0.22rem 0.7rem; border-radius: 999px; white-space: nowrap;
  font: 500 0.8rem/1.3 var(--sans); background: var(--c-bg, var(--gray-bg)); color: var(--c-fg, var(--gray-fg));
}

/* code language labels are tags too */
.code-lang { padding: 0.24rem 0.65rem; border-radius: 999px; background: var(--c-bg, var(--gray-bg)); color: var(--c-fg, var(--gray-fg)); }
.code[data-lang="bash"], .code[data-lang="shell"], .code[data-lang="zsh"] { --c-bg: var(--green-bg); --c-fg: var(--green-fg); }
.code[data-lang="json"] { --c-bg: var(--orange-bg); --c-fg: var(--orange-fg); }
.code[data-lang="python"] { --c-bg: var(--blue-bg); --c-fg: var(--blue-fg); }
.code[data-lang="yaml"] { --c-bg: var(--purple-bg); --c-fg: var(--purple-fg); }

/* accents */
a:hover { text-decoration-color: var(--blue); }
:focus-visible { outline-color: var(--blue); }
td.sig { color: var(--green); }
.site-header nav .pill:not(.dark) { background: var(--blue-bg); color: var(--blue-fg); }
.site-header nav .pill:not(.dark):hover { background: #c3d9e7; }

/* callouts: Notion's yellow */
.note { background: var(--callout-yellow); }
.note-label { color: var(--yellow-fg); }