/**
 * restore.css — the restore confirmation sheet (components/restore-sheet.js).
 *
 * Self-contained overlay chrome rather than reusing circle.css's .je-sheet:
 * this sheet is opened from Package A's Import screen and from Settings,
 * neither of which loads Package B's stylesheet, and a confirmation dialog
 * that renders unstyled because of a package boundary is a confirmation
 * dialog nobody reads.
 *
 * Every colour is a theme token, so Day and Midnight Amethyst both work with
 * no second palette here. The one deliberately loud element is the replace
 * warning — this is the single screen in the app where a wrong tap costs
 * months of work, so the warning is allowed to shout.
 */

.je-restore-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(13, 27, 42, 0);
  transition: background 200ms ease;
  overscroll-behavior: contain;
}
.je-restore-overlay.is-in { background: rgba(13, 27, 42, 0.5); }
.je-restore-overlay.is-closing { background: rgba(13, 27, 42, 0); }

.je-restore-panel {
  width: 100%;
  max-width: 520px;
  max-height: 92vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 18px calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--color-surface, #fff);
  color: var(--color-text, #16232B);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -12px 40px rgba(13, 27, 42, 0.22);
  transform: translateY(100%);
  transition: transform 220ms cubic-bezier(0.2, 0, 0, 1);
}
.je-restore-overlay.is-in .je-restore-panel { transform: translateY(0); }
.je-restore-overlay.is-closing .je-restore-panel { transform: translateY(100%); }

.je-restore-handle {
  width: 40px; height: 4px;
  margin: 4px auto 12px;
  border-radius: 999px;
  background: var(--color-border, #E4E0D8);
}

.je-restore-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.je-restore-sub {
  margin: 4px 0 14px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--color-text-2, #5C6B75);
  word-break: break-word;
}
.je-restore-loading {
  margin: 24px 0 32px;
  text-align: center;
  color: var(--color-text-2, #5C6B75);
}
.je-restore-problem {
  margin: 8px 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--color-error, #C0453B);
  background: color-mix(in srgb, var(--color-error, #C0453B) 10%, transparent);
}

/* ── before → after ─────────────────────────────────────────────────── */

.je-restore-table {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border, #E4E0D8);
  border-radius: 14px;
  overflow: hidden;
}
.je-restore-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--color-border, #E4E0D8);
}
.je-restore-row:last-child { border-bottom: 0; }
.je-restore-row-label { flex: 1; min-width: 0; color: var(--color-text-2, #5C6B75); }
.je-restore-row-values {
  display: flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.je-restore-before { color: var(--color-text-3, #93A1AA); }
.je-restore-arrow { font-size: 18px !important; color: var(--color-text-3, #93A1AA); }
.je-restore-after { font-weight: 700; }
.je-restore-row.is-changed .je-restore-after { color: var(--jade, #00775F); }
.je-restore-row-note {
  flex: 0 0 100%;
  font-size: 0.75rem;
  color: var(--color-text-3, #93A1AA);
}
.je-restore-row-plain .je-restore-after { font-weight: 600; }

/* ── the loud part ──────────────────────────────────────────────────── */

.je-restore-warn {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  padding: 13px 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--color-error, #C0453B) 40%, transparent);
  background: color-mix(in srgb, var(--color-error, #C0453B) 9%, transparent);
}
.je-restore-warn-icon {
  flex: none;
  font-size: 20px !important;
  color: var(--color-error, #C0453B);
}
.je-restore-warn-body { min-width: 0; }
.je-restore-warn-lead {
  margin: 0 0 4px;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-error, #C0453B);
}
.je-restore-warn-note {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--color-text, #16232B);
}

.je-restore-note {
  margin: 10px 0 0;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--color-text-2, #5C6B75);
}

.je-restore-passphrase {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--color-surface-2, rgba(0, 0, 0, 0.03));
}
.je-restore-passphrase .je-restore-note { margin: 0; }
.je-restore-lock {
  flex: none;
  font-size: 18px !important;
  color: var(--color-text-3, #93A1AA);
}

.je-restore-progress {
  margin: 12px 0 0;
  min-height: 1.2em;
  font-size: 0.82rem;
  color: var(--color-text-2, #5C6B75);
  font-variant-numeric: tabular-nums;
}

.je-restore-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.je-restore-actions .btn {
  flex: 1;
  min-height: 48px;          /* a decision this size gets a big target */
  justify-content: center;
}