/* Settings, account recovery, legal pages, report/block sheets and owner tools. */

/* ---------- Shared page shell ---------- */
.acct,
.legal,
.own {
  max-width: 720px;
  margin: 0 auto;
  display: grid;
  gap: 16px;
}
.acct__head,
.legal__head,
.own__head {
  display: grid;
  gap: 6px;
  padding-block: 8px 4px;
}
.acct__title,
.legal__title,
.own__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 6vw, 44px);
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}
.acct__sub,
.legal__meta,
.acct__muted,
.own__muted {
  color: var(--text-2);
  font-size: 14px;
  margin: 0;
}
.acct__center {
  text-align: center;
}

/* ---------- Settings ---------- */
.acct__card {
  display: grid;
  gap: 14px;
  margin: 0;
}
.acct__h2,
.own__h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
  margin: 0;
}
.acct__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
  overflow-wrap: anywhere;
}
.acct__pill,
.own__pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
  white-space: nowrap;
}
.acct__pill--ok,
.own__pill--sent {
  background: var(--ok-soft);
  color: var(--ok);
}
.acct__pill--warn,
.own__pill--logged {
  background: var(--warn-soft);
  color: var(--warn);
}
.own__pill--failed {
  background: var(--danger-soft);
  color: var(--danger);
}
.acct__list,
.own__people,
.own__emails {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.acct__list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
/* Accounts: name on the left, the two buttons in fixed-width columns on the right. */
.own__people li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.own__people li:last-child {
  border-bottom: 0;
}
.own__person strong {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.own__person-actions {
  display: grid;
  grid-template-columns: 7.5rem 6.5rem;
  gap: 8px;
  align-items: center;
}
.own__person-actions > .btn {
  width: 100%;
  justify-content: center;
}
.own__person-actions > .own__pill {
  justify-self: center;
}
@media (max-width: 560px) {
  .own__people li {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .own__person-actions {
    grid-template-columns: 1fr 1fr;
  }
}

/* Owner tools → Maps: which map / place names are live (radio cards) */
.own__choices {
  display: grid;
  gap: 8px;
}
.own__choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid var(--line-2);
  border-radius: 12px;
  background: var(--surface-2);
  cursor: pointer;
}
.own__choice input {
  margin-top: 3px;
  accent-color: var(--accent);
  flex: none;
}
.own__choice strong {
  display: block;
  font-size: 14px;
}
.own__choice small {
  color: var(--text-2);
  font-size: 13px;
}
.own__choice:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
}
.own__choice:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Live / Test mode / Off / Not live yet / Backup */
.own__statuses {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.own__status {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-2);
}
.own__status strong {
  display: block;
  font-size: 14px;
}
.own__status small {
  color: var(--text-2);
  font-size: 13px;
}
.own__state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  justify-self: start;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--surface);
  color: var(--text-2);
}
.own__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.own__status--live .own__state {
  background: var(--ok-soft);
  color: var(--ok);
}
.own__status--live .own__dot {
  box-shadow: 0 0 0 0 currentColor;
  animation: own-live 2s ease-out infinite;
}
.own__status--test .own__state,
.own__status--setup .own__state {
  background: var(--warn-soft);
  color: var(--warn);
}
@keyframes own-live {
  from {
    box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 60%, transparent);
  }
  to {
    box-shadow: 0 0 0 7px transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  .own__status--live .own__dot {
    animation: none;
  }
}
@media (max-width: 560px) {
  .own__status {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}
.acct__person,
.own__person {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
}
.acct__person span,
.own__person > span {
  display: grid;
  min-width: 0;
}
.acct__person small,
.own__person small {
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acct__card--danger {
  border-color: color-mix(in srgb, var(--danger) 30%, var(--line));
}
.acct__done {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 12px;
  padding-block: 12px;
  color: var(--accent);
}
.acct__done h2 {
  color: var(--text);
  margin: 0;
}

/* ---------- Email banner ---------- */
.verify-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: var(--page-max, 720px);
  margin: 0 auto 14px;
  padding: 10px 14px;
  border-radius: var(--radius-m);
  background: var(--brand-soft), var(--surface);
  border: 1px solid var(--line);
  font-size: 14px;
  color: var(--text-2);
}
.verify-banner span {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.verify-banner strong {
  color: var(--text);
}

/* ---------- Sidebar legal links, profile bits, admin header ---------- */
.side-legal {
  font-size: 12px;
  color: var(--text-3);
  margin: 10px 12px 0;
  line-height: 1.7;
}
.side-legal a {
  color: inherit;
}
.pr-btn--icon {
  flex: 0 0 auto;
  width: 44px;
  padding-inline: 0;
}
.pr-blocked {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: var(--radius-m);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 14px;
}
.ad-head__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.option--danger,
.option--danger .option__icon {
  color: var(--danger);
}

/* ---------- Report / block sheets ---------- */
.safety {
  display: grid;
  gap: 14px;
}
.safety__lead,
.safety__fine {
  color: var(--text-2);
  font-size: 14px;
  margin: 0;
}
.safety__fine {
  font-size: 12px;
  text-align: center;
}
.safety__reasons {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  border-radius: var(--radius-m);
  overflow: hidden;
  border: 1px solid var(--line);
}
.safety__reason {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  min-height: 52px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.safety__reason:last-child {
  border-bottom: 0;
}
.safety__reason span {
  flex: 1;
}
.safety__reason input {
  accent-color: var(--accent);
  width: 18px;
  height: 18px;
}
.safety__reason:has(input:checked) {
  background: var(--surface-2);
}
.safety__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  color: var(--text-2);
}
.safety__points li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.safety__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.field__label-static {
  font-size: 13px;
  font-weight: 650;
  color: var(--text-2);
}

/* ---------- Legal pages ---------- */
.legal__kicker,
.own__kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.legal__intro {
  font-size: 17px;
  color: var(--text-2);
  margin: 6px 0 0;
  max-width: 62ch;
}
.legal__section {
  display: grid;
  gap: 8px;
  max-width: 68ch;
}
.legal__section h2 {
  font-size: 19px;
  margin: 10px 0 0;
}
.legal__section p,
.legal__section li {
  color: var(--text-2);
  line-height: 1.65;
  font-size: 15px;
  margin: 0;
}
.legal__section ul {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
}
.legal__section strong {
  color: var(--text);
}
.legal__foot {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  color: var(--text-3);
  font-size: 14px;
}
.legal__contact {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin: 0;
}
.legal__contact h2 {
  margin: 0 0 4px;
  font-size: 18px;
}
.legal__contact p {
  margin: 0 0 6px;
  color: var(--text-2);
}
.legal__contact-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--brand-soft), var(--surface-2);
  color: var(--accent);
  flex: none;
}
.legal__small {
  font-size: 13px;
}
.legal__faq {
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
}
.legal__faq summary {
  cursor: pointer;
  font-weight: 650;
  color: var(--text);
}
.legal__faq p {
  margin-top: 8px;
}

