/* findyourhome.lv — espace abonné
 *
 * MONDE : l'imprimé du kiosque d'État (seed f7cf6e2f), le même que le site.
 * Trois encres sur carton, angle droit, aucune ombre, aucune photo. L'enseigne
 * bleue ouvre l'app comme elle ouvre la page publique : c'est le même client
 * qui traverse les deux, il doit reconnaître la maison.
 *
 * L'onglet ouvert est dans l'URL : le bouton « retour » marche, et un
 * rechargement ne renvoie pas au début.
 */

@import url("../tokens.css");

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

html { overflow-x: clip; -webkit-text-size-adjust: 100%; }
body {
  overflow-x: clip;
  margin: 0;
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.002em;
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
}
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.18em; }

:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

.page { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-pad); }
.hidden { display: none !important; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── N9 · Barre minimale ───────────────────────────────────────────────── */

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  position: relative;
  padding-block: var(--space-md);
  color: var(--color-accent-ink);
}
/* L'aplat déborde le conteneur sans le déformer : la barre EST l'élément
   `.page`, donc une marge négative la pousserait hors de la fenêtre. */
.bar::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--color-accent-field);
  border-bottom: var(--rule-firm) solid var(--color-ink-strong);
}
.brandmark { width: auto; height: 1.7em; flex: none; display: block; }
.bar__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-accent-ink);
  text-decoration: none;
  white-space: nowrap;
}
.bar__brand .dot { color: currentColor; opacity: 0.5; }
.bar__right { display: flex; align-items: center; gap: var(--space-md); }

.langs { display: flex; align-items: stretch; border: var(--rule-firm) solid var(--color-accent-ink); }
.lang {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  min-height: 44px; padding: var(--space-2xs) var(--space-sm);
  border: 0; border-inline-end: var(--rule-hair) solid var(--color-accent-ink);
  background: transparent; color: var(--color-accent-ink);
  font-family: var(--font-figure); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  cursor: pointer; transition: background-color var(--dur-short) var(--ease-out);
}
.lang:last-child { border-inline-end: 0; }
/* Drapeau dessiné, pas un emoji : Windows n'a aucun glyphe de drapeau et
   afficherait « LV » à la place, ce qui ferait doublon avec le code. Le filet
   évite qu'un drapeau à fond blanc (le russe) flotte sur le papier. */
.flag {
  width: 1.25rem; height: auto; flex: none; display: block;
  border: var(--rule-hair) solid var(--color-rule);
  opacity: 0.55; transition: opacity var(--dur-short) var(--ease-out);
}
.lang:hover .flag, .lang[aria-pressed="true"] .flag { opacity: 1; }
.lang:hover { background: rgba(255,255,255,0.18); }
.lang:active { transform: translateY(1px); }
.lang:disabled { color: var(--color-rule); cursor: not-allowed; }
.lang[aria-pressed="true"] { background: var(--color-accent-field); color: var(--color-accent-ink); }
.lang[aria-pressed="true"] .flag { opacity: 1; }

/* ── Boutons — huit états ──────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-xs); min-height: 48px;
  padding: var(--space-sm) var(--space-lg);
  border: var(--rule-firm) solid var(--color-accent-field);
  background: var(--color-accent-field); color: var(--color-accent-ink);
  font-family: var(--font-display); font-size: var(--text-base); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out),
              transform var(--dur-instant) var(--ease-out);
}
.btn:hover  { background: var(--color-accent-strong); border-color: var(--color-accent-strong); }
.btn:active { transform: translate(1px, 1px); }   /* décalage de repérage */
.btn:disabled, .btn[aria-disabled="true"] {
  background-color: var(--color-paper-3); border-color: var(--color-rule);
  color: var(--color-neutral); cursor: not-allowed; transform: none;
}
.btn[data-state="loading"] { background: var(--color-muted); border-color: var(--color-muted); cursor: progress; }
.btn[data-state="error"]   { background: var(--color-negative); border-color: var(--color-negative); }
.btn[data-state="success"] { background: var(--color-positive); border-color: var(--color-positive); }

