/* You tab (screens/you.js): header, Your plan, payment method, colour, data, terms, details, delete. */

.you-section { margin-bottom: var(--sp-sm); }
.you-block { display: block; }
.warn-ink { color: var(--warn); }
.you-good { color: var(--good); }

.you-avatar {
  position: relative; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent); font-weight: 600; line-height: 1;
}
.you-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.you-header {
  display: flex; align-items: center; gap: var(--sp-lg); width: 100%; padding: var(--sp-lg); text-align: left; cursor: pointer;
  background: var(--sunken); border: 1px solid var(--rule); border-radius: var(--r-card);
}
.you-header .heading, .you-header .caption { display: block; }
.you-header:active { background: color-mix(in srgb, var(--ink) 6%, var(--sunken)); }
.you-header:focus-visible, .you-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Your plan */
.you-rule { border: 0; border-top: 1px solid var(--rule); margin: var(--sp-md) 0; }
.you-kv { gap: var(--sp-lg); }
.you-kv-value { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.you-pack .btn.small { align-self: flex-start; }
.you-info { display: flex; align-items: center; gap: var(--sp-xs); }
.you-details summary { cursor: pointer; color: var(--accent); font-size: 15px; padding: var(--sp-xs) 0; }
.you-details > * + * { margin-top: var(--sp-xs); }

/* Payment method */
.you-pay-icon { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.you-pay-icon svg { width: 22px; height: 22px; }

/* Your colour */
.you-swatches { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-xs); }
.you-swatch { min-height: 44px; display: grid; place-items: center; background: none; border: 0; padding: 0; cursor: pointer; }
.you-swatch-disc { width: 32px; height: 32px; border-radius: 50%; box-shadow: 0 0 0 3px var(--sunken); display: grid; place-items: center; }
.you-swatch[aria-pressed="true"] .you-swatch-disc { box-shadow: 0 0 0 3px var(--sunken), 0 0 0 5px var(--ink); }
.you-swatch[aria-pressed="true"] .you-swatch-disc::after {
  content: ""; width: 11px; height: 6px; border: 2px solid #FFFFFF; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px);
}

/* Lists */
.you-gap { margin-top: var(--sp-md); }
.list > a.item { color: var(--ink); text-decoration: none; }
.you-arrow { color: var(--ink3); font-size: 18px; }
.you-danger .row-title, .you-signout .row-title { color: var(--danger); }
.you-signout { justify-content: center; }

/* Your terms */
.you-bar { height: 8px; border-radius: 4px; background: var(--rule); overflow: hidden; }
.you-bar > div { height: 100%; background: var(--accent); border-radius: 4px; }
.you-terms .terms-body { max-height: none; }
.you-check { align-items: flex-start; }
.you-check .check { width: 20px; height: 20px; margin-top: 2px; }

/* Your details */
.you-banner { padding: var(--sp-md); border-radius: var(--r-control); background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); font-size: 15px; }
.you-helper { display: block; margin-top: var(--sp-xs); }
.you-greeting { color: var(--accent); }
.you-photo-row { align-items: center; gap: var(--sp-lg); }
.you-photo-btns { flex: 1; }
.you-photo-btns > * + * { margin-top: var(--sp-sm); }
.you-segment { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-sm); }
.you-segment .choice { justify-content: center; text-align: center; padding: var(--sp-sm); }