/* ---------- Owner tools ---------- */
.own {
  max-width: 860px;
}
.own__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.own__tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--line);
}
.own__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border: 0;
  background: none;
  color: var(--text-2);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  min-height: 44px;
}
.own__tab[aria-selected='true'] {
  color: var(--text);
  border-bottom-color: var(--accent);
}
.own__panel {
  display: grid;
  gap: 14px;
}
.own__loading {
  display: grid;
  place-items: center;
  padding: 40px;
}
.own__filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.own__list {
  display: grid;
  gap: 12px;
}
.own__card {
  display: grid;
  gap: 10px;
  margin: 0;
}
.own__card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.own__reason {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--danger);
}
.own__hot {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--warn);
}
.own__details {
  margin: 0;
  padding: 10px 14px;
  border-left: 3px solid var(--line-2);
  background: var(--surface-2);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.own__target {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border-radius: var(--radius-m);
  border: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
  min-width: 0;
}
.own__target img {
  width: 64px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius-s);
  flex: none;
}
.own__target span {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.own__target small {
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.own__caption {
  font-style: italic;
}
.own__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.own__empty {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 6px;
  padding: 40px 16px;
  color: var(--text-3);
}
.own__empty h3 {
  color: var(--text);
  margin: 6px 0 0;
}
.own__empty p {
  margin: 0;
  color: var(--text-2);
}
.own__search {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.own__search .input {
  flex: 1 1 240px;
}
.own__check,
.own__toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.own__toggle input,
.own__check input {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
  flex: none;
}
.own__intro {
  margin: 0;
  color: var(--text-2);
  max-width: 68ch;
}
.own__group {
  display: grid;
  gap: 12px;
  margin: 0;
}
.own__getkey {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-m);
  background: var(--surface-2);
  font-size: 13px;
  color: var(--text-2);
}
.own__getkey .icon {
  flex: none;
  margin-top: 2px;
  color: var(--accent);
}
.own__fields {
  display: grid;
  gap: 14px;
}
.own__fields .field > span:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.own__source {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-3);
}
.own__secret {
  display: flex;
  gap: 8px;
  align-items: center;
}
.own__secret .input {
  flex: 1;
  min-width: 0;
}
.own__result {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-m);
  font-size: 14px;
}
.own__result.is-ok {
  background: var(--ok-soft);
  color: var(--ok);
}
.own__result.is-bad {
  background: var(--danger-soft);
  color: var(--danger);
}
.own__email {
  display: grid;
  gap: 6px;
  margin: 0;
}
.own__email header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.own__body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font:
    13px/1.6 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  background: var(--surface-2);
  padding: 12px;
  border-radius: var(--radius-s);
  margin: 8px 0 0;
}
.own__confirm {
  display: grid;
  gap: 16px;
}
.own__confirm p {
  margin: 0;
  color: var(--text-2);
}

