:root {
  --stellar-logo-accent: #533efc;
  color-scheme: light;
  --background: oklch(0.968 0.008 265);
  --foreground: oklch(0.215 0.03 266);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.215 0.03 266);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.215 0.03 266);
  --primary: oklch(0.544 0.235 282);
  --primary-hover: oklch(0.5 0.22 282);
  --primary-foreground: oklch(0.985 0.004 265);
  --secondary: oklch(0.935 0.02 275);
  --secondary-foreground: oklch(0.265 0.045 270);
  --muted: oklch(0.94 0.009 265);
  --muted-foreground: oklch(0.485 0.03 265);
  --accent: oklch(0.925 0.035 282);
  --accent-foreground: oklch(0.29 0.09 282);
  --destructive: oklch(0.52 0.18 22);
  --destructive-action: oklch(0.52 0.18 22);
  --destructive-action-hover: oklch(0.47 0.16 22);
  --destructive-action-foreground: oklch(0.985 0.004 265);
  --success: oklch(0.47 0.125 155);
  --warning: oklch(0.548 0.12 70);
  --info: oklch(0.534 0.095 218);
  --border: oklch(0.875 0.015 265);
  --input: oklch(0.82 0.018 265);
  --ring: oklch(0.544 0.235 282);
  --chart-1: oklch(0.585 0.235 282);
  --chart-2: oklch(0.62 0.14 218);
  --chart-3: oklch(0.59 0.15 155);
  --chart-4: oklch(0.68 0.16 70);
  --chart-5: oklch(0.58 0.2 22);
  --sidebar: oklch(0.15 0.035 266);
  --sidebar-foreground: oklch(0.96 0.012 265);
  --sidebar-muted-foreground: oklch(0.7 0.035 265);
  --sidebar-primary: oklch(0.544 0.235 282);
  --sidebar-primary-foreground: oklch(0.985 0.004 265);
  --sidebar-accent: oklch(0.225 0.045 268);
  --sidebar-accent-foreground: oklch(0.98 0.008 265);
  --sidebar-border: oklch(1 0 0 / 9%);
  --sidebar-ring: oklch(0.544 0.235 282);
  --radius: 0;
  --font-sans:
    'Inter Variable', Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', sans-serif;
  --font-heading: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --stellar-content-max: 96rem;
  --stellar-sidebar-width: 15rem;
}

.dark {
  --stellar-logo-accent: #9b8cff;
  color-scheme: dark;
  --background: oklch(0.145 0.025 265);
  --foreground: oklch(0.95 0.012 265);
  --card: oklch(0.19 0.03 266);
  --card-foreground: oklch(0.95 0.012 265);
  --popover: oklch(0.205 0.035 266);
  --popover-foreground: oklch(0.95 0.012 265);
  --primary: oklch(0.7 0.18 282);
  --primary-hover: oklch(0.76 0.16 282);
  --primary-foreground: oklch(0.145 0.03 270);
  --secondary: oklch(0.255 0.04 270);
  --secondary-foreground: oklch(0.95 0.012 265);
  --muted: oklch(0.235 0.03 266);
  --muted-foreground: oklch(0.7 0.035 265);
  --accent: oklch(0.27 0.07 280);
  --accent-foreground: oklch(0.95 0.012 265);
  --destructive: oklch(0.69 0.19 22);
  --destructive-action: oklch(0.52 0.18 22);
  --destructive-action-hover: oklch(0.47 0.16 22);
  --destructive-action-foreground: oklch(0.985 0.004 265);
  --success: oklch(0.7 0.15 155);
  --warning: oklch(0.75 0.15 75);
  --info: oklch(0.72 0.13 218);
  --border: oklch(0.3 0.035 266);
  --input: oklch(0.37 0.04 266);
  --ring: oklch(0.7 0.18 282);
  --chart-1: oklch(0.7 0.18 282);
  --chart-2: oklch(0.72 0.13 218);
  --chart-3: oklch(0.7 0.15 155);
  --chart-4: oklch(0.75 0.15 75);
  --chart-5: oklch(0.69 0.19 22);
  --sidebar: oklch(0.115 0.025 266);
  --sidebar-foreground: oklch(0.96 0.012 265);
  --sidebar-muted-foreground: oklch(0.68 0.035 265);
  --sidebar-primary: oklch(0.7 0.18 282);
  --sidebar-primary-foreground: oklch(0.145 0.03 270);
  --sidebar-accent: oklch(0.205 0.04 268);
  --sidebar-accent-foreground: oklch(0.98 0.008 265);
  --sidebar-border: oklch(1 0 0 / 9%);
  --sidebar-ring: oklch(0.7 0.18 282);
}

