/* Jsonpage design system, phase 1: tokens and shared components.
   One file for the public site and the dashboard. Every name starts with jp- so that it can sit
   next to the existing styles until the pages are moved over, page by page.
   Light is the default; dark follows html[data-theme='dark'], like the rest of the site.
   Weights: 400, 500, 600 only. Radii: four values only. Colors: the variables below only. */

@font-face { font-family: Inter; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/assets/inter-latin-variable.woff2') format('woff2'); }

:root {
  /* Colors */
  --jp-purple: #5a43f5;
  --jp-purple-hover: #4631d6;
  --jp-purple-soft: #efecff;
  --jp-purple-ink: #4631d6;
  --jp-ink: #171a46;
  --jp-ink-2: #565b80;
  --jp-line: #d5d8ec;
  --jp-bg: #ffffff;
  --jp-surface: #f6f6fc;
  --jp-success: #14744f;
  --jp-success-soft: #ddf5ea;
  --jp-warning: #9a5b00;
  --jp-warning-soft: #fef3e0;
  --jp-error: #b42318;
  --jp-error-soft: #fdecea;
  --jp-on-purple: #ffffff;
  /* Data colours: charts, JSON samples and code blocks */
  --jp-code: #171a46;
  --jp-code-ink: #e8eaff;
  /* Always-dark boxes (the Developers box): accent 6.9:1 on --jp-code, code text 15:1 on --jp-night-raised */
  --jp-on-night-accent: #a99aff;
  --jp-night-raised: #0d0f2e;
  --jp-chart-bar: #5a43f5;
  --jp-chart-bar-hover: #3d28c9;
  --jp-chart-grid: #e9eaf2;
  --jp-json-key: #b9adff;
  --jp-json-string: #8fe0bd;
  --jp-json-number: #f7c877;
  --jp-json-literal: #ffaaa3;
  --jp-focus: #5a43f5;
  /* Usage bar: light violet track, used part green below 70 %, orange from 70 to 90 %, red above */
  --jp-usage-track: #e6e1ff;
  --jp-usage-ok: #1f9d6b;
  --jp-usage-warn: #e8820c;
  --jp-usage-high: #d92d20;
  --jp-shadow: 0 8px 24px -8px rgb(23 26 70 / .22);
  --jp-shadow-violet: 0 24px 60px -18px rgb(124 58 237 / .38), 0 4px 16px -6px rgb(124 58 237 / .2);

  /* Radii: small, field and button, card, pill */
  --jp-r-sm: 6px;
  --jp-r-ctl: 10px;
  --jp-r-card: 16px;
  --jp-r-frame: 28px;
  --jp-r-pill: 999px;

  /* Weights */
  --jp-w-regular: 400;
  --jp-w-medium: 500;
  --jp-w-semibold: 600;

  /* Sizes of controls */
  --jp-h-sm: 32px;
  --jp-h-md: 40px;
  --jp-h-lg: 48px;
  --jp-h-field: 44px;
  --jp-h-field-lg: 56px;
  --jp-touch: 44px;

  /* Headings: scale "home" for the home and offer pages (large h1), scale "content" for content and utility pages (medium h1).
     The h2 is always well below the h1. */
  --jp-h1-home: clamp(2.25rem, 1.4rem + 3.4vw, 3.5rem);
  --jp-h2-home: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem);
  --jp-h3-home: 1.375rem;
  --jp-h1-content: clamp(1.875rem, 1.4rem + 1.8vw, 2.5rem);
  --jp-h2-content: clamp(1.375rem, 1.15rem + .9vw, 1.75rem);
  --jp-h3-content: 1.125rem;
  --jp-text: 1rem;
  --jp-text-sm: .875rem;

  --jp-font: Inter, Arial, sans-serif;
}

:root[data-theme='dark'] {
  --jp-purple-soft: #2a2556;
  --jp-purple-ink: #b9adff;
  --jp-ink: #f0effa;
  --jp-ink-2: #b4b8da;
  --jp-line: #3a3d6b;
  --jp-bg: #15172d;
  --jp-surface: #1d1f39;
  --jp-success: #8fe0bd;
  --jp-success-soft: #1f3a33;
  --jp-warning: #f7c877;
  --jp-warning-soft: #3b3022;
  --jp-error: #ffaaa3;
  --jp-error-soft: #3d2326;
  --jp-focus: #b9adff;
  --jp-usage-track: #2f2a63;
  --jp-usage-ok: #3fc593;
  --jp-usage-warn: #f2a03f;
  --jp-usage-high: #ff7a6e;
  --jp-shadow: 0 8px 24px -8px rgb(0 0 0 / .6);
  --jp-shadow-violet: 0 24px 60px -18px rgb(0 0 0 / .7), 0 0 0 1px rgb(167 139 250 / .12);
  --jp-code: #101229;
  --jp-code-ink: #e3e4fb;
  --jp-chart-bar: #8f7dff;
  --jp-chart-bar-hover: #c2b8ff;
  --jp-chart-grid: #2c2e4b;
  --jp-json-key: #c2b8ff;
  --jp-json-string: #9de6c6;
  --jp-json-number: #f9d28e;
  --jp-json-literal: #ffb7b0;
  color-scheme: dark;
}

