/* Pano admin and the server's own pages, in Pano's "Signal" design system (the app's tokens):
   light by default, dark with the system or by choice in lifted slate blue (never black), Pano
   blue, raised white keycap buttons with 0.5px edges, cards with 14px radius and 0.5px edges,
   selected states as a raised pill with a blue bar, the system font. Served from /admin/assets/ and /assets/ under a
   content-hashed name; the CSP allows no inline styles, so everything lives here. */

:root {
  color-scheme: light;
  --page: #f2f4fa;
  --surface: #ffffff;
  --surface-2: #f7f8fd;
  --surface-well: #ffffff;
  --side-bg: rgba(255, 255, 255, 0.6);
  --fill: rgba(20, 30, 70, 0.05);
  --fill-2: rgba(20, 30, 70, 0.08);
  --line: rgba(20, 30, 70, 0.09);
  --line-strong: rgba(20, 30, 70, 0.16);
  --card-edge: 0 0 0 0.5px rgba(20, 30, 70, 0.07), 0 1px 2px rgba(20, 30, 70, 0.04);
  --well-edge: inset 0 0 0 0.5px rgba(20, 30, 70, 0.14);
  --label: #141620;
  --label-2: #464b5d;
  --label-3: #5d6378;
  --accent: #2d55e0;
  --accent-pressed: #2347c4;
  --accent-text: #2448c9;
  --accent-fill: rgba(45, 85, 224, 0.13);
  --on-accent: #ffffff;
  --focus-ring: rgba(45, 85, 224, 0.45);
  --shadow: 0 0 0 0.5px rgba(20, 30, 70, 0.07), 0 1px 2px rgba(20, 30, 70, 0.04);
  --shadow-menu: 0 12px 40px rgba(20, 30, 70, 0.18);
  /* Raised keycap buttons. */
  --btn-bg: #ffffff;
  --btn-text: #141620;
  --btn-shadow: 0 0 0 0.5px rgba(20, 30, 70, 0.14), 0 1px 2px rgba(20, 30, 70, 0.1);
  --btn-primary-bg: linear-gradient(180deg, #4b70f2, #2d55e0);
  --btn-primary-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 0 0.5px #2347c4, 0 2px 8px rgba(45, 85, 224, 0.3);
  --seg-track: rgba(20, 30, 70, 0.06);
  /* Selected (menu item, chip, segment, current page): a raised white pill with a blue bar. */
  --sel-bg: #ffffff;
  --sel-shadow:
    0 0 0 0.5px rgba(45, 85, 224, 0.2), 0 1px 2px rgba(20, 30, 70, 0.1),
    0 6px 16px -6px rgba(20, 30, 70, 0.28);
  --sel-text: #141620;
  --sel-icon: #2d55e0;
  --sel-marker: linear-gradient(180deg, #4b70f2, #2d55e0);
  /* Status colors. */
  --blue-text: #2448c9;
  --blue-fill: rgba(45, 85, 224, 0.12);
  --green-text: #15803d;
  --green-fill: rgba(21, 128, 61, 0.12);
  --orange-text: #b45309;
  --orange-fill: rgba(245, 184, 61, 0.24);
  --red-text: #d70015;
  --red-fill: rgba(215, 0, 21, 0.1);
  --grey-text: #464b5d;
  --grey-fill: rgba(20, 30, 70, 0.07);
  --violet-text: #5b34b8;
  --violet-fill: rgba(124, 77, 255, 0.12);
  --chart-trial: #2d55e0;
  --chart-free: #a3a8b8;
  --chart-paid: #15803d;
  --chart-comp: #7c4dff;
  --sans: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* Dark ("Signal": lifted slate blue, never black): with the system unless the admin picked a
   theme (data-theme on <html>, set by theme.js from the switch in the top bar), or when the
   admin picked dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #2c303e;
    --surface: #353a4a;
    --surface-2: #3a3f50;
    --surface-well: rgba(12, 16, 32, 0.26);
    --side-bg: #30344a;
    --fill: rgba(255, 255, 255, 0.06);
    --fill-2: rgba(255, 255, 255, 0.1);
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.16);
    --card-edge: inset 0 0 0 0.5px rgba(255, 255, 255, 0.07);
    --well-edge: inset 0 0 0 0.5px rgba(255, 255, 255, 0.1);
    --label: #f3f5fb;
    --label-2: #c4c9da;
    --label-3: #a3aabe;
    --accent: #5b7cff;
    --accent-pressed: #4b6cf0;
    --accent-text: #a9bbff;
    --accent-fill: rgba(91, 124, 255, 0.28);
    --on-accent: #ffffff;
    --focus-ring: rgba(125, 151, 255, 0.6);
    --shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.07);
    --shadow-menu: 0 12px 40px rgba(0, 0, 0, 0.45);
    --btn-bg: rgba(255, 255, 255, 0.11);
    --btn-text: #f3f5fb;
    --btn-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.2);
    --btn-primary-bg: linear-gradient(180deg, #5d7dff, #3d60ea);
    --btn-primary-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 2px 10px rgba(61, 96, 234, 0.35);
    --seg-track: rgba(255, 255, 255, 0.07);
    --sel-bg: rgba(255, 255, 255, 0.13);
    --sel-shadow:
      inset 0 0.5px 0 rgba(255, 255, 255, 0.16), 0 0 0 0.5px rgba(125, 151, 255, 0.45),
      0 6px 18px -6px rgba(0, 0, 0, 0.45);
    --sel-text: #ffffff;
    --sel-icon: #b4c3ff;
    --sel-marker: linear-gradient(180deg, #8fa8ff, #5b7cff);
    --blue-text: #a9bbff;
    --blue-fill: rgba(91, 124, 255, 0.22);
    --green-text: #6fd3a0;
    --green-fill: rgba(111, 211, 160, 0.15);
    --orange-text: #f7c75e;
    --orange-fill: rgba(245, 184, 61, 0.16);
    --red-text: #ff6961;
    --red-fill: rgba(255, 105, 97, 0.16);
    --grey-text: #c4c9da;
    --grey-fill: rgba(255, 255, 255, 0.09);
    --violet-text: #c6b2ff;
    --violet-fill: rgba(150, 120, 255, 0.18);
    --chart-trial: #5b7cff;
    --chart-free: #6f7588;
    --chart-paid: #3fb37b;
    --chart-comp: #9a7bff;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #2c303e;
  --surface: #353a4a;
  --surface-2: #3a3f50;
  --surface-well: rgba(12, 16, 32, 0.26);
  --side-bg: #30344a;
  --fill: rgba(255, 255, 255, 0.06);
  --fill-2: rgba(255, 255, 255, 0.1);
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --card-edge: inset 0 0 0 0.5px rgba(255, 255, 255, 0.07);
  --well-edge: inset 0 0 0 0.5px rgba(255, 255, 255, 0.1);
  --label: #f3f5fb;
  --label-2: #c4c9da;
  --label-3: #a3aabe;
  --accent: #5b7cff;
  --accent-pressed: #4b6cf0;
  --accent-text: #a9bbff;
  --accent-fill: rgba(91, 124, 255, 0.28);
  --on-accent: #ffffff;
  --focus-ring: rgba(125, 151, 255, 0.6);
  --shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.07);
  --shadow-menu: 0 12px 40px rgba(0, 0, 0, 0.45);
  --btn-bg: rgba(255, 255, 255, 0.11);
  --btn-text: #f3f5fb;
  --btn-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.2);
  --btn-primary-bg: linear-gradient(180deg, #5d7dff, #3d60ea);
  --btn-primary-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 2px 10px rgba(61, 96, 234, 0.35);
  --seg-track: rgba(255, 255, 255, 0.07);
  --sel-bg: rgba(255, 255, 255, 0.13);
  --sel-shadow:
    inset 0 0.5px 0 rgba(255, 255, 255, 0.16), 0 0 0 0.5px rgba(125, 151, 255, 0.45),
    0 6px 18px -6px rgba(0, 0, 0, 0.45);
  --sel-text: #ffffff;
  --sel-icon: #b4c3ff;
  --sel-marker: linear-gradient(180deg, #8fa8ff, #5b7cff);
  --blue-text: #a9bbff;
  --blue-fill: rgba(91, 124, 255, 0.22);
  --green-text: #6fd3a0;
  --green-fill: rgba(111, 211, 160, 0.15);
  --orange-text: #f7c75e;
  --orange-fill: rgba(245, 184, 61, 0.16);
  --red-text: #ff6961;
  --red-fill: rgba(255, 105, 97, 0.16);
  --grey-text: #c4c9da;
  --grey-fill: rgba(255, 255, 255, 0.09);
  --violet-text: #c6b2ff;
  --violet-fill: rgba(150, 120, 255, 0.18);
  --chart-trial: #5b7cff;
  --chart-free: #6f7588;
  --chart-paid: #3fb37b;
  --chart-comp: #9a7bff;
}

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

body {
  margin: 0;
  background: var(--page);
  color: var(--label);
  font: 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}

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

a:hover {
  text-decoration: underline;
}

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}