/* --- Social login buttons, two-step code ------------------------------------------------- */
.auth__social {
  display: grid;
  gap: 10px;
  margin: 4px 0 6px;
}
.social-btn {
  gap: 10px;
  font-weight: 700;
}
.social-btn--apple svg {
  color: var(--text);
}
.auth__or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 0;
  color: var(--text-3);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.auth__or::before,
.auth__or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line-2);
}
.auth__badge {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 10px;
  border-radius: 18px;
  background: var(--ok-soft);
  color: var(--ok);
}
.code-input {
  font-size: 22px !important;
  font-weight: 700;
  letter-spacing: 0.3em;
  font-variant-numeric: tabular-nums;
}

/* --- Settings: account type, two-step, recovery codes ------------------------------------ */
.acct__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.acct__ok {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ok);
  font-weight: 700;
}
.acct-types {
  display: grid;
  gap: 8px;
  margin: 4px 0 12px;
}
.acct-type {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid var(--line-2);
  border-radius: var(--radius-m);
  cursor: pointer;
  transition:
    border-color var(--dur-2) var(--ease),
    background-color var(--dur-2) var(--ease);
}
.acct-type input {
  position: absolute;
  opacity: 0;
}
.acct-type.is-on,
.acct-type:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.acct-type:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.acct-type__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--accent);
  flex: none;
}
.acct-type__text {
  display: grid;
  gap: 2px;
}
.acct-type__text small {
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.4;
}
.acct-pro {
  margin-top: 6px;
}
.twofa-steps {
  margin: 0 0 12px;
  padding-left: 20px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.5;
}
.twofa-qr {
  width: 200px;
  margin: 0 auto 10px;
  padding: 10px;
  border-radius: 14px;
  background: #fff;
}
.twofa-qr svg {
  display: block;
  width: 100%;
  height: auto;
}
.twofa-key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
.twofa-key code,
.recovery__codes code {
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: none;
  user-select: all;
}
.twofa-sheet .form {
  margin-top: 14px;
}
.recovery__codes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 12px 0 14px;
  padding: 0;
  list-style: none;
  text-align: center;
}
.recovery + .btn {
  margin-top: 14px;
}