/* Heading scales */
.jp-scale-home, :root { --jp-h1: var(--jp-h1-content); --jp-h2: var(--jp-h2-content); --jp-h3: var(--jp-h3-content); }
.jp-scale-home { --jp-h1: var(--jp-h1-home); --jp-h2: var(--jp-h2-home); --jp-h3: var(--jp-h3-home); }
.jp-h1 { margin: 0 0 .5em; font-size: var(--jp-h1); line-height: 1.12; font-weight: var(--jp-w-semibold); letter-spacing: -.03em; color: var(--jp-ink); }
.jp-h2 { margin: 0 0 .5em; font-size: var(--jp-h2); line-height: 1.2; font-weight: var(--jp-w-semibold); letter-spacing: -.02em; color: var(--jp-ink); }
.jp-h3 { margin: 0 0 .5em; font-size: var(--jp-h3); line-height: 1.3; font-weight: var(--jp-w-semibold); color: var(--jp-ink); }

[class^='jp-'][hidden], [class*=' jp-'][hidden] { display: none !important; }
.jp-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Sizing */
.jp-input, .jp-textarea, .jp-btn, .jp-combo-control, .jp-combo-field, .jp-drop, .jp-chip, .jp-tab, .jp-cal, .jp-list, .jp-check { box-sizing: border-box; }

/* Focus: one ring for every component */
.jp-btn:focus-visible, .jp-btn.is-focus, .jp-input:focus-visible, .jp-textarea:focus-visible, .jp-input.is-focus, .jp-textarea.is-focus,
.jp-chip:focus-visible, .jp-chip.is-focus, .jp-tab:focus-visible, .jp-tab.is-focus, .jp-combo-field:focus-visible, .jp-combo-control:focus-within,
.jp-combo-control.is-focus, .jp-cal button:focus-visible, .jp-check input:focus-visible + .jp-check-box, .jp-drop-input:focus-visible + .jp-drop, .jp-drop.is-focus {
  outline: 3px solid var(--jp-focus);
  outline-offset: 2px;
}
.jp-combo-control .jp-combo-field { border: 0; border-radius: 0; background: transparent; }
.jp-combo-control:focus-within, .jp-combo-control.is-focus { outline-offset: -1px; }
.demo-field:focus-within { outline: 3px solid var(--jp-focus); outline-offset: 2px; }

/* One ring only. A wrapper that shows the ring with :focus-within owns it: the fields inside it show none, whatever
   other rule (global, per page, per component) would give them one. Every such wrapper is listed in this single rule;
   scripts/check_focus.py fails on a wrapper that draws a ring with :focus-within and is not listed. */
:is(.jp-combo-control, .demo-field):focus-within :is(input, select, textarea) { outline: 0 !important; outline-offset: 0 !important; box-shadow: none !important; }
.jp-combo-control .jp-combo-field { padding-left: 2px; }

