/*
 * OpenYardage · login.css
 * Gehört zu public/js/login.js (Anmeldung mit Google ODER per E-Mail-Link).
 * Einbindung durch die Integration:  <link rel="stylesheet" href="css/login.css">
 *
 * Design-Tokens aus dem :root von index.html. Jede Angabe trägt denselben Wert
 * als Fallback, damit die Karte auch allein läuft (Testseite, ds/-Karte).
 * Papier #ece7db, Karte #fffdf7, Ink #21251f, gedämpft #6b6252, schwach #8a8170,
 * Linien #d8d1c0, Grün #2f6b46.
 * Rot #b23a2e ausschliesslich für Fehler. Nicht für Hinweise, nicht für die
 * Rückfrage nach der Adresse: die ist eine Frage, keine Störung.
 * Georgia für Fliesstext, 'Courier New' für alle Beschriftungen in
 * Grossbuchstaben, Radien durchgehend 3px.
 *
 * ===========================================================================
 * DIE EINE GESTALTUNGSENTSCHEIDUNG: ZWEI SPALTEN, GLEICH GROSS
 * ===========================================================================
 * Beide Anmeldewege liegen nebeneinander in einem Raster aus zwei gleichen
 * Spalten, mit demselben Knopf, derselben Schrift, demselben Abstand. Der
 * übliche Aufbau (grosser Google-Knopf oben, darunter klein "oder mit E-Mail")
 * ist genau das, was hier NICHT gewollt ist: er beantwortet die Frage, bevor
 * sie gestellt wurde. Wer kein Google will, soll den zweiten Weg nicht suchen
 * müssen.
 *
 * Unter 620px wird gestapelt, weil zwei Spalten auf einem Telefon zwei
 * Streifen wären. Gestapelt bleiben sie trotzdem gleichwertig: gleicher
 * Rahmen, gleicher Knopf, dazwischen dasselbe ODER.
 * ========================================================================== */

/* ==========================================================================
   Overlay. Nur nötig, wenn die Karte als Dialog kommt (window.signIn oder die
   Rückkehr über den Link). Auf einer eigenen Seite steht .oy-lg allein da und
   braucht davon nichts.
   ========================================================================== */
