/* TariffTrust: tokens, base elements, shared components (results, forms, tables) and the workspace.
   Served under a strict CSP: no inline styles, fonts self-hosted (SIL OFL, see fonts/OFL.txt). */

@font-face {
  font-family: 'Geist';
  src: url("fonts/Geist-Variable.c47061a6ce96.woff2") format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url("fonts/GeistMono-Variable.c36289c8eb40.woff2") format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Text and surfaces: a cool, airy base; cards stand on soft shadows rather than borders. */
  --ink: #0e1426;
  --ink-2: #2a3249;
  --muted: #5b6478;
  --faint: #8a92a6;
  --line: #e6e8ef;
  --line-2: #d6dae5;
  --paper: #f7f8fb;
  --surface: #fff;
  --sunken: #f1f3f8;

  /* Brand: an electric blue-violet and an orange (--signal), the colours of the mark and of the
     logos (static/web/brand/). On a dark surface the violet lightens to stay legible. */
  --brand: #5b5cf0;
  /* The bars of a chart that are not the one the reader is about (3:1 on the surface). */
  --bar-muted: #848ea1;
  --brand-2: #4646d6;
  --brand-tint: #eeeefe;
  --brand-soft: #cfd0fc;
  --brand-glow: rgb(91 92 240 / 35%);
  --brand-on-dark: #8e8ff7;
  /* Words that glow on a dark surface: the violet turning to the orange, both lightened. */
  --brand-gradient-on-dark: linear-gradient(95deg, #a5a6fa 5%, #d896d6 50%, #f58f73 95%);

  /* What is sourced or verified. */
  --verified: #047857;
  --verified-tint: #ddf6ec;
  --verified-line: #ade6cf;

  /* Duty layers, one color per legal basis: the base schedule, Sections 301, 232, 201 and 338,
     the other measures (Column 2, a program no legal basis names), the entry fees. */
  --layer-base: var(--brand);
  --layer-301: var(--signal);
  --layer-232: #9333ea;
  --layer-201: #f5b83d;
  --layer-338: #14b8a6;
  --layer-other: #db2777;
  --layer-fee: #94a3b8;

  --signal: #ef5b3a;
  --signal-tint: #ffece6;
  --warning: #a35a00;
  --warning-tint: #fff4dc;
  --warning-line: #f8dfa6;
  --danger: #d02a2a;
  --danger-tint: #fdecec;
  --danger-line: #f6c9c9;

  /* Night: the dark sections of the site and the dark cards. */
  --night: #070b1a;
  --night-2: #0d1328;
  --night-3: #161d38;
  --night-line: #252d4d;
  --night-text: #c9cde3;
  --night-muted: #8b92b5;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgb(14 20 38 / 6%);
  --shadow: 0 1px 2px rgb(14 20 38 / 4%), 0 8px 24px -12px rgb(14 20 38 / 14%);
  --shadow-lg: 0 2px 6px rgb(14 20 38 / 4%), 0 32px 72px -32px rgb(14 20 38 / 30%);
  --focus: 0 0 0 3px rgb(91 92 240 / 30%);

  --sidebar: 252px;
  --content: 1200px;

  color-scheme: light;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01' on;
}

/* ---------- Base ---------- */

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
}

/* Component display rules must never reveal an element the script hides. */
[hidden] {
  display: none !important;
}

img,
svg,
canvas {
  max-width: 100%;
}

a {
  color: var(--brand);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentcolor 35%, transparent);
}

a:hover {
  text-decoration-color: currentcolor;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
figure {
  margin-top: 0;
}

h1,
h2,
h3,
h4 {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.022em;
  /* Lines of even length: never one word left alone on the last. */
  text-wrap: balance;
}

h1 {
  font-size: 32px;
  line-height: 1.15;
  margin-bottom: 10px;
  letter-spacing: -0.03em;
}

h2 {
  font-size: 19px;
  line-height: 1.3;
  margin-bottom: 14px;
}

h3 {
  font-size: 16px;
  line-height: 1.35;
  margin-bottom: 8px;
}

p {
  color: var(--muted);
  margin-bottom: 14px;
}

small {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.45;
}

strong {
  font-weight: 600;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 24px 0;
}

::selection {
  background: var(--brand-soft);
}

.code,
code,
pre,
kbd,
.mono {
  font-family: var(--font-mono);
  font-size: 0.86em;
  font-variant-ligatures: none;
}

code {
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
  overflow-wrap: anywhere;
}

.code {
  overflow-wrap: anywhere;
}

kbd {
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 0 5px;
  background: var(--surface);
  font-size: 11px;
}

pre {
  margin: 0 0 16px;
  background: var(--night);
  color: var(--night-text);
  padding: 18px 20px;
  border-radius: var(--radius);
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.7;
  font-size: 12.5px;
  border: 1px solid var(--night-line);
}

/* Code samples in tabs, one card (the API reference, app.js): the bar of languages and a copy
   button, then the panel shown. */
.code-tabs {
  margin: 0 0 16px;
  border: 1px solid var(--night-line);
  border-radius: var(--radius);
  background: var(--night);
  overflow: hidden;
}

.code-tabs-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 8px 0;
  border-bottom: 1px solid var(--night-line);
}

.code-tabs-bar [role='tab'] {
  padding: 9px 12px 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--night-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.code-tabs-bar [role='tab']:hover {
  color: var(--night-text);
}

.code-tabs-bar [role='tab'][aria-selected='true'] {
  border-bottom-color: var(--brand-on-dark);
  color: #fff;
}

.code-tabs-title {
  padding: 9px 12px 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

.code-tabs-title span {
  margin-left: 4px;
  color: var(--night-muted);
}

.code-tabs-copy {
  margin: 0 0 4px auto;
  padding: 5px 10px;
  border: 1px solid var(--night-line);
  border-radius: 8px;
  background: none;
  box-shadow: none;
  color: var(--night-text);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.code-tabs-copy:hover {
  color: #fff;
}

/* A sample outside the tabs: each line as it is, its end not wrapped alone. */
.code-sample {
  font-size: 12px;
  overflow-wrap: normal;
  white-space: pre;
}

.code-tabs pre {
  margin: 0;
  border: 0;
  border-radius: 0;
}

/* Scrollbars of the card, not the browser's grey ones with their arrows. */
.code-tabs pre::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.code-tabs pre::-webkit-scrollbar-track,
.code-tabs pre::-webkit-scrollbar-corner {
  background: transparent;
}

.code-tabs pre::-webkit-scrollbar-thumb {
  border: 2px solid var(--night);
  border-radius: 5px;
  background: var(--night-line);
}

.code-tabs pre::-webkit-scrollbar-thumb:hover {
  background: var(--night-muted);
}

/* A browser without those selectors has these two settings. */
@supports not selector(::-webkit-scrollbar) {
  .code-tabs pre {
    scrollbar-width: thin;
    scrollbar-color: var(--night-line) transparent;
  }
}

pre code {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
}

.num,
td,
.figure,
.metric strong {
  font-variant-numeric: tabular-nums;
}

/* Words kept on one line: "excl. VAT", a date, a code. */
.nowrap {
  white-space: nowrap;
}

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

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  top: 12px;
}

.icon {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -3px;
}

.icon-sm {
  width: 15px;
  height: 15px;
  vertical-align: -2px;
}

.icon-sprite {
  display: none;
}

.muted {
  color: var(--muted);
  font-size: 13.5px;
}

.eyebrow,
.kicker {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 10px;
}

.kicker {
  color: var(--faint);
  margin-bottom: 6px;
}

/* ---------- Buttons ---------- */

button,
.button {
  --btn-bg: var(--surface);
  --btn-fg: var(--ink);
  --btn-line: var(--line-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 15px;
  border: 1px solid var(--btn-line);
  border-radius: 8px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-size: 14px;
  font-weight: 550;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s,
    transform 0.15s;
}

button:hover,
.button:hover {
  --btn-bg: var(--sunken);
  text-decoration: none;
}

button:active,
.button:active {
  transform: translateY(1px);
}

button:disabled {
  cursor: progress;
  opacity: 0.55;
}

button:focus-visible,
.button:focus-visible,
a:focus-visible,
summary:focus-visible,
canvas:focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-radius: 6px;
}

.primary {
  --btn-bg: var(--brand);
  --btn-fg: #fff;
  --btn-line: var(--brand);
}

.primary:hover {
  --btn-bg: var(--brand-2);
  --btn-line: var(--brand-2);
}

.dark {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  --btn-line: var(--ink);
}

.dark:hover {
  --btn-bg: var(--ink-2);
}

.secondary {
  --btn-bg: var(--surface);
}

.ghost {
  --btn-bg: transparent;
  --btn-line: transparent;
  box-shadow: none;
}

.danger {
  --btn-fg: var(--danger);
}

.danger:hover {
  --btn-bg: var(--danger-tint);
  --btn-line: var(--danger-line);
}

button.danger.solid,
.button.danger.solid {
  --btn-bg: var(--danger);
  --btn-fg: #fff;
  --btn-line: var(--danger);
}

.button.lg,
button.lg {
  min-height: 46px;
  padding: 11px 20px;
  font-size: 15px;
  border-radius: 10px;
}

.button.sm,
button.sm,
table button {
  min-height: 30px;
  padding: 4px 10px;
  font-size: 12.5px;
  border-radius: 6px;
}

.text-button {
  border: 0;
  box-shadow: none;
  background: none;
  padding: 0;
  min-height: 0;
  color: inherit;
  font-weight: 450;
}

.text-button:hover {
  background: none;
  text-decoration: underline;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 550;
  text-decoration: none;
}

.link-arrow .icon {
  transition: transform 0.15s;
}

.link-arrow:hover .icon {
  transform: translateX(2px);
}

.actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.actions:last-child {
  margin-bottom: 0;
}

/* ---------- Forms ---------- */

label,
.labelled {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 550;
  color: var(--ink-2);
}

input,
select,
textarea {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 10px 14px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 400;
  box-shadow: inset 0 1px 1px rgb(14 20 38 / 3%);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

input::placeholder,
textarea::placeholder {
  color: var(--faint);
}

input:hover,
select:hover,
textarea:hover {
  border-color: #b8bfd0;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--focus);
}

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

input[type='color'] {
  max-width: 140px;
  padding: 4px;
  height: 40px;
}

input[type='checkbox'],
input[type='radio'] {
  width: 17px;
  min-height: 0;
  height: 17px;
  padding: 0;
  margin: 0;
  accent-color: var(--brand);
  box-shadow: none;
  flex: none;
}

input[type='file'] {
  border: 0;
  background: none;
  padding: 0;
  box-shadow: none;
  min-height: 0;
}

input[name='hts']:not([data-suggest]),
input[name='sku'],
input[name='origins'],
input[name='command'] {
  font-family: var(--font-mono);
  font-size: 14px;
}

textarea {
  resize: vertical;
  line-height: 1.5;
}

fieldset {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px 6px;
  margin: 0 0 18px;
}

legend {
  font-size: 13px;
  font-weight: 600;
  padding: 0 6px;
}

.checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  font-weight: 450;
  line-height: 1.4;
  cursor: pointer;
}

.checkbox input {
  margin-top: 1px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
  margin-bottom: 20px;
}

.form-grid .full,
.form-grid > p,
.form-grid > small {
  grid-column: 1 / -1;
}

/* A box among the fields: centered in its row of the grid, never across a column it sits in. */
.form-grid > .checkbox {
  align-self: center;
}

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

.stack .form-grid {
  margin: 0;
}

.stack > button {
  align-self: flex-start;
}

.inline-form {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.inline-form label {
  flex: 1;
  min-width: 160px;
}

.inline-form button {
  min-height: 40px;
}

/* Django-rendered forms (auth, confirmations). */
.fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 14px;
}

.field {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-first_name,
.field-last_name {
  grid-column: span 1;
}

.field label {
  display: block;
}

.field .help,
.helptext {
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
  line-height: 1.45;
}

.field .help ul {
  margin: 4px 0 0;
  padding-left: 16px;
}

.errorlist {
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--danger) !important;
  font-size: 12.5px;
  font-weight: 500;
}

.field.has-error input {
  border-color: var(--danger);
}

.form-errors {
  margin-bottom: 4px;
}

/* ---------- Disclosure ---------- */

details {
  border-top: 1px solid var(--line);
}

summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  padding: 14px 0;
  font-size: 14px;
  font-weight: 550;
  color: var(--ink);
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: '';
  width: 8px;
  height: 8px;
  flex: none;
  border-right: 1.6px solid var(--muted);
  border-bottom: 1.6px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s;
}

details[open] > summary::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

details > :not(summary) {
  margin-top: 0;
}

details[open] {
  padding-bottom: 14px;
}

/* ---------- Surfaces ---------- */

.card {
  background: var(--surface);
  border: 1px solid rgb(14 20 38 / 6%);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  box-shadow: var(--shadow);
  min-width: 0;
  margin-bottom: 20px;
}

.card > h2:first-child,
.card-head h2 {
  font-size: 16px;
}

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

.card-head h2,
.card-head h3 {
  margin: 0;
}

.card-head a {
  font-size: 13px;
}

.cards {
  display: grid;
  gap: 18px;
  margin-bottom: 20px;
}

.cards .card {
  margin: 0;
}

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

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

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

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

.two-columns > .card {
  margin-bottom: 0;
}

.two-columns + .two-columns,
.two-columns + .card,
.card + .two-columns {
  margin-top: 20px;
}

a.card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    transform 0.15s;
}

