/* Metaphi AI: the design for account pages (sign-in, the console, API keys, credits).

   The tokens in both themes, the ground, the frame, the head with the tile and the wordmark, the label, the page
   title, the foot, the door and its sheet; then what a console adds (a field, a list of keys, a quiet table),
   built from the same tokens and nothing else. */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=JetBrains+Mono:wght@400;500&family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&display=swap");
:root {
  --paper: #fcfbf8;
  --ink: #0b0b0a;
  --ink-2: #5c5852;
  --ink-3: #9a958c;
  --rule: rgba(11, 11, 10, 0.14);
  /* a sheet laid on the page: a shade off the paper, lifted by a soft shadow, no drawn edge */
  --sheet: #ffffff;
  --lift: 0 1px 2px rgba(11, 11, 10, 0.04), 0 4px 16px rgba(11, 11, 10, 0.04);
  --lift-up: 0 1px 2px rgba(11, 11, 10, 0.06), 0 8px 28px rgba(11, 11, 10, 0.08);
  /* the screen behind the front sheet: the same palette, inverted */
  --back: #141311;
  --back-ink: #f1efe9;
  --back-ink-2: #b3ada2;
  --back-ink-3: #78736a;
  --back-rule: rgba(241, 239, 233, 0.16);
  --sans: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --measure: 34rem;
  color-scheme: light;
}
:root[data-theme="dark"] {
  /* the banners' palette: a near-black ground, warm ivory ink, greys with a trace of bronze, a gold accent */
  --paper: #0b0b0a;
  --ink: #f2ede4;
  --ink-2: #b7ac9c;
  --ink-3: #7c7265;
  --rule: rgba(223, 164, 106, 0.16);
  --sheet: #15120f;
  --lift: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.35);
  --lift-up: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 28px rgba(0, 0, 0, 0.5);
  --back: #fcfbf8;
  --back-ink: #0b0b0a;
  --back-ink-2: #5c5852;
  --back-ink-3: #9a958c;
  --back-rule: rgba(11, 11, 10, 0.14);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-optical-sizing: auto;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.wrap { width: min(100% - 3rem, 62rem); margin: 0 auto; }
.site-band { width: min(100% - 3rem, 62rem); margin: 0 auto; }
/* the frame fills the viewport so the footer sits at the foot of a short page */
.frame { min-height: 100dvh; display: flex; flex-direction: column; }
.frame main { flex: 1; }
.skip {
  position: absolute; left: -999px; top: 0;
  padding: 0.5rem 0.75rem; background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 0.8rem;
}
.skip:focus { left: 1rem; top: 1rem; z-index: 10; }

/* header: the wordmark in the serif, the navigation in the sans */
/* the head reaches past the page frame where the viewport allows: the brand sits further left, the toggle further right */
.site-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 1.75rem;
  padding: 1.6rem 0 0;
  margin-inline: calc(-1 * clamp(0rem, (100vw - 65rem) / 2, 8rem));
}
.site-head .site-nav { justify-content: center; }
.site-head .site-tools { justify-self: end; display: inline-flex; align-items: center; gap: 0.25rem; }
.site-head .menu { display: none; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  min-height: 44px;
}
.brand .tile {
  width: 1.15rem;
  height: 1.15rem;
  background: var(--ink);
  color: var(--paper);
  display: inline-grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1;
  transform: translateY(-1px);
}
.site-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 2rem;
  font-size: 0.95rem;
  color: var(--ink-2);
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav a:hover { border-bottom-color: var(--ink); }
/* the door at the right of the header: sign in on the words site, sign out on the app host */
.site-door {
  display: inline-flex; align-items: center; min-height: 44px; margin: 0 0.5rem 0 0;
  font-size: 0.95rem; color: var(--ink-2);
}
.site-door:hover { color: var(--ink); }
form.site-door button {
  appearance: none; border: 0; background: none; padding: 0; margin: 0; min-height: 44px;
  font: inherit; color: inherit; cursor: pointer;
}
form.site-door button:hover { color: var(--ink); }
/* on a desk the door is in the tools; the copy inside the navigation waits for the phone */
.site-nav .site-door { display: none; }
.theme {
  appearance: none; border: 0; background: none; padding: 0; margin: 0;
  color: var(--ink-2); cursor: pointer; display: inline-grid; place-items: center;
  width: 44px; height: 44px; margin-right: -12px;
}
.theme:hover { color: var(--ink); }
.menu {
  appearance: none; border: 0; background: none; padding: 0; margin: 0 -12px 0 0;
  color: var(--ink-2); cursor: pointer; display: inline-grid; place-items: center;
  width: 44px; height: 44px;
}
.menu:hover { color: var(--ink); }
.menu svg { width: 1.25rem; height: 1.25rem; }
.theme svg { width: 0.95rem; height: 0.95rem; }
.theme .moon { display: none; }
:root[data-theme="dark"] .theme .sun { display: none; }
:root[data-theme="dark"] .theme .moon { display: block; }