@media screen and (prefers-color-scheme: dark) {
  :root {
  --stellar-logo-accent: #9b8cff;
  color-scheme: dark;
  --background: oklch(0.145 0.025 265);
  --foreground: oklch(0.95 0.012 265);
  --card: oklch(0.19 0.03 266);
  --card-foreground: oklch(0.95 0.012 265);
  --popover: oklch(0.205 0.035 266);
  --popover-foreground: oklch(0.95 0.012 265);
  --primary: oklch(0.7 0.18 282);
  --primary-hover: oklch(0.76 0.16 282);
  --primary-foreground: oklch(0.145 0.03 270);
  --secondary: oklch(0.255 0.04 270);
  --secondary-foreground: oklch(0.95 0.012 265);
  --muted: oklch(0.235 0.03 266);
  --muted-foreground: oklch(0.7 0.035 265);
  --accent: oklch(0.27 0.07 280);
  --accent-foreground: oklch(0.95 0.012 265);
  --destructive: oklch(0.69 0.19 22);
  --destructive-action: oklch(0.52 0.18 22);
  --destructive-action-hover: oklch(0.47 0.16 22);
  --destructive-action-foreground: oklch(0.985 0.004 265);
  --success: oklch(0.7 0.15 155);
  --warning: oklch(0.75 0.15 75);
  --info: oklch(0.72 0.13 218);
  --border: oklch(0.3 0.035 266);
  --input: oklch(0.37 0.04 266);
  --ring: oklch(0.7 0.18 282);
  --chart-1: oklch(0.7 0.18 282);
  --chart-2: oklch(0.72 0.13 218);
  --chart-3: oklch(0.7 0.15 155);
  --chart-4: oklch(0.75 0.15 75);
  --chart-5: oklch(0.69 0.19 22);
  --sidebar: oklch(0.115 0.025 266);
  --sidebar-foreground: oklch(0.96 0.012 265);
  --sidebar-muted-foreground: oklch(0.68 0.035 265);
  --sidebar-primary: oklch(0.7 0.18 282);
  --sidebar-primary-foreground: oklch(0.145 0.03 270);
  --sidebar-accent: oklch(0.205 0.04 268);
  --sidebar-accent-foreground: oklch(0.98 0.008 265);
  --sidebar-border: oklch(1 0 0 / 9%);
  --sidebar-ring: oklch(0.7 0.18 282);
  }
}

@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin.3100e775e8616cd2.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/barlow-condensed-latin-600.215a93c696f44203.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-ext.34b9c504cab7a73e.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/barlow-condensed-latin-ext-600.aef7edf54f79a532.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/*
 * The account service on the operator skin (docs/style-guide.md): the Admin's tokens, faces,
 * square shape, hairline depth, 40px controls and ring focus. assets.mjs serves tokens.css
 * first, its dark block under prefers-color-scheme, then the font faces, then this file.
 * Colours are roles only; no radius but var(--radius); no shadow but a focus ring. The pages
 * are plain HTML rendered by pages.mjs and its siblings, so the rules key on their elements
 * and the few classes they carry.
 */

/* Layout: the page ground, the brand top-left, one centred card, a caption footer. */