h1,
h2,
h3 {
  margin: 0;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

code {
  font-family: var(--mono);
  font-size: 12px;
}

.muted {
  color: var(--label-3);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Shell: sidebar, top bar, content. */

.nav-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.shell {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 18px 12px;
  background: var(--side-bg);
  border-right: 0.5px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 20px;
  color: var(--label);
  font-weight: 650;
  font-size: 15px;
}

.brand:hover {
  text-decoration: none;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 13px;
  border-radius: 8px;
  color: var(--label-2);
  font-weight: 500;
}

.nav a:hover {
  background: var(--fill);
  color: var(--label);
  text-decoration: none;
}

/* Selected: a raised pill (white in light, translucent with a blue edge in dark) with a
   3 × 16 px blue bar on the left and full-contrast text. */
.nav a[aria-current="page"],
.chip[aria-current="true"],
.segmented a[aria-current="true"],
.pages [aria-current="page"],
.theme-switch button[aria-pressed="true"] {
  position: relative;
  background: var(--sel-bg);
  box-shadow: var(--sel-shadow);
  color: var(--sel-text);
  font-weight: 600;
}

.nav a[aria-current="page"]::before,
.chip[aria-current="true"]::before,
.segmented a[aria-current="true"]::before,
.pages [aria-current="page"]::before,
.theme-switch button[aria-pressed="true"]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  width: 3px;
  height: 16px;
  margin-top: -8px;
  border-radius: 2px;
  background: var(--sel-marker);
}

.nav a[aria-current="page"] .icon {
  color: var(--sel-icon);
}

.nav a[aria-current="page"]:hover {
  background: var(--sel-bg);
}

.nav svg,
.icon {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 28px;
  background: color-mix(in srgb, var(--page) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 0.5px solid var(--line);
}

.topbar h1 {
  flex: 1;
  font-size: 18px;
  font-weight: 650;
}

.who {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--label-3);
  font-size: 13px;
}

.who form {
  margin: 0;
}

.topbar .menu-button,
.scrim {
  display: none;
}

.content {
  width: 100%;
  max-width: 1320px;
  padding: 24px 28px 56px;
}

.content > * + * {
  margin-top: 20px;
}

@media (max-width: 860px) {
  .shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    width: 264px;
    transform: translateX(-105%);
    transition: transform 0.2s ease;
    box-shadow: var(--shadow-menu);
  }

  .nav-toggle:checked ~ .shell .sidebar {
    transform: none;
  }

  .nav-toggle:checked ~ .shell .scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 20;
    background: rgba(0, 0, 0, 0.3);
  }

  .nav-toggle:focus-visible ~ .shell .menu-button {
    outline: 3px solid var(--focus-ring);
  }

  .topbar .menu-button {
    display: inline-flex;
  }

  .topbar {
    padding: 10px 16px;
  }

  .who .who-email {
    display: none;
  }

  .content {
    padding: 16px 16px 40px;
  }
}

