/*
 * Graphite: the design system of every customer page (the embedded app, its help, and the
 * server-rendered pages). One token set, light and dark (the device's setting). Graphite
 * neutrals carry the structure; one accent (ember, or a white-label partner's colour, set by
 * app.js from the server's palette) carries actions, the current tab, focus, progress and
 * links; green, amber and red only ever mean fine, needs a look and broken, always with a word.
 *
 * Type: Geist and Geist Mono, self-hosted. Sizes 32, 24, 20, 16, 14, 13, 12 (and 28 mono for
 * figures); weights 400, 500, 600. Space: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64. Radii: 6 chips,
 * 10 controls, 14 cards, 999 pills. Controls 36 px tall, 44 px on phones and touch screens.
 */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/geist-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/geist-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/geist-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/geist-mono-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/geist-mono-500.woff2') format('woff2');
}

/* ---------------------------------------------------------------- tokens */

:root {
  color-scheme: light dark;
  --ink: #111318;
  --ink-2: #353b47;
  --muted: #5e6675;
  --control-border: #7d8594;
  --border-strong: #c9ced6;
  --line: #e3e6eb;
  --subtle: #eef0f3;
  --canvas: #f6f7f9;
  --surface: #ffffff;
  /* Ember, unless a white-label partner's colour is set (--brand-accent…, from the server). */
  --accent: var(--brand-accent, #c2410c);
  --accent-hover: var(--brand-accent-hover, #9a3412);
  --accent-soft: var(--brand-accent-soft, #fdf0e8);
  --on-accent: #ffffff;
  --ok: #15803d;
  --ok-bg: #eef8f1;
  --warn: #a15c07;
  --warn-bg: #fef6e7;
  --bad: #b42318;
  --bad-bg: #fef1f0;
  --bad-border: #f3c4bf;
  --neutral: #353b47;
  --neutral-bg: #eef0f3;
  --bar: #111318;
  --bar-ink: #ffffff;
  --bar-muted: #e3e6eb;
  --shadow-pop: 0 12px 32px rgba(17, 19, 24, 0.1);
  --shadow-seg: 0 1px 2px rgba(17, 19, 24, 0.12);
  --font: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  --control: 36px;
  --gutter: 24px;
  font-family: var(--font);
  font-size: 14px;
  line-height: 22px;
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #eceef2;
    --ink-2: #c4c9d2;
    --muted: #9aa3b2;
    --control-border: #6b7380;
    --border-strong: #3a404b;
    --line: #262b33;
    --subtle: #1e222a;
    --canvas: #0b0d11;
    --surface: #14171d;
    --accent: var(--brand-accent-dark, #fdba74);
    --accent-hover: var(--brand-accent-dark-hover, #fed7aa);
    --accent-soft: var(--brand-accent-dark-soft, #352e29);
    --on-accent: #14171d;
    --ok: #4ade80;
    --ok-bg: #12301f;
    --warn: #fbbf24;
    --warn-bg: #33270b;
    --bad: #f87171;
    --bad-bg: #3a1513;
    --bad-border: #7f2a24;
    --neutral: #c4c9d2;
    --neutral-bg: #262b33;
    --bar: #eceef2;
    --bar-ink: #14171d;
    --bar-muted: #353b47;
    --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.45);
    --shadow-seg: 0 1px 2px rgba(0, 0, 0, 0.5);
  }
}

/* Phones and touch screens: 44 px controls and 16 px gutters. */
@media (max-width: 640px), (pointer: coarse) {
  :root {
    --control: 44px;
  }
}

@media (max-width: 640px) {
  :root {
    --gutter: 16px;
  }
}

* {
  box-sizing: border-box;
}

html {
  background: var(--canvas);
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-feature-settings: 'ss01' off;
}

a {
  color: var(--accent);
  text-underline-offset: 2px;
}

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

h1,
h2,
h3,
h4,
p,
ol,
ul,
dl,
dd {
  margin: 0;
}

h1 {
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

h2 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}

h3,
h4 {
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
}

strong,
b {
  font-weight: 600;
}

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

.small {
  font-size: 13px;
  line-height: 20px;
}

.caption {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}

/* Amounts, ids, tracking and phone numbers, dates in tables: Geist Mono with tabular figures. */
.mono,
.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.mono {
  font-size: 13px;
}

.nowrap {
  white-space: nowrap;
}

.hidden {
  display: none !important;
}

.text-bad {
  color: var(--bad);
}

.prose-text {
  white-space: pre-line;
}

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

/* Keyboard focus only: 3 px of the accent at about 35%. */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent);
  outline-offset: 1px;
}

/* ------------------------------------------------------------ app header */

/* Below Control Center's sticky announcement banners when there are any (--anx-sticky-h: app.js). */
.appbar {
  position: sticky;
  top: var(--anx-sticky-h, 0px);
  z-index: 10;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.appbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.appbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 60px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--ink);
}

#brand {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--ink-2);
}

#who {
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.logo-sm {
  width: 28px;
  height: 28px;
  flex: none;
}

.logo-md {
  width: 40px;
  height: 40px;
  flex: none;
}

.logo-lg {
  width: 64px;
  height: 64px;
  display: block;
  margin: 0 auto;
}