/* --- Owner panel: addresses to paste, multiline keys -------------------------------------- */
.own__urls {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
  padding: 12px;
  border-radius: var(--radius-m);
  background: var(--surface-2);
}
.own__urls p {
  display: grid;
  gap: 3px;
  margin: 0;
  font-size: 12.5px;
  color: var(--text-2);
}
.own__urls code {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 13px;
  user-select: all;
}
.own__textarea {
  min-height: 96px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
}

/* --- Owner panel: Maps tab ------------------------------------------------------------------ */
.own__sub {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 14px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  min-width: 0;
}
.own__sub legend {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.own__sub legend + * {
  clear: both;
}
.own__map {
  height: 320px;
}
.own__preview-note {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  font-size: 13px;
}
.own__preview-note .icon {
  flex: none;
  margin-top: 2px;
}
.own__preview-note:empty {
  display: none;
}
@media (max-width: 480px) {
  .own__map {
    height: 260px;
  }
}

/* --- Profile photo cropper ------------------------------------------------------------------ */
.crop {
  display: grid;
  gap: 14px;
}
.crop__stage {
  position: relative;
  width: min(100%, 360px);
  aspect-ratio: 1;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 18px;
  background: #000;
  touch-action: none;
  cursor: grab;
  user-select: none;
}
.crop__stage:active {
  cursor: grabbing;
}
.crop__stage:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.crop__img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  transform-origin: 0 0;
  pointer-events: none;
}
.crop__mask {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 999px rgb(0 0 0 / 0.55);
  outline: 2px solid rgb(255 255 255 / 0.85);
  outline-offset: -2px;
  pointer-events: none;
}
.crop__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      transparent calc(33.33% - 0.5px),
      rgb(255 255 255 / 0.25) calc(33.33% - 0.5px) calc(33.33% + 0.5px),
      transparent calc(33.33% + 0.5px),
      transparent calc(66.66% - 0.5px),
      rgb(255 255 255 / 0.25) calc(66.66% - 0.5px) calc(66.66% + 0.5px),
      transparent calc(66.66% + 0.5px)
    ),
    linear-gradient(
      transparent calc(33.33% - 0.5px),
      rgb(255 255 255 / 0.25) calc(33.33% - 0.5px) calc(33.33% + 0.5px),
      transparent calc(33.33% + 0.5px),
      transparent calc(66.66% - 0.5px),
      rgb(255 255 255 / 0.25) calc(66.66% - 0.5px) calc(66.66% + 0.5px),
      transparent calc(66.66% + 0.5px)
    );
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
}
.crop__stage:active .crop__grid {
  opacity: 1;
}
.crop__zoom {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(100%, 360px);
  margin: 0 auto;
  color: var(--text-2);
}
.crop__zoom input {
  flex: 1;
  accent-color: var(--accent);
}
.crop__hint {
  margin: -4px 0 0;
  color: var(--text-3);
  font-size: 13px;
  text-align: center;
}
.crop__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* --- Password rules checklist --------------------------------------------------------------- */
.pw-rules {
  display: grid;
  gap: 4px;
  margin: -4px 0 4px;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--text-3);
}
.pw-rules li {
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color var(--dur-2) var(--ease);
}
.pw-rules li.is-ok {
  color: var(--ok);
}
.pw-rules__tip {
  padding-left: 19px;
  font-size: 12.5px;
}