html {
  --stellar-card-gap: 1.5rem;
  --stellar-card-padding: 1.5rem;
  --stellar-card-header-gap: 0.375rem;
  --stellar-input-height: 2.5rem;
  /* One column for every page, so the card edge stays put from sign-in to billing. */
  --account-column: 36rem;
  --account-card-padding: var(--stellar-card-padding);
  font-family: var(--font-sans);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  display: flex;
  flex-direction: column;
  min-width: 20rem;
  min-height: 100svh;
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font: 400 14px/20px var(--font-sans);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
::selection {
  background: color-mix(in oklch, var(--primary) 25%, transparent);
}
body > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 20px;
}
/* StellarBrand: the 36px symbol, the 144px wordmark and the context line under it. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--foreground);
  text-decoration: none;
}
.brand-mark {
  display: block;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
}
.brand-word {
  display: block;
  width: 144px;
  max-width: 100%;
}
.brand-mark svg,
.brand-word svg {
  display: block;
  width: 100%;
  height: auto;
}
.brand-name {
  display: block;
  min-width: 0;
}
.brand-context {
  display: block;
  margin-top: 4px;
  color: var(--muted-foreground);
  font: 400 10px/12px var(--font-sans);
}
.language {
  flex-shrink: 0;
  margin: 0;
}
/* Top-aligned rather than centred, so the card does not jump between the steps of a flow. */
main {
  flex: 1 0 auto;
  width: min(100% - 40px, var(--account-column));
  margin: 0 auto;
}
/* The card is the only bordered container; what it holds is divided by hairlines. */
main > section {
  padding: var(--account-card-padding);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--card-foreground);
}
main > section > * {
  margin-block: 0;
}
main > section > * + * {
  margin-top: 16px;
}
main > section > a:not(.app) {
  display: block;
  width: fit-content;
}
body > footer {
  width: min(100% - 40px, var(--account-column));
  margin: 0 auto;
  padding: 24px 0 32px;
  color: var(--muted-foreground);
  font: 400 12px/16px var(--font-sans);
  text-align: center;
}
@media (min-width: 640px) {
  html {
    --account-card-padding: 2.5rem;
  }
  body > header {
    padding-inline: 32px;
  }
  main {
    margin-top: 32px;
  }
}

/* Type: the operator roles. */

main h1 {
  font: 600 30px/36px var(--font-heading);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  overflow-wrap: break-word;
}
/* Eyebrow: the scope of the page, above its title. */
.context {
  color: var(--primary);
  font: 600 10px/16px var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
main > section > .context + h1 {
  margin-top: 8px;
}
/* Description: the plain paragraph right under the title. The text after it in the card keeps
   its 24px leading, so a page of several paragraphs changes in colour only, not in rhythm. */
main > section > h1 + p:not([class], [role]) {
  margin-top: 8px;
  color: var(--muted-foreground);
}
main > section > :is(p:not([class], [role]), a:not(.app)) {
  line-height: 24px;
}
/* Card title and section title, sentence case as CardTitle and OperationsSection draw them. */
main h2 {
  font: 600 18px/24px var(--font-heading);
  overflow-wrap: anywhere;
}
main h3 {
  font: 600 16px/24px var(--font-heading);
}
strong {
  color: var(--foreground);
  font-weight: 600;
}
a {
  color: var(--primary);
  text-underline-offset: 4px;
}
/* Caption: hints and notes. */
small {
  display: block;
  color: var(--muted-foreground);
  font: 400 12px/16px var(--font-sans);
}
/* Paragraphs of links; 24px line boxes keep stacked links at the 24px target size. */
.help {
  color: var(--muted-foreground);
  line-height: 24px;
}
.help a {
  display: inline-block;
}
main > section > h2 {
  margin-top: 24px;
}
main > section > h2 + * {
  margin-top: 12px;
}
main > section > ul:not(.codes) {
  padding-left: 20px;
}
main > section > ul:not(.codes) > li + li {
  margin-top: 8px;
}
main > section > ul:not(.codes) > li::marker {
  color: var(--muted-foreground);
}

/* Forms: label 8px above its control, fields 16px apart, actions 24px below the last field. */

main form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
main > section > form {
  margin-top: 24px;
}
label {
  color: var(--foreground);
  font: 600 12px/16px var(--font-sans);
}
main :is(form, fieldset) > :is(input, select, textarea, small, p) + :is(label, .check) {
  margin-top: 8px;
}
/* A group of fields under a section title (the invoice details at signup), 24px from the
   fields around it. The legend's bottom margin is the space above the group's first field. */
main form fieldset {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 16px 0 0;
  padding: 0;
  border: 0;
}
main form legend {
  margin-bottom: 8px;
  padding: 0;
  color: var(--foreground);
  font: 600 16px/24px var(--font-heading);
}
main form > fieldset + :is(label, .check) {
  margin-top: 16px;
}
/* The field a message is about: the operator Input's destructive border. */
main input[aria-invalid='true'] {
  border-color: var(--destructive);
}
main form > :not(button, a.app, input[type='hidden']) + :is(button, a.app) {
  margin-top: 16px;
}
input:not([type='checkbox'], [type='radio'], [type='hidden']),
select,
textarea {
  width: 100%;
  min-width: 0;
  height: var(--stellar-input-height);
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--input);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--foreground);
  /* 16px under 768px, so phones do not zoom into the field. */
  font: 400 16px/22px var(--font-sans);
}
textarea {
  height: auto;
  min-height: 96px;
  resize: vertical;
}
.check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--foreground);
  font: 400 14px/20px var(--font-sans);
  cursor: pointer;
}
/* A group of checks, as the choice of what a switch to Starter keeps: its legend names it. */
fieldset {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 8px 0 0;
  padding: 0;
  border: 0;
}
legend {
  margin-bottom: 8px;
  padding: 0;
  color: var(--foreground);
  font: 600 14px/20px var(--font-sans);
}
/* A hint under a check lines up with its text; one under a field (the invoice details) does not. */
fieldset > .check + small {
  margin-left: 28px;
}
.check input {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--primary);
}

