/* @codeiq/ui 1.7.0. Generated: do not edit. Change it in codeiq-ui and bump the version. */
/*
 * Code IQ design tokens: the only place sizes, colours, type and focus are defined.
 * Apps use these through var(--…); the stylelint config rejects raw values for the properties
 * that drift (radius, font size and weight, outline). Change a value here, tag a release, and
 * bump it in each app.
 */
:root {
  /* Colour */
  --white: #ffffff;
  --paper: #f7f8fc;
  --paper-strong: #eef0f8;
  --ink: #0e1020;
  --muted: #555a6b;
  --line: #dfe2ec;
  --line-strong: #8a8fa0;
  --blue: #2c2cdb;
  --blue-deep: #1d1da6;
  --blue-mid: #7b7bff;
  --blue-pale: #e8e8fc;
  --grid: rgb(44 44 219 / 0.06);
  --grid-major: rgb(44 44 219 / 0.11);

  /* On blue or dark panels */
  --on-dark: #e3e4ff; /* body text */
  --on-dark-muted: #c7c9d6; /* secondary text */
  --blue-light: #c9cbff; /* accents and highlights */

  /* Status: a strong colour (icons, dots, text on white), a background, its text, a border */
  --ok: #16784a;
  --ok-bg: #e3f6ec;
  --ok-ink: #11603a;
  --warn: #b25e00;
  --warn-bg: #fff3e0;
  --warn-ink: #8a4b00;
  --warn-line: #f3d3a4;
  --danger: #a61b1b;
  --danger-bg: #fdecec;
  --danger-ink: #8a1c1c;
  --danger-line: #f1c4c4;

  /* Type */
  --sans: 'Inter Variable', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono Variable', ui-monospace, 'SF Mono', Menlo, monospace;
  --text-2xs: 0.6875rem; /* 11px: tiny labels on illustrations */
  --text-xs: 0.75rem; /* 12px: tags, captions */
  --text-sm: 0.875rem; /* 14px: buttons, labels, small print */
  --text-base: 1.0625rem; /* 17px: body and fields */
  --text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);
  --text-xl: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --text-2xl: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --text-display: clamp(2.5rem, 1.2rem + 5.4vw, 4.75rem);
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 800;

  /* Shape */
  --radius: 3px;
  --radius-round: 999px; /* pills and dots only */

  /* Controls: fields and buttons share one height so they line up in a row */
  --control-height: 52px;
  --control-height-sm: 38px; /* secondary actions in card headers and lists */
  --control-pad-x: 1.25rem;
  --control-pad-x-sm: 0.9rem;
  --field-pad-x: 0.8rem;
  --control-border: 1px solid var(--line-strong);

  /* Focus: one ring everywhere. Fields draw it on their edge (offset 0). */
  --focus-ring: 2px solid var(--blue);
  --focus-ring-inverse: 2px solid var(--white); /* on dark or blue backgrounds */
  --focus-offset: 3px;
  --focus-offset-field: 0px;

  /* Layout */
  --container: 74rem;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
  --section-y: clamp(3.5rem, 2rem + 6vw, 6.5rem);
}

/*
 * Code IQ components: buttons, fields and focus. Apps may place these (margin, alignment,
 * width) but not resize or restyle them; the stylelint config enforces that and ui-check
 * measures the result on real pages.
 */

/* ---------- focus ---------- */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* ---------- buttons ---------- */
.btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--control-height);
  padding: 0.5rem var(--control-pad-x);
  border: 1px solid var(--blue);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.15s,
    color 0.15s;
}
.btn:disabled,
.btn[aria-disabled='true'] {
  cursor: progress;
}
.btn--primary {
  background: var(--blue);
  color: var(--white);
}
.btn--primary:hover {
  background: var(--blue-deep);
  color: var(--white);
}
.btn--ghost {
  background: var(--white);
  color: var(--blue);
}
.btn--ghost:hover {
  background: var(--blue-pale);
  color: var(--blue);
}
/* Destructive actions (Remove, Delete): outlined in red */
.btn--danger {
  background: var(--white);
  border-color: var(--danger);
  color: var(--danger);
}
.btn--danger:hover {
  background: var(--danger-bg);
  color: var(--danger);
}
/* On dark or blue backgrounds */
.btn--inverse {
  background: var(--white);
  border-color: var(--white);
  color: var(--blue);
}
.btn--inverse:hover {
  background: var(--blue-pale);
  color: var(--blue);
}
.btn--outline-inverse {
  background: transparent;
  border-color: rgb(255 255 255 / 0.5);
  color: var(--white);
}
.btn--outline-inverse:hover {
  border-color: var(--white);
  color: var(--white);
}
.btn--sm {
  min-height: var(--control-height-sm);
  padding: 0.35rem var(--control-pad-x-sm);
}
.btn--block {
  width: 100%;
}
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* ---------- fields ---------- */
label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
:is(input:is([type='text'], [type='email'], [type='tel'], [type='url'], [type='search'], [type='password'], [type='number'], :not([type])), select, textarea) {
  box-sizing: border-box;
  width: 100%;
  border: var(--control-border);
  border-radius: var(--radius);
  background-color: var(--white);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
}
:is(input:is([type='text'], [type='email'], [type='tel'], [type='url'], [type='search'], [type='password'], [type='number'], :not([type])), select) {
  height: var(--control-height);
  padding: 0 var(--field-pad-x);
  line-height: normal;
}
/* Dropdowns look like fields, with one chevron. (select:not([multiple]) is as specific as the
   field rules above, so its padding and chevron win.) */