.btn--ghost { background: transparent; color: var(--color-second); border-color: var(--color-second); }
.btn--ghost:hover { background: var(--color-second); color: var(--color-accent-ink); border-color: var(--color-second); }
.btn--quiet {
  min-height: 40px; padding: var(--space-2xs) var(--space-sm);
  border: 0; background: none; color: var(--color-muted);
  font-size: var(--text-sm); font-weight: 600; text-decoration: underline;
  text-underline-offset: 0.2em; cursor: pointer;
}
.btn--quiet { color: var(--color-second); }
.btn--quiet:hover { color: var(--color-accent); }
.btn--quiet:active { transform: translateY(1px); }
.btn--quiet:disabled { color: var(--color-rule); cursor: not-allowed; }

/* ── Connexion ─────────────────────────────────────────────────────────── */

.gate {
  margin-block: var(--space-2xl);
  padding: var(--space-xl);
  max-width: 34rem;
  border: var(--rule-firm) solid var(--color-ink-strong);
  background-color: var(--color-paper-2);
}
.gate__title { font-size: var(--text-xl); }
.gate__legal {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  font-size: var(--text-sm);
}
.gate__legal a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.gate__lede { margin-top: var(--space-md); color: var(--color-muted); max-width: 48ch; }

/* Onglets connexion / inscription — de vrais boutons, pas des radios cachées :
   le motif radio+:checked fait sauter la page au clic sur mobile. */
.gate__tabs { margin-top: var(--space-lg); }
.chip--tab {
  min-height: 44px;
  padding: var(--space-2xs) var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule-firm);
  border-radius: var(--radius-md);
  background: none;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
}
.chip--tab:hover { background-color: var(--color-paper-2); }
.chip--tab:active { transform: translateY(1px); }
.chip--tab:disabled { color: var(--color-neutral); border-color: var(--color-rule); cursor: not-allowed; }
.chip--tab[aria-pressed="true"] {
  background: var(--color-accent-field);
  border-color: var(--color-accent-field);
  color: var(--color-accent-ink);
}

#gate-form, #forgot-form { margin-top: var(--space-lg); }
#gate-form .btn, #forgot-form .btn { margin-right: var(--space-md); }

.field { margin-top: var(--space-lg); }
/* Une seule langue d'étiquette entre le site et l'app : petites capitales à la
   machine à écrire, encre bleue. */
.field label {
  display: block; margin-bottom: var(--space-2xs);
  font-family: var(--font-figure);
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-second);
}
.field input[type="email"], .field input[type="text"], .field input[type="number"],
.field input[type="password"], .field select {
  width: 100%; min-height: 48px;
  padding: var(--space-sm) var(--space-md);
  border: var(--rule-firm) solid var(--color-rule-firm);
  border-radius: var(--radius-sm);
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body); font-size: var(--text-base);
  transition: border-color var(--dur-short) var(--ease-out);
}
.field input::placeholder, .field textarea::placeholder { color: var(--color-neutral); opacity: 1; }
.field input:hover, .field select:hover { border-color: var(--color-muted); }
.field input:disabled, .field select:disabled { background-color: var(--color-paper-3); cursor: not-allowed; }
.field[data-state="error"] input   { border-color: var(--color-negative); }
.field[data-state="success"] input { border-color: var(--color-positive); }
.field__hint { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-neutral); }

.msg { min-height: 1.5em; margin-top: var(--space-md); font-size: var(--text-sm); }
.msg[data-state="error"]   { color: var(--color-negative); }
.msg[data-state="success"] { color: var(--color-positive); }

/* ── Compte ────────────────────────────────────────────────────────────── */

.account { padding-block: var(--space-xl) var(--space-3xl); }

.account__head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.account__who { font-size: var(--text-lg); }
.account__meta { font-size: var(--text-sm); color: var(--color-muted); }
.account__meta strong { color: var(--color-ink-strong); }

.upsell {
  margin-top: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-paper-2);
  border-top: var(--rule-firm) solid var(--color-accent);
  font-size: var(--text-sm);
}
.upsell strong { color: var(--color-ink-strong); }

/* Deux colonnes : les critères à gauche, ce qu'ils donnent à droite. */
.workspace {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-3xl);
  margin-top: var(--space-xl);
  align-items: start;
}

.builder__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding-top: var(--space-md);
  border-top: var(--rule-slab) solid var(--color-ink-strong);
}
.builder__title { font-size: var(--text-lg); }
.builder__intro { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); }

fieldset { margin: var(--space-xl) 0 0; padding: 0; border: 0; }
legend {
  padding: 0 0 var(--space-xs);
  font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-strong);
}

.row { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.row > .field { flex: 1 1 12rem; min-width: 0; margin-top: 0; }

/* Puces à cocher — quartiers, séries, types d'événement */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.chip { position: relative; }
.chip input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.chip span {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: var(--space-2xs) var(--space-md);
  border: var(--rule-hair) solid var(--color-rule-firm);
  border-radius: var(--radius-md);
  font-size: var(--text-sm); white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
}
.chip input:hover + span { background-color: var(--color-paper-2); }
.chip input:checked + span {
  background: var(--color-accent-field); border-color: var(--color-accent-field);
  color: var(--color-accent-ink); font-weight: 600;
}
.chip input:focus-visible + span { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.chip input:disabled + span { color: var(--color-neutral); border-color: var(--color-rule); cursor: not-allowed; }
.chip__n { margin-left: var(--space-xs); color: var(--color-neutral); font-variant-numeric: tabular-nums; }
.chip input:checked + span .chip__n { color: var(--color-accent-ink); opacity: 0.8; }

.check { display: flex; align-items: center; gap: var(--space-sm); min-height: 44px; }
.check input { width: 22px; height: 22px; accent-color: var(--color-accent); flex: none; }

/* ── Sélecteur de quartiers ───────────────────────────────────────────────
   38 entrées. Une liste déroulante cacherait ce qui est coché ; 38 cases d'un
   coup forment un mur. Les dix premières (deux tiers du stock) sont là tout de
   suite, le champ trouve les autres, et ce qui est coché remonte toujours en
   tête — la sélection reste lisible sans rien ouvrir. */

.picker__search {
  width: 100%; min-height: 48px;
  margin-bottom: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: var(--rule-firm) solid var(--color-rule-firm);
  border-radius: var(--radius-sm);
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body); font-size: var(--text-base);
  transition: border-color var(--dur-short) var(--ease-out);
}
.picker__search:hover { border-color: var(--color-muted); }
.picker__search::-webkit-search-cancel-button { cursor: pointer; }
.picker__none { padding-block: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.picker__foot {
  margin-top: var(--space-xs);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg);
}

/* ── Mots-clés en étiquettes ──────────────────────────────────────────────
   Le champ ressemble à un champ de saisie et se comporte comme lui : on clique
   n'importe où dedans, on tape, l'espace ferme le mot. */

.tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs);
  min-height: 48px;
  padding: var(--space-2xs) var(--space-sm);
  border: var(--rule-firm) solid var(--color-rule-firm);
  border-radius: var(--radius-sm);
  background-color: var(--color-paper);
  cursor: text;
  transition: border-color var(--dur-short) var(--ease-out);
}
.tags:hover { border-color: var(--color-muted); }
.tags:focus-within { border-color: var(--color-ink); }
.tags input {
  flex: 1 1 6rem; min-width: 6rem;
  min-height: 2.25rem; padding: 0;
  border: 0; background: none; outline: none;
  font-family: var(--font-body); font-size: var(--text-base); color: var(--color-ink);
}
.tag {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  padding: var(--space-3xs) var(--space-2xs) var(--space-3xs) var(--space-sm);
  border-radius: var(--radius-md);
  background: var(--color-ink-strong);
  color: var(--color-paper);
  font-size: var(--text-sm); font-weight: 600;
  white-space: nowrap;
}
.tag__x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem;       /* cible tactile, pas une croix de 8px */
  padding: 0; border: 0; border-radius: var(--radius-sm);
  background: none; color: inherit; cursor: pointer;
  opacity: 0.7; transition: opacity var(--dur-short) var(--ease-out);
}
.tag__x svg { width: 0.75rem; height: 0.75rem; }
.tag__x:hover { opacity: 1; }
.tag__x:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 1px; }

.builder__actions {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-md);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
}

/* ── Aperçu ────────────────────────────────────────────────────────────── */

.preview { position: sticky; top: var(--space-lg); }
.preview__box {
  border: var(--rule-firm) solid var(--color-rule-firm);
  background-color: var(--color-paper-2);
  padding: var(--space-lg);
}
.preview__title { font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); }
/* Le grand chiffre est la CADENCE, pas le stock : « ≈ 2 par semaine » répond à
   la seule question qu'on se pose en réglant un meklējums. L'unité reste
   attachée au nombre mais en corps de texte — elle se lit, elle ne pèse pas. */
.preview__n {
  margin-top: var(--space-sm);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs);
  color: var(--color-ink-strong);
}
.preview__approx {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-muted);
}
.preview__figure {
  font-family: var(--font-figure);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xl); font-weight: 600; line-height: 1;
}
/* L'unité respire, le signe « environ » non : « ≈ » qualifie le nombre et lui
   colle, « par jour » est un mot à part. */
.preview__unit {
  margin-inline-start: var(--space-xs); font-size: var(--text-base); font-weight: 600; color: var(--color-muted); }
.preview__q { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.preview__cap {
  margin-top: var(--space-lg);
  font-size: var(--text-sm); color: var(--color-neutral);
}
.preview__cap + .hits { margin-top: var(--space-xs); }
.preview__warn { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-negative); font-weight: 600; }

.hits { margin-top: var(--space-lg); }
.hit { padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.hit__title { font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; line-height: 1.25; }
.hit__title a { color: var(--color-ink-strong); text-decoration: none; }
.hit__title a:hover { color: var(--color-accent); text-decoration: underline; }
.hit__meta { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); }
.hit__price { margin-top: var(--space-2xs); font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--color-ink-strong); font-weight: 600; }
.hit__delta { padding: 0 var(--space-2xs); background: var(--color-accent-dim); color: var(--color-accent); font-weight: 700; }
.hit__delta--up { color: var(--color-muted); }

/* ── Filtres existants ─────────────────────────────────────────────────── */

/* ── Les meklējumi — ce qu'on vient gérer ──────────────────────────────────
   En haut de l'écran, avant le formulaire. Chaque ligne dit son nom, ce
   qu'elle surveille en toutes lettres, combien elle a rapporté aujourd'hui, et
   porte ses trois actions. C'est un tableau de bord, pas une liste d'entrées. */

.searches { margin-top: var(--space-xl); }
.searches__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
}
.searches__title { font-size: var(--text-lg); }
.searches__lede { margin-top: var(--space-2xs); max-width: 62ch; font-size: var(--text-sm); color: var(--color-muted); }
.searches__list { margin-top: var(--space-lg); }
.searches__empty {
  padding: var(--space-lg);
  background-color: var(--color-paper-2);
  border-top: var(--rule-firm) solid var(--color-rule-firm);
  color: var(--color-muted);
}

.search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-md) var(--space-lg);
  padding-block: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.search:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.search--paused .search__name,
.search--paused .search__spec { color: var(--color-neutral); }

.search__name { font-family: var(--font-display); font-size: var(--text-md); font-weight: 600; line-height: 1.2; }
.search__badge {
  margin-inline-start: var(--space-xs);
  padding: var(--space-3xs) var(--space-xs);
  border: var(--rule-hair) solid var(--color-rule-firm);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-neutral);
  white-space: nowrap;
}
.search__spec { margin-top: var(--space-3xs); font-size: var(--text-sm); color: var(--color-muted); }

.search__count { text-align: right; white-space: nowrap; }
.search__n {
  display: block;
  font-variant-numeric: tabular-nums;
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1;
  color: var(--color-ink-strong);
}
.search__count small { display: block; margin-top: var(--space-3xs); font-size: var(--text-xs); color: var(--color-neutral); }
.search__actions { display: flex; align-items: center; gap: var(--space-sm); }

/* ── Réglages du compte ────────────────────────────────────────────────── */

.settings__title {
  margin-top: var(--space-3xl);
  padding-top: var(--space-md);
  border-top: var(--rule-slab) solid var(--color-ink-strong);
  font-size: var(--text-lg);
}
.settings__title + .referral { margin-top: var(--space-lg); padding-top: 0; border-top: 0; }

/* ── Historique ────────────────────────────────────────────────────────── */

.recent { margin-top: var(--space-3xl); }
.recent__title { font-size: var(--text-md); }
.recent__scope {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-md);
  margin-top: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  border: var(--rule-firm) solid var(--color-second);
  background-color: var(--color-paper-2);
  font-family: var(--font-figure);
  font-size: var(--text-sm);
  color: var(--color-ink-strong);
}
.recent__list { margin-top: var(--space-md); }
.recent__empty { padding-block: var(--space-md); color: var(--color-muted); }

/* ── Canal ─────────────────────────────────────────────────────────────── */

.channel { margin-top: var(--space-3xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.channel__title { font-size: var(--text-md); }
.channel__form { margin-top: var(--space-md); display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: flex-end; }
.channel__form .field { flex: 1 1 16rem; margin-top: 0; }

/* ── Choix du plan ─────────────────────────────────────────────────────── */

.planpick { padding-block: var(--space-3xl); max-width: 60rem; }
.gate__plan {
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
}

.plans {
  margin-top: var(--space-xl);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}
.plan {
  display: flex;
  flex-direction: column;
  padding: var(--space-lg);
  background-color: var(--color-paper-2);
  border-top: var(--rule-slab) solid var(--color-rule-firm);
}
.plan--featured { border-top-color: var(--color-accent); }
.plan__name { font-family: var(--font-display); font-size: var(--text-md); font-weight: 600; }
.plan__price {
  margin-top: var(--space-2xs);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-ink-strong);
}
.plan__per { font-size: var(--text-xs); color: var(--color-neutral); font-weight: 400; }
.plan__what { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.plan__offer {
  margin-top: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  background-color: var(--color-paper);
  border-inline-start: var(--rule-firm) solid var(--color-accent);
  font-size: var(--text-sm);
  color: var(--color-ink);
}
/* Le bouton se colle en bas : trois cartes de hauteurs différentes avec des
   boutons à trois hauteurs différentes se comparent mal. */
.plan__action { margin-top: auto; padding-top: var(--space-lg); }
.plan__action .btn, .plan__action .btn--ghost { width: 100%; }

@media (max-width: 52rem) {
  .plans { grid-template-columns: minmax(0, 1fr); }
}

/* ── Le menu ───────────────────────────────────────────────────────────────
   Quatre onglets plutôt qu'une colonne de sept blocs. On vient pour une chose
   à la fois : ce qu'on cherche, où ça arrive, ce qu'on a reçu, son compte. */

.tabs {
  margin-top: var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  border: var(--rule-firm) solid var(--color-ink-strong);
}
.tab {
  min-height: 48px;                      /* cible tactile confortable */
  padding: var(--space-sm) var(--space-lg);
  border: 0;
  border-inline-end: var(--rule-hair) solid var(--color-ink-strong);
  background-color: var(--color-paper-2);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;                   /* jamais un libellé sur deux lignes */
  cursor: pointer;
  transition: color var(--dur-short) var(--ease-out);
}
.tab:last-child { border-inline-end: 0; }
.tab:hover, .tab.is-hover { background-color: var(--color-paper-3); }
.tab:active { color: var(--color-accent-strong); }
.tab:disabled { color: var(--color-rule); cursor: not-allowed; }
.tab[aria-selected="true"] {
  background: var(--color-accent-field);
  color: var(--color-accent-ink);
}
.tab__n {
  margin-inline-start: var(--space-2xs);
  font-family: var(--font-figure);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  color: inherit;
  opacity: 0.75;
}

.panel { padding-top: var(--space-lg); }
.panel:focus { outline: none; }
/* Les espacements avaient été réglés pour une colonne unique où il fallait
   séparer des sujets sans rapport. Dans un onglet, tout parle de la même
   chose : on resserre, sinon on scrolle dans le vide. */
.panel .channel, .panel .referral, .panel .recent, .panel .searches {
  margin-top: var(--space-xl);
}
.panel > *:first-child { margin-top: 0; }
/* Le premier bloc d'un onglet n'a pas besoin du filet de séparation qui
   marquait la césure quand tout se suivait dans une seule colonne. */
.panel > section:first-child,
.panel > .searches:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* ── Le plan, visible ──────────────────────────────────────────────────── */

/* L'en-tête se replie plutôt que de laisser la ligne d'usage sortir de
   l'écran — elle était tronquée à droite sur 1280 px. */
.account__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-lg); }
.account__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); min-width: 0; }

.badge {
  display: inline-block;
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-sm);
  background: var(--color-ink-strong);
  color: var(--color-paper);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge--paid { background: var(--color-accent); color: var(--color-accent-ink); }

.planbox {
  padding: var(--space-lg);
  background-color: var(--color-paper-2);
  border-top: var(--rule-slab) solid var(--color-ink-strong);
}
.planbox__label {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-neutral);
}
.planbox__name {
  margin-top: var(--space-2xs);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-ink-strong);
}
.planbox__what { margin-top: var(--space-xs); max-width: 62ch; color: var(--color-muted); }

/* ── Notifications ─────────────────────────────────────────────────────────
   Le bandeau du haut n'est pas un rappel de plus : sans notification autorisée,
   le service n'envoie rien du tout. Il porte donc l'accent, et disparaît dès
   qu'un appareil est inscrit. */

/* ── Mise en route ────────────────────────────────────────────────────────
   Un compte sans paziņojumi autorisés ne reçoit rien : c'était dit par un
   bandeau d'une ligne, lu comme un avertissement de plus et jamais suivi. Trois
   pas numérotés, un seul bouton à la fois — celui du premier pas qui manque —
   et le bloc reste en tête d'écran tant que le service ne peut pas fonctionner. */

/* Tant qu'il manque un pas, le bloc porte l'encre rouge sur ses quatre côtés :
   dans ce monde, le rouge est ce sur quoi on doit agir, et un compte qui ne
   peut rien recevoir doit se voir depuis l'autre bout de la page. Une fois les
   trois pas faits, il repasse au filet noir : il n'y a plus rien à faire. */
.setup {
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  background-color: var(--color-paper-2);
  border: var(--rule-firm) solid var(--color-accent-field);
  border-top-width: var(--rule-slab);
}
.setup[data-done="all"] {
  border-color: var(--color-ink-strong);
}
.konts__redo { margin-top: var(--space-lg); }
.setup__head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--space-xs) var(--space-md);
}
.setup__title { font-size: var(--text-md); }
.setup__count {
  font-family: var(--font-figure); font-variant-numeric: tabular-nums;
  font-size: var(--text-sm); font-weight: 600; color: var(--color-muted);
  white-space: nowrap;
}
.setup__steps { margin-top: var(--space-lg); }

.step {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--space-md);
  padding-block: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.step:first-child { border-top: 0; padding-top: 0; }
