:root {
  /* One warm neutral ramp. Status colors borrow from the same family so a page
     never looks like two palettes stacked on top of each other. */
  --ink: #1c1917;
  --ink-2: #57534e;
  /* Dark enough for AA on the tinted backgrounds this is used over: muted text
     sits on --page, --sunken, and --surface, and #78716c only cleared 4.5:1 on
     the white one. */
  --muted: #6f6862;
  --faint: #a8a29e;
  --border: #e7e5e4;
  --border-strong: #d6d3d1;
  --surface: #ffffff;
  --page: #f8f6f1;
  --sunken: #f5f3ef;
  --accent: #1d7a5f;
  --accent-dark: #16614b;
  --accent-soft: #e8f5f0;
  --danger: #b4451f;
  --danger-soft: #fdf0ec;
  /* The one token the app stylesheet borrows from the landing page's terminal
     preview, because the license key is the single thing a buyer substitutes. */
  --amber: #b45309;
  --amber-tint: #fef6ec;
  --amber-line: #f2d9b8;

  /* A four-pixel scale, so padding is a decision already made. */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;

  --radius: 0.625rem;
  --radius-sm: 0.5rem;
  /* Two shadows: a tight one for the edge, a soft one for the lift. */
  --shadow: 0 1px 2px rgba(28, 25, 23, 0.05), 0 2px 8px rgba(28, 25, 23, 0.06);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

code {
  font-family: var(--mono);
  font-size: 0.875em;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s3) var(--s5);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.wordmark {
  color: var(--ink);
  font-weight: 650;
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  text-decoration: none;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--s4);
  font-size: 0.875rem;
}

.site-nav a { color: var(--accent); text-decoration: none; }
.account { color: var(--muted); }
.inline-form { display: inline; margin: 0; }
.link-button {
  border: 0;
  background: none;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  padding: 0;
}

.page {
  max-width: 60rem;
  margin: 0 auto;
  padding: var(--s7) var(--s5) 5rem;
}

/* ---- Headings -------------------------------------------------------- */

h1 {
  font-size: 1.75rem;
  font-weight: 650;
  letter-spacing: -0.022em;
  line-height: 1.2;
  margin: 0 0 var(--s1);
}

.page-head { margin-bottom: var(--s5); }

.eyebrow {
  margin: 0 0 var(--s2);
  color: var(--accent);
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lede {
  color: var(--ink-2);
  font-size: 0.9375rem;
  margin: 0;
  max-width: 42rem;
}

.hint {
  color: var(--muted);
  font-size: 0.8125rem;
}

.hint code,
.panel-note code {
  background: var(--sunken);
  border-radius: var(--s1);
  padding: 0.1em 0.35em;
  overflow-wrap: anywhere;
}

.placeholder { color: var(--muted); margin: 0; }
.notice { color: var(--accent); }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s5);
  color: var(--muted);
  font-size: 0.8125rem;
}
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .sep { color: var(--faint); }

/* ---- Panels ---------------------------------------------------------- */

.dashboard,
.product-detail {
  display: grid;
  gap: var(--s4);
}

/* A grid item's automatic minimum size is its min-content size, so one long
   unbreakable string (a URL, a wheel filename, a package name) would widen the
   whole page instead of scrolling or wrapping inside its card. */
.dashboard > *,
.product-detail > *,
.panels > * {
  min-width: 0;
}

.panels {
  display: grid;
  gap: var(--s4);
  /* Panels keep their own height instead of stretching to match a taller
     neighbour, which would leave a tall card with one line in it. */
  align-items: start;
  /* The track floor is clamped to the container, so the pair still reflows to
     one column at 320px instead of overflowing horizontally. */
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
}

.account-panel,
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--s5);
}

.panel-head { margin-bottom: var(--s4); }
.panel-head h2 { margin: 0; }
.panel h2 {
  font-size: 1.0625rem;
  font-weight: 620;
  letter-spacing: -0.012em;
}
.panel-note {
  margin: var(--s1) 0 0;
  color: var(--muted);
  font-size: 0.8125rem;
  max-width: 42rem;
}
.sub-head {
  margin: var(--s5) 0 var(--s3);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- Chips and badges ------------------------------------------------ */

.chip,
.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.125rem 0.5rem;
  background: var(--sunken);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.6;
  white-space: nowrap;
}