/* ---------------------------------------------------------------- Buttons */
.jp-btn {
  --h: var(--jp-h-md);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--h); padding: 0 18px;
  font: var(--jp-w-semibold) 14px/1.2 var(--jp-font); text-decoration: none; white-space: nowrap;
  color: var(--jp-ink); background: transparent; border: 1px solid transparent; border-radius: var(--jp-r-ctl);
  cursor: pointer; transition: background-color .15s, border-color .15s, color .15s;
}
.jp-btn svg { width: 18px; height: 18px; flex: none; }
.jp-btn--sm { --h: var(--jp-h-sm); padding: 0 12px; font-size: 13px; }
.jp-btn--md { --h: var(--jp-h-md); }
.jp-btn--lg { --h: var(--jp-h-lg); padding: 0 24px; font-size: 16px; }
.jp-btn--primary { color: var(--jp-on-purple); background: var(--jp-purple); border-color: var(--jp-purple); }
.jp-btn--primary:hover, .jp-btn--primary.is-hover { background: var(--jp-purple-hover); border-color: var(--jp-purple-hover); }
.jp-btn--primary:active, .jp-btn--primary.is-active { background: var(--jp-purple-hover); filter: brightness(.94); }
.jp-btn--secondary { color: var(--jp-ink); background: var(--jp-bg); border-color: var(--jp-line); }
.jp-btn--secondary:hover, .jp-btn--secondary.is-hover { background: var(--jp-purple-soft); border-color: var(--jp-purple); }
.jp-btn--secondary:active, .jp-btn--secondary.is-active { background: var(--jp-purple-soft); filter: brightness(.96); }
.jp-btn--ghost { color: var(--jp-purple-ink); }
.jp-btn--ghost:hover, .jp-btn--ghost.is-hover { background: var(--jp-purple-soft); }
.jp-btn--ghost:active, .jp-btn--ghost.is-active { background: var(--jp-purple-soft); filter: brightness(.96); }
.jp-btn:disabled, .jp-btn[aria-disabled='true'] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.jp-btn[aria-busy='true'] { position: relative; color: transparent; pointer-events: none; }
.jp-btn[aria-busy='true']::after {
  content: ''; position: absolute; width: 16px; height: 16px; border: 2px solid var(--jp-on-purple); border-right-color: transparent; border-radius: 50%; animation: jp-spin .7s linear infinite;
}
.jp-btn--secondary[aria-busy='true']::after, .jp-btn--ghost[aria-busy='true']::after { border-color: var(--jp-purple-ink); border-right-color: transparent; }
@keyframes jp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .jp-btn[aria-busy='true']::after { animation-duration: 2s; } .jp-btn { transition: none; } }

/* ---------------------------------------------------------------- Fields */
.jp-field { display: grid; gap: 6px; min-width: 0; }
.jp-label { color: var(--jp-ink); font-size: 14px; font-weight: var(--jp-w-medium); }
.jp-hint { margin: 0; color: var(--jp-ink-2); font-size: 13px; line-height: 1.5; }
.jp-error { margin: 0; color: var(--jp-error); font-size: 13px; font-weight: var(--jp-w-medium); line-height: 1.5; }
.jp-input, .jp-textarea {
  width: 100%; min-height: var(--jp-h-field); padding: 0 14px;
  font: var(--jp-w-regular) 16px/1.4 var(--jp-font); color: var(--jp-ink);
  background: var(--jp-bg); border: 1px solid var(--jp-line); border-radius: var(--jp-r-ctl);
  transition: border-color .15s;
}
.jp-input::placeholder, .jp-textarea::placeholder { color: var(--jp-ink-2); opacity: .8; }
.jp-input:hover, .jp-textarea:hover { border-color: var(--jp-ink-2); }
.jp-input--lg { min-height: var(--jp-h-field-lg); padding: 0 18px; font-size: 18px; border-radius: var(--jp-r-ctl); }
.jp-textarea { padding: 11px 14px; min-height: 120px; resize: vertical; }
.jp-input:disabled, .jp-textarea:disabled { opacity: .55; cursor: not-allowed; background: var(--jp-surface); }
.jp-input[aria-invalid='true'], .jp-textarea[aria-invalid='true'], .jp-combo-control.is-invalid { border-color: var(--jp-error); }
.jp-input:focus-visible, .jp-textarea:focus-visible { border-color: var(--jp-focus); }
.jp-search { position: relative; }
.jp-search svg { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--jp-ink-2); pointer-events: none; }
.jp-search .jp-input { padding-left: 46px; }

/* Checkbox and radio */
.jp-check { display: inline-flex; align-items: center; gap: 10px; min-height: var(--jp-h-field); color: var(--jp-ink); font-size: 15px; cursor: pointer; }
.jp-check input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.jp-check-box { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; background: var(--jp-bg); border: 1.5px solid var(--jp-ink-2); border-radius: var(--jp-r-sm); color: transparent; }
.jp-check input[type='radio'] + .jp-check-box { border-radius: var(--jp-r-pill); }
.jp-check input:checked + .jp-check-box { background: var(--jp-purple); border-color: var(--jp-purple); color: var(--jp-on-purple); }
.jp-check input[type='radio']:checked + .jp-check-box { box-shadow: inset 0 0 0 4px var(--jp-bg); }
.jp-check input:disabled + .jp-check-box { opacity: .5; }
.jp-check-box svg { width: 14px; height: 14px; }
.jp-check input[type='radio'] + .jp-check-box svg { display: none; }