a.card:hover {
  border-color: var(--line-2);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

/* ---------- Feedback ---------- */

.notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 13.5px;
  color: var(--ink-2);
  margin: 0 0 20px;
  overflow-wrap: anywhere;
  line-height: 1.5;
}

.notice::before {
  content: '';
  width: 6px;
  height: 6px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--faint);
  flex: none;
}

.notice.info::before,
.notice.success::before {
  background: var(--brand);
}

.notice.success {
  background: var(--brand-tint);
  border-color: var(--brand-soft);
}

.notice.warning {
  background: var(--warning-tint);
  border-color: var(--warning-line);
  color: #6b3d00;
}

.notice.warning::before {
  background: #f5b83d;
}

.notice.error {
  background: var(--danger-tint);
  border-color: var(--danger-line);
  color: #7c1720;
}

.notice.error::before {
  background: var(--danger);
}

.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  width: min(440px, calc(100vw - 40px));
  margin: 0;
  box-shadow: var(--shadow-lg);
  padding-right: 44px;
  animation: toast-in 0.2s ease-out;
}

.toast[hidden] {
  display: none;
}

/* A button that reads as a link (Cookie settings, in the footers). */
button.link-button {
  display: inline;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  text-decoration: none;
  white-space: normal;
}

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

/* A result that waits for information points at it (app.js): its badge and each missing item go
   to the field, outlined in red until it is filled. */
button.badge-button {
  min-height: 0;
  padding: 5px 9px;
  border: 1px solid transparent;
  box-shadow: none;
  font: inherit;
  font-size: 12px;
  font-weight: 550;
  line-height: 1;
  cursor: pointer;
}

button.badge-button::after {
  content: '→';
}

.rs-status .link-button {
  color: var(--danger);
  font-weight: 600;
  text-decoration: underline;
}

.is-missing,
.is-missing:focus {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px rgb(208 42 42 / 15%) !important;
}

/* The choice of cookies (_consent.html): a card in a corner, never in front of the content's
   middle; "Reject all" and "Accept all" alike. */
.consent {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 70;
  width: min(460px, calc(100vw - 40px));
  padding: 20px 20px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.55;
  animation: toast-in 0.2s ease-out;
}

.consent[hidden] {
  display: none;
}

.consent h2 {
  margin: 0 0 6px;
  font-size: 15px;
  color: var(--ink);
}

.consent p {
  margin: 0;
}

.consent-options {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.consent-options[hidden],
.consent [hidden] {
  display: none;
}

/* Outside Europe, a short notice: measurement is on, its settings a click away. */
.consent[data-mode='notice'] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  width: min(560px, calc(100vw - 40px));
  padding: 14px 16px;
}

.consent[data-mode='notice'][hidden] {
  display: none;
}

.consent[data-mode='notice'] p {
  flex: 1 1 260px;
}

.consent[data-mode='notice'] .consent-actions {
  margin-top: 0;
}

.consent-option {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  font-weight: 400;
  cursor: pointer;
}

.consent-option input {
  margin-top: 3px;
}

.consent-option span {
  display: grid;
  gap: 2px;
}

.consent-option small {
  color: var(--muted);
}

.consent-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 16px;
}

.consent-actions button[hidden] {
  display: none;
}

.consent-equal {
  display: flex;
  gap: 8px;
}

.consent-equal button {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  --btn-line: var(--ink);
  min-width: 108px;
}

.consent-equal button:hover {
  --btn-bg: var(--ink-2);
}

@media (max-width: 560px) {
  .consent {
    left: 12px;
    bottom: 12px;
    width: calc(100vw - 24px);
  }

  .consent-equal {
    flex: 1;
  }

  .consent-equal button {
    flex: 1;
    min-width: 0;
  }
}

.toast-close {
  position: absolute;
  right: 8px;
  top: 8px;
  min-height: 28px;
  width: 28px;
  padding: 0;
  border: 0;
  box-shadow: none;
  --btn-bg: transparent;
}

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

.messages {
  margin-bottom: 4px;
}

.pill,
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 550;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--sunken);
  color: var(--ink-2);
  white-space: nowrap;
  border: 1px solid transparent;
}

.badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentcolor;
  opacity: 0.8;
}

.pill.warning,
.badge.is-warn {
  background: var(--warning-tint);
  color: var(--warning);
  border-color: var(--warning-line);
}

.badge.is-ok,
.pill.ok,
.pill.info {
  background: var(--brand-tint);
  color: var(--brand-2);
  border-color: var(--brand-soft);
}

/* A service or a check that works (status.html): green, apart from the brand's "ok". */
.badge.is-healthy {
  background: var(--verified-tint);
  color: var(--verified);
  border-color: var(--verified-line);
}

.badge.is-danger {
  background: var(--danger-tint);
  color: var(--danger);
  border-color: var(--danger-line);
}

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

.pill.signal {
  background: var(--signal-tint);
  color: #a63a0b;
}

.empty {
  text-align: center;
  padding: 44px 20px;
  color: var(--muted);
  font-size: 14px;
}

/* An empty table's message, in a table wider than a phone: kept in view at the left of the
   scrolled table instead of centred across columns out of sight. */
@media (max-width: 640px) {
  td > .empty {
    position: sticky;
    left: 0;
    max-width: calc(100vw - 34px);
  }
}

.empty .empty-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--sunken);
  color: var(--brand);
  margin-bottom: 14px;
}

.empty .empty-icon .icon {
  width: 22px;
  height: 22px;
}

.empty h3 {
  margin-bottom: 6px;
}

.empty p {
  max-width: 360px;
  margin: 0 auto 18px;
}

.empty p:last-child {
  margin-bottom: 0;
}

/* ---------- Lists, tables, key-values ---------- */

.list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.list-row:first-child {
  padding-top: 4px;
}

.list-row:last-child {
  border-bottom: 0;
  padding-bottom: 4px;
}

.list-row > div:first-child {
  min-width: 0;
}

.list-row strong {
  display: block;
}

.list-row .row-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  align-items: center;
}

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

.card .table-wrap {
  margin: 0 0 16px;
}

.card.table-wrap {
  padding: 0;
  border-radius: var(--radius-lg);
}

.card.table-wrap > h2 {
  padding: 20px 22px 4px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  text-align: left;
}

th {
  position: sticky;
  top: 0;
  background: #f9fafc;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 550;
  letter-spacing: 0.02em;
  padding: 10px 14px;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}

td {
  border-top: 1px solid var(--line);
  padding: 12px 14px;
  vertical-align: top;
}

tbody tr:first-child td {
  border-top: 0;
}

tbody tr:hover td {
  background: #fafbfd;
}

td small {
  font-size: 12px;
  max-width: 520px;
}

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

.hts-code,
a.code {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13.5px;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.kv {
  display: grid;
  grid-template-columns: minmax(140px, max-content) 1fr;
  gap: 8px 22px;
  font-size: 13.5px;
  margin: 0 0 16px;
}

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

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

/* A detail under the value of its line: the last success under a verification's state. */
.kv .kv-line {
  display: block;
  margin-top: 4px;
  font-size: 13px;
}

progress {
  width: 100%;
  height: 6px;
  appearance: none;
  border: 0;
  border-radius: 99px;
  background: var(--sunken);
  overflow: hidden;
}

progress::-webkit-progress-bar {
  background: var(--sunken);
}

progress::-webkit-progress-value {
  background: var(--brand);
  border-radius: 99px;
}

progress::-moz-progress-bar {
  background: var(--brand);
}

dialog {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px;
  width: min(520px, calc(100vw - 32px));
  box-shadow: var(--shadow-lg);
  color: var(--ink);
}

dialog::backdrop {
  background: rgb(7 11 26 / 45%);
  backdrop-filter: blur(2px);
}

/* ---------- Brand ---------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.03em;
}

.brand-mark {
  width: 26px;
  height: 26px;
  flex: none;
}

.brand-mark .m-base {
  fill: currentcolor;
}

.brand-mark .m-mid {
  fill: var(--brand);
}

.brand-mark .m-top {
  fill: var(--signal);
}

.brand .brand-name span {
  color: var(--brand);
}

/* Surfaces that stay dark (the sign-in aside). The landing's header is dark only until the page
   scrolls: site.css colours it in that state alone. */
.on-dark:not(.sh) .brand,
.on-dark:not(.sh) .brand .brand-name span {
  color: #fff;
}

.on-dark:not(.sh) .brand-mark .m-mid {
  fill: var(--brand-on-dark);
}

/* ---------- Workspace ---------- */

.app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  width: var(--sidebar);
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface);
  border-right: 1px solid rgb(14 20 38 / 6%);
  padding: 18px 14px 14px;
  overflow-y: auto;
}

.app-sidebar .brand {
  padding: 2px 10px 14px;
}