/* Buttons: the default look is the one primary action; .secondary is the outline look. Long
   labels wrap, because payment and consent labels carry amounts and must reflow at 320px. */

button {
  font: inherit;
}
main button,
main a.app {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  margin: 0;
  padding: 10px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--primary);
  color: var(--primary-foreground);
  font: 600 12px/16px var(--font-sans);
  letter-spacing: 0.1em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}
/* A link that starts the page's action spans the card, as a form's buttons do, and sits 24px
   below the text above it, as a form's actions sit below the last field. */
main a.app {
  display: flex;
}
main > section > * + :is(button, a.app) {
  margin-top: 24px;
}
main button:hover,
main a.app:hover {
  background: var(--primary-hover);
}
/* A link inside a paragraph leads beside the page's purpose (the storefront while the owner
   still has to accept the invitation), so it takes the outline look at its own width and the
   page keeps no primary it does not need. */
main .secondary,
main p > a.app {
  border-color: var(--border);
  background: var(--card);
  color: var(--foreground);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}
main p > a.app {
  display: inline-flex;
}
main .secondary:hover,
main p > a.app:hover {
  border-color: var(--ring);
  background: var(--accent);
  color: var(--accent-foreground);
}
main button:disabled,
main button:disabled:hover {
  border-color: var(--border);
  background: var(--secondary);
  color: var(--secondary-foreground);
  cursor: not-allowed;
}
/* The language switch: a ghost button, square at the height of its row. */
.language button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  margin: 0;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--foreground);
  font: 600 12px/16px var(--font-sans);
  letter-spacing: 0.1em;
  cursor: pointer;
}
.language button:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}

/* Rows: the applications and next steps a page lists, and the workspaces to choose from, as
   the Admin's record lists draw them. */

main > section > nav {
  margin-top: 24px;
  border-top: 1px solid var(--border);
}
main nav > a.app,
main .choices > button {
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 16px 12px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--foreground);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
}
main nav > a.app:hover,
main .choices > button:hover {
  background: color-mix(in oklch, var(--muted) 50%, transparent);
  color: var(--foreground);
}
/* A 16px stroked chevron in the muted ink (rule 8); it carries no meaning of its own. */
main nav > a.app::after,
main .choices > button::after,
.invoices summary::after {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background: var(--muted-foreground);
  mask: url('/icons/chevron-right.88ae74db09e78da5.svg') center / 16px 16px no-repeat;
  content: '';
}
/* Forced colours replace the muted ground with the canvas colour; keep the row's own ink. */
@media (forced-colors: active) {
  main nav > a.app::after,
  main .choices > button::after,
  .invoices summary::after {
    background: currentColor;
    forced-color-adjust: none;
  }
}

/* Messages: an error is a 2px destructive rule on its 5% tint; a status is a quiet panel. */

main .error {
  padding: 12px 16px;
  border-left: 2px solid var(--destructive);
  background: color-mix(in oklch, var(--destructive) 5%, var(--card));
  color: var(--destructive);
}
main [role='status'] {
  padding: 12px 16px;
  background: var(--muted);
  color: var(--foreground);
}

/* Credentials: what the owner copies or types elsewhere, in the monospace identifier face. */

.secret,
.codes {
  border: 1px solid var(--border);
  background: var(--muted);
  color: var(--foreground);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 16px;
  line-height: 24px;
  font-variant-numeric: tabular-nums;
}
.secret {
  display: block;
  padding: 12px 16px;
  overflow-wrap: anywhere;
  user-select: all;
}
/* One code per line: a recovery code is 30 characters, so two never fit side by side in the
   36rem card. Below 480px the codes are set smaller, so each stays on one line on a phone. */
