/* Safe-specific setup, devices and integrations. The settings layout is
   shared with Account in the platform frame; controls come from the kit. */
/* The Safe's steps in its connection card: the choice of where it lives, and
   the points that explain its admin password, each beside its icon. */
[data-flow-step] > .tp-choice-grid > .tp-choice > .tp-icon,
.tp-safe-points > li > .tp-icon { color: var(--tp-accent-ink); }

.tp-safe-points { display: grid; gap: var(--tp-space-3); margin: 0; padding: 0; list-style: none; color: var(--tp-ink); line-height: var(--tp-leading-body); }

.tp-safe-points > li { display: flex; align-items: start; gap: var(--tp-space-3); }

.tp-safe-points > li > .tp-icon { margin-block-start: .15em; }

/* The paired devices: one row each, its icon, name and state, and its actions. */
.tp-safe-devices { display: grid; gap: var(--tp-space-2); margin: 0; padding: 0; list-style: none; }

.tp-safe-device {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--tp-space-3);
  padding: var(--tp-space-3) var(--tp-space-4);
  border: var(--tp-line-width) solid var(--tp-line);
  border-radius: var(--tp-radius);
}

.tp-safe-device > .tp-icon { color: var(--tp-accent-ink); }

.tp-safe-device-text { display: grid; gap: var(--tp-space-1); min-inline-size: 0; }

.tp-safe-device-text > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The state and the pairing date, separated by a dot that is not a word. */
.tp-safe-device-meta { display: flex; flex-wrap: wrap; gap: var(--tp-space-2); }

.tp-safe-device-meta > span + span::before { content: "·"; margin-inline-end: var(--tp-space-2); }

.tp-safe-device[data-connected="true"] [data-safe-device-state] { color: var(--tp-accent-ink); }

.tp-safe-device-actions { display: flex; flex-wrap: wrap; gap: var(--tp-space-2); }

@container frame (max-width: 40rem) {
.tp-safe-device { grid-template-columns: auto minmax(0, 1fr); }

.tp-safe-device-actions { grid-column: 2; }
}

/* Management fields share the kit; this screen only owns their arrangement. */
.tp-safe-integrations { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--tp-space-4); }
.tp-safe-integration { display: grid; align-content: start; gap: var(--tp-space-3); min-inline-size: 0; }
.tp-safe-integration > header { display: flex; align-items: center; gap: var(--tp-space-3); }
.tp-safe-integration > header > img { object-fit: contain; flex: none; }
.tp-safe-integration h2, .tp-safe-integration p { margin: 0; overflow-wrap: anywhere; }
.tp-safe-integration legend { padding-block-end: var(--tp-space-2); color: var(--tp-ink-muted); }
.tp-safe-integration[data-status="partial"] [data-integration-status] { color: var(--tp-accent-ink); }
.tp-safe-integration-switch { display: flex; justify-content: space-between; align-items: center; gap: var(--tp-space-3); cursor: pointer; }
.tp-safe-integration-switch input { appearance: none; inline-size: 2.5rem; block-size: 1.4rem; flex: none; border: var(--tp-line-width) solid var(--tp-line-strong); border-radius: 1rem; background: var(--tp-surface); cursor: pointer; }
.tp-safe-integration-switch input::before { content: ""; display: block; inline-size: 1rem; block-size: 1rem; margin: .15rem; border-radius: 50%; background: var(--tp-ink-muted); }
.tp-safe-integration-switch input:checked { background: var(--tp-accent); }
.tp-safe-integration-switch input:checked::before { margin-inline-start: 1.15rem; background: var(--tp-canvas); }
.tp-safe-integration-switch input:disabled { opacity: .5; cursor: default; }
.tp-safe-integration-switch input:focus-visible { outline: 2px solid var(--tp-accent); outline-offset: 3px; }