/* ---------------------------------------------------------------- Select (single, multiple, searchable) */
.jp-combo { position: relative; display: grid; gap: 6px; min-width: 0; }
.jp-combo-control {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: var(--jp-h-field); padding: 0 8px 0 14px;
  background: var(--jp-bg); border: 1px solid var(--jp-line); border-radius: var(--jp-r-ctl); cursor: text; transition: border-color .15s;
}
.jp-combo-control:hover { border-color: var(--jp-ink-2); }
.jp-combo-control:focus-within, .jp-combo-control.is-focus { border-color: var(--jp-focus); }
.jp-combo-control.has-chips { padding-block: 6px; }
.jp-combo-field {
  flex: 1 1 80px; min-width: 60px; min-height: var(--jp-h-sm); padding: 0; text-align: left;
  font: var(--jp-w-regular) 16px/1.4 var(--jp-font); color: var(--jp-ink); background: transparent; border: 0; outline: 0;
}
.jp-combo-control:not(.has-chips) > .jp-combo-field { align-self: stretch; }
.jp-combo-field::placeholder { color: var(--jp-ink-2); opacity: .8; }
button.jp-combo-field { align-self: stretch; min-height: calc(var(--jp-h-field) - 2px); cursor: pointer; }
button.jp-combo-field.is-placeholder { color: var(--jp-ink-2); }
.jp-combo.is-select-only .jp-combo-control { cursor: pointer; }
.jp-combo.is-disabled .jp-combo-control { opacity: .55; cursor: not-allowed; background: var(--jp-surface); }
.jp-combo.is-disabled .jp-combo-field { cursor: not-allowed; }
.jp-combo-chevron { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; margin-left: auto; color: var(--jp-ink-2); background: transparent; border: 0; border-radius: var(--jp-r-sm); cursor: pointer; }
.jp-combo-chevron svg { width: 18px; height: 18px; transition: transform .15s; }
.jp-combo.is-open .jp-combo-chevron svg { transform: rotate(180deg); }
.jp-combo-chips { display: contents; list-style: none; margin: 0; padding: 0; }
.jp-combo-chips li { display: inline-flex; }
.jp-combo-anchor { position: relative; min-width: 0; }
.jp-list {
  position: absolute; z-index: 20; top: 100%; left: 0; min-width: 100%; width: max-content; max-width: min(380px, calc(100vw - 32px)); max-height: 320px; margin: 4px 0 0; padding: 4px; overflow: auto; list-style: none;
  background: var(--jp-bg); border: 1px solid var(--jp-line); border-radius: var(--jp-r-ctl); box-shadow: var(--jp-shadow);
}
.jp-list[hidden] { display: none; }
.jp-opt { box-sizing: border-box; display: flex; align-items: center; gap: 10px; min-height: var(--jp-h-md); padding: 4px 10px; line-height: 1.3; color: var(--jp-ink); font-size: 15px; border-radius: var(--jp-r-sm); cursor: pointer; }
.jp-opt.is-active, .jp-opt:hover { background: var(--jp-purple-soft); }
.jp-opt[aria-selected='true'] { font-weight: var(--jp-w-semibold); }
.jp-opt[aria-disabled='true'] { opacity: .5; cursor: not-allowed; }
.jp-opt-box { display: none; width: 18px; height: 18px; flex: none; border: 1.5px solid var(--jp-ink-2); border-radius: var(--jp-r-sm); background: var(--jp-bg); }
.jp-list[aria-multiselectable='true'] .jp-opt-box { display: inline-block; }
.jp-list[aria-multiselectable='true'] .jp-opt[aria-selected='true'] .jp-opt-box { background: var(--jp-purple) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 14px no-repeat; border-color: var(--jp-purple); }
.jp-list:not([aria-multiselectable='true']) .jp-opt[aria-selected='true']::after { content: ''; width: 16px; height: 16px; margin-left: auto; background: var(--jp-purple-ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat; }
.jp-opt-code { color: var(--jp-ink-2); }
.jp-opt-tag { margin-left: auto; padding: 0 8px; color: var(--jp-purple-ink); background: var(--jp-purple-soft); border-radius: var(--jp-r-pill); font-size: 12px; font-weight: var(--jp-w-medium); white-space: nowrap; }
.jp-opt--group { font-weight: var(--jp-w-semibold); }
.jp-opt--sub { padding-left: 24px; }
.jp-opt-empty { padding: 10px; color: var(--jp-ink-2); font-size: 14px; }

/* ---------------------------------------------------------------- Date picker */
.jp-date { position: relative; display: grid; gap: 6px; min-width: 0; }
.jp-date-row { position: relative; }
.jp-date-row .jp-input { padding-right: 52px; }
.jp-date-open { position: absolute; top: 50%; right: 6px; display: inline-grid; place-items: center; width: var(--jp-h-md); height: var(--jp-h-md); margin-top: calc(var(--jp-h-md) / -2); color: var(--jp-ink-2); background: transparent; border: 0; border-radius: var(--jp-r-sm); cursor: pointer; }
.jp-date-open:hover { color: var(--jp-purple-ink); background: var(--jp-purple-soft); }
.jp-date-open:focus-visible { outline: 3px solid var(--jp-focus); outline-offset: 1px; }
.jp-date-open svg { width: 20px; height: 20px; }
.jp-cal { position: absolute; z-index: 20; top: 100%; left: 0; width: min(320px, 100vw - 32px); margin-top: 6px; padding: 12px; background: var(--jp-bg); border: 1px solid var(--jp-line); border-radius: var(--jp-r-card); box-shadow: var(--jp-shadow); }
.jp-cal[hidden] { display: none; }
.jp-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.jp-cal-title { margin: 0; color: var(--jp-ink); font-size: 15px; font-weight: var(--jp-w-semibold); text-transform: capitalize; }
.jp-cal-nav { display: inline-grid; place-items: center; width: var(--jp-h-md); height: var(--jp-h-md); color: var(--jp-ink); background: transparent; border: 1px solid var(--jp-line); border-radius: var(--jp-r-ctl); cursor: pointer; }
.jp-cal-nav:hover { background: var(--jp-purple-soft); }
.jp-cal-nav svg { width: 18px; height: 18px; }
.jp-cal table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.jp-cal th { padding: 4px 0; color: var(--jp-ink-2); font-size: 12px; font-weight: var(--jp-w-medium); text-align: center; }
.jp-cal td { padding: 1px; text-align: center; }
.jp-cal td button { width: 100%; aspect-ratio: 1; min-height: var(--jp-h-md); color: var(--jp-ink); font: var(--jp-w-regular) 14px var(--jp-font); background: transparent; border: 1px solid transparent; border-radius: var(--jp-r-ctl); cursor: pointer; }
.jp-cal td button:hover { background: var(--jp-purple-soft); }
.jp-cal td button[aria-current='date'] { border-color: var(--jp-purple); }
.jp-cal td button[aria-selected='true'] { color: var(--jp-on-purple); background: var(--jp-purple); font-weight: var(--jp-w-semibold); }
.jp-cal td button:disabled { opacity: .35; cursor: not-allowed; }
.jp-cal td button.is-outside { color: var(--jp-ink-2); }
.jp-cal-foot { display: flex; justify-content: space-between; margin-top: 8px; }

/* ---------------------------------------------------------------- File drop zone */
.jp-drop-wrap { display: grid; gap: 8px; min-width: 0; }
.jp-drop-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.jp-drop {
  display: grid; justify-items: center; gap: 6px; padding: 28px 20px; text-align: center; color: var(--jp-ink);
  background: var(--jp-purple-soft); border: 2px dashed var(--jp-purple); border-radius: var(--jp-r-card); cursor: pointer; transition: background-color .15s, border-color .15s;
}
.jp-drop:hover, .jp-drop.is-dragging { background: var(--jp-bg); border-style: solid; }
.jp-drop-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; color: var(--jp-purple-ink); background: var(--jp-bg); border-radius: var(--jp-r-pill); }
.jp-drop-icon svg { width: 22px; height: 22px; }
.jp-drop-title { font-size: 16px; font-weight: var(--jp-w-semibold); }
.jp-drop-hint { color: var(--jp-ink-2); font-size: 14px; }
.jp-drop-file { min-height: 20px; color: var(--jp-purple-ink); font-size: 14px; font-weight: var(--jp-w-semibold); overflow-wrap: anywhere; }
.jp-drop.has-file { border-style: solid; }
.jp-drop.is-invalid { border-color: var(--jp-error); background: var(--jp-error-soft); }
.jp-drop.is-disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }

/* ---------------------------------------------------------------- Chips */
.jp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.jp-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--jp-h-sm); padding: 0 12px;
  font: var(--jp-w-medium) 14px/1.2 var(--jp-font); color: var(--jp-ink); background: var(--jp-surface); border: 1px solid var(--jp-line); border-radius: var(--jp-r-pill);
}
button.jp-chip { cursor: pointer; transition: background-color .15s, border-color .15s; }
button.jp-chip:hover, button.jp-chip.is-hover { background: var(--jp-purple-soft); border-color: var(--jp-purple); }
.jp-chip[aria-pressed='true'] { color: var(--jp-purple-ink); background: var(--jp-purple-soft); border-color: var(--jp-purple); font-weight: var(--jp-w-semibold); }
.jp-chip:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.jp-chip--success { color: var(--jp-success); background: var(--jp-success-soft); border-color: transparent; }
.jp-chip--warning { color: var(--jp-warning); background: var(--jp-warning-soft); border-color: transparent; }
.jp-chip--error { color: var(--jp-error); background: var(--jp-error-soft); border-color: transparent; }
.jp-chip-x { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: -6px; color: inherit; background: transparent; border: 0; border-radius: var(--jp-r-pill); cursor: pointer; font-size: 16px; line-height: 1; }
.jp-chip-x:hover { background: var(--jp-line); }
.jp-chip-x:focus-visible { outline: 3px solid var(--jp-focus); outline-offset: 1px; }
.jp-flag { font-size: 16px; line-height: 1; }