.workspace-switch {
  margin: 0 0 12px;
  border-radius: 12px;
  background: var(--paper);
  font-size: 14px;
  font-weight: 600;
  border: 0;
}

.workspace-switch > summary,
.workspace-switch.single {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  min-width: 0;
  font-size: 14px;
}

.workspace-switch[open] {
  padding-bottom: 10px;
}

.workspace-switch .ws-label {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.avatar {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 9px;
  background: linear-gradient(135deg, #7c7df5, var(--brand));
  color: #fff;
  font-size: 12px;
  font-weight: 650;
  text-transform: uppercase;
}

.avatar.round {
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand-2);
}

.workspace-switch form {
  display: flex;
  gap: 6px;
  padding: 0 10px;
}

.workspace-switch label {
  flex: 1;
}

.workspace-switch select {
  min-height: 34px;
  font-size: 13px;
  padding: 4px 28px 4px 8px;
}

.workspace-switch button {
  min-height: 34px;
  padding: 4px 10px;
  font-size: 12.5px;
}

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

.app-nav a,
.app-more > summary,
.sidebar-help {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--ink-2);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  transition:
    background 0.15s,
    color 0.15s;
}

.app-nav a .icon,
.app-more > summary .icon,
.sidebar-help .icon {
  color: var(--faint);
  transition: color 0.15s;
}

.app-nav a:hover,
.app-more > summary:hover,
.sidebar-help:hover {
  background: var(--paper);
  color: var(--ink);
}

.app-nav a[aria-current='page'],
.sidebar-help[aria-current='page'] {
  background: var(--brand-tint);
  color: var(--brand-2);
  font-weight: 600;
}

.app-nav a[aria-current='page'] .icon,
.sidebar-help[aria-current='page'] .icon {
  color: var(--brand);
}

.app-more {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.app-more > summary {
  justify-content: flex-start;
}

.app-more > summary::after {
  margin-left: auto;
}

.app-more[open] {
  padding-bottom: 4px;
}

.app-more > a {
  padding: 7px 12px 7px 42px;
  font-size: 14px;
}

/* Data status, in the sidebar's bottom: the dot of the sources' freshness where an icon would be. */
.sidebar-dot {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: none;
}

.sidebar-bottom {
  margin-top: auto;
  padding-top: 12px;
  display: grid;
  gap: 2px;
}

/* The person's menu: their name, at the bottom, opens it upward (app.js, data-group). */
.user-menu {
  position: relative;
  min-width: 0;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 0;
  padding: 8px 10px;
  border-radius: 10px;
  box-shadow: none;
  --btn-bg: transparent;
  --btn-line: transparent;
  --btn-fg: var(--ink);
  justify-content: flex-start;
  font-size: 13.5px;
}

.user-card:hover,
.user-card.is-current,
.user-card[aria-expanded='true'] {
  --btn-bg: var(--paper);
}

.user-card strong {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  text-align: left;
}

.user-card .icon {
  color: var(--faint);
  transition: transform 0.15s;
}

.user-card[aria-expanded='true'] .icon {
  transform: rotate(180deg);
}

.user-menu-panel {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.user-card[aria-expanded='true'] + .user-menu-panel {
  display: grid;
  gap: 2px;
}

.user-menu-email {
  margin: 0;
  padding: 8px 10px 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 13px;
}

.user-menu-panel a,
.user-menu-panel form button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 0;
  padding: 8px 10px;
  border-radius: 8px;
  box-shadow: none;
  --btn-bg: transparent;
  --btn-line: transparent;
  --btn-fg: var(--ink-2);
  justify-content: flex-start;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.user-menu-panel a:hover,
.user-menu-panel form button:hover {
  --btn-bg: var(--paper);
  --btn-fg: var(--ink);
  background: var(--paper);
  color: var(--ink);
}

.user-menu-panel a[aria-current='page'] {
  background: var(--brand-tint);
  color: var(--brand-2);
  font-weight: 600;
}

.user-menu-panel .icon {
  color: var(--faint);
}

.user-menu-panel form {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--line);
}

.app {
  margin-left: var(--sidebar);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 64px;
  padding: 0 40px;
  background: rgb(247 248 251 / 85%);
  backdrop-filter: saturate(180%) blur(12px);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  min-width: 0;
}

.breadcrumb strong {
  min-width: 0;
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The actions keep their size: a long page title is the one cut short. */
.top-actions {
  flex: none;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
}

.trial-pill {
  flex: none;
  text-decoration: none;
}

/* The trial's time left in days, on a phone only (site.css). */
.trial-pill .trial-short {
  display: none;
}

.search-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 240px;
  padding: 8px 12px;
  border: 1px solid rgb(14 20 38 / 8%);
  border-radius: 999px;
  background: var(--surface);
  color: var(--faint);
  font-size: 13.5px;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}

.search-hint kbd {
  margin-left: auto;
}

/* The administration, for the staff (_topbar.html): its icon alone on a phone. */
.top-admin {
  border-radius: 999px;
}

@media (max-width: 640px) {
  .top-admin span {
    display: none;
  }
}

.top-new {
  border-radius: 999px;
}

.app-main {
  width: 100%;
  max-width: 1280px;
  padding: 24px 40px 72px;
  font-size: 15px;
  flex: 1;
}

/* Tabs of the pages a navigation entry groups (Estimate, Saved, Explore). */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: max-content;
  max-width: 100%;
  margin: 0 0 28px;
  padding: 4px;
  border-radius: 999px;
  background: rgb(14 20 38 / 5%);
}

.tabs a {
  padding: 8px 16px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 550;
  text-decoration: none;
}

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

.tabs a[aria-current='page'] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

/* A list in place of tabs where the choices grow (the Models page's editions and measures). */
.choose-edition {
  margin: 0 0 28px;
}

.choose-edition label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 550;
}

.choose-edition select {
  min-width: min(280px, 100%);
}

.app-footer {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 18px 32px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--faint);
}

.app-footer a {
  color: var(--muted);
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin: 8px 0 32px;
}

/* In the workspace the top bar already names the page: no eyebrow above the title. */
.app-main .page-head .eyebrow {
  display: none;
}

.page-head h1 {
  font-size: clamp(28px, 3vw, 36px);
  letter-spacing: -0.035em;
  font-weight: 650;
  margin-bottom: 8px;
}

.page-head p {
  margin: 0;
  max-width: 680px;
  font-size: 16px;
}

.page-head .actions {
  margin: 0;
  flex: none;
}

/* Metrics */

.metric {
  display: flex;
  flex-direction: column;
}

.metric > span {
  font-size: 13px;
  color: var(--muted);
}

.metric strong {
  display: block;
  font-size: 32px;
  letter-spacing: -0.03em;
  line-height: 1.2;
  font-weight: 600;
  margin: 8px 0 2px;
}

.metric a {
  font-size: 13px;
  margin-top: auto;
  padding-top: 8px;
}

/* A metric's verdict, under its figure: what is good shows a green check, what waits a clock. */
.metric-status {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 6px 0 4px;
  font-size: 13.5px;
  font-weight: 600;
}

.metric-status.is-ok {
  color: var(--verified);
}

/* On the first line of a verdict that wraps, as on one that does not. */
.metric-status .icon {
  flex: none;
  margin-top: 0.2em;
  stroke-width: 2.6;
}

/* Figures side by side whose parts line up across the row (coverage): label, figure, verdict and
   note each on a row of the grid, whatever the height of the others; a figure in words sits on
   the line of the numbers. */
.metrics-aligned > .metric {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
}

.metrics-aligned > .metric > .metric-word {
  align-self: end;
}

.metric-status.is-warn {
  color: var(--warning);
}

.metric strong small {
  display: inline;
  font-size: 0.55em;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
}

.metric small a {
  font-size: inherit;
  margin: 0;
  padding: 0;
}

/* Workspace home */

.home-head {
  margin: 8px 0 24px;
}

.home-head h1 {
  font-size: clamp(28px, 3vw, 36px);
  letter-spacing: -0.035em;
  margin: 0 0 4px;
}

.home-head p {
  margin: 0;
  font-size: 17px;
  color: var(--muted);
}

.home-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.home-action {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 22px 18px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid rgb(14 20 38 / 6%);
  box-shadow: var(--shadow);
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.5;
  text-decoration: none;
  overflow: hidden;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.home-action::after {
  content: '';
  position: absolute;
  inset: auto -30% -60% auto;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--tone-glow, rgb(91 92 240 / 14%)), transparent 70%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.home-action:hover {
  transform: translateY(-2px);
  border-color: var(--brand-soft);
  box-shadow: var(--shadow-lg);
}

.home-action:hover::after {
  opacity: 1;
}

.home-action strong {
  color: var(--ink);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: 10px;
}

.home-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #7b7cf6, var(--brand-2));
  box-shadow: 0 8px 20px -8px var(--brand-glow);
}

.home-icon.tone-2 {
  background: linear-gradient(135deg, #f47c60, var(--signal));
  box-shadow: 0 8px 20px -8px rgb(239 91 58 / 40%);
}

.home-icon.tone-3 {
  background: linear-gradient(135deg, #c084fc, #8b3fe0);
  box-shadow: 0 8px 20px -8px rgb(168 85 247 / 40%);
}

.home-action:nth-child(2) {
  --tone-glow: rgb(239 91 58 / 14%);
}

.home-action:nth-child(3) {
  --tone-glow: rgb(168 85 247 / 14%);
}

.home-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 12px;
  color: var(--brand);
  font-weight: 600;
  font-size: 14px;
}

.home-go .icon {
  transition: transform 0.2s ease;
}

.home-action:hover .home-go .icon {
  transform: translateX(3px);
}

.home-start {
  display: grid;
  grid-template-columns: auto minmax(0, 0.9fr) minmax(0, 1.3fr);
  gap: 28px;
  align-items: center;
  background:
    radial-gradient(120% 140% at 0% 0%, rgb(91 92 240 / 7%), transparent 55%),
    var(--surface);
}

.home-ring {
  --fill: 0;
  position: relative;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: conic-gradient(var(--brand) calc(var(--fill) * 1turn), var(--brand-tint) 0);
  color: var(--muted);
  font-size: 14px;
}

.home-ring::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--surface);
}

.home-ring > span {
  position: relative;
}

.home-ring strong {
  color: var(--ink);
  font-size: 22px;
  letter-spacing: -0.03em;
}

.home-start-copy h2 {
  font-size: 19px;
  margin-bottom: 4px;
}

.home-start-copy p {
  margin: 0 0 14px;
  font-size: 14.5px;
}

.home-start-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

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

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.steps a,
.steps .step-done {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
}

.steps a {
  background: var(--paper);
}

.steps a:hover {
  background: var(--brand-tint);
}

.steps .check {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--line-2);
  background: var(--surface);
  flex: none;
}

.steps .step-done {
  color: var(--faint);
}

.steps .step-done .check {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.steps .step-done span:not(.check) {
  text-decoration: line-through;
  text-decoration-color: var(--line-2);
}

.steps .icon-sm {
  margin-left: auto;
  color: var(--faint);
}

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

.home-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 10px;
  margin: 0 -10px;
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
}

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