/* A white-label partner's logo: any shape, as tall as the app's own, never wider than its space. */
.logo-sm.partner,
.logo-lg.partner,
.logo-partner {
  width: auto;
  object-fit: contain;
}

.logo-sm.partner {
  height: 28px;
  max-width: 120px;
  object-position: left center;
}

.logo-lg.partner {
  height: 64px;
  max-width: min(240px, 80%);
}

.logo-partner {
  height: 40px;
  max-width: 180px;
  object-position: left center;
}

/* Underline tabs: the current one is ink 500 with a 2 px accent line; they scroll on phones, never cut. */
.tabs {
  display: flex;
  gap: 4px;
  margin: 0 -12px;
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tabs button {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-weight: 400;
  white-space: nowrap;
  cursor: pointer;
}

.tabs button:hover:not(:disabled) {
  background: none;
  color: var(--ink);
}

/* More tabs off to one side (a phone): that side fades out. */
.tabs.more-right {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
}

.tabs.more-left {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent);
}

.tabs.more-left.more-right {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}

.tabs button[aria-current='page'] {
  color: var(--ink);
  font-weight: 500;
  box-shadow: inset 0 -2px 0 var(--accent);
}

.tabs button:focus-visible {
  outline-offset: -3px;
}

.tabs .count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--bad);
  color: var(--surface);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}

.spacer {
  flex: 1;
}

/* ------------------------------------------------------------- page */

main.view {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px var(--gutter) 64px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Room under the content for the save bar, while it shows. */
body.dirty main.view {
  padding-bottom: calc(64px + 48px);
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.page-head > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  max-width: 760px;
}

.page-head p {
  color: var(--muted);
}

.page-head .actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* A card: surface, a 1 px line, 14 px corners, no shadow. Its parts are spaced by the gap. */
.panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
}

@media (max-width: 640px) {
  .panel {
    padding: 20px 16px;
  }
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 24px;
}

.panel-head > .muted {
  font-size: 13px;
}

/* A part of a card, set off by a divider (never a card inside a card). */
.section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--subtle);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stack.tight {
  gap: 8px;
}

/* Numbered sections (Ship): the number in an ink circle, then the title. */
.step-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.step-title .step-no {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}

/*
 * Grids on a 12-column base: rows never end with a lone item. Two across: a lone last item
 * takes the row. Three across (six columns): one left over takes the row, two share it. Four
 * across (twelve columns): what is left over shares the row evenly.
 */
.grid {
  display: grid;
  gap: 16px;
  align-items: start;
}

.grid.cards {
  gap: var(--gutter);
  align-items: stretch;
}

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

.grid.two > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

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

.grid.three > * {
  grid-column: span 2;
}

.grid.three > :last-child:nth-child(3n + 1) {
  grid-column: 1 / -1;
}

.grid.three > :last-child:nth-child(3n + 2),
.grid.three > :nth-last-child(2):nth-child(3n + 1) {
  grid-column: span 3;
}

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

.grid.four > * {
  grid-column: span 3;
}

.grid.four > :last-child:nth-child(4n + 1) {
  grid-column: 1 / -1;
}

.grid.four > :last-child:nth-child(4n + 2),
.grid.four > :nth-last-child(2):nth-child(4n + 1) {
  grid-column: span 6;
}

.grid.four > :last-child:nth-child(4n + 3),
.grid.four > :nth-last-child(2):nth-child(4n + 2),
.grid.four > :nth-last-child(3):nth-child(4n + 1) {
  grid-column: span 4;
}

/* 8 and 4: the main column and its aside, on the same 24 px gutter as a row of figures. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--gutter);
  align-items: start;
}

.split > .main {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
  min-width: 0;
}

.split > .aside {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
  min-width: 0;
  position: sticky;
  top: 128px;
}

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

  .grid.four > *,
  .grid.four > :nth-last-child(n) {
    grid-column: auto;
  }

  .grid.four > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

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

  .split > .aside {
    position: static;
  }
}

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

  .grid.two > *,
  .grid.three > *,
  .grid.four > *,
  .grid.two > :nth-last-child(n),
  .grid.three > :nth-last-child(n),
  .grid.four > :nth-last-child(n) {
    grid-column: auto;
  }
}

/* Nothing to show yet (search results, a status line, a result to come): no gap for it. */
.panel > :empty:not(input, select, textarea, img, button),
.panel > .row:empty,
.panel > [role='status']:empty,
.split > .aside > :empty,
.split > .main > :empty {
  display: none;
}

/* Short number fields (a parcel's weight and size) stay two across on a phone. */
@media (max-width: 640px) {
  .grid.four.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* A card in a row of cards: as tall as the others, its buttons on the bottom line. */
.grid.cards > .panel {
  height: 100%;
}

.panel .foot {
  margin-top: auto;
}

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

.row.end {
  justify-content: flex-end;
}

.row.center-row {
  justify-content: center;
}

/* ----------------------------------------------------------------- forms */

label.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
  color: var(--ink);
}

/* A field on one line (a list's filter in its card's title row). */
label.field.inline {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}

label.field.inline select {
  width: auto;
  color: var(--ink);
}

/* A field and the button that uses it, side by side. */
.remit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: end;
}

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

label.field > span.help,
.question > .help,
.help-text {
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  color: var(--muted);
}

label.check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
  min-height: 24px;
  font-size: 14px;
  line-height: 22px;
}

