/* modules/common/backupRestore.css — the Sync & Backup Center dialog's action cards.
   Extracted from index.css to live next to backupRestore.js. */

.modal-body-scroll {
  max-height: 70vh;
  overflow-y: auto;
  padding-right: 4px;
}
.dialog-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
  margin-bottom: 16px;
}
.backup-actions {
  gap: 16px;
  margin-bottom: 20px;
}
.action-card {
  text-align: center;
  padding: 20px;
}
.backup-icon-large {
  font-size: 32px;
  margin-bottom: 12px;
}
.action-card h4 {
  font-size: 15px;
  margin-bottom: 4px;
  font-weight: 600;
}
.action-card p {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 16px;
  line-height: 1.4;
}
.file-upload-wrapper {
  position: relative;
}
.file-input-hidden {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.status-msg {
  font-size: 11px;
  margin-top: 6px;
  font-weight: 600;
}
.drive-sync-interval-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-muted);
}
.drive-sync-interval-input {
  width: 56px;
  text-align: center;
  padding: 4px 6px;
}

/* Preview-build warning on the backup/sync surface. Amber is the warning cue used consistently for
   preview markers, and it stays a full sentence rather than an icon because the gap it describes —
   that preview-only fields are not written into the file — is not guessable from a symbol. */
.backup-preview-warning {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
}

.backup-preview-warning i {
  flex-shrink: 0;
  margin-top: 2px;
}

/* No `prefers-color-scheme` override any more, and that is the point: this app themes by CHOICE —
   five palettes the trainer picks between — so the operating system's light/dark preference is a
   second axis that can only contradict the first. The amber now comes from `--warning`, which every
   theme defines for itself, so a warning on the Midnight palette is that palette's amber whatever
   the phone is set to. */

/* Restore confirmation. Shown only when a restore would overwrite something, because a warning that
   appears every time is a warning nobody reads. The destructive action is styled as destructive and
   is NOT the default-focused one. */
.restore-confirm {
  margin: 0 0 14px;
  padding: 12px;
  border-radius: 8px;
  background: var(--danger-light);
  border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
  font-size: 13px;
  line-height: 1.45;
}

.restore-confirm p {
  margin: 0 0 10px;
}

.restore-confirm-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Real padding, not just text: this is a decision made on a phone with sweaty hands. */
.restore-confirm-actions button {
  min-height: 44px;
  padding: 0 16px;
}

/* The support data-wipe. Rows a person reads under pressure, on the phone to someone who
   is helping them: real targets, real tick boxes, nothing decorative. */
.data-wipe-targets {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 0 12px;
}
.data-wipe-target {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
}
.data-wipe-target input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}
/* Said every time, never conditionally — the moment it is omitted "because this device has no Drive
   connection", somebody reads the dialog as a promise about the copy they emailed last week. */
.data-wipe-unreachable {
  margin: 4px 0 12px;
  padding-left: 20px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* The backup password dialog (modules/common/backupPassword.js). The password is SHOWN, not dotted,
   so it can be read off the screen and written on paper — so it needs to be legible at arm's length
   on a phone, which is what the larger size and the letter spacing are for. */
#backup-pw-value {
  font-size: 16px;
  letter-spacing: 0.02em;
}

/* Generate and copy sit side by side above the warning. Real targets: this is tapped one-handed. */
.backup-pw-actions-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}
.backup-pw-actions-row button {
  flex: 1 1 auto;
  min-height: 44px;
}

/* The whole row is the target, not just the box. */
.backup-pw-remember {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
  font-size: 13px;
}