/* Ikigenba — the signature style.
   Copied from design/ikigenba/theme.css at commit be27cf49. The design lab's
   Google Fonts import is replaced by the @font-face rules below, which load
   the font files beside this stylesheet: Inter 4.1 (InterVariable.woff2,
   InterVariable-Italic.woff2; opsz 14..32, wght 100..900) and JetBrains Mono
   2.304 (JetBrainsMono.woff2; wght 100..800). Licences: OFL.txt.

   Palette: ink — the interface is greyscale; black is the accent, blue is for
   links and focus only. Light grounds. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: fallback;
  src: url("InterVariable.693b77d4f32ee9b8.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: fallback;
  src: url("InterVariable-Italic.e564f652916db6c1.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: fallback;
  src: url("JetBrainsMono.b746768ee7d88470.woff2") format("woff2");
}

/* ---------------------------------------------------------------- tokens */
:root {
  color-scheme: light;

  /* ink */
  --bg: #fdfdfd;
  --surface: #ffffff;
  --subtle: #f7f7f7;
  --fg: #0a0a0a;
  --muted: #646464;
  --faint: #949494;
  --line: #e5e5e5;
  --line-soft: #f0f0f0;
  --accent: #0a0a0a;
  --accent-hover: #2b2b2b;
  --accent-fg: #ffffff;
  --link: #0060f0;

  --ok: #166534;
  --warn: #c2410c;
  --err: #b91c1c;
  --info: #1d4ed8;


  /* Tabler icons (@tabler/icons 3.48.0, MIT; vendored in icons/tabler/) used as masks,
     so each takes its color from --c. Filled variants cut the glyph out of the disc. */
  --i-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' %3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none' /%3E%3Cpath d='M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z' /%3E%3C/svg%3E");
  --i-warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' %3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none' /%3E%3Cpath d='M12 1.67c.955 0 1.845 .467 2.39 1.247l.105 .16l8.114 13.548a2.914 2.914 0 0 1 -2.307 4.363l-.195 .008h-16.225a2.914 2.914 0 0 1 -2.582 -4.2l.099 -.185l8.11 -13.538a2.914 2.914 0 0 1 2.491 -1.403zm.01 13.33l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -7a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z' /%3E%3C/svg%3E");
  --i-err: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' %3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none' /%3E%3Cpath d='M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-6.489 5.8a1 1 0 0 0 -1.218 1.567l1.292 1.293l-1.292 1.293l-.083 .094a1 1 0 0 0 1.497 1.32l1.293 -1.292l1.293 1.292l.094 .083a1 1 0 0 0 1.32 -1.497l-1.292 -1.293l1.292 -1.293l.083 -.094a1 1 0 0 0 -1.497 -1.32l-1.293 1.292l-1.293 -1.292l-.094 -.083z' /%3E%3C/svg%3E");
  --i-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' %3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none' /%3E%3Cpath d='M12 2c5.523 0 10 4.477 10 10a10 10 0 0 1 -19.995 .324l-.005 -.324l.004 -.28c.148 -5.393 4.566 -9.72 9.996 -9.72zm0 9h-1l-.117 .007a1 1 0 0 0 0 1.986l.117 .007v3l.007 .117a1 1 0 0 0 .876 .876l.117 .007h1l.117 -.007a1 1 0 0 0 .876 -.876l.007 -.117l-.007 -.117a1 1 0 0 0 -.764 -.857l-.112 -.02l-.117 -.006v-3l-.007 -.117a1 1 0 0 0 -.876 -.876l-.117 -.007zm.01 -3l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007z' /%3E%3C/svg%3E");
  --i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' %3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none' /%3E%3Cpath d='M12 2c5.523 0 10 4.477 10 10a10 10 0 0 1 -19.995 .324l-.005 -.324l.004 -.28c.148 -5.393 4.566 -9.72 9.996 -9.72zm.01 13l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -8a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z' /%3E%3C/svg%3E");
  --i-neutral: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none' /%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0' /%3E%3C/svg%3E");

  /* type */
  --font: "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --text-xs: 12px;
  --text-sm: 13px;
  --text: 14px;
  --text-md: 15px;
  --text-lg: 17px;
  --h4: 15px;
  --h3: 18px;
  --h2: 24px;
  --h1: 30px;
  --display: clamp(40px, 6vw, 64px);

  /* space and shape */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px;
  --r-sm: 5px;
  --r: 7px;
  --r-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .06);
  --focus: 0 0 0 3px color-mix(in srgb, #0060f0 30%, transparent);
  --page: 1120px;
  --measure: 68ch;
}

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

/* The scrollbar's room is always kept, so a page that scrolls is laid out
   at the same width as one that doesn't. */
html {
  scrollbar-gutter: stable;
  font-family: var(--font);
  font-size: var(--text);
  line-height: 1.5;
  font-synthesis: none;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: var(--fg);
  background: var(--bg);
}

body { margin: 0; min-height: 100vh; }

h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance; }
h1 { font-size: var(--h1); letter-spacing: -0.025em; }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); letter-spacing: -0.015em; }
h4 { font-size: var(--h4); font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }

a { color: var(--link); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }

:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }

small, .small { font-size: var(--text-sm); }
.muted { color: var(--muted); }

code, kbd, pre, samp { font-family: var(--mono); font-size: 0.9em; }
code { padding: 1px 5px; border-radius: 4px; background: var(--line-soft); }
kbd {
  padding: 1px 6px; border-radius: 4px; font-size: 0.82em;
  border: 1px solid var(--line); border-bottom-width: 2px; background: var(--surface);
}
pre {
  margin: 0; padding: var(--s4); overflow-x: auto; line-height: 1.6;
  background: var(--subtle); border: 1px solid var(--line); border-radius: var(--r);
}
pre code { padding: 0; background: none; font-size: inherit; }

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

