/* PseudraMail UI kit. Uses only the custom properties from tokens.css (docs/DESIGN.md). */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  text-wrap: balance;
}

.display {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 7vw, var(--fs-display));
  line-height: var(--lh-display);
  font-weight: var(--fw-display);
  font-stretch: var(--fst-display);
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
  hyphens: auto;
}

h1,
.h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-h1);
  font-stretch: var(--fst-h1);
  letter-spacing: -0.01em;
}

h2,
.h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-h2);
  font-stretch: var(--fst-h2);
}

p {
  margin: 0;
}

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

small,
.small {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.muted {
  color: var(--ink-2);
}

.caption {
  color: var(--ink-3);
  font-size: var(--fs-small);
}

code,
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: var(--lh-mono);
}

:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 10;
  background: var(--surface);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-s);
}

.skip-link:focus {
  top: var(--space-4);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Icons */
.icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

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

.icon--24 {
  width: 24px;
  height: 24px;
}

.icon .acc {
  stroke: var(--rose);
}

.icon .dot {
  fill: var(--rose);
  stroke: none;
}

/* Brand */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 125%;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.wordmark__mark {
  width: 28px;
  height: 28px;
  flex: none;
}

.wordmark__dot {
  color: var(--rose);
}

.wordmark__product {
  font-weight: 500;
  color: var(--ink-3);
}

/* Alias address: word.word@domain, the dot in rose */
.alias {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  overflow-wrap: anywhere;
}

.alias__dot {
  color: var(--rose);
  font-weight: 500;
}

.alias__domain {
  color: var(--ink-3);
}

/* Addresses in lists never make a list scroll sideways: a long address is cut at the
   end with "…", the start always stays visible. It is clamped to one line instead of
   nowrap, so a table can still give the column less than the full address. The full
   address is in the tooltip. */
.addr {
  display: -webkit-box;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  white-space: normal;
  word-break: break-all;
}

/* An alias in a list (design version 48): tile with the first letter, the label in bold,
   the address below. In the alias list the tile is the row's selection checkbox. */
.alias-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.alias-tile {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--petrol);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
}

.alias-tile .icon {
  width: 18px;
  height: 18px;
}

.alias-tile__check {
  display: none;
}

.alias-pick {
  position: relative;
  flex: none;
}

.alias-pick__box {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.alias-pick:hover .alias-tile {
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}

.alias-pick__box:checked + .alias-tile {
  background: var(--petrol);
  color: var(--on-petrol);
}

.alias-pick__box:checked + .alias-tile .alias-tile__initial {
  display: none;
}

.alias-pick__box:checked + .alias-tile .alias-tile__check {
  display: block;
}

.alias-pick__box:focus-visible + .alias-tile {
  outline: 2px solid var(--rose);
  outline-offset: 2px;
}

.alias-item__text {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.alias-item__label {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.alias-item__text .alias {
  font-size: 0.8125rem;
}

.table td.cell-grow {
  width: 100%;
  max-width: 0;
}

.table tr:has(.alias-pick__box:checked) td {
  background: var(--petrol-soft);
}

.table tr.is-muted .alias-item__label,
.table tr.is-muted .alias-tile {
  color: var(--ink-3);
}

/* Mail paths (design version 47): the second view of the Aliases page. Aliases left,
   inboxes right, one SVG between them on the same fixed rows (mail-paths.tsx). */
.view-switch {
  grid-template-columns: auto auto;
  width: auto;
}

.view-switch a {
  min-height: 32px;
  padding: 0 var(--space-3);
  font-size: 0.8125rem;
}

.chip--removable .icon {
  width: 14px;
  height: 14px;
}

.mailpaths {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
}

.mailpaths__wide {
  --mp-row: 56px;
  --mp-gap: 8px;
  --mp-rows: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(48px, 0.7fr) minmax(0, 0.9fr);
  row-gap: var(--space-2);
}

.mailpaths--rows-1 {
  --mp-rows: 1;
}

.mailpaths--rows-2 {
  --mp-rows: 2;
}

.mailpaths--rows-3 {
  --mp-rows: 3;
}

.mailpaths--rows-4 {
  --mp-rows: 4;
}

.mailpaths--rows-5 {
  --mp-rows: 5;
}

.mailpaths--rows-6 {
  --mp-rows: 6;
}

.mailpaths--rows-7 {
  --mp-rows: 7;
}

.mailpaths--rows-8 {
  --mp-rows: 8;
}

.mailpaths--rows-9 {
  --mp-rows: 9;
}

.mailpaths--rows-10 {
  --mp-rows: 10;
}

.mailpaths--rows-11 {
  --mp-rows: 11;
}

.mailpaths--rows-12 {
  --mp-rows: 12;
}

.mailpaths__span-1 {
  grid-row: span 1;
}

.mailpaths__span-2 {
  grid-row: span 2;
}

.mailpaths__span-3 {
  grid-row: span 3;
}

.mailpaths__span-4 {
  grid-row: span 4;
}

.mailpaths__span-5 {
  grid-row: span 5;
}

.mailpaths__span-6 {
  grid-row: span 6;
}

.mailpaths__span-7 {
  grid-row: span 7;
}

.mailpaths__span-8 {
  grid-row: span 8;
}

.mailpaths__span-9 {
  grid-row: span 9;
}

.mailpaths__span-10 {
  grid-row: span 10;
}

.mailpaths__span-11 {
  grid-row: span 11;
}

.mailpaths__span-12 {
  grid-row: span 12;
}

.mailpaths__side {
  grid-row: 1;
  grid-column: 1;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mailpaths__side--end {
  grid-column: 3;
  text-align: end;
}

.mailpaths__aliases,
.mailpaths__inboxes {
  display: grid;
  grid-row: 2;
  grid-template-rows: repeat(var(--mp-rows), var(--mp-row));
  row-gap: var(--mp-gap);
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mailpaths__aliases {
  grid-column: 1;
}

.mailpaths__inboxes {
  grid-column: 3;
}

.mailpaths__aliases li,
.mailpaths__inboxes li {
  min-width: 0;
}

.mailpaths__lines {
  display: block;
  grid-row: 2;
  grid-column: 2;
  width: 100%;
  height: calc(var(--mp-rows) * var(--mp-row) + (var(--mp-rows) - 1) * var(--mp-gap));
  overflow: visible;
}

.mailpaths__line {
  fill: none;
  stroke: color-mix(in srgb, var(--petrol) 55%, transparent);
  vector-effect: non-scaling-stroke;
  transition: opacity 0.15s;
}

.mailpaths__line--leak {
  stroke: var(--warn);
}

.mailpaths__line--rejected {
  stroke: var(--line-strong);
  stroke-dasharray: 4 4;
}

.mailpaths.has-focus .mailpaths__line:not(.is-on) {
  opacity: 0.15;
}

.mailpaths__alias,
.mailpaths__inbox {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 100%;
  min-width: 0;
  padding: 0 var(--space-3);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}

.mailpaths__alias:hover,
.mailpaths__inbox:hover,
.mailpaths [data-mp].is-on {
  border-color: var(--line-strong);
}

.mailpaths__alias.is-leak {
  border-color: var(--warn);
  background: var(--warn-soft);
}

.mailpaths__alias.is-leak .mailpaths__count,
.mailpaths__alias.is-leak .mailpaths__flag {
  color: var(--warn);
}

.mailpaths__alias.is-muted,
.mailpaths__alias.is-muted .alias__domain,
.mailpaths__alias.is-muted .mailpaths__count {
  color: var(--ink-3);
}

.mailpaths__alias.is-leak .alias-tile {
  background: var(--surface);
  color: var(--warn);
}

.mailpaths__alias.is-muted .alias-tile {
  color: var(--ink-3);
}

.mailpaths__alias--rest {
  border-style: dashed;
}

.mailpaths__text {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.mailpaths__label {
  overflow: hidden;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mailpaths__flag {
  color: var(--ink-2);
  font-size: 0.75rem;
  font-weight: 400;
}

.mailpaths__text .alias,
.mailpaths__inbox .addr,
.mailpaths__group-head .addr {
  font-size: 0.8125rem;
}

.mailpaths__count {
  flex: none;
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-stretch: 115%;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: 1;
}

.mailpaths__inbox {
  display: grid;
  align-content: center;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  border-left: 4px solid var(--petrol);
}

.mailpaths__inbox--tall {
  align-content: start;
  padding-top: var(--space-3);
}

.mailpaths__inbox--tall .mailpaths__count {
  font-size: 1.75rem;
}

.mailpaths__inbox--rejected {
  border: 1px dashed var(--line-strong);
}

.mailpaths__inbox-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 600;
}

.mailpaths__inbox-name {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mailpaths__senders {
  color: var(--ink-2);
  font-size: 0.75rem;
}

.mailpaths__narrow {
  display: none;
}

.mailpaths__group {
  min-width: 0;
  border: 1px solid var(--line);
  border-left: 4px solid var(--petrol);
  border-radius: 10px;
  background: var(--surface);
}

.mailpaths__group.mailpaths__group--rejected {
  border: 1px dashed var(--line-strong);
}

.mailpaths__group-head {
  display: grid;
  gap: 2px;
  padding: var(--space-3);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}

.mailpaths__group ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.mailpaths__group .mailpaths__alias {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  row-gap: var(--space-2);
  height: auto;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: 0;
  background: transparent;
}

.mailpaths__group .mailpaths__count {
  font-size: 1rem;
}

.mailpaths__bar {
  display: block;
  grid-column: 1 / -1;
  width: 100%;
  height: 4px;
}

.mailpaths__bar-track {
  fill: var(--surface-2);
}

.mailpaths__bar-fill {
  fill: var(--petrol);
}

.mailpaths__bar-fill--leak {
  fill: var(--warn);
}

.mailpaths__bar-fill--rejected {
  fill: var(--line-strong);
}

.mailpaths__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  color: var(--ink-2);
  font-size: 0.75rem;
}

.mailpaths__key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mailpaths__key::before {
  width: 16px;
  border-top: 3px solid color-mix(in srgb, var(--petrol) 55%, transparent);
  content: '';
}

.mailpaths__key--leak::before {
  border-top-color: var(--warn);
}

.mailpaths__key--rejected::before {
  border-top: 3px dashed var(--line-strong);
}

@media (max-width: 640px) {
  .mailpaths {
    padding: var(--space-3);
  }

  .mailpaths__wide {
    display: none;
  }

  .mailpaths__narrow {
    display: grid;
    gap: var(--space-3);
  }

  .panel__head:has(.view-switch) {
    flex-wrap: wrap;
  }

  .panel__aside:has(.view-switch),
  .view-switch {
    width: 100%;
  }

  .view-switch {
    grid-template-columns: 1fr 1fr;
  }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: 10px;
  font: 600 0.875rem/1 var(--font-text);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.btn--primary {
  background: var(--petrol);
  color: var(--on-petrol);
}

.btn--create {
  background: var(--rose);
  color: var(--on-rose);
}

.btn--create .icon .acc {
  stroke: currentColor;
}

.btn--create .icon .dot {
  fill: currentColor;
}

.btn--secondary {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink);
}

.btn--danger {
  background: var(--crit);
  border-color: var(--crit);
  color: var(--surface);
}

.btn--small {
  min-height: 32px;
  padding: 0 var(--space-3);
  font-size: var(--fs-small);
}

.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Form fields */
.field {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.field__label {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-2);
}

.field__hint {
  font-size: var(--fs-small);
  color: var(--ink-3);
}

.field__error {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-small);
  color: var(--crit);
}

.input,
.select {
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
}

.input::placeholder {
  color: var(--ink-3);
}

.input--mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
}

.input[aria-invalid='true'],
.select[aria-invalid='true'] {
  border-color: var(--crit);
}

textarea.input {
  min-height: 6rem;
  resize: vertical;
}

.select {
  appearance: none;
  padding-right: var(--space-8);
  background-image: none;
}

.select-wrap {
  position: relative;
}

.select-wrap .icon {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--ink-2);
}

/* Toggle: a styled checkbox, works without JavaScript */
.toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
}

.toggle__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.toggle__track {
  position: relative;
  width: 40px;
  height: 24px;
  flex: none;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  transition: background 0.15s ease;
}

.toggle__track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--line-strong);
  transition: transform 0.15s ease;
}