.home-row:hover {
  background: var(--paper);
}

.home-row-main {
  display: grid;
  min-width: 0;
}

.home-row-main strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-row-main small {
  color: var(--muted);
}

.home-row-end {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  flex: none;
  font-variant-numeric: tabular-nums;
}

.home-side h2 {
  font-size: 16px;
  margin-bottom: 14px;
}

.home-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0 0 14px;
}

.home-stats div {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--paper);
}

.home-stats dt {
  font-size: 12.5px;
  color: var(--muted);
}

.home-stats dd {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.home-data {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
}

.home-data:hover {
  border-color: var(--brand-soft);
}

.home-data span:not(.live-dot) {
  display: grid;
  min-width: 0;
}

.home-data small {
  color: var(--muted);
  font-size: 12.5px;
}

.home-data .icon-sm {
  margin-left: auto;
  color: var(--faint);
  flex: none;
}

.home-tour {
  margin-top: 10px;
}

/* Welcome (first visit) */

.welcome {
  width: min(460px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 40px 120px -30px rgb(7 11 26 / 60%);
  overflow: auto;
}

.welcome[open] {
  animation: welcome-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.welcome::backdrop {
  background: rgb(7 11 26 / 55%);
  backdrop-filter: blur(6px);
}

.welcome-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
}

.welcome-close button {
  color: #fff;
}

.welcome-slide {
  text-align: center;
  padding: 0 32px;
}

.welcome-slide h2 {
  font-size: 24px;
  letter-spacing: -0.03em;
  margin: 26px 0 8px;
}

.welcome-slide p {
  margin: 0 auto;
  max-width: 340px;
  min-height: 4.65em;
  font-size: 15.5px;
}

.welcome-art {
  position: relative;
  display: grid;
  place-items: center;
  height: 200px;
  margin: 0 -32px;
  background:
    radial-gradient(60% 80% at 20% 10%, rgb(123 124 246 / 60%), transparent 70%),
    radial-gradient(50% 70% at 85% 30%, rgb(239 91 58 / 35%), transparent 70%),
    radial-gradient(60% 80% at 60% 110%, rgb(168 85 247 / 45%), transparent 70%),
    var(--night);
  overflow: hidden;
}

.welcome-orb {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 255 255 / 22%), transparent 70%);
  animation: welcome-pulse 4s ease-in-out infinite;
}

.welcome-mark {
  position: relative;
  width: 84px;
  height: 84px;
}

.welcome-mark rect {
  transform-box: fill-box;
  transform-origin: left center;
  animation: welcome-bar 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.welcome-mark .m-base {
  fill: #fff;
}

.welcome-mark .m-mid {
  fill: var(--brand-on-dark);
  animation-delay: 0.12s;
}

.welcome-mark .m-top {
  fill: var(--signal);
  animation-delay: 0.24s;
}

.art-sources {
  align-content: center;
  gap: 10px;
}

.welcome-line {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 280px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 12%);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  animation: welcome-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.welcome-line:nth-child(2) {
  animation-delay: 0.1s;
}

.welcome-line:nth-child(3) {
  animation-delay: 0.2s;
}

.welcome-line i {
  width: 8px;
  height: 22px;
  border-radius: 4px;
  background: var(--layer-base);
}

.welcome-line i.tone-301 {
  background: var(--layer-301);
}

.welcome-line i.tone-fee {
  background: var(--layer-fee);
}

.welcome-line b {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgb(4 120 87 / 30%);
  color: #6ee7b7;
  font-size: 11.5px;
  font-weight: 600;
}

.art-paths {
  grid-auto-flow: column;
  justify-content: center;
  gap: 12px;
}

.art-paths span {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 92px;
  padding: 16px 8px 12px;
  border-radius: 16px;
  background: rgb(255 255 255 / 9%);
  border: 1px solid rgb(255 255 255 / 14%);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  animation: welcome-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.art-paths span:nth-child(2) {
  animation-delay: 0.1s;
}

.art-paths span:nth-child(3) {
  animation-delay: 0.2s;
}

.art-paths .icon {
  width: 26px;
  height: 26px;
}

.welcome-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 26px 24px 24px;
}

.welcome-dots {
  display: flex;
  gap: 6px;
  margin-right: auto;
}

.welcome-dots span {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--line-2);
  transition: width 0.25s ease;
}

.welcome-dots span.is-active {
  width: 22px;
  background: var(--brand);
}

@keyframes welcome-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }
}

@keyframes welcome-bar {
  from {
    transform: scaleX(0);
  }
}

@keyframes welcome-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

@keyframes welcome-pulse {
  50% {
    transform: scale(1.25);
    opacity: 0.6;
  }
}

/* Guided tour */

/* The spotlight is drawn where the target stood: the page only scrolls when the tour scrolls it. */
.is-touring {
  overflow: hidden;
}

/* A step of the tour is brought into view below the sticky top bar (onboarding.js). */
.is-touring [data-tour] {
  scroll-margin-top: 80px;
}

.tour {
  position: fixed;
  inset: 0;
  z-index: 60;
}

.tour-spot {
  position: fixed;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--w, 0);
  height: var(--h, 0);
  border-radius: 14px;
  box-shadow:
    0 0 0 4px rgb(91 92 240 / 45%),
    0 0 0 9999px rgb(7 11 26 / 58%);
  transition:
    left 0.3s ease,
    top 0.3s ease,
    width 0.3s ease,
    height 0.3s ease;
  pointer-events: none;
}

.tour-card {
  position: fixed;
  left: var(--card-x, 50%);
  top: var(--card-y, 50%);
  width: 340px;
  padding: 20px 20px 16px;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 30px 80px -24px rgb(7 11 26 / 55%);
  transition:
    left 0.3s ease,
    top 0.3s ease;
}

.tour[data-dock] .tour-card {
  left: 16px;
  right: 16px;
  width: auto;
  top: auto;
  bottom: 16px;
}

.tour[data-dock='top'] .tour-card {
  top: 16px;
  bottom: auto;
}

.tour-count {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand);
}

.tour-card h2 {
  font-size: 17px;
  margin: 4px 0 6px;
}

.tour-card p {
  margin: 0 0 16px;
  font-size: 14.5px;
}

.tour-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tour-nav {
  display: flex;
  gap: 8px;
}

/* Calculator and results */

.calc-form {
  display: grid;
  gap: 20px;
}

.calc-field {
  display: grid;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.calc-field input,
.calc-field select {
  min-height: 52px;
  font-size: 17px;
  border-radius: 12px;
}

.calc-field small {
  font-weight: 400;
}

/* A field's help (web/_hint.html): a "?" beside its name, its text on hover, focus or tap. */
.field-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* The name a field reads by, beside its "?": the field's own label, styled as the name around it. */
.field-name label {
  display: inline;
  font: inherit;
  color: inherit;
}

.hint {
  position: relative;
  display: inline-flex;
  font-size: 12.5px;
  font-weight: 400;
}

.hint-button {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: none;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
}

.hint-button:hover,
.hint-button:focus-visible {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--surface);
}

.hint-text {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: calc(-8px + var(--hint-shift, 0px));
  width: max-content;
  max-width: min(300px, calc(100vw - 40px));
  padding: 9px 11px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  box-shadow: 0 12px 30px -12px rgb(7 11 26 / 45%);
  display: none;
}

.hint.is-open .hint-text {
  display: block;
}

.hint-close {
  display: none;
}

/* A finger needs more than the "?" it sees: the button answers a touch around it. */
.hint-button {
  position: relative;
}

.hint-button::after {
  content: '';
  position: absolute;
  inset: -12px -14px;
}

/* On a phone, the help opens at the foot of the screen, whatever the field's place; a tap on it
   or elsewhere closes it. */
@media (max-width: 640px), (pointer: coarse) {
  .hint-text {
    position: fixed;
    top: auto;
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    max-width: 560px;
    margin: 0 auto;
    padding: 14px 48px 14px 16px;
    border-radius: 14px;
    font-size: 14.5px;
    line-height: 1.5;
  }

  .hint-close {
    display: block;
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 20px;
    line-height: 1;
    opacity: 0.8;
  }
}

/* What a field holds that leads nowhere (a measure, an unknown code), said beside it. */
.field-error {
  color: var(--danger);
  font-weight: 500;
}

.calc-optional {
  font-style: normal;
  font-weight: 400;
  font-size: 12.5px;
  color: var(--faint);
  margin-left: 4px;
}

/* Code suggestions of the calculator, under its field. */
.hts-combo {
  position: relative;
}

.hts-options {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: 340px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
}

/* No suggestion: hidden, also when the answer left a blank line in the list. */
.hts-options:empty,
.hts-options:not(:has(*)) {
  display: none;
}

.hts-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 9px 10px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 400;
}

.hts-option:hover,
.hts-option[aria-selected='true'] {
  background: var(--brand-tint);
}

/* A country typed in a country field (app.js): its name, then its code. */
.country-option {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.country-option .hts-option-text {
  font-size: 14px;
  color: var(--ink);
}

/* The declarations page (entries/new.html): its lines typed, or a CSV imported; one panel shown. */
.entry-mode {
  margin-bottom: 18px;
}

.entry-page:has(input[name='entry_mode'][value='import']:checked) .entry-type-panel,
.entry-page:has(input[name='entry_mode'][value='type']:checked) .entry-import-panel {
  display: none;
}

.entry-type-panel,
.entry-import-panel {
  display: grid;
  gap: 18px;
}

/* Below the form, not beside it: the result of a declaration is as wide as its lines. */
.entry-type-panel .result-panel {
  position: static;
  min-height: 0;
}

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

.entry-lines-head h2 {
  margin: 0;
}

/* Each line as the calculator asks a product: its code, its country, how much. Numbered in their
   order, whatever lines were removed. */
.entry-lines {
  display: grid;
  gap: 12px;
  counter-reset: line;
}

.entry-line {
  counter-increment: line;
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.entry-line-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.entry-line-number::before {
  content: 'Line ' counter(line);
  font-size: 13.5px;
}

.entry-line-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.7fr);
  gap: 14px;
  align-items: start;
}

.line-amount,
.line-per-unit,
.line-total {
  display: grid;
  gap: 10px;
}

.line-per-unit,
.line-total {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#entry-form:has(input[name='value_mode'][value='total']:checked) .line-per-unit,
#entry-form:has(input[name='value_mode'][value='per_unit']:checked) .line-total {
  display: none;
}

.line-more summary {
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}

.line-more[open] summary {
  margin-bottom: 10px;
}

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

/* A code field of a line is narrow: its suggestions are not. */
.entry-lines .hts-options {
  right: auto;
  width: min(560px, 80vw);
}

.hts-option-code {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-2);
  padding-top: 1px;
  white-space: nowrap;
}

.hts-option-text strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.hts-option-text small,
.hts-option-rate small {
  display: block;
  font-size: 12px;
  color: var(--muted);
}


/* A long rate (the sugar formula) is cut, whole in its title: the description keeps its width. */
.hts-option-rate {
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  text-align: right;
  white-space: nowrap;
}

