/* DASP Sheet. Colors, radii, shadows and motion come from tokens.css. */

.dasp-sheet[hidden] { display: none !important; }

.dasp-sheet {
  position: fixed;
  inset: 0;
  z-index: calc(var(--dasp-z-sheet) + var(--dasp-sheet-stack, 0));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  overflow: hidden;
  background: color-mix(in srgb, var(--dasp-color-backdrop) calc(var(--dasp-sheet-scrim, 1) * 100%), transparent);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dasp-motion-duration) ease, visibility 0s linear var(--dasp-motion-duration);
}

.dasp-sheet.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.dasp-sheet.is-closing {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transition-delay: 0s;
}

.dasp-sheet__panel {
  width: min(760px, 100%);
  max-height: min(860px, calc(100dvh - 36px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--dasp-color-line);
  border-radius: var(--dasp-radius-lg);
  background: var(--dasp-color-page);
  color: var(--dasp-color-ink);
  box-shadow: var(--dasp-shadow-lg);
  transform: translateY(12px) scale(0.985);
  opacity: 0.001;
  transition: transform var(--dasp-motion-duration) var(--dasp-motion-ease), opacity var(--dasp-motion-duration) ease;
}

/* The panel receives focus when the sheet opens; it is a container, not a control. */
.dasp-sheet__panel:focus {
  outline: none;
}

.dasp-sheet.is-open .dasp-sheet__panel {
  transform: none;
  opacity: 1;
}

.dasp-sheet__header {
  flex: 0 0 auto;
  min-height: 74px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--dasp-color-line);
  background: var(--dasp-color-bar);
  backdrop-filter: var(--dasp-bar-blur);
  -webkit-backdrop-filter: var(--dasp-bar-blur);
}

.dasp-sheet__back,
.dasp-sheet__icon,
.dasp-sheet__action {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--dasp-color-line);
  border-radius: 15px;
  background: var(--dasp-color-accent-soft);
  color: var(--dasp-color-accent);
}

.dasp-sheet__back,
.dasp-sheet__action { cursor: pointer; }

.dasp-sheet__back {
  border-color: transparent;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
}

.dasp-sheet__back:hover,
.dasp-sheet__action:hover { background: var(--dasp-color-accent-faint); }

.dasp-sheet__title {
  min-width: 0;
  flex: 1 1 auto;
}

.dasp-sheet__title h2 {
  margin: 0;
  color: var(--dasp-color-ink);
  font: var(--dasp-type-title);
  letter-spacing: var(--dasp-tracking-title);
}

.dasp-sheet__title p {
  margin: 3px 0 0;
  color: var(--dasp-color-ink-muted);
  font: var(--dasp-type-footnote);
}

.dasp-sheet__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dasp-sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  scrollbar-width: none;
  overscroll-behavior: contain;
  padding: 22px;
  -webkit-overflow-scrolling: touch;
}

.dasp-sheet__footer {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 18px max(14px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--dasp-color-line);
  background: var(--dasp-color-bar);
  backdrop-filter: var(--dasp-bar-blur);
  -webkit-backdrop-filter: var(--dasp-bar-blur);
}

.dasp-sheet__body::-webkit-scrollbar { display: none; width: 0; height: 0; }
.dasp-sheet__desktop-close { display: none; }

@media (min-width: 761px) {
  .dasp-sheet__header > .dasp-sheet__back:not(.dasp-sheet__desktop-close) { display: none; }
  .dasp-sheet__desktop-close { display: grid; margin-left: auto; order: 10; }
}

.dasp-settings-section {
  margin: 25px 4px 10px;
  color: var(--dasp-color-ink-muted);
  font: var(--dasp-type-caption);
  letter-spacing: var(--dasp-tracking-caps);
  text-transform: uppercase;
}

.dasp-settings-section:first-child { margin-top: 0; }

.dasp-settings-group {
  overflow: hidden;
  border: 1px solid var(--dasp-color-line);
  border-radius: 20px;
  background: var(--dasp-color-surface);
  box-shadow: var(--dasp-shadow-sm);
}

.dasp-settings-row {
  box-sizing: border-box; /* width 100% + padding must not overflow the group */
  width: 100%;
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 15px;
  border: 0;
  background: var(--dasp-color-surface);
  color: var(--dasp-color-ink);
  font: var(--dasp-type-body);
  text-align: left;
}

.dasp-settings-row + .dasp-settings-row { border-top: 1px solid var(--dasp-color-line); }

.dasp-settings-row__icon {
  width: 39px;
  height: 39px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--dasp-color-accent-soft);
  color: var(--dasp-color-accent);
}

.dasp-settings-row__text {
  min-width: 0;
  flex: 1 1 auto;
}

.dasp-settings-row__title {
  display: block;
  font: var(--dasp-type-body-medium);
}

.dasp-settings-row__sub {
  display: block;
  margin-top: 3px;
  color: var(--dasp-color-ink-muted);
  font: var(--dasp-type-footnote);
}