.toggle__input:checked + .toggle__track {
  background: var(--petrol);
  border-color: var(--petrol);
}

.toggle__input:checked + .toggle__track::after {
  transform: translateX(16px);
  background: var(--on-petrol);
}

.toggle__input:focus-visible + .toggle__track {
  outline: 2px solid var(--rose);
  outline-offset: 2px;
}

.toggle__state {
  font-size: var(--fs-small);
  color: var(--ink-2);
}

.toggle__input:not(:checked) ~ .toggle__state--on,
.toggle__input:checked ~ .toggle__state--off {
  display: none;
}

/* Pills: status always has text, the dot only repeats it */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

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

.pill--ok {
  background: var(--ok-soft);
  color: var(--ok);
}

.pill--warn {
  background: var(--warn-soft);
  color: var(--warn);
}

.pill--crit {
  background: var(--crit-soft);
  color: var(--crit);
}

.pill--info {
  background: var(--petrol-soft);
  color: var(--petrol);
}

.pill--neutral {
  background: var(--surface-2);
  color: var(--ink-2);
}

.pill--paid {
  background: var(--rose-soft);
  color: var(--ink);
}

.pill--paid::before {
  background: var(--rose);
}

/* Chips (filters, tags) */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 32px;
  padding: 0 var(--space-3);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: var(--fs-small);
  text-decoration: none;
}

.chip[aria-current='true'],
.chip[aria-pressed='true'] {
  background: var(--ink);
  color: var(--surface);
}

/* Tables */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.table caption {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: 600;
}

.table th,
.table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.table th {
  background: var(--surface-2);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* In a list with addresses the address gives way, short values (dates, numbers, names)
   keep to one line, see Table */
.table:has(.addr) td.cell-short,
.table .num {
  white-space: nowrap;
}

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

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

.table tr.is-leak td:first-child {
  box-shadow: inset 3px 0 0 var(--warn);
}

.table tr.is-muted td {
  color: var(--ink-3);
}

/* Stat tiles */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: var(--space-3);
}

.stat {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
}

.stat__value {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  font-stretch: 115%;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.stat__label {
  font-size: var(--fs-small);
  color: var(--ink-2);
}

.stat__hint {
  font-size: var(--fs-small);
  color: var(--ink-3);
}

.stat--warn {
  border-color: var(--warn);
  background: var(--warn-soft);
}

.stat--warn .stat__value,
.stat--warn .stat__hint {
  color: var(--warn);
}

/* Empty state */
.empty {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-9) var(--space-6);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-l);
  background: var(--surface);
  text-align: center;
}

.empty > .icon {
  width: 32px;
  height: 32px;
  color: var(--ink-2);
}

.empty__text {
  max-width: 44ch;
  color: var(--ink-2);
}

/* Flash messages */
.flash {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-m);
  border: 1px solid;
  color: var(--ink);
}

.flash > .icon {
  flex: none;
  margin-top: 2px;
}

.flash__body {
  display: grid;
  flex: 1 1 0;
  gap: 2px;
  min-width: 0;
}

.flash__title {
  font-weight: 600;
}

.flash__action {
  margin-left: auto;
  align-self: center;
}