.codes {
  display: grid;
  gap: 4px;
  padding: 16px;
  list-style: none;
  font-size: 13px;
  line-height: 20px;
}
.codes li {
  overflow-wrap: anywhere;
}
.codes code {
  font: inherit;
}
/* The QR code keeps its own white quiet zone in both themes: scanners need it. */
.authenticator-qr {
  width: 256px;
  max-width: 100%;
  margin-inline: auto;
  border: 1px solid var(--border);
}
.authenticator-qr svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Focus (rule 7): the border turns ring inside a 3px translucent ring; never an offset outline.
   The transparent outline shows only in forced colours, where shadows are dropped. */

:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 0;
}
main :is(button, a.app):focus-visible,
main p > a.app:focus-visible,
.language button:focus-visible {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 20%, transparent);
}
/* On a filled control that border cannot be seen, because ring is the colour of the primary
   fill, and the halo alone is 1.34:1 against the card. A 2px line of the card colour inside
   the fill shows the focus instead: 5.49:1 against primary in light, 6.47:1 in dark. */
main :is(button, a.app):not(:where(.secondary, :disabled, p > a)):focus-visible {
  box-shadow:
    inset 0 0 0 2px var(--card),
    0 0 0 3px color-mix(in oklch, var(--ring) 20%, transparent);
}
input:not([type='checkbox'], [type='radio'], [type='hidden']):focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 15%, transparent);
}
/* Links, checkboxes and rows have no border to recolour, so the ring draws that line too. A
   row's own hairline gives way to it, so the line is 1px all round. */
a:not(.app):focus-visible,
input:is([type='checkbox'], [type='radio']):focus-visible,
summary:focus-visible,
main nav > a.app:focus-visible,
main .choices > button:focus-visible {
  box-shadow:
    0 0 0 1px var(--ring),
    0 0 0 4px color-mix(in oklch, var(--ring) 20%, transparent);
}
main nav > a.app:focus-visible,
main .choices > button:focus-visible {
  border-bottom-color: transparent;
}