.dasp-settings-row__detail {
  margin-left: auto;
  color: var(--dasp-color-ink-muted);
  font: var(--dasp-type-footnote);
  text-align: right;
}

.dasp-toggle {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 51px;
  height: 31px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  background: var(--dasp-color-line-strong);
  cursor: pointer;
  transition: background 180ms ease;
}

.dasp-toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--dasp-color-on-accent);
  box-shadow: var(--dasp-shadow-sm);
  transition: transform 180ms ease;
}

.dasp-toggle:checked { background: var(--dasp-color-accent-fill); }
.dasp-toggle:checked::after { transform: translateX(20px); }

.dasp-sheet-confirm {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 18px;
  background: var(--dasp-color-backdrop);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dasp-motion-duration) ease, visibility var(--dasp-motion-duration) ease;
}

.dasp-sheet-confirm.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.dasp-sheet-confirm__panel {
  width: min(420px, 100%);
  padding: 22px;
  border: 1px solid var(--dasp-color-line);
  border-radius: 22px;
  background: var(--dasp-color-surface);
  box-shadow: var(--dasp-shadow-lg);
}

.dasp-sheet-confirm__panel h3 {
  margin: 0 0 8px;
  color: var(--dasp-color-ink);
  font: var(--dasp-type-title);
  letter-spacing: var(--dasp-tracking-title);
}

.dasp-sheet-confirm__panel p {
  margin: 0;
  color: var(--dasp-color-ink-muted);
  font: var(--dasp-type-body);
}

.dasp-sheet-confirm__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

.dasp-sheet-confirm__button {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--dasp-color-line);
  border-radius: 14px;
  background: var(--dasp-color-surface);
  color: var(--dasp-color-ink);
  font: var(--dasp-type-body-medium);
  cursor: pointer;
}

.dasp-sheet-confirm__button.is-danger {
  border-color: var(--dasp-color-danger-soft);
  background: var(--dasp-color-danger-soft);
  color: var(--dasp-color-danger);
}

body.dasp-sheet-lock { overflow: hidden; }

.dasp-sheet--bottom {
  align-items: flex-end;
  touch-action: none;
}

.dasp-sheet--bottom .dasp-sheet__panel {
  width: min(560px, 100%);
  max-height: min(76dvh, 720px);
  border-radius: 26px 26px 0 0;
  transform: translateY(104%);
  opacity: 1;
  touch-action: none;
}

.dasp-sheet--bottom .dasp-sheet__header {
  touch-action: none;
}

/* Overflowing bottom-sheet content must stay scrollable by touch. */
.dasp-sheet--bottom .dasp-sheet__body {
  touch-action: pan-y;
}

/* Without a footer the body is the last element: keep its content above the iPhone home indicator. */
.dasp-sheet--bottom .dasp-sheet__body:last-child {
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
}

.dasp-sheet--bottom.is-open .dasp-sheet__panel {
  transform: translateY(0);
}

.dasp-sheet--bottom.is-closing .dasp-sheet__panel {
  transform: translateY(104%);
  opacity: 1;
}

@media (max-width: 760px) {
  .dasp-sheet {
    align-items: stretch;
    justify-content: flex-end;
    padding: 0;
    background: transparent;
  }

  .dasp-sheet__panel {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-width: 0;
    border-radius: 0;
    transform: translateX(104%);
    opacity: 1;
  }

  .dasp-sheet.is-open .dasp-sheet__panel { transform: translateX(0); }

  /* Fullscreen side sheets push in from the right like an iOS screen: no fade of the whole layer. */
  .dasp-sheet:not(.dasp-sheet--bottom) {
    opacity: 1;
    transition: visibility 0s linear var(--dasp-motion-duration);
  }

  .dasp-sheet:not(.dasp-sheet--bottom).is-open,
  .dasp-sheet:not(.dasp-sheet--bottom).is-closing { transition-delay: 0s; }

  .dasp-sheet:not(.dasp-sheet--bottom) .dasp-sheet__panel { box-shadow: var(--dasp-shadow-side); }

  .dasp-sheet.is-closing .dasp-sheet__panel {
    transform: translateX(104%);
    opacity: 1;
  }

  .dasp-sheet__header {
    min-height: calc(70px + env(safe-area-inset-top));
    padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  }

  .dasp-sheet__body { padding: 18px 16px; }

  .dasp-sheet-confirm {
    place-items: end stretch;
    padding: 0;
    background: var(--dasp-color-backdrop);
  }

  .dasp-sheet-confirm__panel {
    width: 100%;
    border-radius: 26px 26px 0 0;
    border-width: 1px 0 0;
    padding: 24px 24px max(24px, env(safe-area-inset-bottom));
    transform: translateY(104%);
    transition: transform var(--dasp-motion-duration) var(--dasp-motion-ease);
  }

  .dasp-sheet-confirm.is-open .dasp-sheet-confirm__panel {
    transform: translateY(0);
  }

  .dasp-sheet-confirm__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dasp-sheet--bottom {
    align-items: flex-end;
    justify-content: center;
    background: color-mix(in srgb, var(--dasp-color-backdrop) calc(var(--dasp-sheet-scrim, 1) * 100%), transparent);
  }

  .dasp-sheet--bottom .dasp-sheet__panel {
    height: auto;
    max-height: min(76dvh, 720px);
    border-radius: 26px 26px 0 0;
    border-width: 1px 0 0;
    transform: translateY(104%);
  }

  .dasp-sheet--bottom.is-open .dasp-sheet__panel {
    transform: translateY(0);
  }

  .dasp-sheet--bottom.is-closing .dasp-sheet__panel {
    transform: translateY(104%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dasp-sheet,
  .dasp-sheet__panel,
  .dasp-toggle,
  .dasp-toggle::after {
    transition: none !important;
  }
}

/* Every bottom sheet has the same header: grabber line on top, then icon and title. */
.dasp-sheet--bottom .dasp-sheet__header {
  position: relative;
  padding-top: 24px;
}

.dasp-sheet--bottom .dasp-sheet__header::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 38px;
  height: 5px;
  margin-left: -19px;
  border-radius: var(--dasp-radius-pill);
  background: var(--dasp-color-line-strong);
}

/*
 * Account sheet (shared by every app): sign-out buttons and the separate delete-account group.
 * Legacy apps force "button { border-radius; font-weight } !important", hence the !important here.
 */
.dasp-settings-group.logout-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 10px;
}