.label {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 1.25rem;
}
.page-title {
  margin: clamp(3rem, 10vh, 6rem) 0 2.5rem;
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4.5vw, 3rem);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: 40rem;
  text-wrap: balance;
}
.intro { margin: 0; font-size: 1.1rem; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 0.5rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink-2);
  border-bottom: 1px solid var(--rule);
}
.more:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* footer: one mono line, the copyright and social at the left, company and legal at the right;
   it reaches past the page frame exactly as far as the head does, so the two span the same width */
.site-foot {
  margin-top: clamp(3rem, 8vh, 5rem);
  margin-inline: calc(-1 * clamp(0rem, (100vw - 65rem) / 2, 8rem));
  padding: 1.5rem 0 2rem;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.site-foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.site-foot li { display: inline-flex; align-items: center; min-height: 32px; }
.site-foot li + li { border-left: 1px solid var(--rule); margin-left: 1.1rem; padding-left: 1.1rem; }
.site-foot a { color: var(--ink-2); }
.site-foot a:hover { color: var(--ink); }

/* The door: sign-in. One short column at the centre of the page; the sheet and what stands in it are the console's too. */
.door main { display: grid; grid-template-columns: minmax(0, 28rem); justify-content: center; align-content: center; row-gap: 2.25rem; padding: 2rem 0 clamp(5rem, 18vh, 11rem); }
.door .door-head { display: grid; gap: 1rem; justify-items: center; text-align: center; }
.door .page-title { margin: 0; }
.intro b { font-weight: 500; color: var(--ink); }
/* dark, the banners' streaks hang behind the top, as on the home page, and fade into the ground behind the sheet */
:root[data-theme="dark"] .door::before, :root[data-theme="dark"] .console::before {
  content: ""; position: fixed; inset: 0 0 auto 0; height: 80svh; z-index: -1; pointer-events: none;
  background: url("/brand/streaks.jpg") left top / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.55) 22%, rgba(0, 0, 0, 0.2) 42%, transparent 78%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.55) 22%, rgba(0, 0, 0, 0.2) 42%, transparent 78%);
  opacity: 0.95;
}

/* the sheet: a card (the site's), holding rows divided by the rule */
.sheet { padding: 0.5rem 2rem; border-radius: 4px; background: var(--sheet); box-shadow: var(--lift); display: grid; }
.sheet > * + *, .sheet .ways > * + * { border-top: 1px solid var(--rule); }
.sheet .ways, .sheet form { display: grid; }

/* a way in: the provider's mark in the ink, the words, an arrow that wakes under the pointer */
.way { appearance: none; display: flex; align-items: center; gap: 1rem; width: 100%; min-height: 4.75rem; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ink); font-family: var(--sans); font-size: 1.15rem; font-weight: 500; letter-spacing: -0.01em; text-align: left; cursor: pointer; }
.way svg { width: 1.2rem; height: 1.2rem; flex: none; }
.way .go { margin-left: auto; font-family: var(--mono); font-size: 0.85rem; font-weight: 400; color: var(--ink-3); }
.way:hover .go, .way:focus-visible .go { color: var(--ink); }
.way:disabled { opacity: 0.5; cursor: default; }
.said { margin: 0; padding: 1rem 0; font-family: var(--mono); font-size: 0.8rem; color: var(--ink-2); }

/* a fact: its label in the mono above or beside what it names */
.pair { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; padding: 1.15rem 0; min-width: 0; }
.pair .label { flex: none; }
.pair .fact { margin: 0; font-size: 1.05rem; color: var(--ink); text-align: right; overflow-wrap: anywhere; min-width: 0; }
.pair .fact code, .pair .fact.code { font-family: var(--mono); font-size: 0.85rem; color: var(--ink-2); }
.line { margin: 0; padding: 1.15rem 0; font-size: 1.05rem; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; overflow-wrap: anywhere; }
.line b { font-weight: 500; color: var(--ink); }