label.check > span {
  min-width: 0;
}

input,
select,
textarea {
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--control-border);
  border-radius: 10px;
  width: 100%;
  min-width: 0;
}

input,
select {
  height: var(--control);
  padding: 0 12px;
}

select {
  padding-right: 32px;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

select.auto {
  width: auto;
}

input[type='number'],
input.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

input[type='checkbox'],
input[type='radio'] {
  width: 18px;
  height: 18px;
  flex: none;
  margin: 2px 0 0;
  padding: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

input[type='file'] {
  height: auto;
  padding: 0;
  border: 0;
  background: none;
}

textarea {
  min-height: 96px;
  padding: 8px 12px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 20px;
  resize: vertical;
}

textarea.prose {
  font-family: inherit;
  font-size: 14px;
  line-height: 22px;
}

input::placeholder,
textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent);
  outline-offset: 0;
}

input[type='checkbox']:focus,
input[type='radio']:focus {
  outline: none;
}

input[type='checkbox']:focus-visible,
input[type='radio']:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent);
  outline-offset: 1px;
}

/* Switched off (a read-only user, a blocked account): it looks it. */
input:disabled,
select:disabled,
textarea:disabled {
  background-color: var(--subtle);
  border-color: var(--line);
  color: var(--muted);
  cursor: not-allowed;
}

input[readonly] {
  background: var(--subtle);
  border-color: var(--line);
}

/* A form's error, above its buttons, and the fields it names. */
input[aria-invalid='true'],
select[aria-invalid='true'],
textarea[aria-invalid='true'] {
  border: 1.5px solid var(--bad);
}

/* A file picker: a button and the chosen file's name (the input itself is hidden). */
.file-pick {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
}

.file-pick .file-name {
  font-size: 13px;
  line-height: 20px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------- buttons */

button,
.button {
  font: inherit;
  font-weight: 500;
  height: var(--control);
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

button:hover:not(:disabled),
.button:hover {
  background: var(--subtle);
  color: var(--ink);
}

button.primary,
.button.primary,
.standalone .button {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

button.primary:hover:not(:disabled),
.button.primary:hover,
.standalone .button:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--on-accent);
}

/* Destructive: red text with a soft red edge, never a red slab. */
button.danger {
  color: var(--bad);
  border-color: var(--bad-border);
}

button.danger:hover:not(:disabled) {
  background: var(--bad-bg);
  color: var(--bad);
}

/* Quiet: text only. */
button.quiet {
  border-color: transparent;
  background: transparent;
  color: var(--ink-2);
}

button.quiet:hover:not(:disabled) {
  background: var(--subtle);
}

button:disabled {
  cursor: not-allowed;
  background: var(--subtle);
  border-color: var(--line);
  color: var(--muted);
}

button.primary:disabled {
  background: var(--subtle);
  border-color: var(--line);
  color: var(--muted);
}

/* A link that is a button: inline, in the accent. */
button.link {
  height: auto;
  border: none;
  background: none;
  color: var(--accent);
  padding: 0;
  font-weight: 500;
  text-align: left;
  white-space: normal;
  display: inline;
}

button.link:hover:not(:disabled) {
  background: none;
  color: var(--accent-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

button.link:disabled {
  background: none;
  color: var(--muted);
}

button.wide,
.button.wide {
  width: 100%;
}

button.big,
.button.big {
  height: 44px;
}

/* Segmented control (same-level choices): a track, the chosen one raised. */
.segmented {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 3px;
  padding: 3px;
  background: var(--subtle);
  border-radius: 10px;
}

.segmented button {
  height: calc(var(--control) - 6px);
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-2);
  font-size: 13px;
}

.segmented button[aria-pressed='true'] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-seg);
}

/* Choice cards (the parcel's size): equal cards, the chosen one in the accent. */
.choice-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.choice-cards button {
  height: auto;
  min-height: 64px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  padding: 12px;
  text-align: left;
  white-space: normal;
}

.choice-cards button .caption {
  color: var(--muted);
  font-weight: 400;
}

.choice-cards button[aria-pressed='true'] {
  border: 1.5px solid var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
  background: var(--surface);
}

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

/* ---------------------------------------------------------------- tables */

.table-wrap {
  overflow-x: auto;
  margin: 0 -4px;
  padding: 0 4px;
}

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

th,
td {
  text-align: left;
  padding: 12px 12px 12px 0;
  vertical-align: top;
}

td {
  border-top: 1px solid var(--subtle);
}

th:last-child,
td:last-child {
  padding-right: 0;
}

th {
  padding-top: 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}

th.num,
td.num {
  text-align: right;
}

td.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

td.when {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-2);
  white-space: nowrap;
}

td.select {
  width: 32px;
}

/* Wide tables keep their columns and scroll inside their box on narrow screens, with a shadow on the side that scrolls. */
table.wide {
  min-width: 720px;
}

.table-wrap {
  background:
    linear-gradient(to right, var(--surface) 30%, transparent) left / 40px 100% no-repeat local,
    linear-gradient(to left, var(--surface) 30%, transparent) right / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(17, 19, 24, 0.14), transparent) left / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(17, 19, 24, 0.14), transparent) right / 12px 100% no-repeat scroll;
}