@media (min-width: 480px) {
  .codes {
    font-size: 16px;
    line-height: 24px;
  }
}
@media (min-width: 768px) {
  main h1 {
    font-size: 36px;
    line-height: 40px;
  }
  input:not([type='checkbox'], [type='radio'], [type='hidden']),
  select,
  textarea {
    font-size: 14px;
    line-height: 20px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  :where(a, button, input, select, textarea) {
    transition-duration: 150ms;
    transition-property: background-color, border-color, color, box-shadow;
  }
  :where(main button:not(:disabled), main a.app, .language button):active {
    transform: translateY(1px);
  }
  main nav > a.app:active,
  main .choices > button:active {
    transform: none;
  }
}

/* A credential shown once: its name, then the value, like a field the owner cannot edit. */

.credential {
  display: grid;
  gap: 8px;
}
.credential dt {
  color: var(--foreground);
  font: 600 12px/16px var(--font-sans);
}
.credential dd {
  margin: 0;
}
main form.choices {
  gap: 0;
  border-top: 1px solid var(--border);
}

/* Signing out closes the account page, under a hairline, its two buttons side by side. */

main > section > form[action='/logout'] {
  flex-flow: row wrap;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
main > section > form[action='/logout'] > small {
  flex-basis: 100%;
}

/* Billing: one block per workspace, divided by hairlines inside the card. */

main > section > article,
main > section > article + :not(article) {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
main > section > article {
  position: relative;
  scroll-margin-top: 24px;
}
/* The workspace the Admin opened the page at: the active-item rule of the sidebar rail. */
main > section > article:target::before {
  position: absolute;
  top: 24px;
  bottom: 0;
  left: -16px;
  width: 2px;
  background: var(--primary);
  content: '';
}
article > *,
.changes > * {
  margin-block: 0;
}
article > * + *,
.changes > * + * {
  margin-top: 16px;
}
article > h2 + * {
  margin-top: 12px;
}
article > form {
  margin-top: 24px;
}
/* Cancelling is the quiet action of a workspace: an outline button at its own width. */
article > form > .secondary:only-of-type {
  align-self: flex-start;
}
/* Facts: metric labels beside their values; a note under a value is muted. */
.facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  gap: 8px 16px;
}
.facts dt {
  color: var(--muted-foreground);
  font: 600 10px/16px var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.facts dd {
  margin: 0;
  color: var(--foreground);
  font-weight: 600;
}
.facts dd + dd {
  grid-column: 2;
  color: var(--muted-foreground);
  font-weight: 400;
}
/* A price: rows without boxes, a hairline above the total, the total as a metric value. */
.price {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.price caption {
  padding-bottom: 8px;
  color: var(--muted-foreground);
  font: 600 11px/16px var(--font-sans);
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}
.price th,
.price td {
  padding: 4px 0;
  vertical-align: baseline;
}
.price th {
  padding-right: 16px;
  color: var(--muted-foreground);
  font-weight: 400;
  text-align: left;
  overflow-wrap: anywhere;
}
.price td {
  color: var(--foreground);
  text-align: right;
  white-space: nowrap;
}
.price tfoot th,
.price tfoot td {
  padding: 12px 0 0;
  border-top: 1px solid var(--border);
  color: var(--foreground);
}
.price tfoot th {
  padding-right: 16px;
  font-weight: 600;
}
.price tfoot td {
  font: 600 24px/32px var(--font-heading);
  font-variant-numeric: tabular-nums;
}
.price-note {
  color: var(--muted-foreground);
  font: 400 12px/16px var(--font-sans);
}
:is(main > section, article) > .price + .price-note {
  margin-top: 8px;
}
/* Changing the plan or add-ons: a titled section; hairlines stay between workspaces. Its links
   and buttons take the outline look; the one primary action of a workspace stays Pay. */
article > .changes {
  margin-top: 32px;
}
.changes > h3 + * {
  margin-top: 12px;
}
.changes ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  list-style: none;
}
.changes a,
.changes button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--foreground);
  font: 600 13px/16px var(--font-sans);
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  text-transform: none;
}
.changes a:hover {
  border-color: var(--ring);
  background: var(--accent);
  color: var(--accent-foreground);
}
main .changes a:focus-visible {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 20%, transparent);
}
.changes .note,
.changes > p[id] {
  color: var(--muted-foreground);
  font: 400 12px/16px var(--font-sans);
}
.changes .note {
  display: block;
  margin-top: 8px;
}
.changes > ul + p[id] {
  margin-top: 8px;
}
/* A workspace's invoices and the details they are made out to close its block, as titled
   sections. The list is the operator Table: an 11px header row 44px tall, 12px cells, a hairline
   between rows and none under the last, tabular figures, the amount right-aligned; its caption
   is the section title. The older documents fold away under a disclosure. */
article > :is(.invoices, .invoice-details, .billing-email) {
  margin-top: 32px;
}
:is(.invoices, .invoice-details, .billing-email) > * {
  margin-block: 0;
}
:is(.invoices, .invoice-details, .billing-email) > * + * {
  margin-top: 12px;
}
.invoices table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.invoices caption {
  padding-bottom: 12px;
  color: var(--foreground);
  font: 600 16px/24px var(--font-heading);
  text-align: left;
}
.invoices th,
.invoices td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  font-weight: 400;
  text-align: left;
  vertical-align: baseline;
}
.invoices :is(th, td):first-child {
  padding-left: 0;
}
.invoices :is(th, td):last-child {
  padding-right: 0;
  text-align: right;
  white-space: nowrap;
}
.invoices tbody tr:last-child > * {
  border-bottom: 0;
}
.invoices thead th {
  height: 44px;
  padding-block: 0;
  color: var(--muted-foreground);
  font: 600 11px/16px var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
}
.invoices tbody small {
  margin-top: 4px;
}
.invoices .number {
  white-space: nowrap;
}
/* From 480px both lists of a workspace share their columns, so the older documents line up
   under the newest; narrower, each list sizes its columns to what it holds. */
@media (min-width: 480px) {
  .invoices table {
    table-layout: fixed;
  }
  .invoices thead th:nth-child(2) {
    width: 11rem;
  }
  .invoices thead th:last-child {
    width: 6.5rem;
  }
}
.invoices summary {
  display: flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  color: var(--primary);
  line-height: 24px;
  list-style: none;
  cursor: pointer;
}
.invoices summary::-webkit-details-marker {
  display: none;
}
/* The rows' chevron, turned down while the older documents show. */
.invoices details[open] > summary::after {
  transform: rotate(90deg);
}
.invoices details > table {
  margin-top: 8px;
}
.invoice-details address {
  font-style: normal;
}
/* Details still to add, or a billing email change waiting for its confirmation: the quiet panel
   of a status, since nothing has failed. */
