/* The account pages of the JOV site: Pricing, Download, Sign In, Create Account, Account, Privacy,
   Terms and the admin page. The tokens, the base text styles, the header, the footer and the
   buttons are in base.css (every page loads it first). Light and dark (prefers-color-scheme),
   logical properties throughout, down to 320 px wide. */

/* ---------- Pages ---------- */
.page-head { padding-block: 72px 24px; }
.page-head h1 { margin-block-end: 16px; }
.lead { font-size: 21px; line-height: 1.4; }
.section { padding-block: 72px; }
.section-tight { padding-block: 24px; }
.section-tight:last-child { padding-block-end: 72px; }
.section-alt { background: var(--bg-alt); }
.section-head { margin: 0 0 24px; }
.page-head + .section-tight { padding-block-start: 8px; }
.inline-message { display: inline-block; }

.button-google { gap: 12px; background: var(--bg); border-color: var(--line-strong); color: var(--text); font-weight: 600; }
.button-google:hover { background: var(--bg-alt); color: var(--text); }
.button-google img { flex: none; }

.or-line { display: flex; align-items: center; gap: 12px; margin: 16px 0 4px; color: var(--text-2); font-size: 15px; }
.or-line::before, .or-line::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

.link-button { padding: 0; border: 0; background: none; color: var(--accent-text); font: inherit; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.link-button:disabled { color: var(--text-2); text-decoration: none; cursor: default; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.center .actions, .actions.center { justify-content: center; }

/* A plain panel: the account page's parts and the admin page's. */
.card { padding: 24px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); }
.card h3 { margin-block-start: 0; }
/* A sub-heading after a table, a message or a paragraph keeps its distance. */
.card > * + h3 { margin-block-start: 24px; }
.card p:last-child { margin-block-end: 0; }

/* ---------- The classic home page (index.html; the site's home is the landing page, web/get/) ---------- */
.hero { padding-block: 72px 48px; }
.hero .lead { max-width: 660px; margin: 0 0 24px; }
.hero-note { margin-block-start: 16px; color: var(--text-2); font-size: 15px; }
.eyebrow { margin: 0 0 8px; color: var(--text-2); font-size: 15px; }
.grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.grid-wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.format-chip { display: inline-block; margin-block-end: 12px; font-family: var(--font-mono); font-size: 13px; font-weight: 600; direction: ltr; }
.shot-frame { display: grid; place-items: center; aspect-ratio: 16 / 10; padding: 16px; border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--text-2); font-size: 15px; text-align: center; }
.shot figcaption { margin-block-start: 12px; font-size: 13px; }
.steps { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin: 0; padding-inline-start: 1.4em; }
.steps p:last-child { margin-block-end: 0; }
.faq { max-width: 660px; }
.faq details { border-block-end: 1px solid var(--line); }
.faq summary { padding-block: 16px; font-weight: 600; cursor: pointer; }

/* ---------- Download ---------- */
.download-top { padding-block: 72px 48px; text-align: center; }
.download-top h1 { margin-block-end: 16px; }
.download-top .lead { margin-block-end: 32px; }
.download-meta { margin: 16px 0 0; color: var(--text-2); font-size: 13px; }
.download-meta a { text-decoration: underline; text-underline-offset: 0.18em; }
.download-top .message { max-width: 420px; margin: 24px auto 0; }
.plain-list { margin: 0 0 16px; padding-inline-start: 1.2em; }
.plain-list li { margin-block-end: 8px; }
.verify { margin-block-start: 24px; font-size: 15px; }
.verify summary { min-height: 44px; display: flex; align-items: center; color: var(--accent-text); cursor: pointer; }
.verify p { margin: 0 0 8px; }