/* Build your own for agencies: the sub-accounts an agency's build covers, with Exclude / Include. */
table.cover-table td:first-child {
  min-width: 120px;
  overflow-wrap: anywhere;
}

table.cover-table th.end,
table.cover-table td.end {
  text-align: right;
  white-space: nowrap;
}

/*
 * The lists people work every day (shipments, cash on delivery, what each status does) become
 * one block per row on a phone: each value under its column's name, nothing cut off.
 */
@media (max-width: 640px) {
  table.stack-table {
    min-width: 0;
  }

  table.stack-table,
  table.stack-table tbody,
  table.stack-table tr,
  table.stack-table td,
  table.stack-table th[scope='row'] {
    display: block;
  }

  table.stack-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  table.stack-table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    padding: 16px 0;
    border-top: 1px solid var(--subtle);
  }

  table.stack-table tbody tr:first-child {
    border-top: 0;
    padding-top: 0;
  }

  table.stack-table td,
  table.stack-table th[scope='row'] {
    border: 0;
    padding: 0;
    text-align: left;
    min-width: 0;
  }

  table.stack-table td.lead,
  table.stack-table th[scope='row'],
  table.stack-table td.empty-cell,
  table.stack-table td.when {
    grid-column: 1 / -1;
  }

  /* Who it's for first; when, last. */
  table.stack-table td.lead {
    order: -1;
  }

  table.stack-table td.when {
    order: 1;
  }

  table.stack-table td.empty-on-phone {
    display: none;
  }

  table.stack-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-family: var(--font);
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: var(--muted);
  }

  table.stack-table td.center {
    text-align: left;
  }

  table.stack-table select,
  table.stack-table input[type='text'] {
    min-width: 0;
  }

  table.stack-table td.when {
    white-space: normal;
  }
}

tr.clickable {
  cursor: pointer;
}

tr.clickable:hover td {
  background: var(--canvas);
}

/* --------------------------------------------------------------- bits */

/* A pill: 24 px, a dot or an icon and a word. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  background: var(--neutral-bg);
  color: var(--neutral);
  white-space: nowrap;
  vertical-align: middle;
}

.badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  flex: none;
}

.badge.ok {
  background: var(--ok-bg);
  color: var(--ok);
}

.badge.warn {
  background: var(--warn-bg);
  color: var(--warn);
}

.badge.warn::before {
  background: transparent;
  border: 1.5px solid currentColor;
}

.badge.bad {
  background: var(--bad-bg);
  color: var(--bad);
}

.badge.bad::before {
  border-radius: 1px;
  transform: rotate(45deg);
}

/* Not a state: neutral. */
.badge.info {
  background: var(--neutral-bg);
  color: var(--neutral);
}

.badge.accent {
  background: var(--accent-soft);
  color: var(--accent);
}

.badge.plain::before {
  display: none;
}

/* A chip (the header's plan, a category). */
.chip.bad {
  background: var(--bad-bg);
  color: var(--bad);
}

.chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--subtle);
  color: var(--ink-2);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  white-space: nowrap;
}

/*
 * A callout: a tint, an icon and words. Neutral for information; green, amber and red for the
 * three states. The icon is a mask in the text's colour.
 */
.notice {
  position: relative;
  padding: 12px 16px 12px 48px;
  border-radius: 10px;
  background: var(--neutral-bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 22px;
}

.notice::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 15px;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M8 7.5V11M8 5h.01'/%3E%3C/svg%3E");
}

.notice.small {
  font-size: 13px;
  line-height: 20px;
}

.notice.small::before {
  top: 14px;
}

.notice.ok {
  background: var(--ok-bg);
  color: var(--ok);
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
}

.notice.ok::before,
.notice.warn::before,
.notice.bad::before {
  --icon: inherit;
}

.notice.warn {
  background: var(--warn-bg);
  color: var(--warn);
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M8 5v3.5l2 1.5'/%3E%3C/svg%3E");
}

.notice.bad {
  background: var(--bad-bg);
  color: var(--bad);
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M8 5v3.5M8 11h.01'/%3E%3C/svg%3E");
}

.notice > .row {
  margin-top: 8px;
}

.notice strong {
  font-weight: 600;
}

.notice button.link,
.notice a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.notice a.button {
  color: var(--ink);
  text-decoration: none;
}

.notice a.button.primary {
  color: var(--on-accent);
}

.notice.form-error {
  margin: 0;
}

/* Blocked: the reason and the one thing to do, above everything. */
.notice.blocking {
  border: 1px solid var(--bad-border);
  padding-top: 16px;
  padding-bottom: 16px;
}

.notice.blocking::before {
  top: 19px;
}

.notice.blocking .row {
  margin-top: 12px;
}

.notice.blocking .button.primary,
.notice.blocking button.primary {
  color: var(--on-accent);
  text-decoration: none;
}

.notice.blocking .muted {
  color: var(--ink-2);
  margin-top: 8px;
}

.prewrap {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 16px;
}

/* A rate: a radio, the service and courier, the price in mono. */
.rate-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rate {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}

.rate:hover {
  border-color: var(--border-strong);
}

.rate.selected {
  border: 1.5px solid var(--accent);
  padding: 11.5px;
}

.rate input {
  margin: 0;
}

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

.rate .rate-name > :first-child {
  font-weight: 500;
}