.num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.eyebrow { font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* ---------------------------------------------------------------- banner */
/* The banner every app emits: the mark (the favicon as an image and
   Ikigenba, a link to home), a hairline, the breadcrumb trail (the service's
   own icon and name, the chevron that opens its page menu, then each deeper
   level), then at the right edge two quiet 36px icon buttons: the profile (a
   user-circle linking to the user's auth profile, titled with their email)
   and sign out (a logout icon). Below 900px the product name hides and the favicon stays;
   below 640px the trail's middle levels collapse to one ellipsis. The lab
   frames a banner in .frame. */
:is(body, .frame) > header {
  display: flex; align-items: center; gap: var(--s4);
  padding: 0 max(var(--s4), calc((100% - var(--page)) / 2 + var(--s4)));
  height: 56px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
:is(body, .frame) > header > strong, .mark {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-weight: 650; font-size: 15px; letter-spacing: -0.015em; color: var(--fg); white-space: nowrap;
}
:is(body, .frame) > header > strong::before, .mark::before {
  content: ""; width: 14px; height: 14px; background: var(--accent);
  -webkit-mask: url("favicon.svg") center / contain no-repeat; mask: url("favicon.svg") center / contain no-repeat;
}
/* The favicon itself, as an image inside the mark; the glyph stays for a mark
   without one (the sign-in card). */
.mark > img { width: 18px; height: 18px; }
.mark:has(> img)::before { display: none; }
/* A mark carrying data-service shows it as text after a hairline (the landing
   page's product shot). */
.mark[data-service]::after {
  content: attr(data-service); font-weight: 450; color: var(--muted); margin-left: 4px;
  padding-left: var(--s3); border-left: 1px solid var(--line);
}
/* The mark links to home, the service named home in the services file; with
   no home it is a strong, as before. */
a.mark { color: var(--fg); }
:is(body, .frame) > header > :is(span, a:not([class])) { margin-left: auto; color: var(--muted); font-size: var(--text-sm); }
:is(body, .frame) > header > a:not([class]):hover { color: var(--fg); }
:is(body, .frame) > header > nav:not(.crumbs, .pages) { display: flex; gap: var(--s1); margin-left: var(--s4); }
:is(body, .frame) > header > nav:not(.crumbs, .pages) a {
  color: var(--muted); font-size: var(--text-sm); font-weight: 500; padding: 6px 10px; border-radius: var(--r-sm);
}
:is(body, .frame) > header > nav:not(.crumbs, .pages) a:hover { color: var(--fg); background: var(--subtle); text-decoration: none; }
:is(body, .frame) > header > nav:not(.crumbs, .pages) a[aria-current] { color: var(--fg); background: var(--line-soft); }
:is(body, .frame) > header > .profile { margin-left: auto; }
a.profile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--r); color: var(--muted);
}
a.profile:hover { background: var(--line-soft); color: var(--fg); text-decoration: none; }
a.profile svg.ico { width: 20px; height: 20px; }
/* Sign out as an icon button, the same quiet 36px square as the others. */
button.signout {
  width: 36px; height: 36px; padding: 0; margin: 0;
  background: transparent; color: var(--muted); box-shadow: none;
}
button.signout:hover { background: var(--line-soft); color: var(--fg); }
button.signout svg.ico { width: 20px; height: 20px; }


/* ------------------------------------------------------------ breadcrumb */
/* The trail sits in the banner, after the mark and a hairline: a nav.crumbs
   labelled Breadcrumb holding an ol, root first. The root is the service's
   own icon (share/icon.svg, verbatim, no class, 16px) and name, muted, a
   link to the landing page, then button.menu, the chevron that opens the
   page menu. Each further level is a link but the last, the current page,
   unlinked, aria-current="page", darker, its name in a span that truncates
   with an ellipsis when it must. The separators are the style's, never text.
   The trail never wraps; the nav clips, padded so a focus ring shows. */
:is(body, .frame) > header > nav.crumbs {
  display: flex; min-width: 0; flex: 0 1 auto; overflow: hidden;
  margin-left: calc(var(--s2) + 4px - var(--s4)); padding: 4px 4px 4px 0;
}
:is(body, .frame) > header > nav.crumbs ol {
  display: flex; flex-wrap: nowrap; align-items: center; gap: var(--s2); min-width: 0;
  margin: 0; padding: 0 0 0 var(--s3); border-left: 1px solid var(--line);
  list-style: none; font-size: 15px; color: var(--muted);
}
:is(body, .frame) > header > nav.crumbs li { display: inline-flex; align-items: center; gap: var(--s2); flex: none; white-space: nowrap; }
:is(body, .frame) > header > nav.crumbs li + li::before { content: "/"; color: var(--faint); }
:is(body, .frame) > header > nav.crumbs li.root { gap: 2px; }
:is(body, .frame) > header > nav.crumbs a {
  display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 450;
}
:is(body, .frame) > header > nav.crumbs a:hover { color: var(--fg); text-decoration: none; }
:is(body, .frame) > header > nav.crumbs li.root a > svg { width: 16px; height: 16px; flex: none; }
:is(body, .frame) > header > nav.crumbs li[aria-current] { flex: 0 1 auto; min-width: 0; color: var(--fg); font-weight: 500; }
:is(body, .frame) > header > nav.crumbs li[aria-current] > span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The chevron: the only menu trigger; the service name stays a plain link. */
:is(body, .frame) > header > nav.crumbs button.menu {
  width: 22px; height: 22px; padding: 0; margin: 0; flex: none;
  background: transparent; color: var(--faint); box-shadow: none; border-radius: var(--r-sm);
}
:is(body, .frame) > header > nav.crumbs button.menu:hover,
body:has(nav.pages:popover-open) > header > nav.crumbs button.menu { background: var(--line-soft); color: var(--fg); }
:is(body, .frame) > header > nav.crumbs button.menu svg { width: 14px; height: 14px; }