/* ---------------------------------------------------------------- Segmented control (monthly / yearly on the pricing pages and in the dashboard) */
.segmented { --seg-bg: var(--jp-surface); --seg-on: var(--jp-bg); --seg-save: var(--jp-ink); display: inline-flex; padding: 3px; background: var(--seg-bg); border: 1px solid var(--jp-line); border-radius: var(--jp-r-ctl); }
:root[data-theme='dark'] .segmented { --seg-bg: var(--jp-bg); --seg-on: var(--jp-surface); --seg-save: var(--jp-success); }
.segmented button { height: var(--jp-h-sm); padding: 0 12px; color: var(--jp-ink-2); background: transparent; border: 0; border-radius: var(--jp-r-ctl); font: var(--jp-w-semibold) 12px/1 var(--jp-font); white-space: nowrap; cursor: pointer; }
.segmented button:hover { color: var(--jp-ink); }
.segmented button[aria-pressed='true'] { color: var(--jp-purple); background: var(--seg-on); box-shadow: 0 1px 2px rgb(23 26 70 / .08); }
.segmented-save { margin-left: 2px; color: var(--seg-save); font-weight: var(--jp-w-semibold); }
.segmented button:focus-visible { outline: 3px solid var(--jp-focus); outline-offset: 2px; }

/* ---------------------------------------------------------------- Tabs */
.jp-tabs [role='tablist'] { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--jp-line); }
.jp-tab {
  min-height: var(--jp-h-field); padding: 0 16px; margin-bottom: -1px; color: var(--jp-ink-2);
  font: var(--jp-w-medium) 15px/1.2 var(--jp-font); white-space: nowrap; background: transparent; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
}
.jp-tab:hover { color: var(--jp-ink); }
.jp-tab[aria-selected='true'] { color: var(--jp-purple-ink); font-weight: var(--jp-w-semibold); border-bottom-color: var(--jp-purple); }
.jp-tab:disabled { opacity: .5; cursor: not-allowed; }
.jp-tabs [role='tabpanel'] { padding-top: 16px; color: var(--jp-ink); }
.jp-tabs [role='tabpanel'][hidden] { display: none; }
.jp-tabs [role='tabpanel']:focus-visible { outline: 3px solid var(--jp-focus); outline-offset: 2px; border-radius: var(--jp-r-sm); }

/* ---------------------------------------------------------------- Usage bar (plan limits) */
.jp-usage { display: grid; gap: 6px; min-width: 0; }
.jp-usage-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; font-size: .875rem; color: var(--jp-ink-2); }
.jp-usage-head strong { color: var(--jp-ink); font-weight: var(--jp-w-semibold); font-variant-numeric: tabular-nums; }
.jp-usage-track { position: relative; height: 8px; overflow: hidden; border-radius: var(--jp-r-pill); background: var(--jp-usage-track); }
.jp-usage-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--jp-usage-ok); transition: width .3s; }
.jp-usage.has-use .jp-usage-fill { min-width: 4px; }
.jp-usage[data-tone='warn'] .jp-usage-fill { background: var(--jp-usage-warn); }
.jp-usage[data-tone='high'] .jp-usage-fill { background: var(--jp-usage-high); }
.jp-usage-note { margin: 0; font-size: .8125rem; color: var(--jp-ink-2); }
@media (prefers-reduced-motion: reduce) { .jp-usage-fill { transition: none; } }