.chip.package,
.badge.success {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.chip.muted,
.badge.muted {
  background: var(--sunken);
  color: var(--muted);
}

.badge.failure,
.badge.action_required {
  background: var(--danger-soft);
  color: var(--danger);
}

.badge.pending,
.badge.running {
  background: #fdf4e3;
  color: #92610c;
}

/* A revoke control wears the badge shape but is a button. */
button.badge {
  border: 0;
  cursor: pointer;
  font-family: var(--mono);
}
button.badge:hover { background: var(--danger-soft); color: var(--danger); }

/* ---- Product listing ------------------------------------------------- */

.product-list,
.record-list,
.release-list,
.commands {
  list-style: none;
  margin: 0;
  padding: 0;
}

.product-list li + li { border-top: 1px solid var(--border); }

/* A package row carries a second link beside the card, so the row is a flex
   line rather than the bare anchor. */
.product-list li.product-entry {
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.product-entry .product {
  flex: 1 1 auto;
  min-width: 0;
}
.product-guide {
  flex-shrink: 0;
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 560;
  text-decoration: none;
  white-space: nowrap;
}
.product-guide:hover,
.product-guide:focus-visible { text-decoration: underline; }
.product-guide:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.product {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s3) var(--s2);
  border-radius: var(--radius-sm);
  color: inherit;
  text-decoration: none;
}
.product:hover { background: var(--sunken); }

.product-main {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.product-name {
  font-size: 0.9375rem;
  font-weight: 620;
  letter-spacing: -0.012em;
}
.product-repo {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.product-summary {
  margin-top: var(--s1);
  color: var(--ink-2);
  font-size: 0.8125rem;
}

.product-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  flex-shrink: 0;
}
.product-arrow {
  color: var(--faint);
  transition: transform 0.12s ease, color 0.12s ease;
}
.product:hover .product-arrow {
  color: var(--accent);
  transform: translateX(2px);
}

/* ---- Records (validations, keys) ------------------------------------- */

.record-list li {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) 0;
}
.record-list li + li { border-top: 1px solid var(--border); }
.record-name { font-weight: 550; }
.record-meta {
  color: var(--muted);
  font-size: 0.75rem;
  margin-left: auto;
}
.record-list form { margin: 0; }
.record-list form + .record-meta,
.record-list .record-meta + form { margin-left: 0; }

.key-reveal code {
  display: block;
  background: var(--sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--s3) var(--s4);
  overflow-x: auto;
  white-space: nowrap;
}

/* ---- Detail facts and commands --------------------------------------- */

.facts {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.facts > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s3) var(--s4);
}
.facts > div + div { border-top: 1px solid var(--border); }
.facts dt { color: var(--muted); font-size: 0.8125rem; }
.facts dd {
  margin: 0;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 550;
  overflow-wrap: anywhere;
}
.facts dd code { font-weight: 500; }

.commands { display: grid; gap: var(--s2); }
.commands li {
  display: flex;
  align-items: center;
  gap: var(--s3);
  background: var(--sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--s3) var(--s4);
  overflow-x: auto;
}
.command-tool {
  flex-shrink: 0;
  background: var(--accent-soft);
  border-radius: var(--s1);
  padding: 0.125rem 0.4rem;
  color: var(--accent-dark);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.commands code { white-space: nowrap; color: var(--ink-2); font-size: 0.8125rem; }

/* ---- The install block ----------------------------------------------- */

.install-command {
  display: grid;
  gap: var(--s2);
}
/* The command is the payload of the public page, so it takes the room it needs
   and scrolls rather than wrapping. The copy button is pinned outside the
   scrolling line, because a control that scrolls away is a control nobody
   finds. */
.install-command .commands li {
  gap: var(--s2);
  padding: var(--s2) var(--s2) var(--s2) var(--s4);
  overflow: visible;
}
.install-line {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  padding: var(--s1) 0;
}

/* The one part of the line the buyer replaces should read as a field, not as
   more command. Amber is the color the landing page's terminal preview already
   uses for it. */
.license-key {
  background: var(--amber-tint);
  border: 1px solid var(--amber-line);
  border-radius: var(--s1);
  padding: 0.0625rem 0.3rem;
  color: var(--amber);
  font-weight: 550;
}
.install-key {
  margin: var(--s4) 0 0;
  color: var(--muted);
  font-size: 0.8125rem;
}
.install-key a { font-weight: 550; }
.install-alt {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 0;
  color: var(--muted);
  font-size: 0.8125rem;
  overflow-x: auto;
}
.install-alt code { color: var(--muted); white-space: nowrap; }

.copy-button {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}
.copy-button.copy-prompt {
  width: auto;
  padding: 0 .75rem;
}
.copy-button:hover {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--ink);
}
.copy-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.copied-glyph { display: none; }
.copy-button.is-copied {
  border-color: var(--accent);
  color: var(--accent-dark);
}
.copy-button.is-copied .copy-glyph { display: none; }
.copy-button.is-copied .copied-glyph { display: block; }

.release-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s3);
  padding: var(--s2) 0;
}
.release-list li + li { border-top: 1px solid var(--border); }
.release-version { font-weight: 620; font-size: 0.875rem; }
.release-file { min-width: 0; }
.release-file code { color: var(--ink-2); overflow-wrap: anywhere; }
.release-meta {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.75rem;
}

.repo-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin: var(--s3) 0 0;
  font-size: 0.875rem;
}
.repo-line a {
  font-family: var(--mono);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.repo-line a:hover { text-decoration: underline; }

/* ---- Buttons and forms ----------------------------------------------- */

.button {
  display: inline-block;
  padding: var(--s2) var(--s4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 550;
  font-size: 0.875rem;
  text-decoration: none;
  cursor: pointer;
}
.button:hover { background: var(--sunken); }
.button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.button.primary:hover { background: var(--accent-dark); }

.actions { display: flex; gap: var(--s3); margin-top: var(--s5); }

.account-panel form,
.key-form {
  display: grid;
  gap: var(--s2);
  margin-top: var(--s4);
}
.account-panel label,
.key-form label {
  font-size: 0.8125rem;
  color: var(--muted);
}
.account-panel input,
.key-form input {
  padding: var(--s2) var(--s3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font: inherit;
  font-size: 0.9375rem;
}
.account-panel input:focus,
.key-form input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.account-panel button,
.key-form button {
  justify-self: start;
  margin-top: var(--s1);
}

.form-errors {
  margin: 0 0 var(--s4);
  padding: var(--s3) var(--s4) var(--s3) var(--s6);
  border: 1px solid #f0c2b4;
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  color: #8a3418;
  font-size: 0.875rem;
}

.terms-consent { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 1rem; }
.terms-consent input { width: auto; }

.site-footer {
  display: flex;
  justify-content: center;
  gap: var(--s4);
  padding: var(--s5);
  color: var(--muted);
  font-size: 0.875rem;
}

.site-footer a { color: var(--accent); text-decoration: none; }