@media (max-width: 640px) {
  .flash--action {
    flex-wrap: wrap;
  }

  .flash__action {
    flex: 1 1 100%;
    margin-left: calc(20px + var(--space-3));
  }
}

.flash--ok {
  background: var(--ok-soft);
  border-color: var(--ok);
}

.flash--ok > .icon {
  color: var(--ok);
}

.flash--info {
  background: var(--petrol-soft);
  border-color: var(--petrol);
}

.flash--info > .icon {
  color: var(--petrol);
}

.flash--warn {
  background: var(--warn-soft);
  border-color: var(--warn);
}

.flash--warn > .icon {
  color: var(--warn);
}

.flash--crit {
  background: var(--crit-soft);
  border-color: var(--crit);
}

.flash--crit > .icon {
  color: var(--crit);
}

/* Card */
.card {
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.stack {
  display: grid;
  gap: var(--space-4);
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

/* `hidden` wins over component display rules (buttons revealed by scripts). */
[hidden] {
  display: none !important;
}

/* Filter bar above lists: fields and button on one baseline */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-3);
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  margin-bottom: var(--space-2);
  font-size: var(--fs-small);
  font-weight: 600;
}

/* Pages before sign-in: one card, the language switch above it at the top right */
.auth {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: var(--space-10) var(--space-4) var(--space-6);
}

.auth > .card {
  width: min(100%, 440px);
}

.auth__lang {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Compact switch as in the approved drafts: globe, language code, chevron in one box. */
.lang-switch__box {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
}

.lang-switch__box:focus-within {
  outline: 2px solid var(--rose);
  outline-offset: 2px;
}

.lang-switch__select {
  appearance: none;
  border: 0;
  padding: 0 18px 0 0;
  margin-right: -18px;
  background: transparent;
  color: var(--ink);
  font: 600 0.75rem var(--font-mono);
  cursor: pointer;
  outline: none;
}

.lang-switch__box > .icon--16:last-child {
  width: 13px;
  height: 13px;
  pointer-events: none;
}

.js .lang-switch__apply {
  display: none;
}

/* App shell: sidebar with navigation, limit box and account row */
.shell {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5) var(--space-3);
  background: var(--surface-2);
  border-right: 1px solid var(--line);
  min-width: 0;
}

/* Desktop: the sidebar keeps the window height, so the account row stays at the bottom
   left however long the page is (it scrolls only when the window is too low for it). */
@media (min-width: 821px) {
  .sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
  }
}

.sidebar > .wordmark {
  margin: 0 var(--space-2) var(--space-5);
  font-size: 1.0625rem;
}

.nav {
  display: grid;
  gap: 2px;
}

.nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 40px;
  padding: 0 var(--space-3);
  border-radius: 8px;
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.875rem;
  white-space: nowrap;
}

.nav__text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav__link:hover {
  color: var(--ink);
}

.nav__link[aria-current='page'] {
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 1px 2px rgb(0 0 0 / 6%);
}

.nav__count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--ink-3);
}

.nav__link > .icon--16 {
  margin-left: auto;
  color: var(--ink-3);
}

.nav__group {
  padding: var(--space-4) var(--space-3) var(--space-1);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.limits {
  display: grid;
  gap: 6px;
  margin-top: var(--space-5);
  padding: var(--space-3);
  border-radius: 10px;
  background: var(--surface);
  font-size: 0.75rem;
  color: var(--ink-2);
}

.limits__title {
  font-family: var(--font-text);
  font-size: 0.8125rem;
  font-weight: 700;
  font-stretch: 100%;
  color: var(--ink);
}

.limits__row {
  display: grid;
  gap: 4px;
}

.limits__value {
  justify-self: end;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--ink-3);
}

/* Usage bar: a native <progress>, so the value needs no inline style */
.meter {
  appearance: none;
  width: 100%;
  height: 6px;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-2);
  color: var(--petrol);
}

.meter::-webkit-progress-bar {
  background: var(--surface-2);
}

.meter::-webkit-progress-value {
  background: var(--petrol);
  border-radius: 999px;
}

.meter::-moz-progress-bar {
  background: var(--petrol);
  border-radius: 999px;
}

.meter--hot::-webkit-progress-value {
  background: var(--warn);
}

.meter--hot::-moz-progress-bar {
  background: var(--warn);
}

.account {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
  padding: var(--space-4) var(--space-1) 0;
  font-size: 0.75rem;
  color: var(--ink-2);
}

.app-version {
  margin: var(--space-2) 0 0;
  padding-inline: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--ink-3);
  white-space: nowrap;
}

.account__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  margin: -6px;
  padding: 6px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}

.account__link:hover,
.account__link[aria-current='page'] {
  background: var(--surface);
  color: var(--ink);
}

.account__initial {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--petrol);
  color: var(--on-petrol);
  font-weight: 700;
  font-size: 0.8125rem;
}

.account__email {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
}

.main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--space-5);
  padding: var(--space-6) clamp(var(--space-4), 2.5vw, var(--space-7)) var(--space-7);
  min-width: 0;
}

/* Page header: title, global search, create button */
.page-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.page-header h1 {
  margin-right: auto;
  font-size: 1.625rem;
  white-space: nowrap;
}

.page-header h1 .alias {
  font-size: 1.125rem;
}

.search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 1 300px;
  min-width: 160px;
  min-height: 42px;
  padding: 0 var(--space-3);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink-3);
}

.search:focus-within {
  border-color: var(--line-strong);
}

.search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.875rem;
  outline: none;
  text-overflow: ellipsis;
}

.search__input::placeholder {
  color: var(--ink-3);
}

.search__key {
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--ink-2);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  justify-self: start;
  font-size: 0.875rem;
  text-decoration: none;
}

/* Panels: bordered box with a small header line */
.panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
  overflow: hidden;
}

.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 48px;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--line);
}

.panel__title {
  font-family: var(--font-text);
  font-size: 0.8125rem;
  font-weight: 600;
  font-stretch: 100%;
  line-height: 1.3;
}

.panel__aside {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.75rem;
  color: var(--ink-2);
  white-space: nowrap;
}

.panel__aside a {
  text-decoration: none;
}

.panel__body {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  padding: var(--space-4);
}

.panel__body > .muted {
  font-size: var(--fs-small);
}

.panel__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}

.panel__foot > .caption:first-child {
  margin-right: auto;
}

.panel .table-wrap {
  border: 0;
  border-radius: 0;
}

.panel--narrow {
  max-width: 640px;
}