/* ------------------------------------------------------------- page menu */
/* nav.pages, labelled "<service> pages": a native popover the chevron opens
   (popovertarget, no script), hanging under the trail's root. A ul of the
   service's pages: the landing page first, as the service's icon and name,
   set off by a hairline; then Tools (only for a service with MCP tools);
   then About. The current row carries aria-current="page", bolder, with a
   check icon at its right. */
nav.pages {
  display: block; min-width: 180px; padding: var(--s1); margin: 0;
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow);
}
nav.pages[popover] {
  position: fixed; inset: auto; margin: 0; top: 50px;
  left: calc(max(var(--s4), calc((100% - var(--page)) / 2 + var(--s4))) + 118px);
}
nav.pages[popover]:not(:popover-open) { display: none; }
@supports (anchor-name: --pages) {
  body > header > nav.crumbs li.root { anchor-name: --pages; }
  nav.pages[popover] { position-anchor: --pages; top: calc(anchor(bottom) + 6px); left: anchor(left); }
}
nav.pages ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
nav.pages li:first-child { padding-bottom: 2px; margin-bottom: 2px; border-bottom: 1px solid var(--line-soft); }
nav.pages a {
  display: flex; align-items: center; gap: var(--s2); padding: 6px 10px; border-radius: var(--r-sm);
  color: var(--fg); font-size: var(--text-sm); font-weight: 450;
}
nav.pages a:hover { background: var(--subtle); text-decoration: none; }
nav.pages a[aria-current] { font-weight: 600; }
nav.pages a > svg { width: 16px; height: 16px; flex: none; }
nav.pages a > svg.ico { margin-left: auto; color: var(--muted); }
/* The lab draws a menu open inside a frame, under its chevron. */
.frame > header { position: relative; }
.frame > header > nav.pages { position: absolute; z-index: 2; top: 50px; left: calc(var(--s4) + 118px); }
.frame:is(.mid, .narrow) > header > nav.pages { left: calc(var(--s4) + 34px); }

/* -------------------------------------------------------------- services */
/* The service tiles home draws, one grid per group: an icon over its name,
   a disabled one faint. The grid fills the page's width. */
nav.services ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--s1);
}
nav.services a {
  display: grid; justify-items: center; align-content: start; gap: 6px; padding: 10px var(--s1);
  border-radius: var(--r); color: var(--fg); font-size: var(--text-xs); line-height: 16px;
  text-align: center; overflow-wrap: anywhere;
}
nav.services a:hover { background: var(--subtle); text-decoration: none; }
nav.services a > svg {
  width: 42px; height: 42px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); box-shadow: var(--shadow-sm);
}
nav.services a:hover > svg { border-color: color-mix(in srgb, var(--line) 60%, var(--fg) 20%); }
/* A disabled service keeps its tile, so the grid never reshuffles: faint,
   unlinked, and saying why on hover. */
nav.services a:not([href]) { color: var(--faint); cursor: default; }
nav.services a:not([href]):hover { background: none; }
nav.services a:not([href]) > svg,
nav.services a:not([href]):hover > svg { background: var(--subtle); border-color: var(--line-soft); box-shadow: none; }

main { max-width: var(--page); margin: 0 auto; padding: var(--s6) var(--s4) var(--s8); }
main > * + * { margin-top: var(--s5); }
main > h1 + p { margin-top: var(--s2); color: var(--muted); font-size: var(--text-md); }

/* An app's footer names the release, muted and small, at the right edge; the
   commit beside it, in a span, fainter still. */
body > footer {
  border-top: 1px solid var(--line); background: var(--surface);
  padding: var(--s6) max(var(--s4), calc((100% - var(--page)) / 2 + var(--s4)));
  color: var(--muted); font-size: var(--text-sm); text-align: right;
}
body > footer > span { color: var(--faint); }

/* ----------------------------------------------------------------- icons */
/* Inline Tabler outline icons: <svg class="ico" ...> copied from icons/tabler/.
   2px stroke on a 24px grid, drawn at 18px by default, 16px inside buttons and links. */
svg.ico { width: 18px; height: 18px; flex: none; stroke-width: 2; vertical-align: -3px; }
button svg.ico, .button svg.ico, a svg.ico, .badge svg.ico { width: 16px; height: 16px; }
.icon svg.ico { width: 20px; height: 20px; }

/* --------------------------------------------------------------- buttons */
button, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font: inherit; font-weight: 550; font-size: var(--text); line-height: 20px;
  padding: 7px 14px; border-radius: var(--r); cursor: pointer; text-decoration: none;
  border: 1px solid transparent;
  background: var(--accent); color: var(--accent-fg); box-shadow: var(--shadow-sm);
  transition: background-color .12s, border-color .12s, transform .08s;
}
button:hover, .button:hover { background: var(--accent-hover); text-decoration: none; }
/* Press feedback: a button shrinks while held and, once clicked, springs back
   just past full size (.pulse, set by feedback.js). */