/* Theme switch (System / Light / Dark); only with JavaScript, which makes it work. */

.theme-switch {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  background: var(--seg-track);
}

:root:not(.js) .theme-switch {
  display: none;
}

.theme-switch button {
  min-height: 28px;
  padding: 3px 7px 3px 11px;
  border-radius: 6px;
  background: none;
  box-shadow: none;
  color: var(--label-3);
}

.theme-switch button[aria-pressed="false"]:hover {
  color: var(--label);
}

.theme-switch .icon {
  width: 16px;
  height: 16px;
}

/* The sidebar's foot: who made it and which server runs, pinned to the bottom. */

.sidebar-footer {
  margin-top: auto;
  padding: 16px 10px 2px;
  color: var(--label-3);
  font-size: 11px;
  line-height: 1.5;
}

.sidebar-footer a,
.sidebar-footer .build {
  display: block;
}

.sidebar-footer a {
  color: var(--label-3);
}

.sidebar-footer a:hover {
  color: var(--label);
}

/* Cards and figures. */

.card {
  background: var(--surface);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 18px 20px;
}

.card > h2,
.card-head h2 {
  font-size: 14px;
  font-weight: 600;
}

.card > h2 {
  margin-bottom: 12px;
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.card p + p {
  margin-top: 8px;
}

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}