/* Under the suggestions: what their rates are, and whose choice the code is. */
.hts-note {
  margin: 4px 4px 2px;
  padding: 8px 6px 4px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}

/* The product the chosen code names, under the code field. */
.hts-chosen {
  display: block;
  margin-top: 6px;
  padding: 7px 10px;
  border-radius: 10px;
  background: var(--sunken);
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.45;
}

.hts-chosen[hidden] {
  display: none;
}

.hts-none {
  padding: 10px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--muted);
}

.quantity-slot:empty {
  display: none;
}

/* How much: a switch between the quantity and its price per unit, and the value of the goods. The
   view not chosen is hidden by the switch itself, without script; the server reads the view sent. */
.calc-amount {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.calc-amount legend {
  float: left;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.calc-amount legend + .segmented {
  justify-self: end;
  margin-top: -36px;
}

.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}

.segmented label {
  position: relative;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 550;
  color: var(--muted);
  cursor: pointer;
}

.segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented label:has(input:checked) {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 3px rgb(14 20 38 / 14%);
}

.segmented label:has(input:focus-visible) {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

.calc-amount:has(input[value='total']:checked) .calc-per-unit,
.calc-amount:has(input[value='per_unit']:checked) .calc-total {
  display: none;
}

.quantity-slot {
  display: grid;
  gap: 14px;
}

.calc-per-unit,
.calc-total {
  display: grid;
  gap: 14px;
}

.calc-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.calc-field .with-unit span {
  flex: none;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
}

.calc-sum {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--paper);
  font-size: 13.5px;
  color: var(--muted);
}

.calc-sum output {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--ink);
}

.calc-note {
  color: var(--muted);
  font-size: 12.5px;
}

/* A code whose duty counts a quantity has no rate of its own: its note replaces the general one. */
.calc-amount:has(.calc-duty-note) .calc-rate-note {
  display: none;
}

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

.calc-more {
  border: 0;
  border-radius: 12px;
  background: var(--paper);
  padding: 0 16px;
}

.calc-more[open] {
  padding-bottom: 16px;
}

.calc-more summary {
  justify-content: flex-start;
  gap: 10px;
  font-size: 14.5px;
}

.calc-more summary span {
  color: var(--faint);
  font-weight: 400;
  font-size: 13px;
}

.calc-more summary::after {
  margin-left: auto;
}

.calc-submit {
  width: 100%;
}

.calc-empty {
  padding: 56px 28px;
}

.calc-ghost {
  display: grid;
  gap: 8px;
  max-width: 300px;
  margin: 0 auto 26px;
}

.calc-ghost i {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--sunken), var(--brand-tint), var(--sunken));
  background-size: 200% 100%;
  animation: calc-shimmer 2.4s ease-in-out infinite;
}

.calc-ghost i:nth-child(1) {
  width: 92%;
}

.calc-ghost i:nth-child(2) {
  width: 70%;
}

.calc-ghost i:nth-child(3) {
  width: 48%;
}

.calc-ghost i:nth-child(4) {
  width: 28%;
}

@keyframes calc-shimmer {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: -100% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .calc-ghost i,
  .welcome[open],
  .welcome-orb,
  .welcome-mark rect,
  .welcome-line,
  .art-paths span {
    animation: none;
  }

  .tour-spot,
  .tour-card,
  .home-action {
    transition: none;
  }
}

.calculator-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.95fr) minmax(380px, 1.05fr);
  gap: 22px;
  align-items: start;
}

.calculator-grid > .card {
  margin: 0;
}

.result-panel {
  position: sticky;
  top: 78px;
  min-height: 420px;
}

/* Under the public calculator: what an estimate adds up, read at a comfortable width. */
.calc-explain {
  margin-top: 22px;
  max-width: 820px;
}

.calc-explain h2 {
  font-size: 20px;
  margin: 0 0 12px;
}

.calc-explain > p {
  line-height: 1.65;
  color: var(--ink-2);
}

.calc-explain-guides {
  margin-bottom: 0;
}

/* The views of one product in the workspace's calculator (calculations/_views.html): its
   breakdown, other origins, its history; drawn as the tabs of a page. */
.result-views {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: max-content;
  max-width: 100%;
  margin: 0 0 18px;
  padding: 4px;
  border-radius: 999px;
  background: rgb(14 20 38 / 5%);
}

.result-view {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 550;
  box-shadow: none;
}

.result-view:hover {
  background: transparent;
  color: var(--ink);
}

.result-view[aria-current='true'] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

/* On a phone, the three views share the width in one row, without their icons. */
@media (max-width: 520px) {
  .result-views {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .result-view {
    justify-content: center;
    padding: 8px 6px;
    font-size: 13px;
    text-align: center;
  }

  .result-view .icon {
    display: none;
  }
}

/* A comparison of origins (calculations/_compare.html): a bar chart, least first, that is also the
   choice of countries. One chart per measure; the "Sort by" switch shows one. The client's own
   origin is drawn in the brand colour, the others in a gray that keeps 3:1 on the surface. */
.compare .card-head {
  flex-wrap: wrap;
  gap: 10px;
}

.compare:has(input[name='sort'][value='rate']:checked) .compare-chart[data-measure='amount'],
.compare:has(input[name='sort'][value='amount']:checked) .compare-chart[data-measure='rate'] {
  display: none;
}

.compare-chart {
  display: grid;
  gap: 2px;
  margin: 14px 0 10px;
  padding: 0;
  list-style: none;
}

.compare-row {
  display: grid;
  grid-template-columns: minmax(96px, 150px) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 8px 6px 8px 10px;
  border-radius: 10px;
}

.compare-row:hover {
  background: var(--paper);
}

.compare-row.is-chosen {
  background: var(--brand-tint);
}

.compare-who small {
  white-space: nowrap;
}

.compare-measure small {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 12px;
  color: var(--muted);
}

/* What an agreement its form offers would give the origin (calculations._offers). */
.compare-claim strong {
  color: var(--brand-2);
  font-weight: 600;
}

.compare-track {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
}

.compare-bar {
  flex: none;
  width: calc(var(--fill, 0) * (100% - 7.5rem));
  height: 18px;
  border-radius: 0 4px 4px 0;
  background: var(--bar-muted);
}

.compare-row.is-chosen .compare-bar {
  background: var(--brand);
}

.compare-value {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--ink);
  white-space: nowrap;
}

.compare-country {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}

.compare-country:hover {
  background: none;
  color: var(--brand);
}

.compare-remove,
.row-delete {
  padding: 6px;
  color: var(--muted);
}

.compare-remove:hover,
.row-delete:hover {
  color: var(--danger);
}

.compare-add {
  display: block;
  max-width: 320px;
  margin: 4px 0 12px 10px;
}

/* What a view of the calculator still needs before it calculates. */
.calc-empty-note {
  margin: 14px 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--brand-tint);
  color: var(--ink);
  font-size: 14px;
}

.history-table small {
  white-space: nowrap;
}

.history-chart {
  margin: 8px 0 18px;
}

.history-chart svg {
  width: 100%;
  height: auto;
}

.history-chart figcaption {
  font-size: 12.5px;
  color: var(--muted);
}

.result-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.figure {
  display: block;
  font-size: 30px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin-top: 4px;
}

.figure.unknown {
  color: var(--faint);
}

.l-base {
  --sw: var(--layer-base);
}

.l-301 {
  --sw: var(--layer-301);
}

.l-232 {
  --sw: var(--layer-232);
}

.l-201 {
  --sw: var(--layer-201);
}

.l-338 {
  --sw: var(--layer-338);
}

.l-other {
  --sw: var(--layer-other);
}

.l-fee {
  --sw: var(--layer-fee);
}

.needs {
  border: 1px solid var(--warning-line);
  background: var(--warning-tint);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 13.5px;
  color: #6b3d00;
}

.needs strong {
  display: block;
  margin-bottom: 6px;
}

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

.needs li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 14px;
  align-items: center;
  padding: 9px 0;
  border-top: 1px solid var(--warning-line);
}

.needs li:first-child {
  border-top: 0;
  padding-top: 2px;
}

.needs li small {
  color: #6f5317;
  margin-top: 2px;
}

.needs select,
.needs input {
  width: auto;
  min-width: 150px;
  min-height: 34px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 13px;
  background-color: #fff;
}

.needs input {
  width: 150px;
}

.needs p {
  margin: 8px 0 0;
  color: #6b3d00;
}

.declared {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--muted);
}

.declared > span:first-child {
  margin-right: 2px;
}

.needs code {
  background: rgb(255 255 255 / 60%);
  border-color: var(--warning-line);
}

.warnings {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  font-size: 13px;
  color: var(--muted);
}

.warnings li {
  position: relative;
  padding: 4px 0 4px 16px;
}

.warnings li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 12px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--faint);
}

.candidates {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  max-height: 320px;
  overflow: auto;
}

.candidates button {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  white-space: normal;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  font-weight: 400;
  font-size: 13px;
  min-height: 0;
  padding: 9px 12px;
}

.candidates li:last-child button {
  border-bottom: 0;
}

.candidates .hts-code {
  font-size: 12.5px;
}

/* Assistant */

.assistant-layout {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.assistant-layout > .card {
  margin: 0;
}

.chat-card {
  display: flex;
  flex-direction: column;
  min-height: min(680px, calc(100vh - 190px));
  padding: 0;
  overflow: hidden;
}

#chat-messages {
  flex: 1;
  max-height: calc(100vh - 330px);
  min-height: 300px;
  overflow: auto;
  padding: 22px 24px;
}

.chat-card form {
  border-top: 1px solid var(--line);
  padding: 14px 16px;
  background: #fafbfd;
}

.chat-card textarea {
  background: var(--surface);
}

.chat-card .actions {
  margin: 10px 0 0;
  justify-content: space-between;
}

.chat-message {
  max-width: 82%;
  padding: 12px 15px;
  border-radius: 14px;
  margin-bottom: 14px;
  font-size: 14.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.chat-message.user {
  margin-left: auto;
  background: var(--ink);
  color: #eef0f8;
  border-bottom-right-radius: 4px;
}

.chat-message.assistant {
  background: var(--sunken);
  color: var(--ink);
  border-bottom-left-radius: 4px;
}

#chat-messages details {
  max-width: 82%;
  margin: -6px 0 16px;
  border: 0;
  font-size: 13px;
}

#chat-messages details summary {
  padding: 6px 0;
  font-size: 12.5px;
  color: var(--brand);
  justify-content: flex-start;
}

#chat-messages pre {
  font-size: 11.5px;
  max-height: 300px;
}

.conversation-button {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 13px;
  font-weight: 450;
  padding: 9px 10px;
  margin: 4px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: none;
  --btn-line: transparent;
  --btn-bg: transparent;
}

.conversation-button:hover {
  --btn-bg: var(--sunken);
}

.conversation-button.active {
  --btn-bg: var(--brand-tint);
  color: var(--brand-2);
}

.feed .list-row a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
}

.feed .list-row a:hover {
  text-decoration: underline;
}

.feed .list-row small {
  font-family: var(--font-mono);
  margin: 0 0 3px;
}

.scroll-panel {
  max-height: 460px;
  overflow: auto;
}

/* Portfolios */

.portfolio-card h2 {
  font-size: 17px;
  margin: 0 0 4px;
}

.portfolio-card .figure {
  font-size: 24px;
  margin-top: 14px;
}

.portfolio-card .meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--muted);
}

.list-pager {
  margin-top: 16px;
}

/* A product opened to be edited comes into view below the sticky top bar. */
#add-product {
  scroll-margin-top: 88px;
}

.products-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 16px;
}

.products-declare {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.products-declare small {
  max-width: 56ch;
}

th.select,
td.select {
  width: 1%;
}

td .row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
}

.import-preview {
  margin-top: 20px;
}

/* Keys */

.scope-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.scope-grid .checkbox {
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.scope-grid .checkbox:has(input:checked) {
  border-color: var(--brand-soft);
  background: var(--brand-tint);
}

/* Content pages */

/* Trade updates (web/news.html): the page's head with the digest's form, one toolbar (what is
   listed, the search, the sources), then one feed by day and, beside it, what comes into effect. */
.nw-head {
  align-items: flex-start;
}

.nw-subscribe {
  flex: 0 1 380px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.nw-subscribe label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.nw-subscribe-row {
  display: flex;
  gap: 8px;
}

.nw-subscribe-row input {
  flex: 1;
  min-width: 0;
}

.nw-subscribe small {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}

/* The same form under a public estimate and on a notice's page, with a line on what it sends. */
.nl-notice,
.nl-result {
  max-width: 560px;
}

.nl-notice {
  margin-bottom: 16px;
}

.nl-notice p,
.nl-result p {
  margin: 0 0 10px;
  font-size: 13.5px;
  color: var(--muted);
}

.waitlist-links {
  margin-top: 16px;
}

/* What follows a subscription to the trade updates, in place of its form, and what to correct in
   it (web/_newsletter.html). */
.nl-sent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--brand-soft);
  border-radius: var(--radius);
  background: var(--brand-tint);
  color: var(--ink);
}

.nl-sent .icon {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--brand);
}

.nl-sent strong {
  display: block;
  font-size: 14.5px;
}

.nl-sent p {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}

.nw-head .nl-sent {
  flex: 0 1 380px;
}

.nl-error {
  flex-basis: 100%;
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--danger);
}

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

.nw-views {
  display: inline-flex;
  padding: 4px;
  border-radius: 10px;
  background: var(--sunken);
}

.nw-views a {
  padding: 7px 14px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 550;
  color: var(--muted);
  text-decoration: none;
}

.nw-views a[aria-current] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.nw-search {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex: 0 1 320px;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--surface);
  color: var(--muted);
}

.nw-search:focus-within {
  border-color: var(--brand);
  box-shadow: var(--focus);
}

.nw-search input,
.nw-search input:focus {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding: 8px 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.nw-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 24px;
}

.nw-sources a {
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink-2);
  text-decoration: none;
  background: var(--surface);
}

.nw-sources a[aria-current] {
  border-color: var(--brand-soft);
  background: var(--brand-tint);
  color: var(--brand-2);
  font-weight: 600;
}

.nw-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 28px;
  align-items: start;
}

.nw-day {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.nw-list {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.nw-row {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 4px 16px;
  padding: 14px 18px;
}

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

.nw-meta {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12.5px;
  color: var(--muted);
}

.nw-meta b {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.nw-meta span {
  color: var(--ink);
  font-weight: 550;
}

/* Who issued an action published by another source: under the source, lighter than a country. */
.nw-meta .nw-authority {
  color: var(--muted);
  font-weight: 400;
}

.nw-title {
  font-size: 15px;
  font-weight: 550;
  line-height: 1.4;
  color: var(--ink);
  text-decoration: none;
}

.nw-title:hover {
  color: var(--brand-2);
  text-decoration: underline;
}

.nw-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  font-size: 12.5px;
  color: var(--muted);
}

.nw-facts:empty {
  display: none;
}

.nw-side .card {
  margin-bottom: 16px;
}

.nw-side h2 {
  margin-bottom: 2px;
  font-size: 15px;
}

.nw-calendar,
.nw-links {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.nw-calendar li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  padding: 8px 0;
  font-size: 13px;
  line-height: 1.4;
}

.nw-calendar li + li,
.nw-links li + li {
  border-top: 1px solid var(--line);
}

.nw-calendar-more {
  margin-top: 4px;
  padding-bottom: 0;
}

.nw-calendar-more > summary {
  justify-content: flex-start;
  padding: 10px 0 8px;
  font-size: 13px;
  color: var(--brand-2);
}

.nw-calendar-more .nw-calendar {
  margin: 0;
}

.nw-calendar time {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}

.nw-calendar a {
  color: var(--ink);
}

.nw-links li {
  padding: 8px 0;
}

.nw-links a {
  font-weight: 600;
}

.nw-links small {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
}

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

  .nw-subscribe,
  .nw-head .nl-sent {
    flex: none;
  }

  .nw-layout {
    grid-template-columns: 1fr;
  }

  .nw-search {
    flex: 1 1 100%;
  }
}

@media (max-width: 560px) {
  .nw-row {
    grid-template-columns: 1fr;
  }

  .nw-meta {
    grid-row: auto;
    flex-direction: row;
    gap: 8px;
  }
}

.prose {
  max-width: 760px;
}

/* The HTS explorer (web/hts/): the tariff as a tree. A row names its code and its words; a row
   that holds more opens in place (a details element, its content asked once) and its words lead to
   its page. */
.tree-search {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-bottom: 22px;
}

.tree-search .hts-combo {
  flex: 1;
}

.tree-search .button,
.tree-search button {
  flex: none;
}

.tree {
  display: grid;
  gap: 8px;
}

.tree-section {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.tree-section[open] {
  box-shadow: 0 8px 24px -18px rgb(14 20 38 / 30%);
}

.tree summary {
  display: grid;
  grid-template-columns: 14px auto minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: 4px 12px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
  border-radius: 12px;
}

.tree summary::-webkit-details-marker {
  display: none;
}

/* Not the disclosures of the other pages: no rule above, no chevron on the right. */
.tree details {
  border-top: 0;
}

.tree details[open] {
  padding-bottom: 0;
}

.tree summary::after {
  content: none;
}

.tree summary {
  justify-content: initial;
  font-size: 14px;
  font-weight: 400;
}

/* The chevron: right when closed, down when open. */
.tree summary::before {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 1.6px solid var(--faint);
  border-bottom: 1.6px solid var(--faint);
  transform: translateY(-2px) rotate(-45deg);
  transition: transform 0.15s ease;
}

.tree details[open] > summary::before {
  transform: translateY(-4px) rotate(45deg);
}

.tree summary:hover {
  background: var(--paper);
}

.tree-roman {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.04em;
  color: var(--brand);
  min-width: 34px;
}

.tree-section > summary .tree-text {
  font-weight: 600;
  color: var(--ink);
}

.tree-meta {
  font-size: 12.5px;
  color: var(--faint);
  white-space: nowrap;
}

/* The row opens in place; its page opens from here. */
.tree-open {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--brand-2);
  text-decoration: none;
  opacity: 0.75;
}

.tree summary:hover .tree-open,
.tree-open:focus-visible {
  opacity: 1;
}

.tree-open:hover {
  background: var(--brand-tint);
}

.tree-list {
  list-style: none;
  margin: 0;
  padding: 0 8px 8px 30px;
}

.tree-list .tree-list {
  padding-left: 22px;
  border-left: 1px solid var(--line);
  margin-left: 22px;
}

.tree-node > summary {
  padding: 8px 10px;
}

.tree-code {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}

a.tree-code,
a.tree-text {
  color: var(--ink);
  text-decoration: none;
}

a.tree-code {
  color: var(--brand-2);
}

a.tree-text:hover,
a.tree-code:hover {
  color: var(--brand);
  text-decoration: underline;
}

.tree-leaf {
  display: grid;
  grid-template-columns: 14px auto minmax(0, 1fr);
  gap: 12px;
  padding: 8px 10px;
}

.tree-leaf.is-empty {
  color: var(--faint);
}

.tree-leaf.is-empty .tree-code {
  grid-column: 2;
  color: var(--faint);
}

.tree-kids {
  padding: 0 0 6px;
}

.tree-kids > .tree-rows {
  margin-left: 22px;
  border-left: 1px solid var(--line);
}

.tree-wait {
  display: block;
  padding: 6px 0 6px 48px;
  font-size: 13px;
  color: var(--muted);
}

.htmx-request .tree-wait,
.tree-node.htmx-request .tree-wait {
  opacity: 0.6;
}

/* The lines of a heading as the official schedule shows them: codes in one column, the words
   indented by their depth, rates on the right. */
.tree-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tree-row {
  --depth: 0;
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) minmax(64px, auto);
  gap: 4px 16px;
  align-items: baseline;
  padding: 7px 12px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.45;
}

.tree-rows > .tree-row:first-child {
  border-top: 0;
}

.tree-row .tree-text {
  padding-left: calc(var(--depth) * 20px);
}

.tree-row.is-label {
  color: var(--muted);
  font-style: italic;
}

.tree-row.is-label .tree-text {
  grid-column: 2;
}

.tree-row.is-current {
  background: var(--brand-tint);
  border-radius: 8px;
  box-shadow: inset 3px 0 0 var(--brand);
}

.tree-row.is-current .tree-code {
  font-weight: 650;
  color: var(--brand-2);
}

.tree-row .tree-rate {
  font-size: 12.5px;
  color: var(--ink-2);
  text-align: right;
}

.tree-row.d1 { --depth: 1; }
.tree-row.d2 { --depth: 2; }
.tree-row.d3 { --depth: 3; }
.tree-row.d4 { --depth: 4; }
.tree-row.d5 { --depth: 5; }
.tree-row.d6 { --depth: 6; }
.tree-row.d7 { --depth: 7; }
.tree-row.d8 { --depth: 8; }
.tree-row.d9 { --depth: 9; }

.tree-card {
  padding: 18px 8px 8px;
}

.tree-card h2 {
  font-size: 16px;
  margin: 0 12px 10px;
}

.tree-card > .tree > .tree-list {
  padding: 0;
}

.tree-head .tree-facts {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  color: var(--faint);
}

/* The three rate columns of a line, side by side. */
.tree-rates {
  margin-bottom: 18px;
}

.tree-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 0 0 12px;
}

.tree-columns > div {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--paper);
}

.tree-columns dt {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}