button:active:not(:disabled), .button:active:not([aria-disabled="true"]) { transform: scale(.96); }
button.pulse, .button.pulse { animation: pulse .28s ease-out; }
@keyframes pulse { 0% { transform: scale(.96); } 50% { transform: scale(1.04); } 100% { transform: scale(1); } }
button.secondary, .button.secondary { background: var(--surface); color: var(--fg); border-color: var(--line); }
button.secondary:hover, .button.secondary:hover { background: var(--subtle); border-color: color-mix(in srgb, var(--line) 60%, var(--fg) 20%); }
button.ghost, .button.ghost { background: transparent; color: var(--fg); box-shadow: none; }
button.ghost:hover, .button.ghost:hover { background: var(--line-soft); }
button.danger, .button.danger { background: var(--err); color: #fff; }
button.danger:hover, .button.danger:hover { background: color-mix(in srgb, var(--err) 86%, #000); }
button.large, .button.large { padding: 10px 18px; font-size: var(--text-md); border-radius: 8px; }
button:disabled, .button[aria-disabled="true"] {
  background: var(--line-soft); color: var(--faint); border-color: var(--line-soft); box-shadow: none; cursor: not-allowed;
}

/* ----------------------------------------------------------------- forms */
/* Styles dummy's flat label / input / error-span sequence directly. */
form { display: grid; gap: var(--s2); max-width: 420px; }
form > label:not(:first-child), form > .field:not(:first-child) { margin-top: var(--s3); }
form > button, form > .actions { margin-top: var(--s4); justify-self: start; }
.actions { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }

label { font-size: var(--text-sm); font-weight: 550; }
.hint { font-size: var(--text-sm); color: var(--muted); }

input[type="text"], input[type="email"], input[type="search"], input[type="number"], input[type="password"], input:not([type]),
select, textarea {
  font: inherit; font-size: var(--text); color: var(--fg); width: 100%;
  padding: 7px 11px; line-height: 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-sm); transition: border-color .12s, box-shadow .12s;
}
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--line) 70%, var(--fg) 15%); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--link); box-shadow: var(--focus); }
input::placeholder, textarea::placeholder { color: var(--faint); }
input:disabled, select:disabled { background: var(--subtle); color: var(--faint); cursor: not-allowed; }
textarea { min-height: 88px; resize: vertical; }
select {
  appearance: none; padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23646464' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none' /%3E%3Cpath d='M6 9l6 6l6 -6' /%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 16px;
}
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) {
  display: inline-flex; align-items: center; gap: var(--s2); font-weight: 450; font-size: var(--text);
}

/* Error state: the input keeps its normal border; the message beneath it carries
   the error. The service wires aria-describedby="<field>-error" to that message. */
[id$="-error"], .error {
  display: flex; align-items: flex-start; gap: 6px;
  color: var(--err); font-size: var(--text-sm); font-weight: 500;
}
[id$="-error"]::before, .error::before {
  content: ""; flex: none; width: 16px; height: 16px; margin-top: 2px; background: var(--err);
  -webkit-mask: var(--i-alert) center / contain no-repeat; mask: var(--i-alert) center / contain no-repeat;
}

/* ---------------------------------------------------------------- tables */
/* A bare <table> is a finished card. */
table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden;
}
th {
  text-align: left; font-size: var(--text-xs); font-weight: 550; color: var(--muted);
  padding: 9px var(--s4); background: var(--subtle); border-bottom: 1px solid var(--line); white-space: nowrap;
}
td { padding: 10px var(--s4); border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--subtle); }
caption { caption-side: top; text-align: left; padding: 0 0 var(--s2); font-weight: 600; }
td:first-child { font-weight: 500; }
tbody:empty::after {
  content: "Nothing here yet."; display: table-cell; padding: var(--s6) var(--s4); color: var(--muted);
}
.table-scroll { overflow-x: auto; border-radius: var(--r-lg); }

/* Status color is always solid. Three treatments, each with a job:
   .status        a Tabler filled icon, then the word — state in tables and lists
   .badge         white pill, colored dot, black text — labels and metadata
   .badge.strong  solid color, white text — the rare label that must stand out
   Kind comes from data-kind (ok, warn, err, info) or, for dummy's widgets, data-status. */
[data-kind="ok"],   [data-status="active"]  { --c: var(--ok);   --glyph: var(--i-ok); }
[data-kind="warn"], [data-status="paused"]  { --c: var(--warn); --glyph: var(--i-warn); }
[data-kind="err"]                           { --c: var(--err);  --glyph: var(--i-err); }
[data-kind="info"]                          { --c: var(--info); --glyph: var(--i-info); }
[data-kind="accent"]                        { --c: var(--fg); }

.status { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text); }
.status::before {
  content: ""; flex: none; width: 16px; height: 16px; background: var(--c, var(--faint));
  -webkit-mask: var(--glyph, var(--i-neutral)) center / contain no-repeat; mask: var(--glyph, var(--i-neutral)) center / contain no-repeat;
}
.status[data-status="retired"] { color: var(--muted); }

.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 0 9px; border-radius: 999px;
  font-size: var(--text-xs); font-weight: 550; line-height: 20px; white-space: nowrap;
  background: var(--surface); border: 1px solid var(--line); color: var(--fg);
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c, var(--faint)); }
.badge.strong { background: var(--c, var(--fg)); border-color: transparent; color: #fff; }
.badge.strong::before { display: none; }

/* ---------------------------------------------------------------- panels */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s5); box-shadow: var(--shadow-sm);
}
.card > * + * { margin-top: var(--s4); }
.card > header {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  margin: calc(-1 * var(--s5)) calc(-1 * var(--s5)) var(--s5); padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
}
.card > header + * { margin-top: 0; }
.card > header p { color: var(--muted); font-size: var(--text-sm); }
.card.flush { padding: 0; overflow: hidden; }
.card.flush > header { margin: 0; }
.card.flush > table { border: 0; border-radius: 0; margin: 0; }
.card.flush th:first-child, .card.flush td:first-child { padding-left: var(--s5); }
.card.flush th:last-child, .card.flush td:last-child { padding-right: var(--s5); }

.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.section-head p { color: var(--muted); margin-top: var(--s1); }