/* ---------- Login sessions ---------- */
/* "Keep me logged in" on the login form */
.auth__remember {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.auth__remember input {
  flex: none;
  margin: 1px 0 0;
}
.auth__remember span {
  display: grid;
  gap: 2px;
}
.auth__remember small {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-3);
}
/* "You were logged out after …" above the login form */
.auth__notice {
  margin: -8px 0 18px;
  color: var(--text);
}
.auth__notice .icon {
  flex: none;
  color: var(--warn);
}

/* Settings: Where you're logged in */
.acct__list.sessions {
  gap: 0;
}
.acct__list .session {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.acct__list .session:first-child {
  padding-top: 0;
}
.acct__list .session:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.session__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text-2);
}
.session.is-current .session__icon {
  background: var(--ok-soft);
  color: var(--ok);
}
.session__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.session__text strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14.5px;
}
/* "Active 2 hours ago" and the address; the address moves to its own line when short of room. */
.session__meta {
  display: flex;
  flex-wrap: wrap;
  column-gap: 10px;
  color: var(--text-2);
  font-size: 13px;
}
.session__meta > span {
  white-space: nowrap;
}
.session__ip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-3);
}
.session__now {
  color: var(--ok);
  font-weight: 700;
}
.sessions__all {
  justify-self: start;
}

/* "Still there?" warning before an inactivity logout */
.idle-warn {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding-bottom: 4px;
  text-align: center;
}
.idle-warn__clock {
  position: relative;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
}
.idle-warn__clock svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.idle-warn__track,
.idle-warn__bar {
  fill: none;
  stroke-width: 5;
}
.idle-warn__track {
  stroke: var(--surface-3);
}
.idle-warn__bar {
  stroke: var(--accent);
  stroke-linecap: round;
  transition: stroke-dashoffset 1s linear;
}
.idle-warn__clock span {
  display: grid;
  line-height: 1;
}
.idle-warn__clock strong {
  font-size: 30px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.idle-warn__clock small {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-3);
}
.idle-warn__text {
  max-width: 36ch;
  margin: 0;
  color: var(--text-2);
  font-size: 14.5px;
}
.idle-warn__actions {
  display: grid;
  gap: 8px;
  width: 100%;
}
@media (prefers-reduced-motion: reduce) {
  .idle-warn__bar {
    transition: none;
  }
}

/* Connected accounts (partners) */
.pt {
  display: grid;
  gap: 14px;
  max-width: 620px;
  margin: 0 auto;
  padding: 8px 0 40px;
}
.pt-head h1 {
  margin: 0;
  font-size: 26px;
}
.pt-card {
  display: grid;
  gap: 10px;
  padding: 18px;
}
.pt-card h2 {
  margin: 0;
  font-size: 18px;
}
.pt-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.pt-form {
  display: grid;
  gap: 12px;
}
.pt-form .btn,
.pt-card > .btn {
  justify-self: start;
}
.pt-sub {
  margin: 4px 0 0;
  font-weight: 700;
}
.pt-small {
  margin: 0;
  font-size: 13.5px;
}
.pt-shares {
  display: grid;
  gap: 8px;
}
.pt-share {
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-2);
}
.pt-share span {
  display: grid;
}
.pt-share small {
  color: var(--text-2);
  font-size: 13px;
}
.pt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pt-ride {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  color: #fff;
  background: var(--brand);
  text-decoration: none;
}
.pt-ride span {
  display: grid;
  flex: 1;
}
.pt-ride small {
  opacity: 0.9;
}
.pt-settings {
  display: grid;
  gap: 14px;
}
.pt-save {
  position: sticky;
  bottom: calc(var(--tabbar-h, 60px) + 12px);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-l);
  background: var(--glass-strong);
  box-shadow: var(--shadow-1);
}
@media (min-width: 900px) {
  .pt-save {
    bottom: 12px;
  }
}
.pt-gold {
  border: 1px solid var(--gold-2);
}
.pt-gold .btn {
  justify-self: start;
}
.pt-bike {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.pt-bike[hidden] {
  display: none;
}