.tree-columns dd {
  margin: 0;
  font-size: 15px;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.tree-columns dd.mono {
  font-size: 14px;
}

.tree-columns .tree-from {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

.tree-columns .tree-meaning {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
  overflow-wrap: normal;
}

/* Under the rates of a product's line: they are not what the goods pay. */
.tree-base-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin: 0 0 12px;
  padding: 14px 16px;
  border: 1px solid var(--brand-soft);
  border-radius: 12px;
  background: var(--brand-tint);
}

.tree-base-note p {
  flex: 1 1 320px;
  margin: 0;
  font-size: 14px;
  color: var(--ink-2);
}

/* What a code page shows of Chapter 99: official text only (web/chapter99.py). */
.ch99 h2 {
  font-size: 16px;
}

.ch99-table td {
  font-size: 13.5px;
  vertical-align: top;
}

.ch99-table td:first-child {
  white-space: nowrap;
}

/* The console's official notices (review/notices.html): each notice, what it is, and its decisions. */
.notice-meta {
  display: block;
  margin-top: 2px;
}

.notice-decide + .notice-decide {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.notice-decisions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.notices-table form {
  margin-top: 6px;
}

/* The post a share would make (review/_share_preview.html), as TariffTrust's LinkedIn page will
   show it: the page, the text Zapier posts, the card of the notice's page. */
.share-dialog {
  width: min(600px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
}

.li-post {
  margin: 14px 0 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.li-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 0;
}

.li-head img {
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  object-fit: contain;
}

.li-head small {
  display: block;
}

.li-text {
  margin: 0;
  padding: 10px 14px 12px;
  font-size: 14px;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* LinkedIn shows the image of a link posted through its API small, beside the title. */
.li-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 14px 14px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  text-decoration: none;
}

.li-card img {
  flex: none;
  width: 128px;
  height: auto;
  border-radius: 6px;
}

.li-card span {
  display: block;
  min-width: 0;
}

.li-card small {
  display: block;
}

.li-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* A code page's duties from the main countries of origin (web/origins.py): each country, its total
   rate, and the duties that make it up, marked with the colors of the calculator's breakdown. */
.origins-table td {
  font-size: 13.5px;
  vertical-align: top;
}

.origins-table td:first-child {
  white-space: nowrap;
  font-weight: 600;
}

.origins-rate {
  white-space: nowrap;
  font-weight: 600;
}

.origins-measures {
  list-style: none;
  margin: 0;
  padding: 0;
}

.origins-measures li {
  display: flex;
  gap: 8px;
}

.origins-measures li + li {
  margin-top: 4px;
}

.origins-measures .rs-mark {
  margin-top: 5px;
}

/* On a phone, each country on one line with its rate, its duties under it across the width. */
@media (max-width: 600px) {
  .origins-table thead {
    display: none;
  }

  .origins-table tr {
    display: grid;
    grid-template-columns: 1fr auto;
  }

  .origins-table td:nth-child(3) {
    grid-column: 1 / -1;
    padding-top: 0;
    border-top: 0;
  }
}

.ch99-note {
  margin-top: 16px;
}

.ch99-note h3 {
  font-size: 14px;
  margin: 0 0 6px;
}

.ch99-note p {
  margin: 0 0 6px;
  font-size: 13.5px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.ch99-note .ch99-d1 { padding-left: 18px; }
.ch99-note .ch99-d2 { padding-left: 36px; }
.ch99-note .ch99-d3 { padding-left: 54px; }
.ch99-note .ch99-d4 { padding-left: 72px; }

.ch99-changes {
  margin: 0;
  padding-left: 18px;
  font-size: 13.5px;
}

.ch99-changes li + li {
  margin-top: 6px;
}

/* Results of a search: the code, its words and its place, its general rate. */
.tree-found-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--muted);
  margin: 0 0 10px;
}

.tree-found-head p {
  margin: 0;
}

.tree-found {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.tree-found li {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) auto;
  gap: 4px 16px;
  align-items: baseline;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}

.tree-found li:first-child {
  border-top: 0;
}

.tree-found strong {
  display: block;
  font-weight: 550;
}

.tree-found small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12.5px;
}

.tree-found .tree-none {
  display: block;
  color: var(--muted);
}

.tree-pager {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

/* The neighbouring chapters or headings, at the foot of a page. */
.tree-siblings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 22px;
}

.tree-siblings a {
  display: grid;
  gap: 2px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
}

.tree-siblings a:hover {
  border-color: var(--brand-soft);
}

.tree-siblings small {
  color: var(--muted);
  font-size: 12px;
}

.tree-next {
  grid-column: 2;
  text-align: right;
}

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

  /* One block per row of the Chapter 99 tables, its cells one under the other. */
  .ch99-table thead {
    display: none;
  }

  .ch99-table tr,
  .ch99-table td {
    display: block;
  }

  .ch99-table td {
    border: 0;
    padding: 2px 14px;
  }

  .ch99-table td:first-child {
    padding-top: 12px;
    font-weight: 600;
  }

  /* Without its header, a cell says what it is. */
  .ch99-table td[data-label]::before {
    content: attr(data-label) ": ";
    color: var(--muted);
  }

  .ch99-table td:last-child {
    padding-bottom: 12px;
  }

  .ch99-table tr + tr {
    border-top: 1px solid var(--line);
  }

  .ch99-note .ch99-d1 { padding-left: 10px; }
  .ch99-note .ch99-d2 { padding-left: 20px; }
  .ch99-note .ch99-d3 { padding-left: 30px; }
  .ch99-note .ch99-d4 { padding-left: 40px; }

  .tree summary .tree-meta {
    grid-column: 3;
    grid-row: 2;
  }

  .tree summary .tree-open {
    grid-column: 4;
    grid-row: 1;
  }

  .tree-list {
    padding-left: 12px;
  }

  .tree-list .tree-list,
  .tree-kids > .tree-rows {
    margin-left: 8px;
    padding-left: 8px;
  }

  .tree-row,
  .tree-found li {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-left: calc(10px + var(--depth, 0) * 12px);
  }

  .tree-row .tree-text,
  .tree-found .tree-text {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-left: 0;
  }

  .tree-row.is-label .tree-text {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .tree-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: dense;
  }

  .tree-columns > div:nth-child(2) {
    grid-column: 1 / -1;
  }

  .tree-siblings {
    grid-template-columns: 1fr;
  }

  .tree-next {
    grid-column: 1;
  }
}

/* The history chart of a product (calculations/_history.html). */
.chart-axis,
.chart-grid {
  fill: none;
  stroke: var(--line-2);
}

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

.chart-label {
  fill: var(--muted);
  font-size: 11px;
}

/* The chart shrinks with a phone's screen: its labels grow to stay legible. */
@media (max-width: 520px) {
  .chart-label {
    font-size: 15px;
  }
}

/* A value holds until the next change: the line steps from one date to the next. */
.chart-line {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2.5;
  stroke-linejoin: round;
}

.chart-dot {
  fill: var(--brand);
  stroke: var(--surface);
  stroke-width: 2;
}

.rate {
  font-family: var(--font-mono);
  font-size: 12.5px;
}

.timeline {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 28px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--line-2);
}

.timeline > li {
  position: relative;
  margin-bottom: 16px;
}

.timeline > li::before {
  content: '';
  position: absolute;
  left: -26px;
  top: 26px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--brand);
}

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

.timeline .card {
  margin: 0;
}

/* Developer guides (web/guides.html): a table of contents beside one readable column of short
   sections; on narrow screens the contents come first, as a row of links. */
.docs {
  /* What the site's header, which stays on top, leaves free. */
  --docs-top: 88px;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.docs-toc {
  position: sticky;
  top: var(--docs-top);
  font-size: 13.5px;
}

.docs-toc p {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--faint);
}

.docs-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--line);
}

.docs-toc a {
  display: block;
  padding: 5px 0 5px 14px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--muted);
  text-decoration: none;
}

.docs-toc a:hover {
  color: var(--ink);
  border-left-color: var(--line-2);
}

.docs-toc a[aria-current] {
  color: var(--ink);
  font-weight: 600;
  border-left-color: var(--brand-2);
}

.docs-body {
  max-width: 800px;
}

.docs-section {
  scroll-margin-top: var(--docs-top);
  padding: 0 0 36px;
  margin: 0 0 36px;
  border-bottom: 1px solid var(--line);
}

.docs-section:last-child {
  border-bottom: 0;
}

.docs-section h2 {
  font-size: 22px;
  margin: 0 0 14px;
}

.docs-section > p,
.docs-list,
.docs-steps p {
  line-height: 1.65;
  color: var(--ink-2);
}

.docs-list {
  padding-left: 20px;
  margin: 0 0 16px;
}

.docs-list li + li {
  margin-top: 6px;
}

/* Numbered steps, each with its title. */
.docs-steps {
  list-style: none;
  counter-reset: step;
  margin: 0 0 16px;
  padding: 0;
}

.docs-steps > li {
  counter-increment: step;
  position: relative;
  padding: 0 0 8px 44px;
}

.docs-steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-2);
  background: var(--brand-tint);
}

.docs-steps h3 {
  font-size: 16px;
  margin: 0 0 6px;
}

/* The fields of an answer: each name, then what it says. */
.docs-fields {
  margin: 0 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.docs-fields > div {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 16px;
  padding: 12px 16px;
}

.docs-fields > div + div {
  border-top: 1px solid var(--line);
}

.docs-fields dt {
  font-weight: 600;
}

.docs-fields dd {
  margin: 0;
  line-height: 1.6;
  color: var(--ink-2);
}

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

.docs-tools span {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.docs-examples {
  display: grid;
  gap: 14px;
}

.docs-example {
  margin: 0;
}

.docs-example-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.docs-example-head h3 {
  margin: 0 0 4px;
  font-size: 15px;
}

.docs-example-head p {
  margin: 0;
  color: var(--muted);
}

.docs-section details {
  margin-top: 12px;
}

.docs-section summary {
  justify-content: flex-start;
  gap: 8px;
  padding: 6px 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--brand-2);
}

.docs-section details pre {
  margin-top: 10px;
  max-height: 520px;
}

/* The API reference (web/api/reference.html): one page, wider than the others, its menu folded by
   section. Its column says where the samples go, whatever takes the width beside it: the site's
   margins or the workspace's menu. */
.container:has(> .docs-reference),
.app-main:has(.docs-reference) {
  max-width: 1480px;
}

.docs-reference {
  /* The share of the text in the two columns of an operation. */
  --ref-text: 54%;
  grid-template-columns: 210px minmax(0, 1fr);
}

/* The samples would show through a translucent header. */
body:has(.docs-reference) :is(.sh, .app-topbar) {
  background: var(--paper);
  backdrop-filter: none;
}

.docs-reference .docs-body {
  max-width: none;
  container-type: inline-size;
}

.docs-reference .docs-toc {
  max-height: calc(100vh - var(--docs-top) - 20px);
  overflow-y: auto;
  font-size: 13.5px;
}

.docs-reference .docs-toc ol {
  display: block;
  border: 0;
}

.docs-reference .docs-toc a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  padding: 6px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
}

.docs-reference .docs-toc a:hover {
  background: var(--sunken);
}

.docs-reference .docs-toc a[aria-current] {
  background: var(--brand-tint);
  color: var(--brand-2);
}