.rate .rate-name .muted {
  font-size: 12px;
  line-height: 16px;
}

.rate .price {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  white-space: nowrap;
}

.rate:focus-within {
  outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent);
  outline-offset: 1px;
}

/* Filters over a list: the search takes the room, the rest their own width. */
.toolbar {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 16px;
  align-items: end;
}

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

/* Label/value lines (a summary under the rates, a shipment's facts). */
.facts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.facts > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink-2);
}

.facts > div > :last-child {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink);
}

.facts > div > .plain-value {
  font-family: var(--font);
}

.facts.ruled {
  padding-top: 12px;
  border-top: 1px solid var(--subtle);
}

/* Progress: a 6 px track and the accent. */
.meter {
  height: 6px;
  background: var(--subtle);
  border-radius: 999px;
  overflow: hidden;
}

.meter > div {
  height: 100%;
  min-width: 0;
  background: var(--accent);
  border-radius: 999px;
}

.meter.over > div {
  background: var(--warn);
}

/* A figure: its label, the number in mono 28, a line of context. */
.figure {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.figure .label {
  font-size: 13px;
  line-height: 20px;
  color: var(--muted);
}

.stat {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 28px;
  line-height: 36px;
  font-weight: 500;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.figure .context {
  font-size: 13px;
  line-height: 20px;
  color: var(--muted);
}

.timeline {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.timeline li {
  position: relative;
  padding: 0 0 16px 20px;
}

.timeline li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--border-strong);
}

.timeline li::after {
  content: '';
  position: absolute;
  left: 6.5px;
  top: 20px;
  bottom: 0;
  width: 1px;
  background: var(--line);
}

.timeline li:first-child::before {
  background: var(--accent);
}

.timeline li:last-child {
  padding-bottom: 0;
}

.timeline li:last-child::after {
  display: none;
}

.timeline .muted.small,
.timeline .when {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 16px;
  color: var(--muted);
}

/* The setup strip: one segment per step, the done ones in the accent, the next step's button. */
.setup {
  gap: 16px;
}

.setup-steps {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.setup-steps li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--ink-2);
}

.setup-steps .bar {
  height: 4px;
  border-radius: 999px;
  background: var(--line);
}

.setup-steps li.done .bar {
  background: var(--accent);
}

.setup-steps .step-name {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.setup-steps .step-name::before {
  content: '';
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 3px;
  border-radius: 999px;
  border: 1.5px solid var(--control-border);
}

.setup-steps li.done .step-name::before {
  border: 0;
  background: var(--ok);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.setup-steps li.next {
  color: var(--ink);
  font-weight: 500;
}

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

/* -------------------------------------------------------- dialogs, toasts */

.drawer-backdrop {
  position: fixed;
  inset: 0;
  margin: 0;
  background: rgba(17, 19, 24, 0.4);
  z-index: 20;
  display: flex;
  justify-content: flex-end;
}

.drawer {
  width: min(560px, 100%);
  height: 100%;
  background: var(--surface);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--shadow-pop);
}

.drawer:focus {
  outline: none;
}

.drawer > .row:first-child {
  flex-wrap: nowrap;
  align-items: flex-start;
}

.drawer > .row:first-child h2 {
  font-size: 20px;
  line-height: 28px;
  overflow-wrap: anywhere;
}

/* A drawer's contents fill it, so its buttons sit at its bottom even when there is little above them. */
.drawer > .stack:last-child {
  flex: 1 0 auto;
}

/* In a drawer (560 px), three fields across become two (a lone last one takes the row). */
.drawer .grid.three {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.drawer .grid.three > *,
.drawer .grid.three > :nth-last-child(n) {
  grid-column: auto;
}

.drawer .grid.three > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

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

/* A drawer's own buttons stay in sight at its bottom. */
.drawer .sticky-foot {
  position: sticky;
  bottom: -24px;
  margin: auto -24px -24px;
  padding: 16px 24px;
  background: var(--surface);
  border-top: 1px solid var(--line);
}

@media (max-width: 640px) {
  .drawer {
    padding: 20px 16px;
  }

  .drawer .sticky-foot {
    bottom: -20px;
    margin: auto -16px -20px;
    padding: 12px 16px;
  }
}

/* While a drawer is open the page under it stays put. */
body.drawer-open {
  overflow: hidden;
}

/* One at a time: bottom right on a computer, bottom centre on a phone. */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 30;
  max-width: 420px;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--bar);
  color: var(--bar-ink);
  box-shadow: var(--shadow-pop);
  font-size: 14px;
  line-height: 22px;
}

.toast.bad {
  background: var(--bad);
  color: #ffffff;
}

body.dirty .toast {
  bottom: 96px;
}

@media (max-width: 640px) {
  .toast {
    left: 16px;
    right: 16px;
    bottom: 16px;
    max-width: none;
    text-align: center;
  }
}

/* The save bar: ink, "N unsaved changes · Discard · Save", at the bottom while a form is changed. */
.save-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 16px;
  z-index: 15;
  padding: 0 var(--gutter);
  pointer-events: none;
}

.save-bar-inner {
  max-width: 1152px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 12px 12px 20px;
  border-radius: 14px;
  background: var(--bar);
  color: var(--bar-ink);
  box-shadow: 0 12px 32px rgba(17, 19, 24, 0.18);
  pointer-events: auto;
}