.columns {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

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

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

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.actions--sticky {
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
  background: var(--ground);
}

/* Settings: group links left, panels right */
.settings {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.settings__nav {
  position: sticky;
  top: var(--space-4);
  display: grid;
  gap: 2px;
}

.settings__nav a {
  padding: var(--space-2) var(--space-3);
  border-left: 2px solid transparent;
  border-radius: 8px;
  color: var(--ink-2);
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings__nav a[aria-current='true'] {
  border-left-color: var(--petrol);
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
}

.settings__groups {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.settings__groups .panel {
  scroll-margin-top: var(--space-4);
}

/* Figures with sparklines */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: var(--space-3);
}

.kpi {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
}

.kpi__label,
.kpi__hint {
  font-size: 0.75rem;
  color: var(--ink-2);
}

/* A tile that leads to the list behind its number (refused mails). */
.kpi--link,
.stat--link {
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s;
}

.kpi--link:hover,
.stat--link:hover {
  border-color: var(--petrol);
}

.kpi__more {
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--petrol);
  white-space: nowrap;
}

.alias-link {
  color: inherit;
  text-decoration: none;
}

.alias-link:hover .alias {
  text-decoration: underline;
}

.nowrap {
  white-space: nowrap;
}

.kpi__label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi__hint {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi__value {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 800;
  font-stretch: 115%;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

.kpi__value small {
  font-family: var(--font-text);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-3);
}

.kpi--warn {
  border-color: var(--warn);
  background: var(--warn-soft);
}

.kpi--warn .kpi__value {
  color: var(--warn);
}

.spark {
  display: block;
  width: 100%;
  height: 34px;
  /* The end point sits on the right edge, half of it outside the plot. */
  overflow: visible;
}

.spark__base {
  stroke: var(--line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.spark__area {
  fill: var(--petrol-soft);
}

.spark__line {
  fill: none;
  stroke: var(--petrol);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.spark__end {
  fill: var(--petrol);
}

/* Trend of the second chart series (refused mails), matching its bars. */
.kpi--series-2 .spark__area {
  fill: var(--chart-2);
  fill-opacity: 0.25;
}

.kpi--series-2 .spark__line {
  stroke: var(--chart-2);
}

.kpi--series-2 .spark__end {
  fill: var(--chart-2);
}

.bars {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-4);
}

.bars svg {
  display: block;
  width: 100%;
  height: 150px;
}

.bars__a {
  fill: var(--chart-1);
}

/* The surface-coloured stroke leaves a thin gap between the stacked segments. */
.bars__b {
  fill: var(--chart-2);
  stroke: var(--surface);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.bars__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: 0.75rem;
  color: var(--ink-2);
}

.bars__legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

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

.bars__key--a {
  background: var(--chart-1);
}

.bars__key--b {
  background: var(--chart-2);
}

/* Stacked share bar (versions in use) and percent line (console versions page) */
.stackbar {
  display: block;
  width: 100%;
  height: 22px;
  border-radius: 6px;
  overflow: hidden;
}

.stackbar__bg {
  fill: var(--surface-2);
}

.stackbar__current,
.stack-legend__key--current {
  fill: var(--petrol);
  background: var(--petrol);
}

.stackbar__previous,
.stack-legend__key--previous {
  fill: var(--warn);
  background: var(--warn);
}

.stackbar__older,
.stack-legend__key--older {
  fill: var(--crit);
  background: var(--crit);
}

.stack-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: 0.75rem;
  color: var(--ink-2);
}

.stack-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.stack-legend__key {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.pline {
  display: block;
  width: 100%;
  height: 120px;
}

.pline__grid {
  stroke: var(--line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.pline__area {
  fill: var(--petrol-soft);
}

.pline__line {
  fill: none;
  stroke: var(--petrol);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.pline__end {
  fill: var(--petrol);
}

.pline__axis {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: var(--ink-3);
}

/* Versions page: one row per part with its bar */
.usage {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
}

.usage__row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  font-size: 0.875rem;
}

.usage__label {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  white-space: nowrap;
}

.usage__label .icon {
  color: var(--ink-2);
}

.usage__total {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-2);
  text-align: right;
  white-space: nowrap;
}

.trend {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-4) var(--space-4);
}

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

  .usage__row .stackbar {
    grid-column: 1 / -1;
    order: 3;
  }
}

/* A notice that asks for a decision (possible typo, limit reached) */
.notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--warn);
  border-radius: var(--radius-m);
  background: var(--warn-soft);
}

.notice > .icon {
  margin-top: 2px;
  color: var(--warn);
}

.notice__body {
  display: grid;
  gap: var(--space-2);
  font-size: 0.875rem;
}

.info-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-m);
  font-size: var(--fs-small);
}

.info-note > .icon {
  color: var(--petrol);
}

.info-note > div {
  display: grid;
  gap: var(--space-1);
}

/* Header card of a single alias or user */
.object-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
}

.object-head__main {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.object-head__main > .alias {
  font-size: 1.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Alias page head (design version 48): tile beside label and address, status below. */
.object-head .alias-tile {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  font-size: 1.25rem;
}

.object-head__label {
  margin: 0;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-stretch: 118%;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.object-head .alias-item__text .alias {
  font-size: 0.9375rem;
}

.object-head__meta {
  padding-left: calc(52px + var(--space-3));
}

@media (max-width: 640px) {
  .object-head .alias-tile {
    width: 44px;
    height: 44px;
    font-size: 1.0625rem;
  }

  .object-head__label {
    font-size: 1.25rem;
  }

  .object-head__meta {
    padding-left: calc(44px + var(--space-3));
  }
}

.highlight {
  padding: var(--space-4);
  border: 1px solid var(--petrol);
  border-radius: var(--radius-m);
  background: var(--surface);
  box-shadow: inset 4px 0 0 var(--petrol);
}

.token-row {
  display: flex;
  gap: var(--space-2);
}

.token-row .input {
  flex: 1;
}

.chips--filters {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.chips--filters .chip {
  flex: none;
  white-space: nowrap;
}

.filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.filter-bar__selects {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
}

.filter-bar__selects .select {
  min-height: 36px;
  width: auto;
  font-size: 0.8125rem;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.mini-confirms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--space-3);
}

.confirm-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.confirm-list li {
  padding: var(--space-2) var(--space-3);
  border-radius: 8px;
  background: var(--surface-2);
  min-width: 0;
}

.two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.import-preview {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: 10px;
  background: var(--surface-2);
}

/* Admin console */
.console {
  min-height: 100vh;
}

.admin-bar {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-3) var(--space-6);
  background: var(--chrome);
  color: var(--chrome-ink);
}

.admin-bar .wordmark {
  color: var(--chrome-ink);
  font-size: 1rem;
}

.admin-bar .wordmark__mark {
  width: 24px;
  height: 24px;
}

.admin-bar .wordmark__product {
  color: var(--chrome-ink-2);
}

.admin-bar__role {
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--brand-rose);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
}

.admin-nav {
  display: flex;
  gap: var(--space-5);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  font-size: 0.8125rem;
}

.admin-nav a {
  padding: var(--space-1) 0;
  border-bottom: 2px solid transparent;
  color: var(--chrome-ink-2);
  text-decoration: none;
  white-space: nowrap;
}

.admin-nav a:hover {
  color: var(--chrome-ink);
}

.admin-nav a[aria-current='page'] {
  border-bottom-color: var(--brand-rose);
  color: var(--chrome-ink);
  font-weight: 600;
}

.admin-bar__who {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--chrome-ink-2);
  text-decoration: none;
  white-space: nowrap;
}

.admin-bar__who:hover {
  color: var(--chrome-ink);
}

.admin-bar__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px var(--space-3);
  border: 1px solid var(--chrome-2);
  border-radius: 8px;
  color: var(--chrome-ink);
  font-size: 0.75rem;
  text-decoration: none;
  white-space: nowrap;
}

.audit-note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-6);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--ink-2);
}

.admin-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6) var(--space-7);
}

.admin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.admin-head h1 {
  font-size: 1.5rem;
}

@media (max-width: 1180px) {
  .admin-bar__who {
    display: none;
  }

  .admin-bar__back {
    margin-left: auto;
  }
}

