/* Filter, Werte statt Felder, Duplikate, Unterwegs, Einstellungen. Teil 06 der Gestaltung - die Reihenfolge steht in index.html
   und ist bindend: spaetere Regeln ueberschreiben fruehere. *//* ===== V22: QR in fester Groesse, Startseiten-Karten ===== *//* Der Code wird in doppelter Aufloesung gezeichnet - die Anzeigegroesse
   gehoert deshalb hierher, sonst waere er ueberall 460 Pixel breit. */
.qr-shell img,.qr-shell canvas{display:block;width:190px;max-width:100%;height:auto}
.qr-shell.big img,.qr-shell.big canvas{width:230px}

/* Neu kennengelernt */
.fresh-card{margin-bottom:12px}
.fresh-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.fresh-card .city-names{display:flex;flex-wrap:wrap;gap:7px}

/* Nachverfolgung, die erst noch faellig wird */
.soon-card{margin-bottom:12px}
.soon-head{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line,#eef0f5)}
.soon-item{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:11px 2px;border:0;background:transparent;cursor:pointer;
  border-bottom:1px solid #f2f3f7;
}
.soon-item:last-child{border-bottom:0;padding-bottom:2px}
.soon-item:active{opacity:.6}
.soon-due{
  flex:0 0 auto;min-width:40px;text-align:center;
  font-size:15px;font-weight:800;color:#48526a;font-variant-numeric:tabular-nums;
}
.soon-due small{font-size:10px;font-weight:700;opacity:.65;margin-left:1px}

@media (prefers-color-scheme: dark){
  .soon-head{border-color:#252b3a}
  .soon-item{border-color:#1d2331}
  .soon-due{color:#b0bcb8}
}

/* ===== V23: sichtbarer Filter, Suche in der Kopfzeile ===== */
.filter-bar{margin:10px 0 6px}
.filter-bar .chips{display:flex;flex-wrap:wrap;gap:7px}
.filter-bar-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;padding:0 2px}

/* Der aktive Filter traegt sein eigenes Kreuz - man nimmt ihn dort weg,
   wo man ihn sieht, statt dafuer das Filter-Sheet zu oeffnen. */
.chip.removable{display:inline-flex;align-items:center;gap:6px;padding-right:9px}
.chip.removable .ico{margin-right:0}
.chip.removable .chip-x{
  display:grid;place-items:center;width:17px;height:17px;border-radius:50%;
  background:rgba(255,255,255,.22);
}
.chip.removable .chip-x .ico{width:10px;height:10px}
.chip.removable .relation-dot{margin:0}

@media (prefers-color-scheme: dark){
  .chip.removable .chip-x{background:rgba(0,0,0,.22)}
}

/* ===== V24: Werte statt Eingabefelder ===== *//* Der Verbinden-Screen: drei ruhige Zeilen statt vier Formularfelder. */
.capture-line{
  display:flex;align-items:center;gap:9px;
  font-size:13.5px;color:#48526a;padding:5px 0;text-align:left;
}
.capture-line .ico{width:15px;height:15px;flex:0 0 auto;opacity:.6}
.capture-line strong{color:var(--text)}
.capture-src{font-size:11px;color:#98a0b0;margin-left:2px}

.capture-actions{display:flex;gap:16px;margin-top:10px;padding-top:11px;border-top:1px solid var(--line,#e8eaf0)}
.capture-link{
  border:0;background:transparent;padding:0;cursor:pointer;
  font-size:13px;font-weight:700;color:#5b6478;
}
.capture-link:active{opacity:.6}
.capture-link[hidden]{display:none}
.capture-edit{margin-top:12px;display:flex;flex-direction:column;gap:13px}
.capture-edit[hidden]{display:none}
#capNoteRow[hidden]{display:none}

/* Was die App beim Anlegen ohnehin weiss - Kontext, kein Eingabefeld. */
.context-note{
  display:flex;flex-direction:column;gap:3px;
  padding:11px 12px;border-radius:13px;background:#f6f7fb;border:1px solid var(--line,#e8eaf0);
}
.context-line{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#5b6478}
.context-line .ico{width:14px;height:14px;flex:0 0 auto;opacity:.6}
.context-line strong{color:var(--text)}

@media (prefers-color-scheme: dark){
  .capture-line{color:#b0bcb8}
  .capture-actions{border-color:#252b3a}
  .capture-link{color:#8b96a8}
  .capture-src{color:#6d7686}
  .context-note{background:#131a28;border-color:#252b3a}
  .context-line{color:#8b96a8}
}

/* ===== V25: Personenseite zeigt Werte, keine Felder ===== */
.person-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.person-headline{font-size:14px;font-weight:700;color:var(--text)}

.value-list{display:flex;flex-direction:column;margin-top:18px;border-top:1px solid var(--line,#eef0f5)}
/* Nach dem Vorbild der Kontakte-App des Telefons: die Beschriftung steht
   klein darueber, der Wert gross darunter, das ganze Feld ist die Flaeche.
   Vorher standen Beschriftung und Wert nebeneinander in einer 48px-Zeile -
   der Wert konkurrierte mit seinem eigenen Etikett um die Breite, und auf
   einem schmalen Telefon blieben fuer eine Telefonnummer 60 Prozent uebrig. */
.value-row{
  display:grid;grid-template-columns:1fr auto;grid-template-areas:"label edit" "value edit";
  align-items:center;gap:3px 12px;min-height:66px;
  width:100%;text-align:left;padding:12px 4px;border:0;border-bottom:1px solid var(--hairline,#f0f1f4);
  background:transparent;cursor:pointer;font:inherit;
}
.value-row.static{cursor:default}
.value-row:active:not(.static){background:#f7f8fb}
/* Die Bearbeiten-Marke stand auf #c2c8d4 - Kontrast 1,68:1 gegen Weiss.
   Die Affordanz war da, nur unsichtbar. Diese vier Toene laufen jetzt ueber
   Tokens und liegen alle ueber 4,5:1. */
.value-label{grid-area:label;font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.01em}
.value-text{grid-area:value;font-size:17px;line-height:1.35;color:var(--text);overflow-wrap:anywhere}
.value-empty{grid-area:value;color:var(--muted);font-weight:600;font-size:16px}
.value-src{grid-area:value;align-self:end;font-size:11px;color:var(--faint);white-space:normal}
.value-edit{color:var(--muted);display:flex;align-self:center}
.value-edit .ico{width:15px;height:15px}
.add-row{grid-template-areas:"value edit";min-height:56px;border-bottom:0}
.value-edit .ico{width:17px;height:17px}

/* Der offene Zustand: nur dieser eine Wert. */
.value-row.editing{
  display:flex;flex-direction:column;align-items:stretch;gap:9px;
  cursor:default;padding:14px 2px;
}
.value-row.editing input,.value-row.editing select,.value-row.editing textarea{
  width:100%;border:1px solid #dcdfe8;border-radius:12px;padding:11px 13px;
  font-size:16px;background:#fff;color:var(--text);font-family:inherit;
  -webkit-appearance:none;appearance:none;
}
.value-row.editing input:focus,.value-row.editing select:focus{
  outline:0;border-color:#0b0f1a;box-shadow:0 0 0 3px rgba(11,15,26,.08);
}
.value-actions{display:flex;justify-content:flex-end;gap:8px}
/* Loeschen ist erreichbar, aber nicht gleichrangig mit dem Rest. */
.danger-quiet{color:var(--danger,#b42318);margin-top:18px;font-weight:700}

@media (prefers-color-scheme: dark){
  .value-list,.value-row{border-color:#252b3a}
  .value-row:active:not(.static){background:#151a26}
  .value-label{color:#6d7686}
  .value-empty{color:#8b96a8}
  .value-src{color:#6d7686}
  .value-edit{color:var(--muted)}
  .value-row.editing input,.value-row.editing select,.value-row.editing textarea{
    background:#0e1420;border-color:#2a3243;color:#e6e9f0;
  }
  .value-row.editing input:focus,.value-row.editing select:focus{
    border-color:#5fbfac;box-shadow:0 0 0 3px rgba(95,191,172,.15);
  }
}

/* ===== V26: Duplikate, Favoriten, Ueberschneidungen ===== *//* Der Stern ordnet vor, ohne sich in den Vordergrund zu draengen. */
.fav-btn{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line,#e4e6ee);background:transparent;
  display:grid;place-items:center;cursor:pointer;color:var(--muted);
}
.fav-btn .ico{width:18px;height:18px}
.fav-btn.on{color:#d9a406;border-color:#f0d79a;background:#fffaf0}
.fav-btn:active{transform:scale(.94)}
.fav-mark{display:inline-flex;vertical-align:-2px;color:#d9a406;margin-left:4px}
.fav-mark .ico{width:13px;height:13px}

/* Duplikate: beide Seiten sichtbar, bevor man entscheidet. */
.dupe-pair{
  border:1px solid var(--line,#e4e6ee);border-radius:16px;
  padding:13px;margin-bottom:12px;background:var(--surface,#fff);
}
.dupe-why{
  font-family:ui-monospace,Consolas,monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:#9aa1ae;margin-bottom:10px;
}
.dupe-side{display:flex;align-items:center;gap:10px;padding:7px 0}
.dupe-side+.dupe-side{border-top:1px dashed var(--line,#eef0f5)}
.dupe-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:11px}

.overlap-card{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  border:1px solid var(--line,#e4e6ee);margin-bottom:12px}

.person-row-wrap{display:block}

@media (prefers-color-scheme: dark){
  .fav-btn{border-color:#252b3a;color:#5c6473}
  .fav-btn.on{background:#241d09;border-color:#5a4a16;color:#e6b422}
  .fav-mark{color:#e6b422}
  .my-presence.live{background:#2a1f0c;border-color:#5a4416}
  .my-presence.live .presence-icon{background:#3a2b10;color:#e0ab55}
  .my-presence.weg{background:#1d1836;border-color:#332c55}
  .my-presence.weg .presence-icon{background:#272049;color:#b49ce8}
  .dupe-pair{background:#151a26;border-color:#252b3a}
  .dupe-side+.dupe-side{border-color:#252b3a}
  .overlap-card{background:#151a26;border-color:#252b3a}
}

/* ===== V27: Unterwegs ===== */
.along-link{
  display:flex;align-items:center;gap:9px;width:100%;margin:-4px 0 12px;
  padding:11px 14px;border-radius:14px;border:1px dashed var(--line-strong,#d3d7e0);
  background:transparent;color:#5b6478;font-size:13px;font-weight:700;
  text-align:left;cursor:pointer;
}
.along-link .ico{width:16px;height:16px;flex:0 0 auto;opacity:.6}
.along-link .chev{margin-left:auto;opacity:.5;display:flex}

.along-stop{padding:13px 0;border-bottom:1px solid var(--line,#eef0f5)}
.along-stop:last-of-type{border-bottom:0}
.along-head{display:flex;align-items:baseline;gap:9px;margin-bottom:9px;flex-wrap:wrap}
.along-count{
  display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;
  border-radius:999px;background:#0b0f1a;color:#fff;font-size:11px;font-weight:800;
}

@media (prefers-color-scheme: dark){
  .along-link{border-color:#2c3446;color:#8b96a8}
  .along-stop{border-color:#252b3a}
  .along-count{background:#5fbfac;color:#08110f}
}

/* ===== V28: Liste der neuen Menschen ===== *//* Die Kopfzeile der Karte ist jetzt der Weg in die Liste. */
.fresh-head{
  display:flex;align-items:center;gap:12px;width:100%;margin-bottom:12px;
  padding:0;border:0;background:transparent;text-align:left;cursor:pointer;font:inherit;
}
.fresh-head .chev{margin-left:auto}
.fresh-head:active{opacity:.6}
.chip.subtle{background:transparent;border-style:dashed;color:#6b7280}

/* Sortierung: zwei Zustaende, kein Aufklappmenue fuer eine Entscheidung. */

@media (prefers-color-scheme: dark){
  .chip.subtle{color:#8b96a8}
}

/* ===== V29: weitere Orte ergaenzen ===== *//* Entfernen liegt in der Zeile, die es betrifft - nicht in einem Menue. */
.value-remove{
  border:0;background:transparent;padding:4px;cursor:pointer;color:var(--muted);
  display:flex;align-self:center;
}
.value-remove .ico{width:14px;height:14px}
.value-remove:active{color:var(--danger,#b42318)}
.value-row.editing select{width:100%}

@media (prefers-color-scheme: dark){
  .value-remove{color:var(--muted)}
}

/* ===== V30: Bestaetigen im Feld, sichtbare Duplikate ===== *//* Ein Knopf im Feld, der anbietet, was die Tastatur anbietet. Ersetzt die
   <datalist>, die wie ein Dropdown aussah, auf iOS aber gar nicht
   erschien - und in keinem Fall zeigte, wie man abschliesst. */
.input-go{display:flex;align-items:stretch;gap:0;position:relative}
.input-go input{
  flex:1;min-width:0;
  border:1px solid #dcdfe8;border-right:0;border-radius:13px 0 0 13px;
  padding:12px 14px;font-size:16px;line-height:1.35;background:#fff;color:var(--text);
  -webkit-appearance:none;appearance:none;font-family:inherit;
}
.input-go input:focus{outline:0;border-color:#0b0f1a;box-shadow:0 0 0 3px rgba(11,15,26,.08)}
.input-go input:focus+.go-btn{border-color:#0b0f1a;background:#0b0f1a;color:#fff}
.go-btn{
  flex:0 0 auto;width:52px;border:1px solid #dcdfe8;border-radius:0 13px 13px 0;
  background:#f1f2f6;color:#48526a;display:grid;place-items:center;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.go-btn .ico{width:19px;height:19px}
.go-btn:active{transform:scale(.97)}

.count-badge{
  display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 7px;
  border-radius:999px;background:#b42318;color:#fff;font-size:11px;font-weight:800;
  margin-left:auto;
}

@media (prefers-color-scheme: dark){
  .input-go input{background:#0e1420;border-color:#2a3243;color:#e6e9f0}
  .input-go input:focus{border-color:#5fbfac;box-shadow:0 0 0 3px rgba(95,191,172,.15)}
  .input-go input:focus+.go-btn{border-color:#5fbfac;background:#5fbfac;color:#08110f}
  .go-btn{background:#151a26;border-color:#2a3243;color:#8b96a8}
}

/* ===== V31: Einstellungen in Gruppen, farbige Icons ===== *//* Die Farbe ist eine zweite Unterscheidung neben dem Wort - man findet
   die Zeile wieder, ohne sie zu lesen. Bewusst gedeckt: das Menue soll
   sortiert wirken, nicht bunt. */
.menu-icon.tone-violet{background:#efe9fb;color:#6d4bb8}
.menu-icon.tone-blue{background:#e6f0fd;color:#2563c9}
.menu-icon.tone-teal{background:#e2f5f0;color:#1c7a68}
.menu-icon.tone-amber{background:#fdf0dc;color:#a56410}
.menu-icon.tone-rose{background:#fde9ee;color:#b8365c}
.menu-icon.tone-slate{background:#eceef3;color:#55607a}

/* Anleitung im Import: aufklappbar, damit sie nur im Weg ist, wenn man
   sie braucht. */
.guide{border:1px solid var(--line,#e4e6ee);border-radius:14px;margin-bottom:9px;overflow:hidden}
.guide summary{
  padding:12px 14px;font-size:13.5px;font-weight:700;cursor:pointer;
  list-style:none;display:flex;align-items:center;justify-content:space-between;
}
.guide summary::-webkit-details-marker{display:none}
.guide summary::after{content:'▾';opacity:.45;font-size:12px}
.guide[open] summary::after{content:'▴'}
.guide-steps{margin:0;padding:0 16px 14px 32px;display:flex;flex-direction:column;gap:8px}
.guide-steps li{font-size:13px;line-height:1.5;color:#4b5468}

@media (prefers-color-scheme: dark){
  .menu-icon.tone-violet{background:#241d38;color:#b49ce8}
  .menu-icon.tone-blue{background:#132238;color:#7fb0f0}
  .menu-icon.tone-teal{background:#12291f;color:#6fc7b0}
  .menu-icon.tone-amber{background:#2b2010;color:#e0ab55}
  .menu-icon.tone-rose{background:#2c1620;color:#e88aa6}
  .menu-icon.tone-slate{background:#1a1f2c;color:#9aa4bb}
  .guide{border-color:#252b3a}
  .guide-steps li{color:#a8b1c2}
}

/* ===== V32: Entfernung in der Liste ===== */
.row-distance{
  flex:0 0 auto;font-size:12px;font-weight:800;color:#6b7280;
  font-variant-numeric:tabular-nums;white-space:nowrap;margin-left:8px;
}
/* Der Abschnittstitel und die Sortierung teilen sich eine Zeile - so
   kostet der Umschalter keine zusaetzliche Hoehe ueber der Liste. */
.list-head{align-items:center;margin:16px 0 8px}
.list-head .section-label{margin:0}

@media (prefers-color-scheme: dark){
  .row-distance{color:#8b96a8}
}