/* Credentials-Seite: Anordnung der Seiten. Farben, Schrift und Abstände nur als Variablen aus tokens.css
   (beim Start erzeugt aus design/tokens.json); die Bausteine jx- kommen aus design/components/bundle.css.
   Zwei Maße stammen aus dem Designsystem selbst: die Breite 760px aus den Vorschauen der Komponenten
   und die Grenze 600px für das Handy aus bundle.css. */

.cr-main {
  box-sizing: border-box;
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-12) var(--space-12);
  display: grid;
  gap: var(--space-8);
}

.cr-section {
  display: grid;
  gap: var(--space-3);
}
.cr-cards {
  display: grid;
  gap: var(--space-4);
}
.cr-form {
  display: grid;
  gap: var(--space-6);
}
.cr-field-wide {
  max-width: none;
}

.cr-pagehead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.cr-title {
  margin: 0;
  font-size: var(--type-title-size);
  line-height: var(--type-title-line);
  font-weight: var(--type-title-weight);
  overflow-wrap: anywhere;
}

.cr-heading {
  margin: 0;
  font-size: var(--type-heading-size);
  line-height: var(--type-heading-line);
  font-weight: var(--type-heading-weight);
}

.cr-lead {
  margin: 0;
  color: var(--ink-muted);
}
.cr-text {
  margin: 0;
}

.cr-hint {
  margin: 0;
  font-size: var(--type-small-size);
  line-height: var(--type-small-line);
  color: var(--ink-muted);
}

.cr-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.cr-back {
  justify-self: start;
  margin-left: calc(-1 * var(--space-3));
}

.cr-code {
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--type-code-size);
  line-height: var(--type-code-line);
  font-weight: var(--type-code-weight);
  overflow-wrap: anywhere;
}
.cr-title .cr-code,
.jx-list-title .cr-code {
  padding: 0;
  background: none;
  font-size: inherit;
  line-height: inherit;
}

.cr-props {
  margin: 0;
  display: grid;
  gap: var(--space-4);
}
.cr-props > div {
  display: grid;
  gap: var(--space-1);
}
.cr-props dt {
  font-size: var(--type-small-size);
  line-height: var(--type-small-line);
  font-weight: var(--type-label-weight);
  color: var(--ink-muted);
}
.cr-props dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.cr-pre {
  white-space: pre-wrap;
}

.cr-reveal summary {
  cursor: pointer;
  color: var(--link);
  font-size: var(--type-label-size);
  line-height: var(--type-label-line);
  font-weight: var(--type-label-weight);
}
.cr-reveal summary:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}
.cr-reveal[open] summary {
  margin-bottom: var(--space-2);
}
.cr-reveal-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.cr-secret {
  display: block;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-alt);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--type-heading-size);
  line-height: var(--type-heading-line);
  overflow-wrap: anywhere;
  -webkit-user-select: all;
  user-select: all;
}

.cr-notice {
  gap: var(--space-2);
}

.cr-segment {
  display: inline-flex;
  justify-self: start;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--surface-alt);
}
.cr-segment a {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--size-control) - 2 * var(--space-1));
  padding: 0 var(--space-5);
  border-radius: var(--radius-full);
  color: var(--ink);
  text-decoration: none;
  font-size: var(--type-label-size);
  line-height: var(--type-label-line);
  font-weight: var(--type-label-weight);
}
.cr-segment a[aria-current="page"] {
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.cr-segment a:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--focus-ring);
}

.cr-header-end {
  margin: 0 0 0 auto;
}
.cr-confirm {
  justify-self: center;
}

.cr-tabbar {
  display: none;
}

@media (max-width: 600px) {
  /* Seitenrand space-4 am Handy; zwischen Abschnitten bleibt space-8 (design/README.md, Abstände). */
  .cr-main {
    padding: var(--space-6) var(--space-4) calc(var(--size-touch) + var(--space-8));
  }

  /* Am Handy ist kein Tippziel kleiner als size-touch (design/README.md). */
  .jx-btn,
  .jx-input {
    height: var(--size-touch);
  }
  .jx-textarea {
    height: auto;
  }
  .jx-btn {
    font-size: var(--type-body-size);
    padding: 0 var(--space-6);
  }
  .jx-btn-plain {
    padding: 0 var(--space-3);
  }
  .cr-actions .jx-btn {
    flex: 1 1 auto;
  }
  .cr-segment a {
    min-height: calc(var(--size-touch) - 2 * var(--space-1));
  }
  /* Karten am Handy mit space-5 innen (design/components/Karte). */
  .jx-card {
    padding: var(--space-5);
  }
  .cr-reveal summary {
    display: flex;
    align-items: center;
    min-height: var(--size-touch);
  }
  .cr-confirm.jx-dialog {
    border-radius: var(--radius-lg);
  }

  /* Die Bereiche wandern in eine Leiste unten, aus Glas wie die Kopfleiste (design/components/Kopfleiste). */
  .cr-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--material);
    -webkit-backdrop-filter: var(--blur-material);
    backdrop-filter: var(--blur-material);
    box-shadow: inset 0 1px 0 var(--line);
  }
  .cr-tabbar a {
    display: grid;
    place-items: center;
    min-height: var(--size-touch);
    padding: 0 var(--space-1);
    color: var(--ink-muted);
    text-align: center;
    text-decoration: none;
    font-size: var(--type-small-size);
    line-height: var(--type-small-line);
  }
  .cr-tabbar a[aria-current="page"] {
    color: var(--ink);
    font-weight: var(--type-label-weight);
  }
  .cr-tabbar a:focus-visible {
    outline: 2px solid transparent;
    box-shadow: inset 0 0 0 2px var(--brand);
  }
}