/* Tablets and phones */
@media (max-width: 900px) {
  .filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-bar__selects {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .filter-bar__selects .select-wrap {
    flex: 1 0 auto;
  }
}

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

  .sidebar {
    padding: var(--space-3) var(--space-3) var(--space-2);
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .sidebar > .wordmark {
    margin: 0 var(--space-1) var(--space-3);
  }

  .nav {
    display: flex;
    gap: var(--space-1);
    margin-inline: calc(var(--space-3) * -1);
    padding-inline: var(--space-3);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .nav__link {
    flex: none;
  }

  .nav__group,
  .limits {
    display: none;
  }

  .account {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
  }

  .main {
    padding: var(--space-4) var(--space-4) var(--space-6);
    gap: var(--space-4);
  }

  .page-header {
    flex-wrap: wrap;
  }

  .page-header h1 {
    flex: 1 1 100%;
    font-size: 1.5rem;
  }

  .page-header .search,
  .page-header > .btn {
    flex: 1 1 100%;
  }

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

  .settings__nav {
    position: static;
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .settings__nav a {
    flex: none;
    border-left: 0;
    border-bottom: 2px solid transparent;
    border-radius: 8px 8px 0 0;
  }

  .settings__nav a[aria-current='true'] {
    border-bottom-color: var(--petrol);
  }

  .admin-bar {
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-3) var(--space-4);
  }

  .admin-bar__role {
    margin-right: auto;
  }

  .admin-bar__back {
    margin-left: 0;
  }

  .admin-bar__back span {
    display: none;
  }

  .admin-nav {
    order: 3;
    flex: 1 1 100%;
  }

  .audit-note {
    padding: var(--space-2) var(--space-4);
  }

  .admin-main {
    padding: var(--space-4);
  }
}

@media (max-width: 640px) {
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

  .object-head,
  .admin-head {
    flex-direction: column;
    align-items: stretch;
  }

  .actions,
  .panel__foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .actions .btn,
  .panel__foot .btn,
  .object-head .btn,
  .admin-head .btn,
  .notice .row .btn {
    width: 100%;
  }

  .token-row {
    flex-direction: column;
  }

  /* Tables become cards: one row per card, every cell with its column label */
  .table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .table,
  .table tbody {
    display: block;
  }

  .table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--line);
  }

  .table tr:last-child {
    border-bottom: 0;
  }

  .table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex: 1 1 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    text-align: right;
  }

  .table td.num {
    text-align: right;
  }

  .table td[data-label]::before {
    content: attr(data-label);
    flex: none;
    font-size: 0.75rem;
    color: var(--ink-3);
    text-align: left;
  }

  .table td:first-child {
    justify-content: flex-start;
    font-weight: 600;
    text-align: left;
  }

  .table td:first-child::before {
    display: none;
  }

  /* An AliasItem column takes the whole row width on phones, not the room left over. */
  .table td.cell-grow {
    width: auto;
    max-width: none;
  }

  .table td:not([data-label]) {
    justify-content: flex-start;
  }

  .table td:empty {
    display: none;
  }

  .table tr.is-leak td:first-child {
    box-shadow: none;
  }

  .table tr.is-leak {
    box-shadow: inset 3px 0 0 var(--warn);
  }

  /* Alias rows (design version 48): the AliasItem on the left, the status on the right.
     Service, tags, mails and the last mail show on the alias page. */
  .table-wrap--alias tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
  }

  .table-wrap--alias td {
    display: block;
    text-align: left;
  }

  .table-wrap--alias td::before {
    display: none;
  }

  .table-wrap--alias td.cell-grow {
    font-weight: 400;
  }

  .table-wrap--alias td:not(.cell-grow):not(:last-child) {
    display: none;
  }

  .table-wrap--alias tr:has(.alias-pick__box:checked) {
    background: var(--petrol-soft);
  }
}

/* Component gallery (development only) */
.gallery {
  display: grid;
  gap: var(--space-7);
  padding: var(--space-6) clamp(var(--space-4), 3vw, var(--space-8));
}

.gallery > * {
  min-width: 0;
}

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr));
  gap: var(--space-6);
}

.gallery__panel {
  display: grid;
  gap: var(--space-5);
  align-content: start;
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--ground);
  color: var(--ink);
  min-width: 0;
}

.gallery__section {
  display: grid;
  gap: var(--space-3);
}

.gallery__section > h3 {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.gallery__frame {
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
}

.gallery__frame .shell {
  min-height: 0;
}

/* Helpers for the design 2.0 pages */
.js .js-hide {
  display: none;
}

.unit {
  display: none;
}

.checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--petrol);
}

.btn--wide {
  width: 100%;
}

.table td .chip {
  min-height: 24px;
  margin-right: 4px;
  font-size: 0.75rem;
}

.stat--small .stat__value {
  font-size: 1.125rem;
  line-height: 1.55;
}

.rule {
  width: 100%;
  margin: var(--space-1) 0;
  border: 0;
  border-top: 1px solid var(--line);
}

/* Two choices as one segmented control (radio inputs, works without JavaScript) */
.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 3px;
  border-radius: 10px;
  background: var(--surface-2);
}

.segmented label {
  position: relative;
}

.segmented input {
  position: absolute;
  opacity: 0;
  inset: 0;
}

.segmented span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 38px;
  padding: 0 var(--space-2);
  border-radius: 8px;
  color: var(--ink-2);
  font-size: 0.875rem;
  white-space: nowrap;
  cursor: pointer;
}

.segmented input:checked + span {
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 1px 2px rgb(0 0 0 / 8%);
}

.segmented input:focus-visible + span {
  outline: 2px solid var(--rose);
  outline-offset: 2px;
}

.btn--ghost {
  background: transparent;
  color: var(--ink-2);
}

.btn--ghost:hover {
  color: var(--crit);
}

.row-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  white-space: nowrap;
}

/* Inboxes page (2a.1): the table needs room for two row actions, so the add form moves
   below it on narrower screens. */
.columns--inboxes {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

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

  .columns--inboxes > .panel:last-child {
    max-width: 560px;
  }
}

/* Inboxes page: the address, then the "Default" pill */
.destination {
  display: inline-flex;
  max-width: 100%;
  min-width: 0;
  align-items: center;
  gap: var(--space-2);
}

.destination > .pill {
  flex: none;
}

.table tr.is-selected td {
  background: var(--petrol-soft);
}

@media (max-width: 640px) {
  .row-actions {
    justify-content: flex-start;
  }
}

.panel__lead {
  padding: var(--space-3) var(--space-4) var(--space-1);
  font-size: var(--fs-small);
  color: var(--ink-2);
}

.table td a {
  color: inherit;
  text-decoration: none;
}

.table td a:hover .alias,
.table td a:focus-visible .alias {
  text-decoration: underline;
}

/* With a label, the label is the link text that underlines. */
.table td a.alias-item__text:hover .alias-item__label,
.table td a.alias-item__text:focus-visible .alias-item__label {
  text-decoration: underline;
}

.table td a.alias-item__text:has(.alias-item__label):hover .alias,
.table td a.alias-item__text:has(.alias-item__label):focus-visible .alias {
  text-decoration: none;
}

@media (max-width: 640px) {
  .object-head__main > .alias {
    font-size: 1rem;
  }
}

/* Icons inside buttons take the button's text color (rose stays on the create button). */
.btn .icon .acc {
  stroke: currentColor;
}

.btn .icon .dot {
  fill: currentColor;
}

/* Public start page */
.home {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.home__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) clamp(var(--space-4), 4vw, var(--space-8));
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.home__bar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Menu and buttons share one box so phones can give them their own row (see below). */
.home__bar-row {
  display: contents;
}

.home__hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(var(--space-6), 5vw, var(--space-10));
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(var(--space-7), 7vw, var(--space-10)) clamp(var(--space-4), 4vw, var(--space-8));
}

.home__copy {
  display: grid;
  gap: var(--space-5);
}

.home__lead {
  max-width: 44ch;
  font-size: 1.125rem;
  color: var(--ink-2);
}

.home__demo {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.home__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.home__row--off {
  opacity: 0.72;
}

.home__fav {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--petrol);
  color: var(--on-petrol);
  font-weight: 700;
  font-size: 0.8125rem;
}

.home__row--off .home__fav {
  background: var(--ink-3);
  color: var(--surface);
}

.home__text {
  display: grid;
  min-width: 0;
}

.home__text .alias {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
}

.home__text small {
  font-size: 0.75rem;
  color: var(--ink-2);
}

@media (max-width: 820px) {
  .home__hero {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
  }
}