.oy-lg-ovl {
  position: fixed; inset: 0; z-index: 950;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 24px 14px;
  background: rgba(33, 37, 31, .52);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* [hidden] muss gegen display:flex und display:grid gewinnen */
.oy-lg-ovl[hidden],
.oy-lg [hidden] { display: none !important; }

/* ==========================================================================
   Die Karte
   ========================================================================== */
.oy-lg {
  width: 100%; max-width: 640px; margin: auto;
  background: var(--card2, #fffdf7);
  border: 1.5px solid var(--line2, #c9c1ad); border-radius: 3px;
  color: var(--ink, #21251f);
}
/* Schatten nur im Overlay: dort liegt die Karte auf der Seite. Fest auf einer
   Seite eingesetzt bleibt sie flach, das Papier darunter ist schon Papier. */
.oy-lg-ovl .oy-lg { box-shadow: 0 10px 34px rgba(33, 37, 31, .22); }

/* ==========================================================================
   Kopf
   ========================================================================== */
.oy-lg-kopf {
  position: relative;
  padding: 16px 18px 13px;
  border-bottom: 1px solid var(--line, #d8d1c0);
  background: var(--card, #faf7ef);
}
.oy-lg-titel {
  margin: 0;
  font-family: var(--mono, 'Courier New', Courier, monospace);
  font-size: 13px; font-weight: 700; letter-spacing: .17em;
  color: var(--ink, #21251f);
}
.oy-lg-unter {
  margin-top: 5px;
  font-family: var(--mono, 'Courier New', Courier, monospace);
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  color: var(--faint, #8a8170);
}

/* Schliessen. Nur da, wenn die Integration schliessbar:true setzt. */
.oy-lg-x {
  position: absolute; top: 9px; right: 10px;
  width: 28px; height: 28px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid transparent; border-radius: 3px;
  font-family: var(--mono, 'Courier New', Courier, monospace);
  font-size: 19px; line-height: 1; color: var(--faint, #8a8170);
  cursor: pointer;
}
.oy-lg-x:hover {
  background: var(--card2, #fffdf7);
  border-color: var(--line, #d8d1c0);
  color: var(--ink, #21251f);
}

/* ==========================================================================
   Rumpf
   ========================================================================== */
.oy-lg-rumpf { padding: 16px 18px 18px; }

.oy-lg-satz {
  margin: 0 0 16px;
  padding: 9px 11px;
  border: 1px dashed var(--line2, #c9c1ad); border-radius: 3px;
  background: var(--card, #faf7ef);
  font-family: var(--serif, Georgia, 'Times New Roman', serif);
  font-size: 12.5px; line-height: 1.5; font-style: italic;
  color: var(--mut, #6b6252);
}

/* ==========================================================================
   Die zwei Wege. Zwei gleiche Spalten, dazwischen eine senkrechte Linie mit
   ODER darin. Die mittlere Spalte ist bewusst schmal (auto), damit die beiden
   Wege exakt gleich breit bleiben und keiner grösser wirkt.
   ========================================================================== */
.oy-lg-wege {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
}

.oy-lg-weg {
  display: flex; flex-direction: column;
  padding: 4px 16px 2px;
  margin: 0;
}
/* Erste und letzte Spalte an den Rumpf-Rand ziehen, sonst sitzt der Inhalt
   doppelt eingerückt. */
.oy-lg-weg:first-child { padding-left: 0; }
.oy-lg-weg:last-child { padding-right: 0; }

.oy-lg-wnr {
  font-family: var(--mono, 'Courier New', Courier, monospace);
  font-size: 9px; font-weight: 700; letter-spacing: .2em;
  color: var(--ghost, #b8ae98);
}
.oy-lg-wt {
  margin: 5px 0 7px;
  font-family: var(--mono, 'Courier New', Courier, monospace);
  font-size: 12px; font-weight: 700; letter-spacing: .13em;
  color: var(--ink, #21251f);
}
.oy-lg-wp {
  margin: 0 0 14px;
  font-family: var(--serif, Georgia, 'Times New Roman', serif);
  font-size: 13px; line-height: 1.55;
  color: var(--ink2, #4a463c);
  /* Schiebt den Knopf beider Spalten auf dieselbe Höhe, auch wenn der eine
     Text eine Zeile länger ist. */
  flex: 1;
}

/* Das ODER. Eine Linie mit einer Unterbrechung, kein Kasten: es trennt, es
   entscheidet nicht. */
.oy-lg-oder {
  position: relative;
  width: 1px; min-height: 100%;
  margin: 4px 0 2px;
  background: var(--line, #d8d1c0);
  display: flex; align-items: center; justify-content: center;
}
.oy-lg-oder span {
  position: absolute;
  padding: 5px 0;
  background: var(--card2, #fffdf7);
  font-family: var(--mono, 'Courier New', Courier, monospace);
  font-size: 9px; font-weight: 700; letter-spacing: .16em;
  color: var(--ghost, #b8ae98);
  writing-mode: vertical-rl;
}

/* ==========================================================================
   Beschriftung, Eingabefeld
   ========================================================================== */
.oy-lg-lb {
  display: block; margin: 0 0 6px;
  font-family: var(--mono, 'Courier New', Courier, monospace);
  font-size: 9.5px; font-weight: 700; letter-spacing: .16em;
  color: var(--mut, #6b6252);
}

.oy-lg-in {
  display: block; width: 100%; box-sizing: border-box;
  margin: 0 0 10px;
  padding: 10px 11px;
  border: 1px solid var(--line2, #c9c1ad); border-radius: 3px;
  background: var(--card2, #fffdf7);
  font-family: var(--mono, 'Courier New', Courier, monospace);
  /* 16px, damit iOS beim Hineintippen nicht hineinzoomt. Darunter zoomt
     Safari von selbst, und danach steht die Karte schief. */
  font-size: 16px; letter-spacing: .02em;
  color: var(--ink, #21251f);
  outline: none;
}
.oy-lg-in::placeholder { color: var(--ghost, #b8ae98); letter-spacing: 0; }
.oy-lg-in:focus {
  border-color: var(--green, #2f6b46);
  box-shadow: 0 0 0 2px var(--green-bg, #f2f6ee);
}

/* ==========================================================================
   Knöpfe. Beide Wege tragen denselben, das ist der Punkt.
   ========================================================================== */
.oy-lg-btn {
  display: block; width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--green, #2f6b46); border-radius: 3px;
  background: var(--green, #2f6b46); color: #f5f1e6;
  font-family: var(--mono, 'Courier New', Courier, monospace);
  font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-align: center; cursor: pointer;
}
.oy-lg-btn:hover:not(:disabled) {
  background: var(--green-dk, #1d4a2f); border-color: var(--green-dk, #1d4a2f);
}
.oy-lg-btn.ghost {
  background: none; color: var(--green, #2f6b46);
}
.oy-lg-btn.ghost:hover:not(:disabled) {
  background: var(--green, #2f6b46); color: #f5f1e6;
}
.oy-lg-btn:disabled {
  opacity: .55; cursor: default;
}
/* Wartezustand. Der Knopf sagt selbst, was läuft (js/login.js tauscht die
   Beschriftung), hier kommt nur das Zeichen dazu, dass er gerade nichts
   annimmt. */
.oy-lg-btn[aria-busy="true"] {
  background: var(--mut, #6b6252); border-color: var(--mut, #6b6252);
  color: #f5f1e6; cursor: progress; opacity: 1;
}

/* Nebensächliche Aktion, sieht aus wie ein Verweis, nicht wie ein Knopf. */
.oy-lg-lnk {
  padding: 4px 2px;
  background: none; border: 0; border-bottom: 1px solid var(--line2, #c9c1ad);
  border-radius: 0;
  font-family: var(--mono, 'Courier New', Courier, monospace);
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  color: var(--mut, #6b6252); cursor: pointer;
}
.oy-lg-lnk:hover { color: var(--green, #2f6b46); border-bottom-color: var(--green, #2f6b46); }

/* ==========================================================================
   Tafeln: unterwegs, Rückfrage, läuft, fertig. Immer nur eine sichtbar.
   ========================================================================== */
.oy-lg-tafel { display: block; }

.oy-lg-mark {
  width: 38px; height: 38px; margin: 2px 0 12px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line2, #c9c1ad); border-radius: 3px;
  background: var(--card, #faf7ef);
  font-size: 19px; line-height: 1;
  color: var(--mut, #6b6252);
}
.oy-lg-mark.ok {
  border-color: var(--green, #2f6b46);
  background: var(--green-bg, #f2f6ee);
  color: var(--green, #2f6b46);
}

.oy-lg-tt {
  margin: 0 0 8px;
  display: flex; align-items: center;
  font-family: var(--mono, 'Courier New', Courier, monospace);
  font-size: 12px; font-weight: 700; letter-spacing: .13em;
  color: var(--ink, #21251f);
}
.oy-lg-tp {
  margin: 0 0 12px;
  font-family: var(--serif, Georgia, 'Times New Roman', serif);
  font-size: 13.5px; line-height: 1.6;
  color: var(--ink2, #4a463c);
}
.oy-lg-tp b {
  font-family: var(--mono, 'Courier New', Courier, monospace);
  font-size: 12.5px; font-weight: 700;
  color: var(--ink, #21251f);
  overflow-wrap: anywhere;      /* lange Adressen dürfen die Karte nicht sprengen */
}

/* Die drei Hinweise auf der Warte-Tafel. Keine Aufzählungspunkte, sondern
   kurze Striche: es ist eine Anleitung, keine Liste von Bedingungen. */
.oy-lg-tipps {
  margin: 0 0 16px; padding: 0; list-style: none;
  border-top: 1px solid var(--line3, #eee8da);
}
.oy-lg-tipps li {
  padding: 8px 0 8px 15px;
  position: relative;
  border-bottom: 1px solid var(--line3, #eee8da);
  font-family: var(--serif, Georgia, 'Times New Roman', serif);
  font-size: 12.5px; line-height: 1.5;
  color: var(--mut, #6b6252);
}
.oy-lg-tipps li::before {
  content: '·';
  position: absolute; left: 3px; top: 8px;
  font-family: var(--mono, 'Courier New', Courier, monospace);
  font-weight: 700; color: var(--ghost, #b8ae98);
}

.oy-lg-reihe {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.oy-lg-reihe .oy-lg-btn { width: auto; min-width: 190px; }

/* Der Ausgang aus der Rückfrage. Sitzt tiefer und ist leiser als alles
   andere: er ist der Weg für den Fall, dass gar nichts mehr geht. */
.oy-lg-aus { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line3, #eee8da); }

.oy-lg-fein {
  margin: 10px 0 0;
  font-family: var(--serif, Georgia, 'Times New Roman', serif);
  font-size: 11.5px; line-height: 1.5; font-style: italic;
  color: var(--faint, #8a8170);
}

/* Wartepunkte. Drei Punkte, die nacheinander aufblenden. Kein Kreisel: der
   dreht sich auch dann noch, wenn längst nichts mehr passiert. */
.oy-lg-punkte { display: inline-flex; gap: 3px; margin-left: 7px; }
.oy-lg-punkte i {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--green, #2f6b46);
  opacity: .25;
  animation: oy-lg-blink 1.1s infinite ease-in-out;
}
.oy-lg-punkte i:nth-child(2) { animation-delay: .16s; }
.oy-lg-punkte i:nth-child(3) { animation-delay: .32s; }
@keyframes oy-lg-blink {
  0%, 70%, 100% { opacity: .25; }
  35%           { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .oy-lg-punkte i { animation: none; opacity: .6; }
}

/* ==========================================================================
   Meldezeile. Eine Stelle für alles, was die Karte zu sagen hat, direkt unter
   dem gerade sichtbaren Zustand.
   ========================================================================== */
.oy-lg-msg {
  margin: 14px 0 0;
  font-family: var(--serif, Georgia, 'Times New Roman', serif);
  font-size: 12.5px; line-height: 1.55;
  color: var(--mut, #6b6252);
}
.oy-lg-msg:empty { display: none; }

.oy-lg-msg.err {
  padding: 9px 11px;
  border: 1px solid var(--red, #b23a2e); border-radius: 3px;
  background: var(--red-bg, #fdf6f4);
  color: var(--red, #b23a2e);
}
.oy-lg-msg.ok {
  padding: 9px 11px;
  border: 1px solid var(--green, #2f6b46); border-radius: 3px;
  background: var(--green-bg, #f2f6ee);
  color: var(--green, #2f6b46);
}
.oy-lg-msg.info {
  padding: 9px 11px;
  border: 1px dashed var(--line2, #c9c1ad); border-radius: 3px;
  background: var(--card, #faf7ef);
}

/* ==========================================================================
   Schmal. Ab hier stehen die Wege übereinander, das ODER wird waagerecht.
   ========================================================================== */
@media (max-width: 620px) {
  .oy-lg-wege { grid-template-columns: 1fr; }

  .oy-lg-weg { padding: 0; }
  .oy-lg-weg:first-child { padding-left: 0; }
  .oy-lg-weg:last-child { padding-right: 0; }
  .oy-lg-wp { flex: none; }

  .oy-lg-oder {
    width: auto; min-height: 0; height: 1px;
    margin: 20px 0;
  }
  .oy-lg-oder span {
    writing-mode: horizontal-tb;
    padding: 0 10px;
  }

  .oy-lg-rumpf { padding: 14px 15px 16px; }
  .oy-lg-reihe .oy-lg-btn { width: 100%; min-width: 0; }
  .oy-lg-reihe { gap: 10px; }
}

/* Sehr schmal: die Karte darf den Rand berühren, Platz ist wertvoller als
   Symmetrie. */
@media (max-width: 380px) {
  .oy-lg-ovl { padding: 12px 8px; }
}

/* ==========================================================================
   Tastatur. Ohne diese Regel ist auf der Karte nicht zu sehen, wo man steht,
   sobald der Browser seinen eigenen Ring wegnimmt.
   ========================================================================== */
.oy-lg-btn:focus-visible,
.oy-lg-lnk:focus-visible,
.oy-lg-x:focus-visible,
.oy-lg-in:focus-visible {
  outline: 2px solid var(--green, #2f6b46);
  outline-offset: 2px;
}

/* Druck. Eine Anmeldemaske auf Papier ist sinnlos, aber wer die Seite
   ausdruckt, soll wenigstens keine leere Fläche bekommen. */
@media print {
  .oy-lg-ovl { display: none !important; }
}