.save-bar .actions {
  display: flex;
  gap: 8px;
}

.save-bar button {
  border: 0;
}

.save-bar button.discard {
  background: transparent;
  color: var(--bar-muted);
}

.save-bar button.discard:hover:not(:disabled) {
  background: rgba(127, 127, 127, 0.2);
  color: var(--bar-ink);
}

.save-bar button.primary {
  background: var(--bar-ink);
  color: var(--bar);
}

.save-bar button.primary:hover:not(:disabled) {
  background: var(--bar-muted);
  color: var(--bar);
}

@media (max-width: 640px) {
  .save-bar-inner {
    padding: 8px 8px 8px 16px;
  }
}

/* A tab loading: grey blocks in the shape of a page, no spinner. */
.skeleton {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.skeleton span {
  display: block;
  height: 12px;
  border-radius: 999px;
  background: var(--subtle);
}

.skeleton .sk-title {
  height: 24px;
  width: 30%;
}

.skeleton .sk-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.skeleton .sk-card span:nth-child(2) {
  width: 70%;
}

.skeleton .sk-card span:nth-child(3) {
  width: 45%;
}

/* An empty state: one line saying what's missing, and the one action that fixes it. */
.empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  color: var(--muted);
}

td.empty-cell {
  padding: 24px 0;
  color: var(--muted);
  text-align: center;
}

.center {
  text-align: center;
  align-items: center;
}

.boot {
  max-width: 480px;
  width: 100%;
  margin: 64px auto 0;
  align-items: center;
  text-align: center;
}

.boot .skeleton {
  align-self: stretch;
  align-items: center;
  gap: 12px;
}

.boot .skeleton span {
  width: 60%;
}

.boot .skeleton span + span {
  width: 40%;
}

/* A fieldset that only groups (the parcel's size): no frame. */
.plain-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.plain-fieldset > legend {
  padding: 0 0 8px;
}

/* A save bar's error, light on its ink. */
.text-bar-error {
  color: #fca5a5;
}

@media (prefers-color-scheme: dark) {
  .text-bar-error {
    color: #b42318;
  }
}

.setup-steps.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

/* ------------------------------------------------------- Ship */

.ship-result {
  gap: 12px;
}

.ship-result .facts {
  margin: 0;
}

/* ------------------------------------------------------- Couriers */

.courier-card .panel-head {
  align-items: flex-start;
}

.courier-card .title {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/*
 * A courier's text mark: its initials in a neutral chip, never its logo or colours (those are the
 * courier's trademarks).
 */
.courier-mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--subtle);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
}

.courier-title,
.courier-intro {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}


.courier-card .badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.courier-card .foot {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

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

/* "Connect another courier": a dashed card in the row. */
button.add-card {
  height: auto;
  min-height: 160px;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  background: transparent;
  border: 1.5px dashed var(--border-strong);
  border-radius: 14px;
  color: var(--ink-2);
  white-space: normal;
}

button.add-card:hover:not(:disabled) {
  background: var(--surface);
}

button.add-card .plus {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--subtle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  color: var(--ink);
}

button.add-card .muted {
  font-weight: 400;
  font-size: 13px;
}

.copy-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

/* ------------------------------------------------------- rate table form */

.ratecard {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ratecard-service {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.ratecard-zone {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 0 0;
  border-top: 1px solid var(--subtle);
}

.ratecard details > summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 500;
}

.ratecard details[open] > summary {
  margin-bottom: 12px;
}

.ratecard-steps {
  max-width: 440px;
}

.ratecard-steps td {
  padding: 4px 8px 4px 0;
  border-top: 0;
  vertical-align: middle;
}

.ratecard-steps th {
  padding-bottom: 4px;
}

.ratecard-steps input {
  min-width: 96px;
}

/* ------------------------------------------------------- Settings */

.address-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--subtle);
}

.address-block:first-child {
  padding-top: 0;
  border-top: 0;
}

.address-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 16px;
  align-items: end;
}

.address-head label.check {
  min-height: var(--control);
  align-items: center;
}

.address-head label.check input {
  margin: 0;
}

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

  .address-head > label.field {
    grid-column: 1 / -1;
  }
}

/* ------------------------------------------------------- Automation */

@media (min-width: 641px) {
  table.matrix td,
  table.matrix th.row-head {
    vertical-align: middle;
    border-top: 1px solid var(--subtle);
    font-weight: 400;
  }

  table.matrix th.row-head {
    padding: 12px 12px 12px 0;
    color: var(--ink);
    font-size: 14px;
    line-height: 22px;
  }

  table.matrix th.center,
  table.matrix td.center {
    text-align: center;
  }

  table.matrix td.center input {
    margin: 0;
  }

  table.matrix select,
  table.matrix input[type='text'] {
    min-width: 160px;
  }
}

@media (max-width: 640px) {
  table.matrix td.wide-cell {
    grid-column: 1 / -1;
  }
}

.stack.wide-gap {
  gap: var(--gutter);
}

/* ------------------------------------------------------- Subscription */

.section-title {
  font-size: 16px;
  line-height: 24px;
}

.plan-name {
  font-size: 16px;
  line-height: 24px;
}

.skeleton.rows {
  gap: 16px;
}

.plan-card.current {
  border: 1.5px solid var(--accent);
  padding: 23.5px;
}