/*
 * Phones: the wordmark keeps the first row with the language switch, the menu and the
 * buttons get the second row (and wrap as whole groups if even that is too narrow). The
 * switch loses its globe before the wordmark loses its text, which only happens below
 * the width the two need together.
 */
@media (max-width: 599px) {
  .home__bar .lang-switch {
    order: 1;
    margin-left: auto;
  }

  .home__bar-row {
    order: 2;
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-3);
  }

  .home__bar-row > .home__nav {
    order: 0;
    flex: none;
    margin: 0;
    gap: var(--space-4);
  }

  .home__bar-row > .home__bar-actions {
    margin-left: auto;
    gap: var(--space-2);
  }
}

/* Small phones: tighter spacing keeps menu and buttons on one row down to about 360px. */
@media (max-width: 389px) {
  .home__bar-row {
    column-gap: var(--space-2);
  }

  .home__bar-row > .home__nav {
    gap: var(--space-3);
  }

  .home__bar-row .btn--small {
    padding-inline: 10px;
  }
}

@media (max-width: 359px) {
  .home__bar .lang-switch__box > .icon--16:first-child {
    display: none;
  }
}

@media (max-width: 319px) {
  .home__bar .wordmark span {
    display: none;
  }
}

/* Create alias: the random name the user will get, with re-roll */
.proposal {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-m);
  background: var(--ground);
}

.proposal > .btn {
  justify-self: start;
  margin-top: var(--space-1);
}

.proposal__address .alias {
  font-size: 1.0625rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* Tag colors as dots (tokens --tag-*) */
.tag-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
}

.tag-dot--none {
  border: 1px solid var(--line-strong);
}

.tag-dot--gray {
  background: var(--tag-gray);
}

.tag-dot--red {
  background: var(--tag-red);
}

.tag-dot--orange {
  background: var(--tag-orange);
}

.tag-dot--yellow {
  background: var(--tag-yellow);
}

.tag-dot--green {
  background: var(--tag-green);
}

.tag-dot--teal {
  background: var(--tag-teal);
}

.tag-dot--blue {
  background: var(--tag-blue);
}

.tag-dot--purple {
  background: var(--tag-purple);
}

.tag-dot--pink {
  background: var(--tag-pink);
}

/* Tag field with suggestions while typing (design version 46, variant A): chips and the
   text entry inside one input frame, the suggestion list below. Built by tag-field.ts on
   top of the plain comma field. */
.tagfield {
  position: relative;
}

/* The open list may reach past the panel that holds the field (it covers the fields
   below). The footer keeps its rounded corners itself then. */
.panel:has(.tagfield) {
  overflow: visible;
}

.panel:has(.tagfield) > .panel__foot {
  border-radius: 0 0 var(--radius-m) var(--radius-m);
}

.tagfield:focus-within {
  z-index: 6;
}

.tagbox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  padding: 5px var(--space-2);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  cursor: text;
}

.tagbox:focus-within {
  outline: 2px solid var(--rose);
  outline-offset: 2px;
}

.tagbox.is-invalid {
  border-color: var(--crit);
}

.tagbox .chip {
  min-height: 30px;
  max-width: 100%;
  padding: 0 4px 0 var(--space-3);
  color: var(--ink);
  white-space: nowrap;
}

.chip__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tagbox .chip.is-entering {
  animation: chip-in 0.22s ease-out;
}

.tagbox .chip--new {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.tagbox .chip.is-armed {
  box-shadow: inset 0 0 0 2px var(--petrol);
}

.chip__remove {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
}

.chip__remove:hover {
  background: var(--line);
  color: var(--ink);
}

.chip__remove .icon {
  width: 14px;
  height: 14px;
}

@keyframes chip-in {
  from {
    transform: scale(0.7);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.tagbox__entry {
  display: flex;
  flex: 1 1 8rem;
  min-width: 8rem;
}

.tagbox__input {
  width: 100%;
  min-height: 30px;
  padding: 0 var(--space-1);
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
}

.tagbox__input:focus-visible {
  outline: none;
}

.tagbox__input::placeholder {
  color: var(--ink-3);
}

.tag-suggest {
  position: absolute;
  z-index: 5;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  margin: 0;
  padding: var(--space-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
  box-shadow: var(--shadow);
  list-style: none;
}

.tag-suggest.is-entering {
  animation: suggest-in 0.16s ease-out;
}

@keyframes suggest-in {
  from {
    transform: translateY(-4px);
    opacity: 0;
  }
}

.tag-suggest__group {
  padding: var(--space-2) var(--space-3) var(--space-1);
  color: var(--ink-3);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tag-suggest__option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 38px;
  padding: 0 var(--space-3);
  border-radius: 8px;
  color: var(--ink);
  font-size: 0.9375rem;
  cursor: pointer;
}

.tag-suggest__option[aria-selected='true'] {
  background: var(--petrol-soft);
}

.tag-suggest__option mark {
  background: transparent;
  color: inherit;
  font-weight: 700;
}

.tag-suggest__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tag-suggest__count {
  margin-left: auto;
  padding-left: var(--space-3);
  color: var(--ink-3);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tag-suggest__option--create {
  color: var(--petrol);
}

.tag-suggest__option--create .icon {
  flex: none;
  width: 16px;
  height: 16px;
}

.tag-suggest__keys {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-1);
  padding: var(--space-2) var(--space-3) var(--space-1);
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 0.75rem;
}

.tag-suggest__keys span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.tag-suggest__keys kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 5px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-align: center;
}

.tag-color {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}

.chip > .tag-dot {
  width: 8px;
  height: 8px;
}

/* Public pages: menu, footer, features, pricing */
.home__nav {
  display: flex;
  gap: var(--space-5);
  margin-right: auto;
  margin-left: var(--space-5);
  font-size: 0.875rem;
}

.home__nav a {
  padding: var(--space-1) 0;
  border-bottom: 2px solid transparent;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}

.home__nav a:hover {
  color: var(--ink);
}

.home__nav a[aria-current='page'] {
  border-bottom-color: var(--petrol);
  color: var(--ink);
  font-weight: 600;
}

.home__main {
  flex: 1;
  display: grid;
  align-content: start;
}

.home__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  padding: var(--space-4) clamp(var(--space-4), 4vw, var(--space-8));
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.home__foot-nav {
  display: flex;
  gap: var(--space-5);
  font-size: var(--fs-small);
}

.home__foot-nav a {
  color: var(--ink-2);
  text-decoration: none;
}

.public-section {
  display: grid;
  gap: var(--space-4);
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(var(--space-6), 5vw, var(--space-9)) clamp(var(--space-4), 4vw, var(--space-8));
}

.public-section + .public-section {
  border-top: 1px solid var(--line);
}

.public-section--center {
  justify-items: center;
  text-align: center;
}

.public-title {
  font-size: clamp(2rem, 4.4vw, 3rem);
}

.public-note {
  text-align: center;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

.step,
.feature {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
}

.step h2,
.feature h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 700;
  font-stretch: 100%;
}

.step p,
.feature p {
  font-size: var(--fs-small);
  color: var(--ink-2);
}

.step__num {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--petrol-soft);
  color: var(--petrol);
  font: 700 0.75rem var(--font-mono);
}

.features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature > .icon {
  color: var(--petrol);
}

.privacy-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
}

.privacy-line > .icon {
  color: var(--ok);
}

.privacy-line h2 {
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 700;
  font-stretch: 100%;
}

.privacy-line p {
  font-size: var(--fs-small);
  color: var(--ink-2);
}

.segmented--links {
  display: inline-grid;
  width: min(380px, 100%);
}

.segmented--links a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 38px;
  padding: 0 var(--space-2);
  border-radius: 8px;
  color: var(--ink-2);
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
}

.segmented--links a[aria-current='true'] {
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 1px 2px rgb(0 0 0 / 8%);
}

/* Plan cards: equal height, the choose button always at the bottom */
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--space-4);
}

.plan {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
}

.plan--best {
  border-color: var(--petrol);
  box-shadow: 0 0 0 1px var(--petrol);
}

.plan__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.plan__head h2 {
  font-size: 1.25rem;
}

.plan__price {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.plan__price small {
  font-family: var(--font-text);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-2);
}

.plan__list {
  display: grid;
  align-content: start;
  gap: 7px;
  flex: 1 0 auto;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
}

.plan__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.plan__list .icon {
  margin-top: 2px;
  color: var(--petrol);
}

.plan__alt {
  min-height: 2.8em;
  margin-top: auto;
  font-size: 0.75rem;
  color: var(--ink-2);
}

.faq {
  display: grid;
  gap: var(--space-2);
  max-width: 720px;
}

.faq h2 {
  margin-bottom: var(--space-2);
}

.faq details {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.faq summary {
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
}

.faq details p {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  color: var(--ink-2);
}

@media (max-width: 820px) {
  .home__bar {
    flex-wrap: wrap;
  }

  .home__bar-actions {
    margin-left: auto;
  }

  .home__nav {
    order: 3;
    flex: 1 1 100%;
    margin: 0;
  }

  .steps,
  .features,
  .plans {
    grid-template-columns: minmax(0, 1fr);
  }

  .privacy-line {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .privacy-line .btn {
    grid-column: 1 / -1;
  }
}

/* Facts on a card, e.g. device and account when connecting the browser extension (1.2.2) */
.facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  margin: 0;
  font-size: var(--fs-small);
}

.facts dt {
  color: var(--ink-2);
}

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

.auth-icon {
  color: var(--petrol);
}

.auth-icon .icon {
  width: 40px;
  height: 40px;
}

/* A short hint on hover, keyboard focus or tap, e.g. when a greyed-out button becomes
   possible (inboxes, design 50). Same look as the chart tooltips. */
.tip {
  position: relative;
  display: inline-flex;
}

.tip__text {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 5;
  display: none;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-size: 0.75rem;
  width: max-content;
  max-width: 260px;
  white-space: normal;
}

.tip:hover .tip__text,
.tip:focus-within .tip__text,
.tip:focus .tip__text {
  display: block;
}

/* Charts: scale on the left and a tooltip per day on hover (pure CSS) */
.bars__chart {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2);
}

.bars__scale {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 150px;
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--ink-3);
  text-align: right;
}

.bars__scale span:first-child {
  transform: translateY(-50%);
}

.bars__scale span:last-child {
  transform: translateY(50%);
}

.bars__grid {
  stroke: var(--line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.chart-plot {
  position: relative;
  min-width: 0;
  container-type: inline-size;
}

.chart-hits {
  position: absolute;
  inset: 0;
  display: flex;
}

.chart-hit {
  position: relative;
  flex: 1 1 0;
}

.chart-hit:hover {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}

.chart-tip {
  position: absolute;
  top: 4px;
  left: 50%;
  z-index: 5;
  display: none;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  width: max-content;
  max-width: 64cqw;
  transform: translateX(-50%);
  pointer-events: none;
}

.chart-hit:hover .chart-tip {
  display: block;
}

.chart-plot--spark .chart-tip {
  top: auto;
  bottom: calc(100% + 4px);
}

/* Keep the tooltips inside the chart: near the left edge they open to the right, near
   the right edge to the left. */
.chart-hit--start .chart-tip {
  left: 0;
  transform: none;
}

.chart-hit--end .chart-tip {
  right: 0;
  left: auto;
  transform: none;
}

/* Own Cloudflare domains (BYO-CF, Phase 1.5, design v28 g-byo) */
.status-cell {
  display: inline-grid;
  gap: 3px;
  justify-items: start;
}

.status-cell small {
  color: var(--ink-2);
  font-size: 0.75rem;
}

.connect-more {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-m);
}

.connect-more > .icon {
  color: var(--petrol);
}

.connect-more > div {
  display: grid;
  gap: var(--space-1);
}

.inline-checks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ink-2);
  font-size: var(--fs-small);
}

.inline-checks li,
.checks li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.inline-checks .icon,
.checks .icon {
  color: var(--ok);
}

.checks {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}

.checks li.is-missing,
.checks li.is-missing .icon {
  color: var(--crit);
}

.change-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}

.change-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}

.change-list .icon {
  margin-top: 2px;
  color: var(--ink-2);
}

.perm {
  font-family: var(--font-text);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

.perm-why {
  color: var(--ink-2);
  font-size: var(--fs-small);
}

.how {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-left: 1.3em;
  color: var(--ink-2);
  font-size: 0.875rem;
}

.notice--crit {
  border-color: var(--crit);
  background: var(--crit-soft);
}

.notice--crit > .icon {
  color: var(--crit);
}

.wizard {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  min-width: 0;
}

.wizard__steps {
  display: grid;
  align-content: start;
  gap: var(--space-1);
  margin: 0;
  padding: var(--space-4) var(--space-3);
  border-right: 1px solid var(--line);
  background: var(--surface-2);
  list-style: none;
}

.wizard__step {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 6px var(--space-2);
  border-radius: var(--radius-s);
  color: var(--ink-3);
  font-size: 0.875rem;
  white-space: nowrap;
}

.wizard__num {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  font: 600 0.75rem var(--font-mono);
}

.wizard__num .icon {
  width: 14px;
  height: 14px;
}

.wizard__step.is-done {
  color: var(--ink-2);
}

.wizard__step.is-done .wizard__num {
  border-color: var(--ok);
  background: var(--ok);
  color: var(--surface);
}

.wizard__step.is-current {
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  color: var(--ink);
  font-weight: 600;
}

.wizard__step.is-current .wizard__num {
  border-color: var(--petrol);
  color: var(--petrol);
}

.wizard__step.is-failed .wizard__num {
  border-color: var(--crit);
  color: var(--crit);
}

.wizard__mobile {
  display: none;
  gap: 6px;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-size: var(--fs-small);
}

.wizard__mobile b {
  color: var(--ink);
}

.wizard__body {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-4);
}

.wizard__body h2 {
  font-family: var(--font-text);
  font-size: 1.125rem;
  font-weight: 700;
  font-stretch: 100%;
}

.wizard-foot {
  justify-content: flex-end;
}

.wizard-foot .muted {
  margin-right: auto;
}

.check-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}

.check-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
}

.check-list .icon {
  margin-top: 2px;
}

.check-list .is-ok .icon {
  color: var(--ok);
}

.check-list .is-warn .icon {
  color: var(--warn);
}

.check-list .is-crit .icon {
  color: var(--crit);
}

.check-list__value {
  color: var(--ink-2);
  font-size: var(--fs-small);
  white-space: nowrap;
}

.confirm-box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3);
  border: 1px solid var(--warn);
  border-radius: var(--radius-s);
  background: var(--warn-soft);
  font-size: 0.875rem;
}

.confirm-box input {
  margin-top: 3px;
}