.install-steps { margin: 0; padding-inline-start: 1.4em; }
.install-steps > li { margin-block-end: 24px; padding-inline-start: 4px; }
.install-steps .allow-heading { margin-block: 16px 0; font-size: 17px; }
.os-grid { display: grid; gap: 16px; margin-block: 12px 16px; }
.os-card { padding: 0; }
.os-card h4 { margin-block: 0 8px; }
.os-card ol { margin-block-end: 0; }
.os-card li + li { margin-block-start: 8px; }
.os-card ol + p { margin-block: 12px 0; }
.callout p:last-child { margin-block-end: 0; }

/* The install pictures (drawn illustrations, 880 × 560): as wide as their column, never wider.
   They open larger in the site's viewer (os/assets/js/core/viewer.js). */
.shot { display: block; max-width: 560px; margin-block: 12px 4px; }
.install-steps .shot-zoom { max-width: 560px; margin-block: 12px 4px; }
.install-steps .shot-zoom > .shot { margin: 0; }
.shot-img { display: block; width: 100%; max-width: 100%; height: auto; border-radius: var(--radius); box-shadow: 0 0 0 1px var(--line); background: #f3f4f8; }

/* ---------- Pricing: one column, a row for each way to pay ---------- */
.pricing { max-width: calc(var(--prose) + 2 * var(--gutter)); }
.plans { margin-block: 32px 24px; border-block: 1px solid var(--line); }
.plan { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; padding-block: 24px; }
.plan + .plan { border-block-start: 1px solid var(--line); }
.plan h2 { margin: 0 0 4px; font-size: 21px; line-height: 1.3; letter-spacing: 0; }
.plan p { margin: 0; }
.plan .button { flex: none; }
.pricing-notes p { margin-block-end: 12px; }
.pricing .trial { margin-block: 24px 0; }
/* The plans lift a little under the pointer; step 1's drawing plays once and step 3's Open Anyway
   pulses once as they come into view (assets/js/pages/download.js). */
.install-steps .shot-zoom { position: relative; }
.shot-drag, .shot-pulse { position: absolute; pointer-events: none; opacity: 0; }
.shot-drag { left: 29%; top: 26%; width: 7.4%; aspect-ratio: 1; background: url("../img/logo.svg") center / contain no-repeat; }
.shot-pulse { left: 77.5%; top: 49%; width: 14.2%; height: 6.8%; border-radius: 10px; box-shadow: 0 0 0 3px var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .plan { transition: transform var(--m-fast) var(--ease-out); }
  .plan:hover { transform: translateY(-2px); }
  .shot-zoom.is-in:not(.is-now) .shot-drag { animation: shot-drag 1.6s var(--ease-inout) 300ms; }
  .shot-zoom.is-in:not(.is-now) .shot-pulse { animation: shot-pulse 1.2s var(--ease-out) 400ms; }
}
@keyframes shot-drag { 0% { opacity: 0.9; transform: none; } 80% { opacity: 0.9; transform: translateX(470%) scale(0.9); } 100% { opacity: 0; transform: translateX(480%) scale(0.6); } }
@keyframes shot-pulse { 0% { opacity: 0.9; transform: none; } 100% { opacity: 0; transform: scale(1.25, 1.6); } }
.pricing-notes .message { margin-block-end: 16px; }

/* ---------- Forms: one narrow column on the page, no box around it ---------- */
.auth-wrap { padding-block: 72px; }
.auth-card { max-width: 380px; margin-inline: auto; }
.auth-card h1 { font-size: 28px; line-height: 1.2; letter-spacing: -0.015em; }
.auth-card h1:focus, .auth-card h2:focus { outline: none; }

.form { display: grid; gap: 16px; margin-block-start: 24px; }
.field { display: grid; gap: 4px; }
.field label { font-size: 15px; font-weight: 600; }
.field input {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 17px;
}
.field input:focus-visible { outline: 3px solid color-mix(in srgb, var(--focus) 45%, transparent); outline-offset: 0; border-color: var(--focus); }
.field input[aria-invalid="true"] { border-color: var(--danger); }
.field input[dir="ltr"] { text-align: start; }
.hint { margin: 0; color: var(--text-2); font-size: 13px; }

.check { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.check input { inline-size: 18px; block-size: 18px; margin: 0; accent-color: var(--accent); }

.form-links { display: grid; gap: 8px; margin-block-start: 24px; font-size: 15px; }
.form-links p { margin: 0; }
.fine-print { margin: 0; color: var(--text-2); font-size: 13px; }

.message { margin: 0; padding: 12px 16px; border-radius: var(--radius-sm); font-size: 15px; }
.message.is-error { background: var(--danger-soft); color: var(--danger); }
.message.is-success { background: var(--success-soft); color: var(--success); }
.message.is-info { background: var(--bg-alt); color: var(--text); }
.message.is-warning { background: var(--warning-soft); color: var(--warning); }

/* Links that go with a message (Create Account: "This email is already used."). */
.message-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 12px 0 0; font-size: 15px; }

/* The sign-up code: wide digits, easy to check against the email. */
.field input.code-input { font-size: 21px; font-weight: 600; letter-spacing: 0.3em; font-variant-numeric: tabular-nums; }

.panel-icon { display: grid; place-items: center; inline-size: 48px; block-size: 48px; margin-block-end: 16px; border-radius: 50%; background: var(--success-soft); color: var(--success); font-size: 21px; font-weight: 700; }
.panel-icon.is-warning { background: var(--warning-soft); color: var(--warning); }

/* A second, smaller part of a form column (the confirmation page's "Send a new confirmation email"). */
.auth-section { margin-block-start: 32px; padding-block-start: 24px; border-block-start: 1px solid var(--line); }
.auth-section h2 { margin-block-end: 8px; font-size: 21px; }

/* A message shown above a panel's buttons (outside a form) keeps a gap before them. */
.auth-card .form-status:has(> .message:not([hidden])) + .actions { margin-block-start: 16px; }
/* An empty message keeps its live region in the page without leaving a gap in the form. */
.form .form-status:has(> .message[hidden]) { margin-block-start: -16px; }

/* ---------- Account ---------- */
.account-grid { display: grid; gap: 24px; max-width: 660px; margin-inline: auto; }
.account-row { display: grid; gap: 4px; }
.account-label { color: var(--text-2); font-size: 13px; font-weight: 600; }
.account-value { font-size: 17px; font-weight: 600; overflow-wrap: anywhere; direction: ltr; unicode-bidi: isolate; text-align: start; }
.status-card { border-inline-start: 4px solid var(--line-strong); }
.status-card[data-tone="positive"] { border-inline-start-color: var(--success); }
.status-card[data-tone="warning"] { border-inline-start-color: var(--warning); }
.status-card h2 { margin-block-end: 12px; font-size: 21px; }
.status-details p { margin-block-end: 8px; }
.status-card .actions { margin-block-start: 16px; }

/* ---------- Legal pages ---------- */
/* The same column, heading size and line height as the content pages (get.css .doc). */
.prose { max-width: var(--prose); line-height: 1.65; }
.prose h2 { margin-block: 40px 12px; }
.prose li { margin-block-end: 8px; }
.legal-meta { color: var(--text-2); font-size: 13px; }

/* ---------- Small screens ---------- */
@media (max-width: 720px) {
  /* Comfortable taps: the "Show Password" box. */
  .check { gap: 12px; min-height: 44px; cursor: pointer; }
  .check input { inline-size: 20px; block-size: 20px; }
  .faq summary { min-height: 48px; }
}

@media (max-width: 480px) {
  .section, .auth-wrap { padding-block: 48px; }
  .page-head, .download-top { padding-block: 48px 24px; }
  .page-head h1, .download-top h1 { font-size: 28px; line-height: 1.2; }
  .lead { font-size: 17px; line-height: 1.55; }
  .card { padding: 16px; }
  .plan { flex-wrap: wrap; }
  .plan .button, .status-card .actions .button { width: 100%; }
}

/* ---------- Admin (admin.html) ---------- */
.admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

/* Wide tables scroll inside their box instead of widening the page. */
.admin-grid > *,
.chart-row > *,
.table-grid > * {
  min-inline-size: 0;
}

.admin-panel {
  max-width: 640px;
  margin-inline: auto;
}

.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.admin-email {
  margin-inline-start: auto;
  direction: ltr;
  unicode-bidi: isolate;
  overflow-wrap: anywhere;
}

.segmented {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.segment {
  padding: 8px 14px;
  border: 0;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.segment + .segment {
  border-inline-start: 1px solid var(--border-strong);
}

/* The chosen one: the primary button's pair of colours, readable in light and dark. */
.segment[aria-pressed="true"] {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 650;
}

.segment:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: -3px;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
  gap: 12px;
  margin: 12px 0 20px;
}

.stat {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
}

.stat dt {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.stat dd {
  margin: 4px 0 0;
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.chart-row,
.table-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 20px;
}

.chart {
  margin: 0;
}

.chart figcaption {
  display: grid;
  gap: 2px;
  margin-block-end: 8px;
}

.chart-box {
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
}

.chart-svg {
  display: block;
  inline-size: 100%;
  block-size: 140px;
}

.chart-bar,
.chart-dot {
  fill: var(--brand);
}

.chart-line {
  stroke: var(--brand);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.chart-axis {
  stroke: var(--border-strong);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.table-wrap {
  overflow-x: auto;
}

.data-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.data-table th,
.data-table td {
  padding: 8px 10px;
  border-block-end: 1px solid var(--border);
  text-align: start;
  white-space: nowrap;
}

.data-table th {
  color: var(--text-muted);
  font-weight: 600;
}

.data-table .num {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.ltr-value {
  unicode-bidi: isolate;
}

/* Emails, versions and paths are written left to right but still line up with their column. */
html[dir="rtl"] .data-table td[dir="ltr"] {
  text-align: right;
}

.admin-badge {
  display: inline-block;
  margin-inline-start: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--warning-soft);
  color: var(--warning);
  font-size: 0.8rem;
}

.admin-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-block: 12px;
}

.admin-search input {
  flex: 1 1 220px;
  min-inline-size: 0;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

/* A label in each cell of the account list, shown only where the list becomes cards. */
.cell-label {
  display: none;
}

@media (max-width: 640px) {
  .segmented {
    display: flex;
    inline-size: 100%;
  }

  .segment {
    flex: 1;
    min-height: 44px;
  }

  /* 16px or more, so iOS doesn't zoom into the field. */
  .admin-search input {
    min-height: 44px;
    font-size: 1rem;
  }

  .admin-email {
    margin-inline-start: 0;
    flex-basis: 100%;
  }

  html[dir="rtl"] .admin-email {
    text-align: right;
  }

  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .stat {
    padding: 10px 12px;
  }

  .stat dd {
    font-size: 1.3rem;
  }

  /* The account list as one card per account: every column stays readable, nothing scrolls. */
  .user-list .data-table,
  .user-list .data-table tbody,
  .user-list .data-table tr,
  .user-list .data-table td {
    display: block;
  }

  .user-list .data-table thead {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .user-list .data-table tr {
    padding: 12px 0;
    border-block-end: 1px solid var(--border);
  }

  .user-list .data-table td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    border: 0;
    white-space: normal;
    text-align: end;
  }

  .user-list .data-table td:first-child {
    display: block;
    padding-block-end: 6px;
    font-weight: 650;
    text-align: start;
    overflow-wrap: anywhere;
  }

  html[dir="rtl"] .user-list .data-table td[dir="ltr"] {
    text-align: left;
  }

  .user-list .admin-badge {
    margin-inline-start: 6px;
    font-weight: 500;
  }

  .user-list .cell-label {
    display: inline;
    color: var(--text-muted);
    text-align: start;
  }

  .admin-pager {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
  }

  .admin-pager .button {
    padding: 0 12px;
  }
}

.admin-pager {
  align-items: center;
  margin-block-start: 14px;
}

/* Admin: the latest crash reports, each with its report text shown on demand. */
.crash-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.crash-item {
  padding-block: 12px;
  border-block-end: 1px solid var(--border);
}

.crash-item p {
  margin: 0 0 6px;
  overflow-wrap: anywhere;
}

.crash-report {
  margin-block-start: 10px;
  max-block-size: 420px;
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.8rem;
  white-space: pre;
  unicode-bidi: isolate;
}

/* The admin overview's last row: all JOV apps together. */
.data-table .total-row th,
.data-table .total-row td {
  border-top: 2px solid var(--border-strong);
  font-weight: 700;
}

/* ---------- Admin: sections, the funnel, one account, promo codes, new accounts ---------- */
.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.admin-tabbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-block-end: 4px;
  border-block-end: 1px solid var(--border);
}

.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.admin-tab {
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.admin-tab:hover {
  background: var(--bg-subtle);
  color: var(--text);
}

.admin-tab[aria-selected="true"] {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--text);
}

.admin-tab:focus-visible,
[role="tabpanel"]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.admin-select,
.admin-fields .field input {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

/* A select is as wide as its longest option unless told otherwise: never wider than its box. */
.admin-select {
  max-inline-size: 100%;
  min-inline-size: 0;
}

.admin-search .admin-select {
  flex: 1 1 220px;
}

.admin-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 14px 18px;
  margin-block: 14px 18px;
}

/* The account view and the funnel: room between their parts. */
#admin-account h3,
#admin-funnel h3 {
  margin-block: 26px 10px;
}

.admin-fields .field input[aria-invalid="true"] {
  border-color: var(--danger);
}

.code-input,
.code-text {
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

.admin-narrow {
  max-inline-size: 640px;
}

.admin-narrow .field,
.admin-narrow .check {
  margin-block: 14px;
}

/* The funnel: one numbered row per step, the count at the end. */
.funnel-steps {
  display: grid;
  gap: 8px;
  margin: 16px 0;
  padding: 0;
  list-style: none;
}

.funnel-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
}

.funnel-number {
  display: grid;
  place-items: center;
  inline-size: 30px;
  block-size: 30px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--text);
  font-weight: 700;
  font-size: 0.9rem;
}

.funnel-text {
  display: grid;
  gap: 2px;
}

.funnel-details {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}

.funnel-count {
  font-size: 1.4rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.funnel-callout {
  margin-block-end: 20px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.funnel-callout p {
  margin: 0 0 8px;
}

/* Analytics: the headline numbers, each with its change and one line saying what it is. */
.site-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 12px;
  margin: 12px 0 16px;
}

.site-card dd {
  display: grid;
  gap: 4px;
  font-size: 1rem;
  font-weight: 400;
}

.site-card-value {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.site-card-change {
  font-size: 0.85rem;
  font-weight: 600;
}

.site-card-note {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.site-live {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  margin-inline-start: auto;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.site-live-dot {
  flex: none;
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  border: 2px solid var(--text-muted);
}

.site-live-dot.is-on {
  border-color: var(--success);
  background: var(--success);
}

.site-chart {
  margin-block-start: 8px;
}

.site-chart-svg {
  block-size: 200px;
}

.chart-line-views {
  stroke: var(--text);
}

/* The scale's numbers at the left of the chart and three dates under it. */
.chart-plot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 8px;
}

.chart-scale {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.chart-days {
  grid-column: 2;
  display: flex;
  justify-content: space-between;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.chart-days span:only-child {
  margin-inline: auto;
}

.chart-grid {
  stroke: var(--border);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.chart-hit {
  fill: transparent;
  cursor: default;
}

.chart-hit:hover,
.chart-hit:focus-visible {
  fill: var(--text);
  fill-opacity: 0.08;
  outline: none;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  color: var(--text-muted);
}

.chart-key {
  flex: none;
  display: inline-block;
}

.chart-key-bar {
  inline-size: 10px;
  block-size: 12px;
  border-radius: 2px;
  background: var(--brand);
}

.chart-key-line {
  inline-size: 18px;
  block-size: 0;
  margin-inline-start: 10px;
  border-block-start: 2px solid var(--text);
}

.chart-readout {
  min-block-size: 1.5em;
  margin: 8px 0 0;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* The admin page's short footer: its two links on one line, clear of the line under them. */
.admin-footer-links { display: flex; flex-wrap: wrap; gap: 0 24px; margin-block-end: 24px; }

/* Number columns: the heading sits over its numbers. */
.num-from-2 th:nth-child(n+2),
.num-from-3 th:nth-child(n+3) {
  text-align: end;
}

.site-details {
  margin-block-start: 12px;
}

.site-details summary {
  cursor: pointer;
  color: var(--brand-strong);
  font-weight: 600;
  padding-block: 6px;
}

.site-details .table-wrap,
.site-gap {
  margin-block-start: 12px;
}

@media (max-width: 640px) {
  .site-live {
    margin-inline-start: 0;
    flex-basis: 100%;
  }

  .site-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-panel .segment {
    padding-inline: 4px;
    white-space: nowrap;
  }

  /* A long page address wraps, so the first numbers stay on screen beside it. */
  .site-panel .data-table td:first-child,
  .site-panel .num-from-3 td:nth-child(2) {
    min-inline-size: 136px;
    max-inline-size: 170px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .site-panel .data-table th,
  .site-panel .data-table td {
    padding-inline: 6px;
  }
}

/* One account */
.admin-account-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-account-head h2 {
  margin: 0;
  overflow-wrap: anywhere;
}

.detail-list {
  display: grid;
  gap: 0;
  margin: 16px 0 8px;
}

.detail-row {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: 12px;
  padding: 8px 0;
  border-block-end: 1px solid var(--border);
}

.detail-row dt {
  color: var(--text-muted);
}

.detail-row dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.history-list {
  margin: 0;
  padding-inline-start: 18px;
}

.history-list li {
  margin-block: 4px;
}

/* The one-time set-password link, with its Copy button. */
.admin-link-box {
  display: grid;
  gap: 8px;
  margin-block-start: 16px;
  padding: 14px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
}

.admin-link-box p {
  margin: 0;
}

.admin-link-box label {
  font-weight: 600;
}

.link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.link-field {
  flex: 1 1 240px;
  min-inline-size: 0;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.button-small {
  min-height: 36px;
  padding: 0 12px;
  font-size: 0.9rem;
}

.promo-state {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.85rem;
}

.promo-active {
  background: var(--success-soft);
  color: var(--success);
}

.promo-usedUp,
.promo-expired {
  background: var(--warning-soft);
  color: var(--warning);
}

.promo-off {
  background: var(--bg-subtle);
  color: var(--text-muted);
}

/* The Emails section: one line per setup fact, and each email's status in a colour that says how it went. */
.admin-email-setup {
  margin: 12px 0 16px;
}

.admin-email-setup-line {
  display: block;
}

.email-delivered {
  color: var(--success);
}

.email-bounced,
.email-complained,
.email-failed {
  color: var(--danger);
  font-weight: 600;
}

.email-delivery_delayed,
.email-queued,
.email-sending {
  color: var(--warning);
}

.email-suppressed,
.email-skipped {
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .admin-tab {
    flex: 1 1 auto;
    min-height: 44px;
  }

  /* 16px or more, so iOS doesn't zoom into the field. */
  .admin-select,
  .admin-fields .field input,
  .link-field {
    font-size: 1rem;
  }

  .detail-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .funnel-step {
    gap: 10px;
    padding: 10px 12px;
  }

  .funnel-count {
    font-size: 1.15rem;
  }
}