.docs-reference .docs-toc details {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.docs-reference .docs-toc summary {
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13.5px;
  color: var(--muted);
}

.docs-reference .docs-toc summary:hover {
  background: var(--sunken);
  color: var(--ink);
}

.docs-reference .docs-toc details[open] > summary {
  color: var(--ink);
  font-weight: 600;
}

.docs-reference .docs-toc ol ol a {
  font-size: 13px;
}

.ref-method {
  flex: none;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
}

.ref-method[data-method='GET'] {
  background: var(--verified);
}

.ref-prose {
  max-width: 800px;
}

.ref-prose .table-wrap {
  margin-bottom: 16px;
}

.ref-op {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
  gap: 0 32px;
  scroll-margin-top: var(--docs-top);
  padding-top: 28px;
  margin-top: 28px;
  border-top: 1px solid var(--line);
}

.docs-section h2 + .ref-op {
  padding-top: 8px;
  margin-top: 0;
  border-top: 0;
}

.ref-op-head,
.ref-op-details {
  grid-column: 1;
}

.ref-op-head p,
.ref-op-details > p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
}

.ref-op h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.ref-op h4 {
  margin: 22px 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.ref-op-route {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.ref-op-route a {
  margin-left: 4px;
  font-size: 13px;
}

.ref-op-sample {
  grid-column: 2;
  grid-row: 1 / span 2;
  position: sticky;
  top: var(--docs-top);
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: calc(100vh - var(--docs-top) - 16px);
}

/* Both cards in sight: the samples at most half the height, the answer in what is left. */
.ref-op-sample .code-tabs {
  display: flex;
  flex: none;
  flex-direction: column;
  margin: 0;
}

.ref-op-sample .ref-op-example {
  flex: 0 1 auto;
  min-height: 0;
}

.ref-op-sample pre {
  max-height: 45vh;
  overflow: auto;
  overflow-wrap: normal;
  white-space: pre;
}

.ref-op-sample .ref-op-example pre {
  max-height: none;
  min-height: 0;
}

/* Three columns as soon as they fit, as in Redoc: the menu, the text, and the cards of an operation's
   samples, which follow the page. */
@container (min-width: 761px) {
  .docs-section:not(.ref-prose) {
    margin: 0;
    padding: 0 0 24px;
    border-bottom: 0;
  }

  .docs-section:not(.ref-prose) > h2 {
    margin: 0;
    padding: 28px 32px 0 0;
    max-width: var(--ref-text);
  }

  .ref-op,
  .docs-section h2 + .ref-op {
    grid-template-columns: minmax(0, var(--ref-text)) minmax(0, 1fr);
    /* A panel taller than the text leaves its room under the text, not within it. */
    grid-template-rows: auto 1fr;
    gap: 0;
    padding: 0;
    margin: 0;
    border-top: 0;
  }

  .ref-op-head {
    padding: 24px 32px 0 0;
  }

  .ref-op + .ref-op {
    margin-top: 12px;
    border-top: 1px solid var(--line);
  }

  .ref-op-details {
    padding: 0 32px 20px 0;
  }

  .ref-op-sample {
    top: calc(var(--docs-top) - 16px);
    padding: 16px 0;
    max-height: calc(100vh - var(--docs-top) + 16px);
  }
}

@container (max-width: 760px) {
  /* One column: the samples under the text, the fields, and the answer they describe last. */
  .ref-op {
    display: flex;
    flex-direction: column;
  }

  .ref-op-sample {
    display: contents;
  }

  .ref-op-sample .code-tabs {
    margin: 16px 0 0;
  }

  .ref-op-sample .ref-op-example {
    order: 1;
  }

  .ref-op-sample pre {
    max-height: none;
  }

  .ref-op-sample .ref-op-example pre {
    max-height: 420px;
  }
}

/* A field on one line of two columns, as lists of parameters read; what it holds opens under it. */
.ref-fields {
  margin: 0 0 12px;
  border: 0;
  border-radius: 0;
  background: none;
}

.ref-fields > div {
  grid-template-columns: minmax(132px, 28%) minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.ref-fields > div + div {
  border-top: 1px solid var(--line);
}

.ref-fields dt {
  overflow-wrap: anywhere;
}

.ref-fields dt code {
  padding: 0;
  border: 0;
  background: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.ref-required {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 500;
  color: var(--signal);
}

.ref-fields dd {
  font-size: 14px;
  line-height: 1.55;
}

.ref-type {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}

.docs-reference .ref-nested,
.docs-reference .ref-answer {
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
}

.docs-reference .ref-nested > summary {
  padding: 2px 0;
  font-size: 13px;
}

.ref-nested > .ref-fields {
  margin: 6px 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--line);
}

.docs-reference .ref-answer > summary {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  font-size: 13.5px;
  color: var(--ink);
}

.ref-answer > .ref-fields {
  margin-top: 4px;
}

.ref-op-errors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 16px 0 0;
  font-size: 13.5px;
}

.ref-op-errors span {
  margin-right: 4px;
  font-weight: 600;
}

.ref-object {
  scroll-margin-top: var(--docs-top);
  margin-top: 28px;
}

.ref-object h3 {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
}

.ref-object > p {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--ink-2);
}

@media (max-width: 640px) {
  .ref-fields > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}

.docs-platforms td {
  vertical-align: top;
  font-size: 13.5px;
}

.docs-platforms td:first-child {
  font-weight: 600;
  white-space: nowrap;
}

/* On a phone, one block per platform, its fields then where to find them: three columns of code
   and sentences do not fit. */
@media (max-width: 640px) {
  .docs-platforms thead {
    display: none;
  }

  .docs-platforms tr,
  .docs-platforms td {
    display: block;
  }

  .docs-platforms td {
    border: 0;
    padding: 2px 14px;
  }

  .docs-platforms td:first-child {
    padding-top: 12px;
  }

  .docs-platforms td:last-child {
    padding-bottom: 12px;
  }

  .docs-platforms tr + tr {
    border-top: 1px solid var(--line);
  }

  .docs-platforms td[data-label]::before {
    content: attr(data-label) ": ";
    color: var(--muted);
  }

  .docs-platforms code {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 1024px) {
  .docs {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .docs-toc {
    position: static;
  }

  .docs-toc ol {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border: 0;
  }

  .docs-toc a {
    padding: 5px 12px;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 99px;
    background: var(--surface);
  }

  .docs-toc a[aria-current] {
    border-color: var(--brand-2);
  }
}

@media (max-width: 640px) {
  .docs-fields > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .docs-example-head {
    flex-direction: column;
  }
}

.error-page {
  text-align: center;
  padding: 90px 0;
}

.error-page .code-big {
  font-family: var(--font-mono);
  font-size: 88px;
  line-height: 1;
  color: var(--line-2);
  margin-bottom: 18px;
}

/* ---------- Page details ---------- */

#terminal-news {
  margin-top: 12px;
}

label.is-required select,
label.is-required input {
  border-color: #f5b83d;
  background-color: #fffaf0;
}

label.is-required::after {
  content: 'Required by the published rules for this product';
  font-size: 11.5px;
  font-weight: 500;
  color: var(--warning);
}

.display {
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.04em;
  margin-bottom: 16px;
}

.section-title.compact {
  margin: 36px 0 16px;
}

.section-title.compact h2 {
  font-size: 22px;
}

.metric .metric-word {
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin-top: 10px;
}

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

.user-line {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.user-line strong {
  overflow-wrap: anywhere;
}

.danger-zone {
  border-color: var(--danger-line);
}

.danger-zone h2 {
  color: var(--danger);
}

.hero-cta.centered {
  justify-content: center;
}

.subscription-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: var(--ink);
}

/* An archived edition on the console's Publications page: folded, its line says where it stands. */
.pub-archive > summary {
  cursor: pointer;
  font-size: 14.5px;
}

.pub-archive[open] > summary {
  margin-bottom: 12px;
}

/* The inputs of a reported estimate (console, error reports): one field a line. */
.report-inputs {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
}

.report-inputs .mono {
  margin-right: 6px;
  color: var(--muted);
}

/* A CSV to import (declarations, a catalog): the browser's file button drawn as the others. */
.file-field input[type='file'] {
  width: 100%;
  padding: 10px;
  border: 1px dashed var(--line-2);
  border-radius: 12px;
  background: var(--paper);
  font: inherit;
  font-size: 14px;
  color: var(--ink-2);
  cursor: pointer;
}

.file-field input[type='file']::file-selector-button {
  margin-right: 12px;
  padding: 7px 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.file-field input[type='file']:hover::file-selector-button {
  border-color: var(--brand-soft);
  background: var(--brand-tint);
}

/* What a workspace without a subscription keeps, for its owner to download (Billing). */
.kept-downloads {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding-left: 18px;
}

.kept-downloads .muted {
  font-size: 13px;
}

.usage-row {
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--line);
}

.usage-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
}

.usage-line strong {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
}

#usage > .muted {
  margin: 12px 0 8px;
}

.job {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.job h3 {
  text-transform: capitalize;
}

.notes {
  border: 0;
  margin: -6px 0 10px;
}

.notes summary {
  padding: 4px 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--brand);
  justify-content: flex-start;
}

.shared-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  align-items: start;
}

.shared-layout > .card {
  margin: 0;
}

.shared-layout > .card:only-child {
  grid-column: 1 / -1;
  max-width: 760px;
}

.shared-cta {
  position: sticky;
  top: 90px;
  display: grid;
  gap: 10px;
}

.shared-cta h2 {
  font-size: 18px;
}

.pricing-page {
  padding-top: 64px;
}

.pricing-notes {
  margin-top: 28px;
}

.result-panel > .empty {
  padding-top: 70px;
}

/* The default answers, a section of the workspace settings. */
.settings-section {
  margin: 28px 0;
}

.settings-section > h2 {
  margin: 0 0 6px;
}

.settings-section > p {
  max-width: 72ch;
  margin: 0 0 14px;
}

/* Default answers: the company's policies first, then the questions by group. */
.answers-policies {
  margin: 0;
  padding: 0;
  border: 0;
}

.answers-policies legend {
  margin-bottom: 4px;
  padding: 0;
  font-size: 15px;
  font-weight: 650;
}

/* The questions of a result, under the measure each one decides (result/_groups.html). */
.q-group + .q-group {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

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

/* A group names its measure quietly: the question beneath is what the reader answers. */
.q-group h4 {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}

.fact-field .field-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

.fact-field .alternatives {
  color: var(--muted);
  font-size: 12.5px;
}

.fact-field .alternatives strong {
  color: var(--ink-2);
  font-weight: 600;
}

.calc-questions-intro {
  margin: 0 0 12px;
}

/* Parts of the page drawn again by the server: the browser does not anchor its scrolling inside
   them. htmx inserts the new content before it removes the old one, and an anchor kept in the old
   content would carry the page down by the height of the new, then vanish with it. */
#calc-questions-slot,
#quantity-slot,
#calculation-result {
  overflow-anchor: none;
}

/* The questions box of the calculator's form, beside "More options". */
.calc-questions-body {
  padding-bottom: 14px;
}

.calc-questions .form-grid {
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: 8px;
}

/* The share link of a saved calculation (calculations/_saved.html): who can see it, until when,
   the link to copy, and how to stop. */
.share-panel {
  display: grid;
  gap: 12px;
  margin: 14px 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
}

.share-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.share-head small {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--muted);
}

.share-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--brand-tint);
  color: var(--brand);
}

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

.share-url {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--surface);
}

.share-row .primary {
  flex: none;
}

.share-stop {
  justify-self: start;
  color: var(--muted);
}