.price-line {
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
}

.price-line .per {
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  color: var(--muted);
}

.plan-card ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  line-height: 20px;
  color: var(--ink-2);
}

.plan-card .foot .your-plan {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--control);
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 500;
}

.features {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 24px;
}

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

.features li::before {
  content: '';
  flex: none;
  width: 14px;
  height: 14px;
  background: var(--ok);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.features li.off {
  color: var(--muted);
}

.features li.off::before {
  background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Build your own: amounts on sliders with exact numbers, switches, the months and currency on the
   left; the price, line by line, on the right (below on a phone, with its total kept in view). */
.byo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  gap: var(--gutter);
  align-items: start;
}

.byo-controls {
  gap: 20px;
}

.byo-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.byo-item + .byo-item,
.byo-feature:first-of-type {
  padding-top: 16px;
  border-top: 1px solid var(--subtle);
}

.byo-item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-weight: 500;
}

.byo-item-price {
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}

.byo-slider-row {
  display: grid;
  grid-template-columns: var(--control) minmax(0, 1fr) var(--control) 112px;
  gap: 8px;
  align-items: center;
}

.byo-slider-row.months {
  grid-template-columns: var(--control) 112px var(--control);
  justify-content: start;
}

.byo-step {
  width: var(--control);
  padding: 0;
  font-size: 18px;
  line-height: 1;
}

input.byo-num {
  text-align: right;
}

input[type='range'] {
  height: var(--control);
  padding: 0;
  border: 0;
  background: transparent;
  accent-color: var(--accent);
  cursor: pointer;
}

input[type='range']:focus {
  outline: none;
}

input[type='range']:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent);
  outline-offset: 2px;
  border-radius: 10px;
}

.byo-feature {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.byo-feature + .byo-feature {
  padding-top: 4px;
}

/* A switch: the checkbox drawn as a pill with a knob (role="switch"). */
.byo-feature input[type='checkbox'] {
  appearance: none;
  position: relative;
  width: 36px;
  height: 20px;
  margin: 1px 0 0;
  border-radius: 999px;
  background: var(--border-strong);
  transition: background 0.15s ease;
}

.byo-feature input[type='checkbox']::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-seg);
  transition: transform 0.15s ease;
}

.byo-feature input[type='checkbox']:checked {
  background: var(--accent);
}

.byo-feature input[type='checkbox']:checked::after {
  transform: translateX(16px);
}

.byo-chips {
  gap: 8px;
}

.byo-chips .chip.active {
  background: var(--accent-soft);
  color: var(--accent);
}

.byo-summary {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border-radius: 14px;
  background: var(--canvas);
  border: 1px solid var(--line);
}

.byo-summary h3 {
  font-size: 16px;
  line-height: 24px;
}

.byo-summary .byo-currency {
  margin-top: -12px;
}

.byo-summary h4 {
  font-size: 14px;
  line-height: 22px;
}

.byo-summary-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.byo-lines {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  line-height: 20px;
}

.byo-lines th,
.byo-lines td {
  padding: 6px 0;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.byo-lines th {
  text-align: left;
  font-weight: 400;
  padding-right: 12px;
}

.byo-lines td {
  text-align: right;
  white-space: nowrap;
}

.byo-lines .byo-detail {
  display: block;
}

.byo-lines tr.sub th,
.byo-lines tr.sub td {
  font-weight: 500;
}

.byo-lines tr.total th,
.byo-lines tr.total td {
  font-weight: 600;
  border-bottom: 0;
  border-top: 1.5px solid var(--ink-2);
}

.byo-lines tr.muted th,
.byo-lines tr.muted td {
  border-bottom: 0;
}

.byo-total .stat {
  color: var(--ink);
}

.byo-warn {
  color: var(--warn);
}

/* The total while sliding, on a phone (the summary is below the controls there). */
.byo-mini {
  display: none;
}

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

  .byo-summary {
    position: static;
  }

  .byo-mini:not(:empty) {
    display: block;
    position: sticky;
    bottom: 8px;
    z-index: 1;
    align-self: flex-end;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--surface);
    font-family: var(--mono);
    font-size: 13px;
    line-height: 20px;
    box-shadow: var(--shadow-pop);
  }
}

@media (max-width: 640px) {
  .byo-slider-row {
    grid-template-columns: var(--control) minmax(0, 1fr) var(--control) 84px;
  }

  .byo-slider-row.months {
    grid-template-columns: var(--control) 84px var(--control);
  }

  .byo-summary {
    padding: 16px;
  }
}

/* "Delete all my data": kept apart from the rest of the Subscription tab. */
.panel.danger-zone {
  border-color: var(--bad-border);
}

.deletion-lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
}

.deletion-lists h3 {
  font-size: 14px;
  line-height: 22px;
  margin-bottom: 4px;
}

.deletion-lists ul {
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  line-height: 20px;
  color: var(--ink-2);
}

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

/* The figure from the partner's invoice, with Pay now. */
.notice.invoice,
.invoice-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 20px;
  border: 1.5px solid var(--accent);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
}

.notice.invoice::before {
  display: none;
}

.invoice-box .small {
  color: var(--muted);
}

/* A subscription a partner (reseller or agency) manages. */
.notice.managed .small {
  margin-top: 4px;
}