select:not([multiple]) {
  appearance: none;
  padding-right: calc(var(--field-pad-x) + 1.5rem);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23555a6b' 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 var(--field-pad-x) center;
  cursor: pointer;
}
select:disabled {
  cursor: default;
  opacity: 0.6;
}
textarea {
  padding: 0.7rem var(--field-pad-x);
  line-height: 1.5;
  resize: vertical;
}
:is(input, select, textarea)::placeholder {
  color: var(--line-strong);
  opacity: 1;
}
:is(input:is([type='text'], [type='email'], [type='tel'], [type='url'], [type='search'], [type='password'], [type='number'], :not([type])), select, textarea):focus {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset-field);
  border-color: var(--blue);
  box-shadow: none;
}

/* A field with an icon inside it, on the left: <div class="field-icon"><span class="field-icon__icon">…</span><input …></div> */
.field-icon {
  position: relative;
  display: flex;
  align-items: center;
}
.field-icon__icon {
  position: absolute;
  left: var(--field-pad-x);
  display: grid;
  color: var(--blue);
  pointer-events: none;
}
.field-icon > :is(input, select) {
  padding-left: calc(var(--field-pad-x) + 1.9rem);
}

/* Dark or blue panels: focus rings are drawn in white so they stay visible. */
.surface-inverse :focus-visible,
.surface-inverse :is(input, select, textarea):focus {
  outline: var(--focus-ring-inverse);
}

/* ---------- pills: short labels and statuses (SPEC, NEW, RECOMMENDED) ---------- */
.pill {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  flex: none;
  align-self: center;
  /* Capitals have no descenders: line-height 1 plus a little more room above than below
     centres them. Browsers that can trim the text box to the capitals do it exactly. */
  padding: 0.32rem 0.5rem 0.26rem;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
  background: var(--paper);
}
.pill--info {
  color: var(--blue);
  background: var(--blue-pale);
}
.pill--ok {
  color: var(--ok-ink);
  background: var(--ok-bg);
}
.pill--warn {
  color: var(--warn-ink);
  background: var(--warn-bg);
}
.pill--danger {
  color: var(--danger-ink);
  background: var(--danger-bg);
}
@supports (text-box: trim-both cap alphabetic) {
  .pill {
    padding: 0.36rem 0.5rem;
    text-box: trim-both cap alphabetic;
  }
}
/* Emphasis: FREE, RECOMMENDED */
.pill--solid {
  color: var(--white);
  background: var(--blue);
  border-color: var(--blue);
}

/* ---------- phone menu button: <button class="menu-btn" aria-expanded="false"><span class="menu-btn__bars"><i></i><i></i><i></i></span>Menu</button>
   Apps decide when it shows (display) and what it opens; it turns into a cross while open. */
.menu-btn {
  box-sizing: border-box;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--control-height);
  padding: 0.5rem var(--control-pad-x-sm);
  border: var(--control-border);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  cursor: pointer;
}
.menu-btn__bars {
  display: grid;
  gap: 3px;
}
.menu-btn__bars i {
  display: block;
  width: 16px;
  height: 2px;
  background: currentColor;
  transition:
    transform 0.2s,
    opacity 0.2s;
}
.menu-btn[aria-expanded='true'] .menu-btn__bars i:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}
.menu-btn[aria-expanded='true'] .menu-btn__bars i:nth-child(2) {
  opacity: 0;
}
.menu-btn[aria-expanded='true'] .menu-btn__bars i:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}
@media (prefers-reduced-motion: reduce) {
  .menu-btn__bars i {
    transition: none;
  }
}


/* ---------- choice: one decision from a few options, as a joined group ----------
   <div class="choice" role="group" aria-label="Rate this lead">
     <button class="choice__opt" data-tone="ok" aria-pressed="false">Good</button>…
   </div>
   For a single answer (rate a lead, filter a list), not separate actions: those stay buttons.
   The chosen option is aria-pressed="true" (buttons) or aria-current="page" (links).
   data-tone="ok|warn|danger" colours the chosen state; without it, blue. */
.choice {
  box-sizing: border-box;
  display: inline-flex;
  max-width: 100%;
  border: var(--control-border);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
}
.choice--block {
  display: flex;
  width: 100%;
}
.choice--block .choice__opt {
  flex: 1;
}
.choice__opt {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: calc(var(--control-height-sm) - 2px);
  margin: 0;
  padding: 0.35rem var(--control-pad-x-sm);
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.15s,
    color 0.15s;
}
.choice__opt:first-child {
  border-left: 0;
}
.choice__opt:hover {
  background: var(--paper);
  color: var(--ink);
}
.choice__opt:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset-field);
}
.choice__opt svg {
  flex: none;
  color: var(--muted);
}
.choice__opt[data-tone='ok']:hover svg {
  color: var(--ok);
}
.choice__opt[data-tone='warn']:hover svg {
  color: var(--warn);
}
.choice__opt[data-tone='danger']:hover svg {
  color: var(--danger);
}
.choice__opt[aria-pressed='true'],
.choice__opt[aria-current='page'] {
  background: var(--blue-pale);
  color: var(--blue);
}
.choice__opt[aria-pressed='true'][data-tone='ok'] {
  background: var(--ok-bg);
  color: var(--ok-ink);
}
.choice__opt[aria-pressed='true'][data-tone='warn'] {
  background: var(--warn-bg);
  color: var(--warn-ink);
}
.choice__opt[aria-pressed='true'][data-tone='danger'] {
  background: var(--danger-bg);
  color: var(--danger-ink);
}
.choice__opt[aria-pressed='true'] svg,
.choice__opt[aria-current='page'] svg {
  color: inherit;
}