/* ---------------------------------------------------------------- Touch: 44 px minimum on phones and touch screens */
@media (max-width: 760px), (pointer: coarse) {
  .jp-btn { min-height: max(var(--h), var(--jp-touch)); }
  button.jp-chip, .jp-chip-x { min-height: var(--jp-touch); }
  .jp-chip-x { min-width: var(--jp-touch); margin-right: -12px; }
  .jp-opt { min-height: var(--jp-touch); }
  .jp-combo-chevron, .jp-date-open { min-width: var(--jp-touch); min-height: var(--jp-touch); }
  .jp-date-open { margin-top: calc(var(--jp-touch) / -2); right: 2px; }
  .jp-cal td button { min-height: var(--jp-touch); }
  .jp-cal-nav { width: var(--jp-touch); height: var(--jp-touch); }
  .jp-tab { min-height: var(--jp-touch); }
  .jp-check { min-height: var(--jp-touch); }
  /* The field fills the whole control (its borders included): the 44 px tap target is the control */
  .jp-combo-control:not(.has-chips) > .jp-combo-field, button.jp-combo-field { min-height: var(--jp-touch); margin-block: -1px; }
}
@media (max-width: 760px) {
  .jp-btn { max-width: 100%; white-space: normal; text-align: center; padding-block: 8px; }
  .jp-input, .jp-textarea, .jp-combo-field { font-size: 16px; } /* no zoom on focus on phones */
}

/* ================================================================== Existing elements on the tokens
   The site and the dashboard keep their markup; these rules give every field, button, case and list the same
   sizes, radii, colors and weights as the components above. They come after styles.css and app.css, and double
   their selectors where the older rules are more specific. */

/* Native lists once a component has taken over: kept in the form, out of sight and out of the tab order */
.jp-native-hidden { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; overflow: hidden !important; pointer-events: none !important; }

/* Fields: 44 px, one border, one radius. Large (56 px) for the main searches: data-jp-size="lg".
   Fields inside a bordered search bar carry data-jp-bare. */
:is(input, textarea):not([type='checkbox']):not([type='radio']):not([type='file']):not([type='hidden']):not([type='range']):not([type='submit']):not([type='button']):not([type='color']):not([type='image']):not([type='reset']):not(.jp-combo-field):not([data-jp-bare]) {
  min-height: var(--jp-h-field); border: 1px solid var(--jp-line); border-radius: var(--jp-r-ctl); color: var(--jp-ink); background-color: var(--jp-bg);
  font-family: var(--jp-font); font-size: 16px; font-weight: var(--jp-w-regular); line-height: 1.4; box-sizing: border-box;
}
:is(input, textarea):not([type='checkbox']):not([type='radio']):not([type='file']):not([type='hidden']):not([type='range']):not([type='submit']):not([type='button']):not([type='color']):not([type='image']):not([type='reset']):not(.jp-combo-field):not([data-jp-bare])[data-jp-size='lg'] {
  min-height: var(--jp-h-field-lg); font-size: 18px;
}
:is(input, textarea):not([data-jp-bare]):not([type='checkbox']):not([type='radio']):not([type='file']):not([type='hidden']):not([type='range']):not([type='submit']):not([type='button']):focus-visible { border-color: var(--jp-focus); outline: 3px solid var(--jp-focus); outline-offset: 2px; }
input[data-jp-bare] { min-height: var(--jp-h-field); border: 0; background: transparent; color: var(--jp-ink); font-family: var(--jp-font); font-size: 16px; font-weight: var(--jp-w-regular); }
input[data-jp-bare][data-jp-size='lg'] { min-height: calc(var(--jp-h-field-lg) - 2px); font-size: 18px; }
textarea:not(.jp-combo-field) { min-height: 120px; }
input::placeholder, textarea::placeholder { color: var(--jp-ink-2); opacity: .8; }
:is(input, textarea):disabled { opacity: .55; cursor: not-allowed; }

/* A list that no component has taken over (no script): the same field, with its own arrow */
select:not(.jp-native-hidden) {
  min-height: var(--jp-h-field); padding: 0 40px 0 14px; border: 1px solid var(--jp-line); border-radius: var(--jp-r-ctl); color: var(--jp-ink); background-color: var(--jp-bg);
  font-family: var(--jp-font); font-size: 16px; font-weight: var(--jp-w-regular); box-sizing: border-box; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23858aa8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
}
select:not(.jp-native-hidden):focus-visible { outline: 3px solid var(--jp-focus); outline-offset: 2px; }

/* Cases and choices: the same box everywhere */
input[type='checkbox'], input[type='radio'] {
  -webkit-appearance: none; appearance: none; display: inline-grid; place-content: center; flex: none; width: 20px; height: 20px; margin: 0; vertical-align: middle;
  background: var(--jp-bg); border: 1.5px solid var(--jp-ink-2); border-radius: var(--jp-r-sm); cursor: pointer;
}
input[type='radio'] { border-radius: var(--jp-r-pill); }
input[type='checkbox']:checked { background: var(--jp-purple) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 14px no-repeat; border-color: var(--jp-purple); }
input[type='radio']:checked { background: var(--jp-purple); border-color: var(--jp-purple); box-shadow: inset 0 0 0 4px var(--jp-bg); }
input[type='checkbox']:focus-visible, input[type='radio']:focus-visible { outline: 3px solid var(--jp-focus); outline-offset: 2px; }
input[type='checkbox']:disabled, input[type='radio']:disabled { opacity: .5; cursor: not-allowed; }

