/* ============================================================================
   Routetrip — Deling & adgang (sharing.css)
   Delekode-boks på forsiden, "Delt med mig", personer-panel, join-kode + QR,
   og et børnevenligt numerisk tastatur til guide-gaten.
   Bruger KUN --rt-* tokens fra theme.css — aldrig rå hex.
   Linket fra både index.html (dashboard) og guide.html (gaten).
   ============================================================================ */

/* ==========================================================================
   1. FORSIDE — "Har du en kode?" (join-boks)
   Bruges både på den udloggede landing og som afsløret boks på dashboardet.
   ========================================================================== */
.rt-join {
  display: grid;
  gap: var(--rt-space-2);
  max-width: 24rem;
}
.rt-join__form {
  display: flex;
  gap: var(--rt-space-2);
  align-items: stretch;
  flex-wrap: wrap;
}
.rt-join__input {
  flex: 1 1 8rem;
  min-width: 0;
  text-align: center;
  font-family: var(--rt-font-mono);
  font-size: var(--rt-fs-lg);
  letter-spacing: 0.28em;
  /* indryk så cifrene ser centrerede ud trods letter-spacing */
  text-indent: 0.28em;
}
.rt-join__input::placeholder {
  letter-spacing: 0.12em;
  text-indent: 0;
  font-size: var(--rt-fs-base);
}
.rt-join__btn {
  flex: 0 0 auto;
  white-space: nowrap;
}
.rt-join__error {
  margin: 0;
  min-height: 1.2em;
  font-size: var(--rt-fs-sm);
  color: var(--rt-danger);
}
.rt-join__error:empty {
  min-height: 0;
}
.rt-join__hint {
  margin: 0;
  font-size: var(--rt-fs-sm);
  color: var(--rt-text-faint);
}

/* Landing: give the join box a little air below the login CTA */
.lp-joinbox {
  display: grid;
  gap: var(--rt-space-2);
  max-width: 24rem;
  margin-top: var(--rt-space-5);
}

/* Dashboard header: group the reveal + "Ny tur" button */
.db-header__actions {
  display: flex;
  align-items: center;
  gap: var(--rt-space-3);
  flex-wrap: wrap;
}
.db-joinwrap {
  display: grid;
  gap: var(--rt-space-2);
  justify-items: start;
}
.db-joinreveal {
  white-space: nowrap;
}

/* ==========================================================================
   2. DASHBOARD — "Delt med mig"
   ========================================================================== */
.db-shared {
  margin-top: var(--rt-space-8);
}
.db-shared__title {
  margin: 0 0 var(--rt-space-5);
  font: var(--rt-fw-medium) var(--rt-fs-xl)/var(--rt-lh-snug) var(--rt-font-display);
  letter-spacing: var(--rt-tracking-tight);
}

/* Genbrug .db-grid til selve gitteret. Kortene er de eksisterende .rt-card. */

/* Rolle-badge på delte ture */
.db-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--rt-space-1);
  padding: 0.15em 0.6em;
  border-radius: var(--rt-radius-pill);
  font: var(--rt-fw-semibold) var(--rt-fs-xs)/1.4 var(--rt-font-sans);
  letter-spacing: var(--rt-tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
}
.db-badge--view {
  color: var(--rt-info);
  background: var(--rt-info-50);
}
.db-badge--edit {
  color: var(--rt-accent);
  background: var(--rt-accent-50);
}

/* ==========================================================================
   3. PERSONER-PANEL (ejer) — medlemmer + parrede enheder
   Afsløres fra ejerkortet ligesom .db-share.
   ========================================================================== */
.db-people {
  margin-top: var(--rt-space-4);
  padding-top: var(--rt-space-4);
  border-top: var(--rt-hairline);
  display: grid;
  gap: var(--rt-space-4);
}
.db-people__group {
  display: grid;
  gap: var(--rt-space-2);
}
.db-people__grouptitle {
  margin: 0;
  font: var(--rt-fw-semibold) var(--rt-fs-sm)/1.2 var(--rt-font-sans);
  color: var(--rt-text-muted);
}
.db-people__row {
  display: flex;
  align-items: center;
  gap: var(--rt-space-3);
  flex-wrap: wrap;
  padding: var(--rt-space-3);
  background: var(--rt-surface-2);
  border-radius: var(--rt-radius-md);
}
.db-people__name {
  flex: 1 1 8rem;
  min-width: 0;
  display: grid;
  gap: 2px;
  font: var(--rt-fw-semibold) var(--rt-fs-sm)/1.25 var(--rt-font-sans);
  color: var(--rt-text);
}
.db-people__name small {
  font-weight: var(--rt-fw-regular);
  font-size: var(--rt-fs-xs);
  color: var(--rt-text-muted);
}
.db-people__role {
  flex: 0 0 auto;
  font-size: var(--rt-fs-sm);
  padding-block: var(--rt-space-1);
}
.db-people__actions {
  flex: 0 0 auto;
  display: flex;
  gap: var(--rt-space-2);
  flex-wrap: wrap;
}
.db-people__empty {
  margin: 0;
  font-size: var(--rt-fs-sm);
  color: var(--rt-text-faint);
  font-style: italic;
}

/* ==========================================================================
   4. JOIN-KODE (stort tal) + QR
   ========================================================================== */
.db-share__codeblock {
  display: grid;
  gap: var(--rt-space-2);
  justify-items: start;
}
.db-joincode {
  display: inline-block;
  font-family: var(--rt-font-mono);
  font-size: var(--rt-fs-2xl);
  font-weight: var(--rt-fw-medium);
  letter-spacing: 0.18em;
  /* modvirk letter-spacing på højre kant */
  padding: 0.1em 0.1em 0.1em 0.25em;
  color: var(--rt-text);
  line-height: 1.1;
}
.db-qr {
  max-width: 160px;
  width: 100%;
  padding: var(--rt-space-2);
  background: #fff;
  border: var(--rt-hairline);
  border-radius: var(--rt-radius-md);
}
.db-qr svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   5. BØRNE-TASTATUR (guide-gate) — .g-gate fjerner data-theme, så lys baggrund.
   Stort, tap-venligt numerisk keypad med 6-prik display.
   ========================================================================== */
.g-keypad {
  display: grid;
  gap: var(--rt-space-4);
  justify-items: center;
}
.g-keypad__display {
  display: grid;
  gap: var(--rt-space-3);
  justify-items: center;
  width: 100%;
}

/* 6 prik-celler der fyldes efterhånden som cifre tastes */
.g-pinrow {
  display: flex;
  gap: var(--rt-space-3);
  justify-content: center;
}
.g-pinrow__dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--rt-surface-2);
  border: 2px solid var(--rt-border-strong);
  transition: transform var(--rt-dur-fast) var(--rt-ease),
    background var(--rt-dur) var(--rt-ease),
    border-color var(--rt-dur) var(--rt-ease);
}
.g-pinrow__dot--on {
  background: var(--rt-primary);
  border-color: var(--rt-primary);
  transform: scale(1.12);
}

.g-keypad__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--rt-space-3);
  width: min(100%, 20rem);
}
.g-keypad__key {
  -webkit-appearance: none;
  appearance: none;
  min-height: 64px;
  min-width: 64px;
  display: grid;
  place-items: center;
  padding: var(--rt-space-3);
  font: var(--rt-fw-bold) var(--rt-fs-xl)/1 var(--rt-font-kids);
  color: var(--rt-text);
  background: var(--rt-surface);
  border: 2px solid var(--rt-border);
  border-radius: var(--rt-radius-lg);
  box-shadow: var(--rt-shadow-xs);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--rt-dur-fast) var(--rt-ease),
    background var(--rt-dur) var(--rt-ease),
    border-color var(--rt-dur) var(--rt-ease);
}
.g-keypad__key:hover {
  border-color: var(--rt-primary);
}
.g-keypad__key:active {
  transform: scale(0.94);
  background: var(--rt-surface-2);
}
.g-keypad__key:focus-visible {
  outline: none;
  box-shadow: var(--rt-shadow-focus);
}
/* Handlingstaster (ryd / slet) — mere afdæmpede */
.g-keypad__key--action {
  font-family: var(--rt-font-sans);
  font-size: var(--rt-fs-lg);
  color: var(--rt-text-muted);
  background: var(--rt-surface-2);
  border-color: transparent;
  box-shadow: none;
}
.g-keypad__key--action:hover {
  border-color: var(--rt-border-strong);
}

/* Lille ryste-animation ved forkert kode (guide.js tilføjer klassen) */
.g-keypad--shake {
  animation: g-keypad-shake 0.4s var(--rt-ease);
}
@keyframes g-keypad-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .g-pinrow__dot,
  .g-keypad__key { transition: none; }
  .g-keypad--shake { animation: none; }
}