/* key / value */
dl.kv { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 0; margin: 0; }
dl.kv dt, dl.kv dd { padding: 10px 0; border-bottom: 1px solid var(--line-soft); margin: 0; }
dl.kv dt { color: var(--muted); padding-right: var(--s5); }
dl.kv dd { font-weight: 500; }
dl.kv dd code { overflow-wrap: anywhere; }
dl.kv > :nth-last-child(-n+2) { border-bottom: 0; }

/* alerts — white card with a solid status icon (default); .callout adds a colored
   left edge for docs and page-level notes; .quiet is a grey note inside a card. */
.alert {
  --c: var(--info); --glyph: var(--i-info);
  display: grid; grid-template-columns: auto 1fr; gap: 2px var(--s3); align-items: start; align-content: start;
  padding: var(--s3) var(--s4); border-radius: var(--r); font-size: var(--text);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.alert::before {
  content: ""; grid-row: span 2; width: 20px; height: 20px; background: var(--c);
  -webkit-mask: var(--glyph) center / contain no-repeat; mask: var(--glyph) center / contain no-repeat;
}
.alert strong { font-weight: 600; }
.alert p { color: var(--muted); grid-column: 2; }
.alert[data-kind="ok"]   { --c: var(--ok);   --glyph: var(--i-ok); }
.alert[data-kind="warn"] { --c: var(--warn); --glyph: var(--i-warn); }
.alert[data-kind="err"]  { --c: var(--err);  --glyph: var(--i-err); }
.alert.callout { border-left: 3px solid var(--c); border-radius: 4px var(--r) var(--r) 4px; }
.alert.quiet { background: var(--subtle); border-color: transparent; box-shadow: none; }

/* empty state */
.empty {
  display: grid; justify-items: center; gap: var(--s2); text-align: center;
  padding: var(--s7) var(--s5); border: 1px dashed var(--line); border-radius: var(--r-lg); background: var(--surface);
}
.empty p { color: var(--muted); max-width: 40ch; }
.empty > :last-child { margin-top: var(--s3); }

/* tabs (profile, settings) */
.tabs { display: flex; gap: var(--s5); border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs a {
  color: var(--muted); font-weight: 500; padding: var(--s3) 0; margin-bottom: -1px;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.tabs a:hover { color: var(--fg); text-decoration: none; }
.tabs a[aria-current] { color: var(--fg); border-bottom-color: var(--accent); }

/* paging: nav.paging labelled Pages, below a list. First always, a link or,
   on the first window, a span with aria-current="page"; then Next, a link,
   only when more entries follow. */
nav.paging { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s4); font-size: var(--text-sm); }
nav.paging > a, nav.paging > span {
  padding: 3px 10px; line-height: 20px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
}
nav.paging > a { color: var(--fg); }
nav.paging > a:hover { background: var(--subtle); text-decoration: none; }
nav.paging > [aria-current] { color: var(--muted); background: var(--subtle); border-color: var(--line-soft); }


/* --------------------------------------------------------------- layouts */
.stack > * + * { margin-top: var(--s4); }
.split { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: start; }

/* auth: a single centered card on the page ground */
.auth-page { display: grid; place-items: center; min-height: 100vh; padding: var(--s6) var(--s4); }
.auth-page > .card { width: 100%; max-width: 400px; padding: var(--s6); box-shadow: var(--shadow); }
.auth-page > .card > .mark { margin-bottom: var(--s5); }
.auth-page > .card > .mark::before { width: 22px; height: 22px; }
.auth-page > .card > footer { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line-soft); color: var(--muted); font-size: var(--text-sm); }
.auth-page .button, .auth-page button { width: 100%; }
.google::before {
  content: ""; width: 18px; height: 18px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FFC107' d='M43.6 20.5H42V20H24v8h11.3C33.7 32.7 29.2 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34 6.1 29.3 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 20-8.9 20-20c0-1.3-.1-2.4-.4-3.5z'/%3E%3Cpath fill='%23FF3D00' d='m6.3 14.7 6.6 4.8C14.7 15.1 19 12 24 12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34 6.1 29.3 4 24 4 16.3 4 9.7 8.3 6.3 14.7z'/%3E%3Cpath fill='%234CAF50' d='M24 44c5.2 0 9.9-2 13.4-5.2l-6.2-5.2C29.2 35.1 26.7 36 24 36c-5.2 0-9.6-3.3-11.3-8l-6.5 5C9.5 39.6 16.2 44 24 44z'/%3E%3Cpath fill='%231976D2' d='M43.6 20.5H42V20H24v8h11.3c-.8 2.2-2.2 4.2-4.1 5.6l6.2 5.2C37 39.2 44 34 44 24c0-1.3-.1-2.4-.4-3.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* -------------------------------------------------------------- marketing */
.hero { padding: var(--s9) 0 var(--s8); max-width: 820px; }
.hero h1 { font-size: var(--display); font-weight: 700; letter-spacing: -0.04em; line-height: 1.02; }
.hero > p:not(.eyebrow) { margin-top: var(--s5); font-size: 19px; line-height: 1.55; color: var(--muted); max-width: 58ch; }
.hero .actions { margin-top: var(--s6); }

.features { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.features > * { padding: var(--s5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.features h3 { font-size: var(--text-lg); margin-bottom: var(--s2); }
.features p { color: var(--muted); }
.icon {
  display: inline-grid; place-items: center; width: 36px; height: 36px; margin-bottom: var(--s4);
  border-radius: 9px; background: var(--line-soft); color: var(--fg);
}
.icon svg { width: 18px; height: 18px; }

.cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s5);
  padding: var(--s7) var(--s6); border-radius: 16px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.cta h2 { font-size: 28px; letter-spacing: -0.03em; }
.cta p { color: var(--muted); margin-top: var(--s2); }

/* ------------------------------------------------------------------ prose */
.prose { max-width: var(--measure); font-size: var(--text-md); line-height: 1.7; }
.prose > * + * { margin-top: 1em; }
.prose h1 { font-size: 36px; letter-spacing: -0.03em; line-height: 1.15; }
.prose h2 { font-size: 22px; margin-top: 2em; }
.prose h3 { font-size: 17px; margin-top: 1.6em; }
.prose h2 + *, .prose h3 + * { margin-top: .6em; }
.prose a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent); }
.prose a:hover { text-decoration-color: var(--link); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .35em; }
.prose li::marker { color: var(--faint); }
.prose blockquote { margin: 1.4em 0; padding-left: var(--s4); border-left: 3px solid var(--accent); color: var(--muted); }
.prose pre { font-size: 13px; }
.prose table { font-size: var(--text); }
.prose figure { margin: 1.6em 0; }
.prose figcaption { margin-top: var(--s2); color: var(--muted); font-size: var(--text-sm); }
.lede { font-size: 19px; line-height: 1.55; color: var(--muted); }

/* ------------------------------------------------------------ responsive */
/* Below 900px the product name hides and the favicon stays as the home link:
   the mark's own text shrinks to nothing. The trail needs the room sooner
   than the rest of the banner. */
@media (max-width: 900px) {
  :is(body, .frame) > header > .mark:has(> img) { font-size: 0; gap: 0; }
}
@supports not (anchor-name: --pages) {
  @media (max-width: 900px) { nav.pages[popover] { left: calc(var(--s4) + 34px); } }
}
/* Below 640px the trail's middle levels collapse to one ellipsis between the
   root and the current page. */
@media (max-width: 640px) {
  :is(body, .frame) > header:has(> nav.crumbs) { gap: var(--s2); }
  :is(body, .frame) > header > nav.crumbs { margin-left: calc(var(--s2) + 4px - var(--s3)); }
  :is(body, .frame) > header > nav.crumbs li:not(:first-child):not(:last-child) { display: none; }
  :is(body, .frame) > header > nav.crumbs li:nth-child(n+3):last-child::before { content: "/ \2026 /"; letter-spacing: 1px; }
}
@media (max-width: 640px) {
  :root { --h1: 26px; --h2: 21px; }
  :is(body, .frame) > header { gap: var(--s3); }
  :is(body, .frame) > header > :is(span, a:not([class])) { display: none; }
  :is(body, .frame) > header > nav:not(.crumbs, .pages) { display: none; }
  main { padding-top: var(--s5); }
  .hero { padding: var(--s7) 0 var(--s6); }
  .hero > p:not(.eyebrow) { font-size: 17px; }
  .cta { padding: var(--s6) var(--s5); }
  .auth-page > .card { padding: var(--s5); }
  dl.kv { grid-template-columns: 1fr; }
  dl.kv dt { border-bottom: 0; padding-bottom: 0; }
}

/* ============================================================ page additions
   Page-specific rules, grouped by page. */
/* == specimen / app == */
/* general-purpose helpers */
.cluster { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

.display { font-size: var(--display); font-weight: 700; letter-spacing: -0.04em; line-height: 1.02; }
.text-lg { font-size: var(--text-lg); }
.text-md { font-size: var(--text-md); }
.text-xs { font-size: var(--text-xs); }

/* page sections: a titled block with generous separation */
main > section { margin-top: var(--s8); }
main > section > * + * { margin-top: var(--s5); }
main > section > .section-head + * { margin-top: 0; }
main > section > .section-head { margin-bottom: var(--s5); }
main > section > .section-head h2 { font-size: var(--h3); }

/* app panel: table beside the add form on wide screens */
.panel { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 960px) { .panel { grid-template-columns: minmax(0, 1fr) 360px; } }
.panel > table, .panel > .card { margin: 0; }

/* specimen: color tokens */
.swatches { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.swatch { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.swatch > i { display: block; height: 56px; background: var(--c); border-bottom: 1px solid var(--line-soft); }
.swatch > b { display: block; padding: var(--s2) var(--s3) 0; font-size: var(--text-sm); font-weight: 600; }
.swatch > code { display: block; margin: 0 var(--s3) var(--s3); padding: 0; background: none; color: var(--muted); font-size: 12px; }
.swatch[data-token="bg"] > i { --c: var(--bg); }
.swatch[data-token="surface"] > i { --c: var(--surface); }
.swatch[data-token="subtle"] > i { --c: var(--subtle); }
.swatch[data-token="line-soft"] > i { --c: var(--line-soft); }
.swatch[data-token="line"] > i { --c: var(--line); }
.swatch[data-token="faint"] > i { --c: var(--faint); }
.swatch[data-token="muted"] > i { --c: var(--muted); }
.swatch[data-token="fg"] > i { --c: var(--fg); }
.swatch[data-token="accent"] > i { --c: var(--accent); }
.swatch[data-token="accent-hover"] > i { --c: var(--accent-hover); }
.swatch[data-token="link"] > i { --c: var(--link); }
.swatch[data-token="ok"] > i { --c: var(--ok); }
.swatch[data-token="warn"] > i { --c: var(--warn); }
.swatch[data-token="err"] > i { --c: var(--err); }

/* specimen: type scale rows */
.type-scale { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.type-scale > div {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s4); align-items: baseline;
  padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line-soft);
}
.type-scale > div:last-child { border-bottom: 0; }
.type-scale > div > small { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.type-scale > div > :last-child { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .type-scale > div { grid-template-columns: 1fr; gap: var(--s1); padding: var(--s3) var(--s4); }
}
/* banner lab: each variant in its own frame, the banner alone */
.frame { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.frame > header { border-bottom: 0; }
.frame.tall { height: 180px; }
.frame.mid { width: 880px; max-width: 100%; }
.frame.narrow { width: 375px; max-width: 100%; }
/* A mid frame on a wide screen takes the banner's below-900px rules; a narrow
   frame takes those and the below-640px rules. */
.frame:is(.mid, .narrow) > header > .mark:has(> img) { font-size: 0; gap: 0; }
.frame.narrow > header { gap: var(--s3); }
.frame.narrow > header:has(> nav.crumbs) { gap: var(--s2); }
.frame.narrow > header > nav.crumbs { margin-left: calc(var(--s2) + 4px - var(--s3)); }
.frame.narrow > header > nav.crumbs li:not(:first-child):not(:last-child) { display: none; }
.frame.narrow > header > nav.crumbs li:nth-child(n+3):last-child::before { content: "/ \2026 /"; letter-spacing: 1px; }
/* specimen: icon set */
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.icon-grid figure { margin: 0; display: grid; justify-items: center; gap: var(--s2); padding: var(--s4) var(--s2) var(--s3);
  border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.icon-grid svg.ico { width: 20px; height: 20px; }
.icon-grid figcaption { font-size: 11px; color: var(--faint); text-align: center; }
/* == login / profile == */
/* Small buttons, and forms that are just one inline button (POST actions). */
button.small, .button.small { padding: 3px 10px; font-size: var(--text-sm); line-height: 20px; }
form.inline { display: inline-flex; gap: var(--s2); max-width: none; margin: 0; }
form.inline > button { margin-top: 0; }
:is(body, .frame) > header > form { margin: 0; }
:is(body, .frame) > header button { white-space: nowrap; }
a.mark:hover { text-decoration: none; }

/* Auth cards: a smaller title, the lab's state labels, room for two states. */
.auth-page { gap: var(--s4); align-content: center; }
.auth-page > * + * { margin-top: 0; }
.auth-page > .card + .state-note { margin-top: var(--s6); }
.auth-page h1 { font-size: var(--h2); letter-spacing: -0.025em; }
.auth-page h1 + p { margin-top: var(--s2); color: var(--muted); }
.state-note {
  width: 100%; max-width: 400px; font-family: var(--mono); font-size: var(--text-xs); color: var(--faint);
  display: flex; align-items: center; gap: var(--s2);
}
.state-note::after { content: ""; flex: 1; border-top: 1px dashed var(--line); }

/* Section titles inside card headers are one step down from a page h2. */
.card > header h2 { font-size: var(--h3); }
.card > header > .actions { flex: none; }
.card > header { align-items: center; flex-wrap: wrap; }
.card > header > h2:first-child + p { flex: 1 1 240px; text-align: right; }

/* Tables inside a flush card, scrolling on narrow screens. */
.card.flush table { border: 0; border-radius: 0; }
.card.flush > .table-scroll { border-radius: 0; }
td.row-actions { text-align: right; white-space: nowrap; }
td.row-actions > * + * { margin-left: var(--s1); }
td time, td .muted { white-space: nowrap; }
.secondary-text { display: block; color: var(--muted); font-size: var(--text-sm); font-weight: 400; }

.table-scroll td { white-space: nowrap; }

/* Cards used as page sections sit at the normal section rhythm. */
main > section.card { margin-top: var(--s5); }
.card > .identity + dl.kv { margin-top: var(--s5); }

/* Identity: initials avatar beside a name. */
.identity { display: flex; align-items: center; gap: var(--s4); }
.avatar {
  display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%;
  background: var(--line-soft); color: var(--fg); font-weight: 650; font-size: 17px; letter-spacing: -0.01em;
}
.identity strong { display: block; font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.015em; }

/* A secret shown once: mono, selectable, with its copy button. */
.secret { display: flex; gap: var(--s2); align-items: stretch; }
.secret > code {
  flex: 1; min-width: 0; padding: 8px 11px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--subtle); font-size: 13px; overflow-wrap: anywhere; user-select: all;
}

/* Toast: a short notice confirming an action, such as a copy. feedback.js
   keeps one .toasts live region in the corner and drops each .toast into it;
   it shows for about two seconds (an error, longer), then fades. data-kind="err" for failure. */
.toasts {
  position: fixed; right: var(--s5); bottom: var(--s5); z-index: 100;
  display: grid; gap: var(--s2); justify-items: end; pointer-events: none;
}
.toast {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 10px 14px; border-radius: var(--r); box-shadow: var(--shadow);
  background: var(--fg); color: var(--accent-fg); font-size: var(--text-sm); font-weight: 550;
}
.toast::before {
  content: ""; width: 16px; height: 16px; flex: none;
  background: currentColor; -webkit-mask: var(--i-ok) center / contain no-repeat; mask: var(--i-ok) center / contain no-repeat;
}
.toast[data-kind="err"] { background: var(--err); }
.toast[data-kind="err"]::before { -webkit-mask-image: var(--i-err); mask-image: var(--i-err); }
.toasts > .toast { animation: toast 2.2s ease-out forwards; }
.toasts > .toast[data-kind="err"] { animation-duration: 4.5s; }
@keyframes toast {
  0% { opacity: 0; transform: translateY(8px); }
  8%, 85% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(4px); }
}
@keyframes toast-fade { 0% { opacity: 0; } 8%, 85% { opacity: 1; } 100% { opacity: 0; } }
/* Reduced motion: the toast fades in place. The button press stays; it is
   small, and only follows the user's own click. */
@media (prefers-reduced-motion: reduce) { .toasts > .toast { animation-name: toast-fade; } }

/* Destructive zone. */
.card.danger { border-color: color-mix(in srgb, var(--err) 30%, var(--line)); }
.card.danger > header { border-bottom-color: color-mix(in srgb, var(--err) 18%, var(--line)); }
.card.danger > header h2 { color: var(--err); }
.row { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.row p { color: var(--muted); max-width: 56ch; }
.row strong { display: block; color: var(--fg); font-weight: 600; }

@media (max-width: 640px) {
  :is(body, .frame) > header > form.inline { margin-left: auto; }
  :is(body, .frame) > header > .profile ~ form.inline { margin-left: 0; }
  .card > header > h2:first-child + p { text-align: left; }
  .identity { gap: var(--s3); }
}
/* == landing / prose == */
/* Marketing and docs pages carry body.site: header CTA, section bands, footer. */
body.site > header > .button { margin-left: auto; }
body.site main > .hero { margin-top: 0; }
.hero > .eyebrow { margin: 0 0 var(--s4); font-size: var(--text-xs); line-height: 1.5; color: var(--muted); max-width: none; }
body.site main > section.band, body.site main > section.cta { margin-top: var(--s9); }

.band-head { max-width: 640px; margin-bottom: var(--s6); }
.band-head h2 { font-size: 32px; letter-spacing: -0.03em; line-height: 1.12; margin-top: var(--s2); }
.band-head > p:last-child:not(.eyebrow) { margin-top: var(--s3); color: var(--muted); font-size: var(--text-md); }
.features > article > h3 + p { margin-top: 0; }
.cta > div:first-child { flex: 1 1 380px; max-width: 580px; }

/* A framed window around real components: the product shot. */
.showcase {
  margin: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  background: var(--bg); box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 24px 64px -12px rgba(16, 24, 40, .16);
}
.showcase-bar {
  display: flex; align-items: center; gap: var(--s4); height: 48px; padding: 0 var(--s5);
  background: var(--surface); border-bottom: 1px solid var(--line); font-size: var(--text-sm);
}
.showcase-bar .mark { font-size: 14px; }
.showcase-url {
  margin: 0 auto; padding: 3px 12px; border-radius: 999px; background: var(--subtle);
  border: 1px solid var(--line-soft); color: var(--muted); font-family: var(--mono); font-size: 12px;
}
.showcase-user { color: var(--muted); }
.showcase-user:hover { color: var(--fg); }
.showcase-body { padding: var(--s6) var(--s5); }
.showcase-body > .section-head { margin-bottom: var(--s4); align-items: center; }
.showcase-body h3 { font-size: var(--h3); }

/* Numbered steps: prose on the left, the command on the right. */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: var(--s5); }
.steps > li {
  counter-increment: step; display: grid; gap: var(--s4) var(--s6); align-items: start;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  padding-top: var(--s5); border-top: 1px solid var(--line);
}
.steps > li > div { position: relative; padding-left: 44px; }
.steps > li > div::before {
  content: counter(step); position: absolute; left: 0; top: -2px;
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px;
  background: var(--line-soft); color: var(--fg); font-weight: 650; font-size: var(--text-sm);
}
.steps h3 { font-size: var(--text-lg); margin-bottom: var(--s2); }
.steps p { color: var(--muted); }
.steps pre { font-size: 13px; background: var(--surface); }
pre .prompt { color: var(--faint); user-select: none; }
pre .out { color: var(--muted); }

/* Footer: brand plus link columns. */
.footer-grid { display: grid; gap: var(--s6); grid-template-columns: 2fr repeat(3, 1fr); }
.footer-grid .mark { font-size: 15px; }
.footer-grid > div p { margin-top: var(--s2); max-width: 32ch; }
.footer-grid nav { display: grid; gap: var(--s2); align-content: start; }
.footer-grid h4 { color: var(--fg); font-size: var(--text-sm); margin-bottom: var(--s1); }
.footer-grid nav a { color: var(--muted); }
.footer-grid nav a:hover { color: var(--fg); }
.footer-legal { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--line-soft); color: var(--faint); }

/* Docs: sticky table of contents beside the article on wide screens. */
main.doc { display: grid; gap: var(--s7); grid-template-columns: 200px minmax(0, 1fr); align-items: start; padding-top: var(--s7); }
main.doc > * + * { margin-top: 0; }
.toc { position: sticky; top: var(--s5); font-size: var(--text-sm); }
.toc h4 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; margin-bottom: var(--s3); }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.toc a { display: block; padding: 5px 0 5px var(--s3); margin-left: -1px; border-left: 2px solid transparent; color: var(--muted); }
.toc a:hover { color: var(--fg); border-left-color: var(--line); text-decoration: none; }
.toc li:first-child a { color: var(--fg); border-left-color: var(--accent); }
.prose .eyebrow + h1 { margin-top: var(--s2); }
.prose .meta { color: var(--faint); font-size: var(--text-sm); padding-bottom: var(--s5); border-bottom: 1px solid var(--line); }
.prose h2 { scroll-margin-top: var(--s5); }
.prose .alert { margin: 1.4em 0; font-size: var(--text); line-height: 1.5; }
.prose .alert p { margin-top: 0; }

@media (max-width: 900px) {
  main.doc { grid-template-columns: minmax(0, 1fr); padding-top: var(--s5); }
  .toc { display: none; }
  .steps > li { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  body.site main > section.band, body.site main > section.cta { margin-top: var(--s8); }
  .band-head h2 { font-size: 26px; }
  .prose h1 { font-size: 30px; }
  .showcase-url, .showcase-user { display: none; }
  .showcase-body { padding: var(--s5) var(--s4); }
  .showcase-body .table-scroll, .showcase-body table { font-size: var(--text-sm); }
  .steps > li > div { padding-left: 40px; }
  .cta h2 { font-size: 24px; }
}