.job-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid var(--subtle);
}

.job-row:first-child {
  padding-top: 0;
  border-top: 0;
}

/* ---------------------------------------------------------------- support */

.question {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.question-label {
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
}

.question.attach {
  margin: 0;
}

.choice-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
}

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

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

.choice-list label.check,
label.check.question-check {
  overflow-wrap: anywhere;
}

.span-all {
  grid-column: 1 / -1 !important;
}

/* Connect buttons: Facebook Messenger and Instagram on a row of their own, with the 24-hour rule under them. */
.connect-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

p.meta-hint {
  margin: 0;
}

.ticket-list {
  display: flex;
  flex-direction: column;
}

.ticket-row {
  width: 100%;
  height: auto;
  min-height: 64px;
  text-align: left;
  white-space: normal;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border: 0;
  border-top: 1px solid var(--subtle);
  border-radius: 0;
  background: none;
  font-weight: 400;
}

.ticket-row:first-child {
  border-top: 0;
}

.ticket-row:hover:not(:disabled) {
  background: none;
}

.ticket-row:hover .ticket-subject {
  color: var(--accent);
}

.ticket-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ticket-subject {
  overflow-wrap: anywhere;
  font-weight: 500;
}

.ticket-row.unread .ticket-subject {
  font-weight: 600;
}

.dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.dot.on {
  background: var(--accent);
}

.ticket-title {
  overflow-wrap: anywhere;
}

.conversation {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.msg {
  max-width: min(680px, 88%);
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.msg.customer {
  align-self: flex-end;
  background: var(--accent-soft);
  border-color: transparent;
}

.msg.support {
  align-self: flex-start;
}

.msg-head {
  margin-bottom: 4px;
}

.msg-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.msg-files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.msg-files a.thumb img {
  display: block;
  max-width: 160px;
  max-height: 120px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.msg-files a.file {
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  font-size: 12px;
  line-height: 16px;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.attach {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.attach-list:empty {
  display: none;
}

.attach-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid var(--subtle);
}

.attach-name {
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .msg {
    max-width: 100%;
  }

  .support-form .row.end {
    justify-content: stretch;
  }

  .support-form .row.end button {
    flex: 1;
  }
}

/* ------------------------------------------------------------------ Help */

.help-search {
  position: relative;
}

details.help-section {
  border-top: 1px solid var(--subtle);
}

details.help-section:first-child {
  border-top: 0;
}

details.help-section > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 0 16px 32px;
  position: relative;
}

details.help-section:first-child > summary {
  padding-top: 0;
}

details.help-section > summary::-webkit-details-marker {
  display: none;
}

details.help-section > summary::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 23px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform 0.15s;
}

details.help-section:first-child > summary::before {
  top: 7px;
}

details.help-section[open] > summary::before {
  transform: rotate(45deg);
}

details.help-section > summary .help-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--ink);
}

details.help-section > summary .muted {
  font-size: 13px;
  line-height: 20px;
}

.help-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 0 24px 32px;
}

.help-steps,
.help-list {
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.help-table td {
  vertical-align: top;
}

.help-qa details {
  border-top: 1px solid var(--subtle);
  padding: 12px 0;
}

.help-qa summary {
  cursor: pointer;
  font-weight: 500;
}

.help-qa details p {
  margin-top: 8px;
}

/* The guide's topics, beside it on a computer. */
.help-toc {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.help-toc button.link {
  display: block;
  padding: 4px 0;
  color: var(--ink-2);
  font-weight: 400;
}

.help-toc button.link:hover {
  color: var(--accent);
}

/* On a phone the guide's own list of topics is enough: the aside would come after it. */
@media (max-width: 960px) {
  .help-aside {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .logo-sm.partner {
    max-width: 96px;
  }
}

.checklist {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.checklist li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--subtle);
}

.checklist li:first-child {
  border-top: 0;
  padding-top: 0;
}

.checklist .tick {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1.5px solid var(--control-border);
  font-size: 0;
}

.checklist li.done .tick {
  border: 0;
  background: var(--ok);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.checklist li.done span:nth-child(2) {
  color: var(--muted);
}

.checklist .row {
  gap: 16px;
}

/* ------------------------------------------------- server-rendered pages */

.standalone {
  min-height: 100vh;
}

.narrow {
  max-width: 720px;
  margin: 64px auto;
  padding: 0 var(--gutter);
}

.standalone .narrow {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.standalone .narrow h2 {
  margin-top: 8px;
}

.standalone .narrow ul {
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* The card keeps a side margin on phones instead of touching the screen's edges. */
@media (max-width: 752px) {
  .standalone .narrow {
    margin: 16px;
    padding: 24px 20px;
  }
}

.brandline {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--ink);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--subtle);
}

/* ------------------------------------------------------------------ print */

@media print {
  .appbar,
  [data-anx],
  .no-print,
  .save-bar,
  .toast,
  input[type='search'] {
    display: none !important;
  }

  :root {
    color-scheme: light;
  }

  html,
  body,
  main.view {
    background: #fff;
    color: #111318;
    max-width: none;
    padding: 0;
  }

  .panel {
    border: 0;
    padding: 0;
    break-inside: avoid-page;
  }

  .split {
    display: block;
  }

  details.help-section > summary::before {
    display: none;
  }
}