/* the decision: square, mono, the first in the ink and the rest a rule, as the shelf's buttons */
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; padding: 1.25rem 0; }
.act { appearance: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1.4rem; border: 1px solid var(--rule); border-radius: 2px; background: none; color: var(--ink-2); font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
.act:hover { border-color: var(--ink); color: var(--ink); }
.act.go { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.act.go:hover { opacity: 0.85; color: var(--paper); }
.quiet { appearance: none; margin-left: auto; padding: 0; border: 0; background: none; min-height: 44px; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); cursor: pointer; }
.quiet:hover { color: var(--ink); }
.acts form { display: contents; }

@media (max-width: 720px) {
  .sheet { padding: 0.25rem 1.25rem; }
  .pair { flex-direction: column; gap: 0.35rem; }
  .pair .fact { text-align: left; }
}

/* between the phone and the wide desk the side columns give way: the wordmark and the tools take their own width */
@media (max-width: 1000px) {
  .site-head { grid-template-columns: auto 1fr auto; column-gap: 1.25rem; }
  .site-nav { gap: 0 1.4rem; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .site-head { position: relative; margin-inline: 0; grid-template-columns: 1fr auto; padding-top: 1rem; }
  .site-head .menu { display: inline-grid; }
  .site-head .theme { margin-right: 0; }
  /* the navigation folds behind the menu button; open, it is a sheet in the inverted palette laid over
     the page under the head, one link per row in the mono, a hairline between rows */
  .site-head .site-nav {
    position: absolute; left: 0; right: 0; top: calc(100% + 0.75rem); z-index: 20;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 0.5rem 1.25rem 0.75rem; border-radius: 4px;
    background: var(--back); color: var(--back-ink-2); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase;
  }
  .site-head .site-nav a { min-height: 60px; border-bottom: 1px solid var(--back-rule); }
  .site-head .site-nav a:last-child { border-bottom: 0; }
  /* on a phone the door is the last row of the menu sheet, not a link beside the toggle */
  .site-tools .site-door { display: none; }
  .site-head .site-nav .site-door { display: flex; align-items: center; min-height: 60px; margin: 0; font: inherit; color: inherit; border-bottom: 0; }
  .site-head .site-nav a.site-door:hover { color: var(--back-ink); }
  .site-head .site-nav form.site-door button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; min-height: 60px; }
  .site-head .site-nav form.site-door button:hover { color: var(--back-ink); }
  .site-head:not([data-js]) .site-nav .site-door:hover, .site-head:not([data-js]) .site-nav form.site-door button:hover { color: var(--ink); }
  .site-head .site-nav a:hover, .site-head .site-nav a[aria-current="page"] { color: var(--back-ink); }
  .site-head[data-js]:not([data-open]) .site-nav { display: none; }
  /* without JavaScript the navigation stays in the flow under the head */
  .site-head:not([data-js]) .site-nav { position: static; padding: 0.5rem 0 0.75rem; box-shadow: none; background: none; color: var(--ink-2); grid-column: 1 / -1; grid-row: 2; }
  .site-head:not([data-js]) .site-nav a { border-bottom-color: var(--rule); }
  .site-head:not([data-js]) .site-nav a:hover, .site-head:not([data-js]) .site-nav a[aria-current="page"] { color: var(--ink); }
  html[data-menu="open"] { overflow: hidden; }
  .page-title { font-size: 2rem; }
  .site-foot { margin-inline: 0; flex-direction: column-reverse; align-items: flex-start; gap: 1.25rem; }
  .site-foot ul { gap: 0.35rem 1.4rem; }
  .site-foot li + li { border-left: 0; margin-left: 0; padding-left: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .site-nav a, .more, .site-foot a, .way .go, .act, .quiet { transition: border-color 160ms ease, color 160ms ease, opacity 160ms ease; }
}

/* ---------------------------------------------------------------------------------------------------------------
   The console. One column of sheets under the page title, each under its label: the door's sheet, wider. */
.console main { width: 100%; max-width: 46rem; margin-inline: auto; display: grid; align-content: start; row-gap: 2.25rem; padding-bottom: clamp(4rem, 12vh, 7rem); }
.console.wide main { max-width: 62rem; }
.console .page-title { margin: clamp(3rem, 8vh, 5rem) 0 0; }
.stack { display: grid; row-gap: 2.25rem; }
.stack:empty, .said:empty { display: none; }
.section { display: grid; gap: 0.9rem; min-width: 0; }
.section > .label { margin: 0; }
.section > .more { justify-self: start; margin-top: 0; }
[hidden] { display: none !important; }
/* the door's title and line stand at the centre; its fields fill the sheet */
.door .said { color: var(--ink-2); }

/* a figure: the one number a sheet is about */
.figure, .pair .fact.figure { margin: 0; font-family: var(--serif); font-size: 2rem; font-weight: 300; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }

/* a field: what a person types, on one line with the button that sends it */
input, select { appearance: none; min-height: 44px; min-width: 0; padding: 0 0.85rem; border: 1px solid var(--rule); border-radius: 2px; background: transparent; color: var(--ink); font-family: var(--sans); font-size: 1rem; }
input::placeholder { color: var(--ink-3); }
input:focus-visible, select:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
input[type="checkbox"] { appearance: auto; min-height: 0; width: 1rem; height: 1rem; padding: 0; margin: 0; accent-color: var(--ink); }
.field { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0; padding: 1.15rem 0; min-width: 0; }
.field > input:not([type="checkbox"]), .field > select { flex: 1 1 10rem; max-width: 18rem; }
.field label { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; font-family: var(--mono); font-size: 0.75rem; color: var(--ink-2); }
.entry { display: grid; gap: 0.6rem; padding: 1.15rem 0; }
.entry .label { margin: 0; }
.entry input { width: 100%; font-family: var(--mono); letter-spacing: 0.12em; }
/* the decision, where a page names it a button */
.btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1.4rem; border: 1px solid var(--ink); border-radius: 2px; background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.btn:hover { opacity: 0.85; }
.btn:disabled, .act:disabled { opacity: 0.4; cursor: default; }
.acts .more { margin: 0 0 0 auto; }

/* an item in a sheet: its name, the facts under it in the mono, one action at the right */
.item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.4rem 1.5rem; align-items: center; padding: 1.15rem 0; min-width: 0; }
.item .name { margin: 0; font-size: 1.05rem; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); overflow-wrap: anywhere; }
.item .facts { grid-column: 1; margin: 0; font-family: var(--mono); font-size: 0.75rem; line-height: 1.6; color: var(--ink-3); overflow-wrap: anywhere; }
.item .act, .item .btn { grid-column: 2; grid-row: 1 / span 2; }
.item.off .name { color: var(--ink-3); }
.tag { display: inline-block; margin-left: 0.6rem; padding: 0.1rem 0.4rem; border: 1px solid var(--rule); border-radius: 2px; font-family: var(--mono); font-size: 0.66rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); vertical-align: 0.15em; }
/* a key, said once */
.once { display: block; margin: 0 0 1.15rem; padding: 0.85rem 1rem; border: 1px solid var(--rule); border-radius: 2px; font-family: var(--mono); font-size: 0.85rem; color: var(--ink); overflow-wrap: anywhere; user-select: all; }

/* a quiet table: the mono, a hairline under each row, no ground of its own */
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 0.8rem 1.25rem 0.8rem 0; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--rule); font-family: var(--mono); font-size: 0.78rem; font-weight: 400; color: var(--ink-2); }
th { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
tr:last-child td { border-bottom: 0; }
.off td { color: var(--ink-3); }
/* what a page writes as it goes, between two labels */
.flow > * + * { margin-top: 1rem; }
.flow > .label { margin: 2.25rem 0 0; }
.flow > .label:first-child { margin-top: 0; }
.body { margin: 0; font-size: 1.05rem; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.body b { font-weight: 500; color: var(--ink); }
.flow > .fact { margin: 0; font-family: var(--mono); font-size: 0.8rem; color: var(--ink-2); overflow-wrap: anywhere; }
.muted { color: var(--ink-3); }

@media (max-width: 720px) {
  .item { grid-template-columns: minmax(0, 1fr); }
  .item .act, .item .btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 0.4rem; }
  .field > input:not([type="checkbox"]), .field > select { max-width: none; }
}