.hash {
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

.test-address {
  font-family: var(--font-mono);
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.done-icon .icon {
  width: 40px;
  height: 40px;
  color: var(--petrol);
}

.byo-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
}

@media (max-width: 1180px) {
  .byo-head {
    flex-direction: column;
    align-items: stretch;
  }

  .byo-actions > * {
    flex: 1;
  }

  .byo-actions .btn {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .byo-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
}

.check-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  font-size: 0.875rem;
}

.check-option .checkbox {
  margin-top: 2px;
}

.audit-path {
  overflow-wrap: anywhere;
  white-space: normal;
}

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

@media (max-width: 820px) {
  .connect-more {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .connect-more .btn {
    grid-column: 1 / -1;
  }

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

  .wizard__steps {
    display: none;
  }

  .wizard__mobile {
    display: grid;
  }
}

@media (max-width: 640px) {
  /* Table rows become cards: the status sits on the right like every other value. */
  td .status-cell {
    justify-items: end;
    text-align: right;
  }

  .perm {
    white-space: normal;
  }
}

/* Working feedback for slow form steps (client/ui.ts initBusy) */
.btn.is-busy::before {
  content: '';
  flex: none;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.8s linear infinite;
}

.btn:disabled {
  cursor: progress;
}

.btn.is-busy:disabled {
  opacity: 1;
}

a.btn.is-locked {
  pointer-events: none;
  opacity: 0.5;
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn.is-busy::before {
    animation: btn-spin 1.6s linear infinite !important;
    animation-iteration-count: infinite !important;
  }
}

/* Sign-up (2a.1, design v29 g-signup) */
.consent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  font-size: 0.875rem;
}

.consent input {
  margin-top: 2px;
}

/* Turnstile renders a 65px high frame; keep its room so the card doesn't jump. */
.turnstile-box {
  min-height: 65px;
}

.checks li.is-todo,
.checks li.is-todo .icon {
  color: var(--petrol);
}

.checks li.is-todo {
  color: var(--ink-2);
}

.center {
  text-align: center;
}

/* While the sign-up form is sent its fields are locked too (design v29). */
.signup-form[aria-busy='true'] :is(input, .cf-turnstile, .consent) {
  pointer-events: none;
  opacity: 0.6;
}

/* Account deletion (2a.2, design g-p2) */
.whatnext {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}

.whatnext li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}

.whatnext .icon {
  color: var(--ink-2);
}

.reauth {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--radius-s);
  background: var(--surface-2);
  font-size: 0.875rem;
}

.reauth > .icon {
  color: var(--petrol);
}

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

  .reauth .btn {
    grid-column: 1 / -1;
  }
}

.divider {
  width: 100%;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--line);
}

/* Plans (2c.1, design p-p2-plan, p-p2-limit) */
.limits__link {
  justify-self: end;
  margin-top: var(--space-1);
  color: var(--petrol);
  font-size: 0.75rem;
  text-decoration: none;
}

.limit-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
  border: 1px solid var(--warn);
  border-radius: var(--radius-m);
  background: var(--surface);
  box-shadow: inset 4px 0 0 var(--warn);
}

.limit-card > .icon {
  color: var(--warn);
}

.limit-card__title {
  margin: 0;
  font-weight: 600;
}

@media (max-width: 640px) {
  .limit-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .limit-card .btn {
    grid-column: 1 / -1;
  }
}

/* Leak warnings (2e.1, design p-p2-leaks, p-p2-alias-leak) */
.leak-card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--warn);
  border-radius: var(--radius-m);
  background: var(--surface);
  box-shadow: inset 4px 0 0 var(--warn);
}

.leak-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.leak-card__flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3);
}

.leak-card__flow > div {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: var(--space-3);
  border-radius: var(--radius-s);
  background: var(--surface-2);
}

.leak-card__flow b {
  overflow: hidden;
  font-weight: 500;
  font-size: 0.8125rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leak-card__bad {
  background: var(--warn-soft) !important;
}

.leak-card__label {
  color: var(--ink-2);
  font-size: 0.6875rem;
}

.inline-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: end;
}

@media (max-width: 640px) {
  .leak-card__flow,
  .inline-form {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Navigation item with a shorter label for the phone bar (Apps and extensions) */
.nav__short {
  display: none;
}

@media (max-width: 820px) {
  .nav__long {
    display: none;
  }

  .nav__short {
    display: inline;
  }
}

/* Apps and extensions (design version 30): platform cards, install guide */
.page-lead {
  max-width: 66ch;
  margin-top: calc(var(--space-2) * -1);
  font-size: 0.875rem;
}

.platforms {
  display: grid;
  gap: var(--space-5);
}

.plat-section {
  display: grid;
  gap: var(--space-3);
}

.plat-section__title {
  font-family: var(--font-text);
  font-size: 0.9375rem;
  font-weight: 700;
  font-stretch: 100%;
}

.plat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: var(--space-3);
}

.plat {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
}

.plat--mine {
  border-color: var(--petrol);
  box-shadow: 0 0 0 1px var(--petrol);
}

.plat--later {
  border-style: dashed;
  background: transparent;
}

.plat__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.plat__logo {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink);
}

.plat__name {
  display: grid;
  min-width: 0;
}

.plat__title {
  overflow: hidden;
  font-family: var(--font-text);
  font-size: 0.9375rem;
  font-weight: 700;
  font-stretch: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plat__sub {
  overflow: hidden;
  color: var(--ink-3);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plat__status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.plat__mine {
  color: var(--petrol);
  font: 500 0.625rem var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.plat__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  color: var(--ink-2);
  font: 0.75rem var(--font-mono);
}

.plat__facts span {
  white-space: nowrap;
}

.plat__text {
  color: var(--ink-2);
  font-size: var(--fs-small);
}

.plat__actions {
  display: flex;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-1);
}

.plat__actions .btn {
  flex: 1;
}

.guide-tabs {
  width: auto;
}

.guide-tabs a {
  min-height: 30px;
  padding: 0 var(--space-3);
  font-size: 0.8125rem;
}

.install-note {
  padding: var(--space-4) var(--space-4) 0;
  font-size: var(--fs-small);
}

.install-note--after {
  padding: 0 var(--space-4) var(--space-4);
}

.install-steps {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-4);
  list-style: none;
  counter-reset: install;
}

.install-steps li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  counter-increment: install;
}

.install-steps li::before {
  content: counter(install);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--petrol-soft);
  color: var(--petrol);
  font: 700 0.75rem var(--font-mono);
}

.install-steps li > div {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  font-size: 0.875rem;
}

.install-steps .muted {
  font-size: var(--fs-small);
}

.copy-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.copy-line code {
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: var(--surface-2);
}

/* Phones: the apps come first, nobody installs a browser extension there */
@media (max-width: 640px) {
  .plat-section--apps {
    order: -1;
  }

  .page-header h1:has(> .page-title-wrap) {
    white-space: normal;
    text-wrap: balance;
  }
}

/* Breach warnings and newsletters (2e.2, 2e.3, design version 33) */
.stat--crit {
  border-color: var(--crit);
  background: var(--crit-soft);
}

.stat--crit .stat__value {
  color: var(--crit);
}

.section-title {
  margin: var(--space-2) 0 0;
}

.leak-card--breach {
  border-color: var(--crit);
  box-shadow: inset 4px 0 0 var(--crit);
}

.leak-card--breach .leak-card__bad {
  background: var(--crit-soft) !important;
}

.leak-card--breach .leak-card__flow b:not(.mono) {
  font-weight: 700;
  font-size: 0.9375rem;
}

.breach-classes {
  display: grid;
  gap: var(--space-2);
}

.breach-classes .chip {
  min-height: 28px;
  font-size: var(--fs-small);
}

.list-sender {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.list-sender .mono {
  color: var(--ink-2);
}

.list-sender .caption {
  font-weight: 400;
}

.panel__foot--note {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  align-items: flex-start;
  color: var(--ink-2);
  font-size: var(--fs-small);
}

/* A long note wraps next to its icon, not below it. */
.panel__foot--note > span {
  flex: 1 1 0;
  min-width: 0;
}

.replace-pair {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

.replace-pair > div {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: var(--space-3);
  border-radius: var(--radius-s);
  background: var(--surface-2);
}

.replace-pair dd {
  min-width: 0;
  margin: 0;
}

.replace-pair > div:first-child .alias {
  color: var(--ink-3);
}