.logout-form button {
  min-height: 50px;
  padding: 0 10px;
  border: 1px solid var(--dasp-color-line);
  border-radius: 14px !important;
  background: var(--dasp-color-surface);
  color: var(--dasp-color-ink);
  font: var(--dasp-type-body-medium);
  font-weight: var(--dasp-weight-medium) !important;
}

.logout-form button:only-child { grid-column: 1 / -1; }

.logout-form button.danger {
  border-color: var(--dasp-color-danger-soft);
  background: var(--dasp-color-danger-soft);
  color: var(--dasp-color-danger);
}

.danger-account-group { margin-top: 22px; }

.danger-account { color: var(--dasp-color-danger) !important; }

.danger-account .dasp-settings-row__icon {
  background: var(--dasp-color-danger-soft) !important;
  color: var(--dasp-color-danger) !important;
}

/* Icon sizes inside sheet controls (Tabler outline glyphs read smaller than solid ones). */
.dasp-sheet__back i { font-size: var(--dasp-icon-lg); }
.dasp-sheet__icon i,
.dasp-sheet__action i,
.dasp-settings-row__icon i { font-size: var(--dasp-icon-md); }
.dasp-settings-row__detail i { font-size: var(--dasp-icon-sm); }

/* Header actions are plain icons, like the app header (iOS navigation bar); the title icon stays a tile. */
.dasp-sheet__action {
  border-color: transparent;
  border-radius: 50%;
  background: transparent;
}

/* "Empfohlen" on the security row while the account has neither a passkey nor 2FA (passkey-offer.js). */
.dasp-recommended {
  color: var(--dasp-color-accent);
  font: var(--dasp-type-footnote);
  font-weight: var(--dasp-weight-medium);
}

/* Bottom sheet on phones, centered dialog from 761px (e.g. Terms of Use on the sign-in pages). */
@media (min-width: 761px) {
  .dasp-sheet--bottom.dasp-sheet--desktop-dialog { align-items: center; touch-action: auto; }
  .dasp-sheet--bottom.dasp-sheet--desktop-dialog .dasp-sheet__panel {
    width: min(680px, 100%);
    max-height: min(820px, calc(100dvh - 48px));
    border-radius: var(--dasp-radius-lg);
    transform: translateY(12px) scale(0.985);
    opacity: 0.001;
    touch-action: auto;
  }
  .dasp-sheet--bottom.dasp-sheet--desktop-dialog.is-open .dasp-sheet__panel { transform: none; opacity: 1; }
  .dasp-sheet--bottom.dasp-sheet--desktop-dialog.is-closing .dasp-sheet__panel { transform: translateY(12px) scale(0.985); opacity: 0.001; }
  .dasp-sheet--bottom.dasp-sheet--desktop-dialog .dasp-sheet__header { padding-top: 14px; }
  .dasp-sheet--bottom.dasp-sheet--desktop-dialog .dasp-sheet__header::before { display: none; }
}

/*
 * Touch devices: iOS Safari ignores CSS for its scroll indicator. The body is widened by a 20px
 * transparent border that the panel (overflow: hidden) clips, so the indicator at the scroller's
 * right edge is never visible. Content width and padding stay the same.
 */
@media (pointer: coarse) {
  .dasp-sheet__body { margin-right: -20px; border-right: 20px solid transparent; }
}