/* ============================================================
   Mobile Geburtsdaten-Eingabe

   Nur fuer die Astro-Geografie-Werkzeugseite. Vergroessert native
   Eingabefelder und begrenzt die Ortsvorschlaege auf die wirklich
   sichtbare Hoehe, insbesondere bei eingeblendeter Bildschirmtastatur.
   ============================================================ */

@media (max-width: 760px) {
  .app-shell.astro-page #birth-form input:not([type="hidden"]),
  .app-shell.astro-page #birth-form select,
  .app-shell.astro-page #birth-form > .calculate-button {
    min-height: 48px;
  }

  .app-shell.astro-page #birth-form .place-list {
    max-height: min(280px, 40dvh);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .app-shell.astro-page #birth-form .place-list button {
    min-height: 52px;
    touch-action: manipulation;
  }

  .app-shell.astro-page .astro-map-panel {
    scroll-margin-top: calc(72px + env(safe-area-inset-top, 0px));
  }

  .app-shell.astro-page #birth-form #place-input[aria-invalid="true"] {
    border-color: #ff7a8a;
    box-shadow: 0 0 0 3px rgba(255, 84, 112, 0.18);
  }

  .app-shell.astro-page #birth-form .field-hint.is-error {
    color: #ff9aaa;
    font-weight: 700;
  }

  .app-shell.astro-page #birth-form .place-list button[aria-selected="true"] {
    background: #dff3f5;
    color: #002f38;
  }
}

/* Klassische Tabletbreiten lagen oberhalb des bisherigen kompakten
   Formularrasters und fielen dadurch in gequetschte Spalten. Zwischen
   621 und 900px bleiben Datum und Zeit in zwei ruhigen Spalten;
   Ort und Aktion erhalten jeweils eine volle Zeile. */
@media (min-width: 621px) and (max-width: 900px) {
  .app-shell.astro-page #birth-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-shell.astro-page #birth-form > label.birth-field-name,
  .app-shell.astro-page #birth-form .birth-field-place,
  .app-shell.astro-page #birth-form .advanced-options,
  .app-shell.astro-page #birth-form > .calculate-button {
    grid-column: 1 / -1;
  }

  .app-shell.astro-page #birth-form > .birth-field-date,
  .app-shell.astro-page #birth-form > .birth-field-time {
    grid-column: span 1;
  }

  .app-shell.astro-page #birth-form input:not([type="hidden"]),
  .app-shell.astro-page #birth-form select,
  .app-shell.astro-page #birth-form > .calculate-button {
    min-height: 48px;
  }

  .app-shell.astro-page #birth-form input:not([type="hidden"]),
  .app-shell.astro-page #birth-form select {
    font-size: 16px;
  }

  .app-shell.astro-page #birth-form .place-list {
    max-height: min(280px, 40dvh);
    overscroll-behavior: contain;
  }

  .app-shell.astro-page #birth-form .place-list button {
    min-height: 52px;
    touch-action: manipulation;
  }
}

/* iPhone-Räder 14.07.: Tag, Monat und Jahr bleiben native Einzel-Selects. Ihre
   Optionslisten sind statisch; Groesse und 16px-Schrift kommen aus den Regeln oben
   beziehungsweise src/styles.css, ohne die native Rad-Bedienung umzubauen. */

/* Themen-Block als <details class="intent-fold"> (Daniel 16.07.2026): mobil EINE
   geschlossene Zeile, oeffnet per Tipp; im Offen-Zustand brechen die Chips normal um.
   Die fruehere Wischleiste (Commit 103e8c9) ist zurueckgebaut, der Anschnitt wirkte
   verwirrend. Desktop haelt src/intent-chips.js den Block dauerhaft offen. */
.app-shell.astro-page .intent-fold > summary {
  list-style: none;
  position: relative;
  cursor: pointer;
}
.app-shell.astro-page .intent-fold > summary::-webkit-details-marker {
  display: none;
}
.app-shell.astro-page .intent-fold > summary:focus-visible {
  outline: 2px solid var(--bridge-cyan-bright, #35d4e8);
  outline-offset: 3px;
  border-radius: 8px;
}
/* Kicker war ein <p> in .intent-chips-head (src/styles.css); als <span> im <summary>
   bekommt er dieselbe Optik hier. */
.app-shell.astro-page .intent-kicker {
  display: block;
  margin: 0 0 4px;
  color: var(--bridge-cyan-bright, #35d4e8);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* Ersetzt den Grid-gap der Sektion, der Kopf, Chip-Zeile und Antworten trennte,
   bevor alle drei in das <details> wanderten. */
.app-shell.astro-page .intent-fold > .intent-chips-row,
.app-shell.astro-page .intent-fold > .intent-answers {
  margin-top: 14px;
}

@media (max-width: 620px) {
  /* Summary-Zeile kompakt, klar antippbar, mit dezentem Chevron rechts. */
  .app-shell.astro-page .intent-fold > summary {
    min-height: 44px;
    padding-right: 34px;
  }
  .app-shell.astro-page .intent-fold > summary::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--bridge-cyan-bright, #35d4e8);
    border-bottom: 2px solid var(--bridge-cyan-bright, #35d4e8);
    transform: translateY(-75%) rotate(45deg);
    transition: transform 0.2s ease;
  }
  .app-shell.astro-page .intent-fold[open] > summary::after {
    transform: translateY(-25%) rotate(225deg);
  }
  .app-shell.astro-page #birth-form.input-grid {
    gap: 10px;
  }
}

@media (min-width: 621px) {
  /* Desktop ist dauerhaft offen: summary nicht wie ein Button wirken lassen. */
  .app-shell.astro-page .intent-fold > summary {
    cursor: default;
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell.astro-page .intent-fold > summary::after {
    transition: none;
  }
}