:is(.invoice-details, .billing-email) .callout,
main > section > .callout {
  padding: 12px 16px;
  background: var(--muted);
  color: var(--foreground);
}
/* The language of a plan's billing emails, under its billing email: a quiet setting, so its save
   button keeps its own width, as the workspace's cancel button does. */
.billing-language .secondary {
  align-self: flex-start;
}

/* Signup steps: where the visitor is, as a row of segments above the title. A segment is a 2px
   bar over its name: primary for the steps done and the current one, the hairline for the steps
   ahead. The steps done link back; the current one is named in the foreground. */

.steps {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 4px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
main > section > .steps + * {
  margin-top: 0;
}
.steps li {
  min-width: 0;
  padding-top: 8px;
  border-top: 2px solid var(--border);
  color: var(--muted-foreground);
  font: 600 10px/16px var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.steps li:has(~ [aria-current='step']),
.steps [aria-current='step'] {
  border-top-color: var(--primary);
}
.steps [aria-current='step'] {
  color: var(--foreground);
}
.steps a {
  color: inherit;
  text-decoration: none;
}
.steps a:hover {
  color: var(--primary);
  text-decoration-line: underline;
}

/* A choice of plan or add-ons: one bordered option per row, its name and price on top, what it
   includes under them. The label's name stretches over the whole option, so a click anywhere on
   it chooses it, while only the name and price are the control's name; the rest describes it.
   The chosen option takes the primary border on a 4% tint. */

main form fieldset.options {
  gap: 12px;
  margin: 0;
}
.options > legend {
  margin-bottom: 4px;
}
.option {
  position: relative;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 4px 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
}
.option:hover {
  border-color: var(--ring);
}
.option:has(input:checked) {
  border-color: var(--primary);
  background: color-mix(in oklch, var(--primary) 4%, var(--card));
}
/* Above the label's stretched area, so the control itself takes its own clicks. */
.option > input {
  position: relative;
  z-index: 1;
  width: 16px;
  height: 16px;
  margin: 4px 0 0;
  accent-color: var(--primary);
}
.option > label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  font: 600 16px/24px var(--font-heading);
  cursor: pointer;
}
.option > label::after {
  position: absolute;
  inset: 0;
  content: '';
}
.option .price-tag {
  color: var(--foreground);
  font: 600 16px/24px var(--font-heading);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.option .price-tag small {
  display: inline;
  margin-left: 4px;
  font-family: var(--font-sans);
  font-weight: 400;
}
.option-details {
  grid-column: 2;
  color: var(--muted-foreground);
}
.option-details > * {
  margin: 0;
}
.option-details > * + * {
  margin-top: 8px;
}
.option-details ul {
  display: grid;
  gap: 4px 16px;
  padding-left: 18px;
}
.option-details li::marker {
  color: var(--muted-foreground);
}
@media (min-width: 480px) {
  .option-details ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Forced colours drop the tint; a thicker line keeps the chosen option apart. */
@media (forced-colors: active) {
  .option:has(input:checked) {
    outline: 1px solid currentColor;
  }
}

/* The step's actions: Continue spans the card as every form's action does; Back sits under it
   in the outline look. Continue comes first in the form, so Enter continues. */

main form > .actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}
/* What was chosen on the steps before, above the fields of the last one. */
/* No column gap, so the total's hairline runs unbroken under both columns. */
.chosen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 4px 0;
  margin: 0;
  padding: 12px 16px;
  background: var(--muted);
  font-variant-numeric: tabular-nums;
}
.chosen dt {
  color: var(--foreground);
}
.chosen dd {
  margin: 0;
  padding-left: 16px;
  color: var(--foreground);
  text-align: right;
}
.chosen .total {
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-weight: 600;
}
.chosen-note {
  color: var(--muted-foreground);
  font: 400 12px/16px var(--font-sans);
}
main > section > .chosen + .chosen-note {
  margin-top: 8px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Print: the light values (the dark block is screen only), no switch, no footer, no card. */

@media print {
  body {
    background: none;
  }
  .language,
  body > footer {
    display: none;
  }
  main {
    width: auto;
    margin: 0;
  }
  main > section {
    padding: 0;
    border: 0;
  }
}