/* A file field that no component has taken over (no script): its button looks like a secondary button */
input[type='file']:not(.jp-drop-input):not(.file-input) { max-width: 100%; color: var(--jp-ink); font: var(--jp-w-regular) 14px var(--jp-font); }
input[type='file']::file-selector-button { min-height: var(--jp-h-md); margin-right: 12px; padding: 0 16px; color: var(--jp-ink); background: var(--jp-bg); border: 1px solid var(--jp-line); border-radius: var(--jp-r-ctl); font: var(--jp-w-semibold) 14px var(--jp-font); cursor: pointer; }

/* Buttons: primary, secondary, ghost; 32, 40 and 48 px; 44 px minimum on phones */
.button.button, .btn.btn, .header-cta.header-cta, .sr-bar button[type='submit'] {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--jp-h-md); height: auto; padding: 0 18px;
  border: 1px solid var(--jp-line); border-radius: var(--jp-r-ctl); color: var(--jp-ink); background: var(--jp-bg); box-shadow: none;
  font: var(--jp-w-semibold) 14px/1.2 var(--jp-font); text-decoration: none; transform: none; cursor: pointer; box-sizing: border-box;
}
.button.button:hover, .btn.btn:hover { transform: none; color: var(--jp-ink); background: var(--jp-purple-soft); border-color: var(--jp-purple); }
.button-primary.button-primary, .btn-primary.btn-primary, .header-cta.header-cta, .sr-bar button[type='submit'] { color: var(--jp-on-purple); background: var(--jp-purple); border-color: var(--jp-purple); }
.button-primary.button-primary:hover, .btn-primary.btn-primary:hover, .header-cta.header-cta:hover, .sr-bar button[type='submit']:hover { color: var(--jp-on-purple); background: var(--jp-purple-hover); border-color: var(--jp-purple-hover); }
.btn-danger.btn-danger { color: var(--jp-on-purple); background: var(--jp-error); border-color: var(--jp-error); }
.btn-danger-outline.btn-danger-outline, .button-danger.button-danger { color: var(--jp-error); background: var(--jp-bg); border-color: var(--jp-error); }
.btn-danger-outline.btn-danger-outline:hover, .button-danger.button-danger:hover { color: var(--jp-on-purple); background: var(--jp-error); border-color: var(--jp-error); }
.btn-small.btn-small { min-height: var(--jp-h-sm); padding: 0 12px; font-size: 13px; }
.hero-actions .button.button, .offer-actions .button.button, .page-cta .button.button, .plan .button.button, .closing .button.button { min-height: var(--jp-h-lg); padding: 0 24px; font-size: 16px; }
.button.button svg, .btn.btn svg { width: 18px; height: 18px; flex: none; }
.button.button:disabled, .btn.btn:disabled { opacity: .5; cursor: not-allowed; }
.language-toggle.language-toggle, .theme-toggle.theme-toggle { min-width: var(--jp-h-sm); min-height: var(--jp-h-sm); height: var(--jp-h-md); border-radius: var(--jp-r-ctl); font-weight: var(--jp-w-semibold); }
@media (max-width: 760px), (pointer: coarse) {
  .button.button, .btn.btn, .btn-small.btn-small, .header-cta.header-cta, .language-toggle.language-toggle, .theme-toggle.theme-toggle,
  .privacy-actions button, .sr-bar button[type='submit'], .auth-tab { min-height: var(--jp-touch); }
  .language-toggle.language-toggle, .theme-toggle.theme-toggle { min-width: var(--jp-touch); }
}

/* Chips of the dashboard and hero buttons */
.chip.chip { min-height: var(--jp-h-sm); height: auto; border-radius: var(--jp-r-pill); font-weight: var(--jp-w-medium); }
@media (max-width: 760px), (pointer: coarse) { .chip.chip { min-height: var(--jp-touch); min-width: var(--jp-touch); } }
.hero-actions, .offer-actions { flex-wrap: wrap; }
.button.button { white-space: nowrap; }
.jp-drop-input:disabled + .jp-drop { opacity: .55; cursor: not-allowed; pointer-events: none; }
.file-row .jp-drop { flex: 1 1 100%; }
@media (max-width: 760px) { .header-cta.header-cta { display: none; } }
.jp-combo-chips .jp-chip > span:first-child { max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }