/* Sigmi 1.0 blok 6c (30 sep 2026): welkom, overstap en herstelsleutel in de iPhone-app (voorbeeldplaten A–C).
   Alleen kleurvariabelen uit design.css/palettes.css, zodat elk palet en het donkere thema meewerken. */

/* A · "Ik gebruik Sigmi al op mijn Mac": omlijnde tweede knop direct onder "Start met Sigmi" (zelfde maat en vorm).
   Specifieker dan .first-run-login .first-run-route button (onboarding.css/mobile.css), die hem anders donker vult. */
.first-run-login .first-run-route.first-run-app-only { margin-top: 10px; }
.first-run-login .first-run-route button.sigmi-app-migrate {
  border-color: var(--line); background: var(--paper); color: var(--ink);
}
.first-run-login .first-run-route button.sigmi-app-migrate:hover { background: var(--hover); }

/* B en C · hoofdknop gelijk aan de bestaande eerste-startstappen (onboarding.css, .first-run-finish .first-run-primary). */
.sigmi-app-step .first-run-primary { min-height: 48px; border-color: #333; border-radius: 9px; background: #333; box-shadow: none; }
.sigmi-app-step .first-run-primary:hover { border-color: #171717; background: #171717; }

/* B · de drie stappen als één rustige kaart. */
.sigmi-app-steps {
  margin: 20px 0 18px; padding: 12px 16px 12px 36px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--paper);
  font-size: 14px; line-height: 1.9; color: var(--ink);
}

/* C · de sleutel: gelijke tekenbreedte, drie regels van drie groepen, goed leesbaar om over te nemen. */
.sigmi-recovery-key {
  display: grid; gap: 4px; margin: 18px 0 12px; padding: 16px 12px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--paper);
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 17px; letter-spacing: 0.08em;
  text-align: center; color: var(--ink); user-select: text; -webkit-user-select: text;
}
.sigmi-recovery-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.sigmi-recovery-actions .first-run-secondary-action {
  min-height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink);
  font-size: 14px;
}

/* Blok 6d-2a (30 sep 2026) · G · herstellen: het invoerveld gelijk aan de getoonde sleutel (plaat C), status eronder.
   16px voorkomt dat iOS inzoomt bij het typen. */
.sigmi-restore-key {
  display: block; width: 100%; box-sizing: border-box; margin: 18px 0 8px; padding: 12px 14px; resize: none;
  border: 1px solid var(--ink); border-radius: 12px; background: var(--paper); color: var(--ink);
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 16px; line-height: 1.5; letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sigmi-restore-key:read-only { color: var(--muted); }
.sigmi-restore-status { min-height: 21px; margin: 0 0 16px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.sigmi-restore-status[data-soort="goed"] { color: var(--green); }
.sigmi-restore-status[data-soort="goed"]::before { content: "✓ "; }
.sigmi-restore-status[data-soort="fout"] { color: var(--danger); }
.sigmi-recovery-note {
  margin: 14px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper);
  color: var(--ink); font-size: 14px; line-height: 1.5;
}

/* H · Computers: één kaart met regels (naam en tijden links, Ontkoppel rechts), daaronder de back-upstand. */
.sigmi-computers { margin-bottom: 14px; padding: 2px 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); }
.sigmi-computer { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 8px 0; border-top: 1px solid var(--line); }
.sigmi-computer:first-child { border-top: 0; }
.sigmi-computer-text { display: grid; gap: 2px; min-width: 0; }
.sigmi-computer-text strong { font-weight: 500; font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }
.sigmi-computer-text small, .sigmi-backup-card small { color: var(--muted); font-size: 13px; line-height: 1.45; }
/* #settingsView ervoor: de algemene knopstijl van Instellingen maakt hem anders donker en vet (plaat H: accentkleur). */
#settingsView .sigmi-computer-unlink {
  flex: none; min-height: 44px; padding: 0 4px; border: 0; background: transparent; box-shadow: none;
  color: var(--accent); font-size: 14px; font-weight: 400;
}
.sigmi-computers-empty { margin: 0; padding: 14px 0; color: var(--muted); font-size: 14px; }
.sigmi-backup-card { display: grid; gap: 2px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); }
.sigmi-backup-card strong { font-weight: 500; font-size: 15px; color: var(--ink); }
.sigmi-backup-card .sigmi-backup-error { color: var(--danger); }

/* Blok 6d-2b (30 sep 2026) · H: "Computer koppelen" als hoofdknop onder de lijst (plaat H), met de uitleg eronder.
   E: "Klopt dit?" vervangt tijdens het koppelen de inhoud van Computers (plaat E). #settingsView ervoor: de algemene
   knopstijl van Instellingen wint anders. */
#settingsView .sigmi-computers-pair,
#settingsView .sigmi-pair-yes {
  display: block; width: 100%; min-height: 48px; margin: 0 0 8px; border: 1px solid #333; border-radius: 12px;
  background: #333; color: #fffef9; box-shadow: none; font-size: 15px; font-weight: 500;
}
#settingsView .sigmi-computers-pair:hover, #settingsView .sigmi-pair-yes:hover { border-color: #171717; background: #171717; }
#settingsView .sigmi-pair-no {
  display: block; width: 100%; min-height: 48px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--paper); color: var(--ink); box-shadow: none; font-size: 15px; font-weight: 400;
}
.sigmi-computers-hint { margin: 0 0 14px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.sigmi-pair-check h2 { margin: 4px 0 14px; font-family: var(--font-display, Georgia, serif); font-size: 26px; font-weight: 400; color: var(--ink); }
.sigmi-pair-card {
  display: grid; justify-items: center; gap: 4px; margin-bottom: 18px; padding: 18px 16px;
  border: 1px solid var(--line); border-radius: 18px; background: var(--paper); text-align: center;
}
.sigmi-pair-card small { color: var(--muted); font-size: 13px; }
.sigmi-pair-card strong { font-size: 36px; font-weight: 500; letter-spacing: 0.22em; color: var(--ink); font-variant-numeric: tabular-nums; }
#settingsView > .is-pairing .settings-panel-hero,
#settingsView[data-mobile-pane] > .is-pairing .settings-panel-hero,  /* wint van mobile.css (zelfde gewicht, later geladen) */
#settingsView > .is-pairing .sigmi-computers,
#settingsView > .is-pairing .sigmi-computers-pair,
#settingsView > .is-pairing .sigmi-computers-hint,
#settingsView > .is-pairing .sigmi-backup-card { display: none; }