/* Kohort iQ — public page adjustments
 *
 * Loaded after the design system, only on the public marketing routes.
 * Deliberately tiny: the system is the designer's and is regenerable, so
 * anything here has to be an addition the system could not know about,
 * never a restyle of one of its components.
 */

/* A form on a dark block.
 *
 * `.kiq-label` and `.kiq-field__hint` resolve to --kiq-ink-primary and
 * --kiq-ink-muted, which are dark by design because the system's forms live on
 * light surfaces. This page needs the install form inside the petrol hero, and
 * dark ink there measures about 1.4:1 — illegible.
 *
 * Scoped to the label and the hint rather than re-mapping --kiq-ink-* for the
 * whole subtree: the input keeps a light background, so remapping the tokens
 * wholesale would turn its typed value bone-on-white and break the field it was
 * meant to fix.
 */
.kiq-block--petrol .kiq-label,
.kiq-block--ink .kiq-label,
.kiq-block--harbour .kiq-label {
  color: var(--kiq-bone-50);
}

.kiq-block--petrol .kiq-field__hint,
.kiq-block--ink .kiq-field__hint,
.kiq-block--harbour .kiq-field__hint {
  color: color-mix(in oklab, var(--kiq-bone-50) 78%, transparent);
}

/* Browser surfaces the design system does not draw. Left to defaults these are
 * the clearest tell that a page was assembled rather than built. */
::selection {
  background: var(--kiq-coral-500);
  color: var(--kiq-petrol-950);
}

:root {
  accent-color: var(--kiq-coral-500);
  caret-color: var(--kiq-coral-600);
}

/* The prose column on the privacy and support pages: the system sets the type,
 * this sets the rhythm between the headings and the paragraphs under them. */
.kiq-prose > h2 {
  margin-top: var(--kiq-space-11);
  margin-bottom: var(--kiq-space-5);
}

.kiq-prose > h2:first-of-type {
  margin-top: var(--kiq-space-8);
}

.kiq-prose > p {
  max-width: 68ch;
  margin-bottom: var(--kiq-space-6);
}

/* Tables in a legal notice.
 *
 * The privacy page carries four real tables - device storage, lawful basis,
 * sub-processors and retention - and they broke two ways when first built:
 *
 * 1. `.kiq-table th` sets `white-space: nowrap`, which is right for the column
 *    headings it was written for and wrong for a `<th scope="row">` holding a
 *    sentence. Measured on 3 Sep 2026: the lawful-basis row header rendered
 *    640px wide inside a 664px column, squeezing the other two columns to about
 *    one character each. Row headers wrap; column headings still do not.
 *
 * 2. `.kiq-prose` caps at `--kiq-measure` (68ch), which is correct for reading
 *    and far too narrow for a four-column table. Rather than fight it, the cap
 *    moves off the wrapper and onto the paragraphs and headings themselves, so
 *    prose keeps its measure and tables get the container. The privacy route
 *    pairs this with `.kiq-container` instead of `.kiq-container--text`.
 *
 * A `min-width` keeps the horizontal scroll that `.kiq-table-wrap` already
 * provides honest on a phone: below it the table scrolls rather than crushing.
 */
.kiq-prose:has(.kiq-table) {
  max-width: none;
}

.kiq-prose:has(.kiq-table) > h2,
.kiq-prose:has(.kiq-table) > p {
  max-width: var(--kiq-measure);
}

.kiq-prose .kiq-table tbody th {
  /* The system styles every `th` as a column heading: uppercase, overline size,
   * muted, nowrap. A row header here is a sentence, so it takes body type and
   * body ink, and keeps only the weight that marks it as the row's subject. */
  white-space: normal;
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--kiq-text-body-sm-size);
  font-weight: 600;
  color: var(--kiq-ink-primary);
}

/* Scaled by column count. A two-column retention table reads fine on a phone;
 * the four-column storage table does not, and cramming it to fit produces the
 * one-word-per-line column this whole block exists to prevent. Below these
 * widths the wrapper scrolls instead. */
.kiq-prose .kiq-table {
  min-width: 26rem;
}

.kiq-prose .kiq-table:has(thead th:nth-child(3)) {
  min-width: 38rem;
}

.kiq-prose .kiq-table:has(thead th:nth-child(4)) {
  min-width: 50rem;
}

/* A table that scrolls sideways has to say so, or nobody scrolls it. The
 * gradient pair rides on the scroll container: `local` keeps the white cover
 * pinned to the content's edge, `scroll` keeps the shadow pinned to the frame,
 * so the shadow appears only while there is more table in that direction and
 * fades out as you reach the end. No script, and nothing to show when the
 * table fits. */
.kiq-prose .kiq-table-wrap {
  margin-block: var(--kiq-space-7);
  background:
    linear-gradient(to right, var(--kiq-surface-page) 30%, transparent) left center,
    linear-gradient(to left, var(--kiq-surface-page) 30%, transparent) right center,
    radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / 0.14), transparent) left center,
    radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / 0.14), transparent) right center;
  background-repeat: no-repeat;
  background-size: 3rem 100%, 3rem 100%, 0.75rem 100%, 0.75rem 100%;
  background-attachment: local, local, scroll, scroll;
}