.step__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem;
  border: var(--rule-firm) solid var(--color-ink-strong);
  font-family: var(--font-figure); font-size: var(--text-sm); font-weight: 600;
  line-height: 1; color: var(--color-neutral);
}
.step__mark svg { width: 1rem; height: 1rem; }
.step--done .step__mark {
  border-color: var(--color-positive);
  color: var(--color-positive);
}
.step--now .step__mark { border-color: var(--color-accent); color: var(--color-accent); }
.step__title { font-weight: 600; color: var(--color-ink-strong); line-height: 1.4; }
.step--done .step__title { color: var(--color-muted); font-weight: 400; }
.step__why { margin-top: var(--space-2xs); max-width: 54ch; font-size: var(--text-sm); color: var(--color-muted); }
.step__act { margin-top: var(--space-md); }
/* Ce qui bloque, quand le bouton ne peut rien faire : navigateur qui a déjà
   refusé, navigateur trop ancien. Écrit à la place du bouton, jamais à côté. */
.step__fix {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-ink-strong);
  max-width: 54ch;
  font-size: var(--text-sm);
  color: var(--color-ink);
}

.setup__done {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-sm);
  color: var(--color-positive);
  font-weight: 600;
}
.setup__dismiss { margin-top: var(--space-sm); }

/* ── Notifications ──────────────────────────────────────────────────────── */

.notif { margin-top: var(--space-lg); }
/* La pastille dit l'état avant qu'on ait lu la phrase. */
.notif__state {
  display: flex; align-items: center; gap: var(--space-sm);
  font-weight: 600; color: var(--color-ink-strong);
}
.notif__state::before {
  content: ""; flex: none; width: 0.75rem; height: 0.75rem;
  background: var(--color-rule-firm);
}
.notif__state[data-on="true"]::before { background: var(--color-positive); }
.notif__actions { margin-top: var(--space-md); display: flex; flex-wrap: wrap; gap: var(--space-md); }
.notif__hint { margin-top: var(--space-sm); max-width: 58ch; font-size: var(--text-sm); color: var(--color-neutral); }

.alt {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.notif__alt { font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); }

/* iPhone : les trois gestes, avec l'icône qu'on doit chercher du regard. */
.guide {
  margin-top: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule-firm);
}
.step__body > .guide { margin-top: var(--space-md); }
.guide__title { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-strong); }
.guide__steps { margin-top: var(--space-sm); }
.guide__steps li {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) 1.5rem;
  align-items: center;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  border-top: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-sm);
}
.guide__steps li:first-child { border-top: 0; }
.guide__n {
  font-family: var(--font-figure); font-weight: 600;
  color: var(--color-accent); font-variant-numeric: tabular-nums;
}
.guide__icon { width: 1.5rem; height: 1.5rem; color: var(--color-ink-strong); }

/* Sur un téléphone, ce guide était imbriqué trois fois : marge de la carte,
   retrait du pas numéroté, puis sa propre grille. Il restait 135 px pour le
   texte, soit un mot par ligne. Il reprend donc toute la largeur du bloc et
   resserre ses gouttières — c'est le seul endroit de l'app où l'on doit lire
   une consigne en tenant l'appareil dont on parle. */
@media (max-width: 40rem) {
  .setup { padding: var(--space-md); }
  .step { grid-template-columns: 1.75rem minmax(0, 1fr); gap: var(--space-xs) var(--space-sm); }
  .step__mark { width: 1.75rem; height: 1.75rem; }
  .step__body > .guide {
    margin-inline-start: calc(-1.75rem - var(--space-sm));
    padding: var(--space-sm) var(--space-md);
  }
  .guide__steps li {
    grid-template-columns: 1.25rem minmax(0, 1fr) 1.25rem;
    gap: var(--space-xs);
  }
  .guide__icon { width: 1.25rem; height: 1.25rem; }
}

/* ── Abonnement ────────────────────────────────────────────────────────── */

.billing__lede { margin-top: var(--space-2xs); max-width: 58ch; color: var(--color-muted); font-size: var(--text-sm); }
.billing__actions { margin-top: var(--space-md); display: flex; flex-wrap: wrap; gap: var(--space-md); }
.billing__secure { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-neutral); }

/* ── Parrainage ────────────────────────────────────────────────────────── */