.kpi {
  padding: 16px 18px;
}

.kpi-label {
  display: block;
  color: var(--label-3);
  font-size: 12px;
  font-weight: 550;
}

.kpi-value {
  display: block;
  margin-top: 4px;
  font-size: 26px;
  font-weight: 650;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.kpi-hint {
  display: block;
  color: var(--label-3);
  font-size: 12px;
}

.columns {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.columns-even {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .columns,
  .columns-even {
    grid-template-columns: minmax(0, 1fr);
  }
}

.stack > * + * {
  margin-top: 16px;
}

.facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 18px;
  margin: 0;
}

.facts dt {
  color: var(--label-3);
}

.facts dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Badges: trial blue, free grey, paid green, needs attention orange, money back red. */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--grey-fill);
  color: var(--grey-text);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.badge-blue {
  background: var(--blue-fill);
  color: var(--blue-text);
}

.badge-green {
  background: var(--green-fill);
  color: var(--green-text);
}

.badge-orange {
  background: var(--orange-fill);
  color: var(--orange-text);
}

.badge-red {
  background: var(--red-fill);
  color: var(--red-text);
}

.badge-violet {
  background: var(--violet-fill);
  color: var(--violet-text);
}

/* Tables. */

.table-card {
  padding: 0;
  overflow: hidden;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 0.5px solid var(--line);
}

.toolbar form {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 0;
}

.toolbar .search {
  flex: 1 1 260px;
}

.toolbar .search input {
  flex: 1;
  min-width: 0;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  padding: 4px 12px 4px 14px;
  border-radius: 999px;
  background: var(--fill);
  color: var(--label-2);
  font-size: 13px;
  font-weight: 500;
}

.chip:hover {
  text-decoration: none;
  color: var(--label);
}


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

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 10px 16px;
  border-bottom: 0.5px solid var(--line);
  text-align: left;
  white-space: nowrap;
  vertical-align: middle;
}

thead th {
  background: var(--surface-2);
  color: var(--label-3);
  font-size: 12px;
  font-weight: 600;
}

thead th a {
  color: inherit;
}

thead th[aria-sort] a {
  color: var(--label);
}

.sort {
  display: inline-block;
  width: 1em;
  color: var(--accent-text);
}

tbody tr:hover {
  background: var(--fill);
}

tbody tr:last-child td {
  border-bottom: 0;
}

tr[data-href] {
  cursor: pointer;
}

.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

td.wrap {
  white-space: normal;
  min-width: 200px;
}

.empty {
  padding: 44px 16px;
  color: var(--label-3);
  text-align: center;
}

.empty strong {
  display: block;
  color: var(--label);
  font-size: 15px;
  margin-bottom: 4px;
}

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-top: 0.5px solid var(--line);
  color: var(--label-3);
  font-size: 13px;
}

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

.pages a,
.pages span {
  min-width: 32px;
  padding: 4px 9px;
  border-radius: 7px;
  text-align: center;
}

.pages a:hover {
  background: var(--fill-2);
  text-decoration: none;
}

.pages [aria-current="page"] {
  padding-left: 12px;
}

.pages .gap {
  min-width: 0;
  padding: 4px 2px;
}

/* Forms and buttons. */

input,
select,
textarea,
button {
  font: inherit;
  color: var(--label);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea {
  min-height: 34px;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: var(--surface-well);
  box-shadow: var(--well-edge);
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--accent);
}

button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 14px;
  border: 0;
  border-radius: 8px;
  background: var(--btn-bg);
  box-shadow: var(--btn-shadow);
  color: var(--btn-text);
  font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
}

button:hover,
.button:hover {
  filter: brightness(0.97);
  text-decoration: none;
}

button.primary,
.button.primary {
  background: var(--btn-primary-bg);
  box-shadow: var(--btn-primary-shadow);
  color: var(--on-accent);
}

button.danger {
  color: var(--red-text);
}

button.link {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-text);
  font-weight: 500;
}

form.inline {
  display: inline;
  margin: 0;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.field > span,
legend {
  color: var(--label-2);
  font-size: 12px;
  font-weight: 600;
}

.field small,
.hint {
  color: var(--label-3);
  font-size: 12px;
}

fieldset {
  margin: 0;
  padding: 10px 14px 12px;
  border: 0.5px solid var(--line);
  border-radius: 10px;
}

legend {
  padding: 0 4px;
}

.choice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 4px 16px 0 0;
}

.notice,
.errors {
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--blue-fill);
  color: var(--blue-text);
}

.errors {
  background: var(--red-fill);
  color: var(--red-text);
}

.errors ul {
  margin: 6px 0 0;
  padding-left: 20px;
}

.js .js-hide {
  display: none;
}

/* The campaign form hides what does not apply; without :has() every field shows. */

.campaign-form:has(#kind-percent:checked) .when-amount,
.campaign-form:has(#kind-amount:checked) .when-percent,
.campaign-form:has(#mode-automatic:checked) .when-code,
.campaign-form:has(#duration-once:checked) .when-repeating,
.campaign-form:has(#duration-forever:checked) .when-repeating {
  display: none;
}

/* Charts: inline SVG drawn by the server. */

.chart {
  display: block;
  width: 100%;
  height: auto;
}

.chart text {
  fill: var(--label-3);
  font: 10px var(--sans);
}

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

.chart .axis {
  stroke: var(--line-strong);
}

.chart .bar {
  fill: var(--accent);
}

.chart .bar:hover {
  fill: var(--accent-pressed);
}

.donut-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.donut {
  width: 150px;
  height: 150px;
  flex: none;
}

.donut .track {
  stroke: var(--fill-2);
}

.donut circle {
  fill: none;
  stroke-width: 14;
}

.donut .total {
  fill: var(--label);
  font: 650 18px var(--sans);
}

.donut .total-label {
  fill: var(--label-3);
  font: 9px var(--sans);
}

.slice-trial {
  stroke: var(--chart-trial);
  background: var(--chart-trial);
}

.slice-free {
  stroke: var(--chart-free);
  background: var(--chart-free);
}

.slice-paid {
  stroke: var(--chart-paid);
  background: var(--chart-paid);
}

.slice-comp {
  stroke: var(--chart-comp);
  background: var(--chart-comp);
}

.legend {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.legend li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend .swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.legend .num {
  margin-left: auto;
  padding-left: 12px;
  color: var(--label-2);
}

details.data {
  margin-top: 10px;
}

details.data summary {
  color: var(--label-3);
  font-size: 12px;
  cursor: pointer;
}

details.data table {
  margin-top: 8px;
  font-size: 12px;
}

details.data th,
details.data td {
  padding: 4px 8px;
}

.segmented {
  display: inline-flex;
  padding: 2px;
  border-radius: 8px;
  background: var(--seg-track);
}

.segmented a {
  padding: 2px 10px 2px 13px;
  border-radius: 6px;
  color: var(--label-2);
  font-size: 12px;
  font-weight: 550;
}

.segmented a:hover {
  text-decoration: none;
}

.price-old {
  color: var(--label-3);
}

/* Sign-in and the public pages (unsubscribe). */

.center {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 16px;
}

.center .card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 400px;
  padding: 28px;
}

.center h1 {
  font-size: 20px;
}

.center .brand {
  padding: 0 0 4px;
}