.referral { margin-top: var(--space-3xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.referral__title { font-size: var(--text-md); }
.referral__lede { margin-top: var(--space-2xs); max-width: 58ch; color: var(--color-muted); font-size: var(--text-sm); }

.referral__box {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background-color: var(--color-paper-2);
  border-top: var(--rule-firm) solid var(--color-rule-firm);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-md);
}
.referral__label {
  display: block;
  margin-bottom: var(--space-2xs);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-neutral);
}
/* Deuxième et dernier emplacement de la fonte outlier dans l'app : un code
   qu'on recopie à la main a besoin de chiffres et de lettres de même largeur. */
.referral__code {
  font-family: var(--font-figure);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--color-ink-strong);
}
.referral__linkwrap { flex: 1 1 20rem; min-width: 0; }
.referral__linkwrap input {
  width: 100%;
  min-height: 48px;
  padding: var(--space-sm) var(--space-md);
  border: var(--rule-hair) solid var(--color-rule-firm);
  border-radius: var(--radius-sm);
  background-color: var(--color-paper);
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
}

.referral__stats {
  margin-top: var(--space-lg);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
.referral__stat {
  padding-inline: var(--space-md);
  border-inline-start: var(--rule-hair) solid var(--color-rule);
}
.referral__stat:first-child { padding-inline-start: 0; border-inline-start: 0; }
.referral__stat dt { font-size: var(--text-sm); color: var(--color-muted); }
.referral__stat dd {
  margin: var(--space-3xs) 0 0;
  font-variant-numeric: tabular-nums;
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-ink-strong);
}
.referral__note { margin-top: var(--space-md); max-width: 58ch; font-size: var(--text-sm); color: var(--color-neutral); }

/* ── Reprises responsives ──────────────────────────────────────────────── */

@media (max-width: 60rem) {
  .workspace { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  /* Sur une colonne, un panneau collant masquerait le formulaire qu'il commente. */
  .preview { position: static; }
  .account { padding-block: var(--space-lg) var(--space-2xl); }
  .searches, .recent, .channel, .referral { margin-top: var(--space-2xl); }
  .settings__title { margin-top: var(--space-2xl); }
}

@media (max-width: 48rem) {
  /* Le compteur et les actions passent sous le nom : trois colonnes sur un
     écran étroit écrasent le résumé, qui est justement ce qui permet de
     reconnaître sa recherche. */
  .search { grid-template-columns: minmax(0, 1fr) auto; }
  .search__actions { grid-column: 1 / -1; flex-wrap: wrap; }
}

@media (max-width: 40rem) {
  .gate { padding-block: var(--space-2xl); }
  .account__head { flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
  .builder__actions .btn, .channel__form .btn, .referral__box .btn { width: 100%; }
  .row > .field { flex-basis: 100%; }
  /* Trois colonnes de chiffres sous 40rem donneraient des libellés sur trois
     lignes : on empile, et les filets deviennent horizontaux. */
  .referral__stats { grid-template-columns: minmax(0, 1fr); }
  .referral__stat {
    padding-inline: 0;
    padding-block: var(--space-sm);
    border-inline-start: 0;
    border-top: var(--rule-hair) solid var(--color-rule);
  }
  .referral__stat:first-child { border-top: 0; padding-block-start: 0; }
}

@media (max-width: 40rem) {
  /* Quatre colonnes égales, et SURTOUT aucun défilement horizontal.
     Le menu était une bande `overflow-x: auto` : au doigt, un balayage vers le
     bas n'est jamais parfaitement vertical, et iOS attribuait la composante
     horizontale à la bande — les libellés glissaient de côté pendant qu'on
     faisait défiler la page. Sans conteneur défilant, le geste n'a plus rien à
     attraper. Le corps se contracte avec la largeur pour que « Paziņojumi »
     tienne jusque sur un écran de 320 px. */
  .tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    overflow: visible;
  }
  .tab {
    padding-inline: var(--space-3xs);
    font-size: clamp(0.6875rem, 3.1vw, var(--text-sm));
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .tab__n { margin-inline-start: var(--space-3xs); font-size: inherit; }
  .account__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
}