/* 1025DEX Community v0.31.35 · css/ds-polish.css · ausgelagert aus index.html */
/* --- 12 · Feinschliff ------------------------------------------------------
   Letzte Schicht: hier stehen die Entscheidungen, die sich erst am
   gerenderten Bild treffen lassen. */

/* Zwischenueberschriften
   Kurze Bereichsnamen laufen in Versalien - so kennzeichnen Systeme
   Abschnitte, und so bleiben sie eindeutig von Inhalt unterscheidbar.
   Ganze Saetze bleiben ganze Saetze. */
.panel h2,
.sl-eyebrow,#v-scan .sl-eyebrow,
.intel-kicker,.ci-kicker,#v-scan .v19-kicker,#v-scan .sl-smart-kicker,
.pm-title,.onb-step,.wl-label,.tb-trade-label,.cheap-head b,
.bt-label,.intel-score span,.ci-score span,#v-scan .v19-estimate span,
.community-stat span,.account-status-row,.sl-axis{
  font-size:11.5px!important;
  font-weight:590!important;
  letter-spacing:.05em!important;
  text-transform:uppercase!important;
  line-height:1.3;
  color:var(--ink-soft);
}
.intel-kicker,.ci-kicker,#v-scan .v19-kicker,#v-scan .sl-smart-kicker{color:var(--accent)}
/* Ganze Saetze: normale Schreibweise, normale Sperrung. */
#v-overview .qc-title,.mform label,.sl-lab,#v-scan .sl-lab,
.page h3,.pghead b,.wl-foot,.pm-note{
  font-size:12.5px!important;
  font-weight:550!important;
  letter-spacing:0!important;
  text-transform:none!important;
  color:var(--ink-soft);
}

/* Der rote Schein unter Hauptknoepfen war zu laut. Ein Knopf braucht
   Gewicht, keinen Heiligenschein. */
html:root,html[data-theme="light"]:root{--sh-accent:0 2px 8px rgba(224,49,39,.20)}
html[data-theme="dark"]:root{--sh-accent:0 2px 10px rgba(255,74,61,.22)}

/* Glas deckt jetzt zuverlaessig ab - Inhalt soll nicht durch die
   Leisten hindurchlesbar sein. */
html:root,html[data-theme="light"]:root{--glass:rgba(249,249,251,.84)}
html[data-theme="dark"]:root{--glass:rgba(22,22,26,.84)}

/* Fortschrittsring */
.ring svg circle:first-child{stroke:var(--panel-3)!important;stroke-width:7.5!important}
.ring svg circle+circle{stroke-width:7.5!important}
html[data-theme="dark"] .ring svg circle:first-child{stroke:var(--panel-2)!important}

/* Scan: Auswahl der Aufgabe */
#v-scan .sl-purpose button{background:var(--panel);box-shadow:var(--sh-1)}
#v-scan .sl-purpose button[aria-pressed="true"]{
  background:var(--panel);
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent) inset,var(--sh-1);
}
#v-scan .sl-purpose button[aria-pressed="true"] strong{color:var(--accent)}
#v-scan .sl-camera-badge{background:var(--panel);border:1px solid var(--line)}
#v-scan .sl-camera-badge.active{background:var(--accent-soft);border-color:transparent;color:var(--accent)}
.sl-idle{padding-bottom:70px}
#v-scan .sl-idle{padding-bottom:70px}

/* "Plan oeffnen" ist die zweite Handlung auf der Karte, nicht die erste -
   getoent statt gefuellt. */
.intel-open,.ci-open{
  background:var(--accent-soft);color:var(--accent);
  box-shadow:none;padding:10px 14px;min-height:38px;
}

/* Kopfzeile: etwas knapper, damit der Untertitel auf schmalen Geraeten
   nicht als Erstes weggekuerzt wird. */
.neo-header .hbtn{padding:8px 12px;font-size:13px}
.neo-header{gap:8px}
.neo-sub{font-size:9px!important;letter-spacing:.12em!important}

/* Trennlinie der Legende */
.legend i{width:13px;height:13px}

/* Leere Binder-Faecher duerfen nicht wie Inhalt aussehen */
.slot{background:var(--panel-2)}
html[data-theme="dark"] .slot{background:var(--panel-2)}
.slot .no{font-size:8.5px;font-weight:600;color:var(--ink-faint);text-shadow:none}
.slot.s-owned .no,.slot.s-wish .no,.slot.hasart .no{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}

/* Bewegung beim Antippen einer Karte */
.cell,.slot{transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast) ease}
.slot:active{transform:scale(.96)}


/* --- 13 · Letzte Politur ---------------------------------------------------*/

/* Pfeile: aus dem gefuellten Dreieck der Spielekonsole wird ein Winkel,
   wie ihn Systemlisten verwenden. */
.prow .caret,.genhead .caret,.setrow .caret,.intel-arrow{
  font-size:0!important;
  display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;flex:0 0 14px;
  color:var(--ink-faint);
}
.prow .caret::after,.genhead .caret::after,.setrow .caret::after,.intel-arrow::after{
  content:"";display:block;width:6.5px;height:6.5px;
  border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;
  border-radius:1px;
  transform:translateX(-2px) rotate(-45deg);
  transition:transform var(--t-base) var(--ease-out);
}
.genhead .caret{transform:none}
.genhead.open .caret{transform:none}
.genhead.open .caret::after{transform:translateY(-2px) rotate(45deg)}

/* Trennlinien beginnen hinter dem Bild, nicht am Rand - dadurch liest sich
   eine Liste als ein Block und nicht als Stapel einzelner Zeilen. */
.genlist .prow{border-top:0;position:relative}
.genlist .prow+.prow::before{
  content:"";position:absolute;left:58px;right:0;top:0;height:1px;
  background:var(--line-soft);
}
.genlist .prow.open+.prow::before,.genlist .prow.open::before{display:none}

/* Das Glaskuegelchen aus dem alten Kopf wird zur Hausmarke. */
.lens{
  width:46px;height:46px;border:0;
  background:linear-gradient(180deg,#f4382c 0 46%,#1a1a1f 46% 54%,#fafafa 54% 100%);
  box-shadow:0 2px 8px rgba(0,0,0,.18),0 0 0 .5px rgba(0,0,0,.14);
}
.lens::after{
  content:"";position:absolute;left:50%;top:50%;
  width:15px;height:15px;margin:-7.5px 0 0 -7.5px;
  border-radius:50%;background:#fff;border:3px solid #1a1a1f;
  transform:none;
}
html[data-theme="dark"] .lens{box-shadow:0 2px 8px rgba(0,0,0,.6),0 0 0 .5px rgba(255,255,255,.14)}

/* Schliessen-Knopf der Blaetter */
#xClose,.modal .hbtn#xClose{
  width:34px;height:34px;padding:0;
  display:grid;place-items:center;
  border:0;border-radius:var(--r-full);
  background:color-mix(in srgb,var(--ink) 8%,transparent);
  color:var(--ink-soft);
  font-size:14px;font-weight:500;line-height:1;
  box-shadow:none;
}
html[data-theme="dark"] #xClose{background:color-mix(in srgb,var(--ink) 14%,transparent)}

/* Anmelden ist die Hauptsache dieses Blattes - in Hausfarbe, nicht in
   der Farbe, die sonst "vorhanden" bedeutet. */
#anGo{background:var(--accent)!important;border-color:transparent!important;color:#fff!important;box-shadow:var(--sh-accent)!important}

/* Bereichsnamen dieser Module bleiben leise; die Farbe traegt der Knopf. */
.intel-kicker,.ci-kicker{color:var(--ink-soft)!important}

/* Kopf und Leiste decken zuverlaessig ab. */
html:root,html[data-theme="light"]:root{--glass:rgba(249,249,251,.9)}
html[data-theme="dark"]:root{--glass:rgba(20,20,24,.9)}

/* Der Kopf zeigt seine Kante erst, wenn Inhalt darunter liegt. */
header.neo-header{
  border-bottom-color:transparent;
  transition:border-color 220ms ease,box-shadow 220ms ease;
}
html[data-scrolled] header.neo-header{
  border-bottom-color:var(--glass-line);
  box-shadow:0 1px 12px rgba(16,16,22,.05);
}
html[data-theme="dark"][data-scrolled] header.neo-header{box-shadow:0 1px 14px rgba(0,0,0,.4)}

/* Die Leiste faehrt beim Lesen aus dem Weg und kommt beim Zurueckscrollen
   wieder - so gehoert der Bildschirm im Zweifel dem Inhalt. */
nav.neo-nav{
  transition:transform 320ms var(--ease-out),opacity 220ms ease,
             background-color var(--t-base) ease;
}
html[data-nav="weg"] nav.neo-nav{
  transform:translateX(-50%) translateY(calc(100% + 24px));
  opacity:0;pointer-events:none;
}
html[data-nav="weg"] .topbtn{transform:translateY(12px)}
@media (prefers-reduced-motion:reduce){
  html[data-nav="weg"] nav.neo-nav{transform:translateX(-50%);opacity:1;pointer-events:auto}
}

/* --- 16 · Gast-Hinweis ------------------------------------------------------
   Derselbe Hinweis in drei Umgebungen: als Band oben auf einer Ansicht und
   als schmale Zeile dort, wo sonst Knoepfe stuenden. */
html[data-gast] .gastband{
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  background:var(--panel);
  box-shadow:var(--sh-1);
  padding:13px 15px;
  gap:12px;
}
.gastband svg{stroke:var(--ink-faint);stroke-width:1.9;width:20px;height:20px;flex:0 0 20px}
.gastband .gb-txt{font-size:13.5px;font-weight:450;color:var(--ink-soft);line-height:1.4}
.gastband .gb-txt b{display:block;font-size:14.5px;font-weight:620;color:var(--ink);margin-bottom:2px}
.gastband .gb-an{
  border:0;border-radius:var(--r-full);
  background:var(--accent);color:#fff;
  padding:9px 16px;font-size:13.5px;font-weight:600;
  box-shadow:var(--sh-accent);
}

/* Die schmale Fassung sitzt im Fliesstext eines Fensters und soll dort
   nicht lauter sein als der Inhalt, den sie erklaert. */
html[data-gast] .gastband.kompakt{
  margin:10px 0 2px;
  padding:9px 10px 9px 12px;
  gap:9px;
  background:var(--panel-2);
  border-color:transparent;
  box-shadow:none;
  flex-wrap:nowrap;
}
.gastband.kompakt svg{width:17px;height:17px;flex-basis:17px}
.gastband.kompakt .gb-txt{flex:1 1 auto;font-size:12.5px;line-height:1.35}
.gastband.kompakt .gb-txt b{display:none}
.gastband.kompakt .gb-an{
  padding:7px 12px;font-size:12.5px;
  background:transparent;color:var(--accent);
  box-shadow:none;
  margin-left:auto;flex:0 0 auto;
}

/* Im Pokemon-Fenster bleiben die Zeilen der ausgeblendeten Knoepfe als
   leere Abstaende stehen - drei davon uebereinander sind eine Luecke, die
   wie ein Fehler aussieht. Wo nur noch Verstecktes drin ist, faellt die
   ganze Zeile weg. */
html[data-gast] .pdet > .row:has(.btn.w, .btn.o, [data-up], [data-art]){display:none!important}

/* --- 17 · Vorschlaege in der Suchzeile ------------------------------------
   Sie stehen direkt unter dem Feld und schieben den Inhalt nach unten,
   statt darueber zu schweben: eine schwebende Liste in einer klebenden
   Leiste geraet auf dem Handy zuverlaessig mit der Tastatur ins Gehege. */
.fq-tipps{
  display:grid;gap:4px;
  margin-top:8px;padding:5px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--panel);
  box-shadow:var(--sh-2);
}
.fq-tipps[hidden]{display:none!important}
.fq-tipp{
  display:flex;align-items:center;gap:10px;
  width:100%;min-height:46px;padding:5px 8px;
  border:0;border-radius:var(--r-md);
  background:transparent;color:var(--ink);
  text-align:left;
}
.fq-tipp:active{background:var(--panel-2);transform:none}
.fq-tipp img{width:34px;height:34px;flex:0 0 34px;object-fit:contain}
.fq-tipp-txt{min-width:0;display:block}
.fq-tipp-txt b{display:block;font-size:14.5px;font-weight:580;letter-spacing:-.012em;line-height:1.2}
.fq-tipp-txt small{display:block;margin-top:1px;font-size:11.5px;font-weight:450;color:var(--ink-faint)}
@media (hover:hover) and (pointer:fine){ .fq-tipp:hover{background:var(--panel-2)} }

/* --- 18 · Suchleiste am unteren Rand --------------------------------------
   Auf einem hohen Telefon liegt oben das Unerreichbare. Die Suchzeile
   gehoert dorthin, wo der Daumen ohnehin ist - genau wie die
   Navigationsleiste darunter.

   Der heikle Teil ist die Tastatur. Sie schiebt sich ueber den unteren
   Rand, und eine fest verankerte Leiste verschwindet dahinter. Zwei
   Massnahmen greifen ineinander: die Angabe interactive-widget im
   Viewport (moderne Android-Browser verkleinern dann die Seite selbst)
   und --tastatur, das aus der VisualViewport-API kommt und den Rest
   erledigt, wo das nicht passiert. */
:root{
  --nav-raum:calc(78px + env(safe-area-inset-bottom));
  --tastatur:0px;
  --leiste-h:70px;
}

#v-finder .stickybar.suchleiste-unten{
  position:fixed;
  top:auto;
  bottom:calc(var(--tastatur) + var(--nav-raum));
  left:50%;
  transform:translateX(-50%);
  width:min(var(--maxw),calc(100% - 20px));
  margin:0;
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:8px;
  border:1px solid var(--glass-line);
  border-radius:var(--r-2xl);
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:var(--sh-3);
  z-index:46;
  transition:bottom 180ms var(--ease-out);
}
#v-finder .stickybar.suchleiste-unten::after{display:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #v-finder .stickybar.suchleiste-unten{background:var(--panel)}
}

/* Platz schaffen, damit der letzte Treffer nicht unter der Leiste endet */
#v-finder{padding-bottom:calc(var(--leiste-h) + 12px)}

/* Waehrend getippt wird, tritt die Navigationsleiste zurueck: die
   Tastatur nimmt ohnehin die halbe Hoehe, und zwei Leisten uebereinander
   sind eine zu viel. */
html[data-tastatur] nav.neo-nav{
  transform:translateX(-50%) translateY(calc(100% + 24px));
  opacity:0;pointer-events:none;
}
html[data-tastatur] #v-finder .stickybar.suchleiste-unten{
  bottom:calc(var(--tastatur) + 10px);
}
html[data-tastatur] .topbtn{display:none}

/* Der Nach-oben-Knopf weicht der Leiste aus */
#v-finder ~ * .topbtn,
html[data-view="finder"] .topbtn{bottom:calc(var(--leiste-h) + var(--nav-raum) + 8px)}

/* Die Vorschlaege klappen jetzt nach OBEN auf - sie stehen im Quelltext
   vor der Eingabezeile und damit in der Leiste darueber. */
#v-finder .suchleiste-unten .fq-tipps{
  margin:0;
  max-height:min(42vh,320px);
  overflow:auto;
  border:0;
  background:transparent;
  box-shadow:none;
  padding:0;
  gap:2px;
}
#v-finder .suchleiste-unten .fq-tipp{background:transparent}
#v-finder .suchleiste-unten .fq-tipp:active{background:color-mix(in srgb,var(--ink) 8%,transparent)}

/* Auf breiten Schirmen darf die Leiste schmaler bleiben als der Inhalt */
@media (min-width:760px){
  #v-finder .stickybar.suchleiste-unten{width:min(var(--maxw),calc(100% - 40px))}
}

/* Sind Vorschlaege offen, deckt die Leiste den Inhalt ab. Durchscheinender
   Text hinter einer Liste, aus der man auswaehlen soll, ist unlesbar. */
#v-finder .suchleiste-unten:has(.fq-tipps:not([hidden])){
  background:color-mix(in srgb,var(--bg-elev) 97%,transparent);
}
html[data-theme="dark"] #v-finder .suchleiste-unten:has(.fq-tipps:not([hidden])){
  background:color-mix(in srgb,var(--bg-elev) 98%,transparent);
}
#v-finder .suchleiste-unten .fq-tipps:not([hidden]){
  border-bottom:1px solid var(--line-soft);
  padding-bottom:6px;
}


/* --- 14 · Scan: die Buehne ------------------------------------------------
   Eine Kameraflaeche ist dunkel. Das ist keine Geschmacksfrage: nur auf
   dunklem Grund sieht man, was die Kamera zeigt, und nur so weiss man
   ohne Beschriftung, dass hier gleich ein Bild erscheint. */

#v-scan .sl-live,
#v-scan .sl-live:not(.sl-camera-running),
.sl-idle,#v-scan .sl-idle{
  background:#0d0d11;
  color:#f4f4f6;
  border:0;
  border-radius:var(--r-lg);
}
#v-scan .sl-idle h2{color:#ffffff}
#v-scan .sl-idle p,.sl-idle p{color:rgba(255,255,255,.66)}
#v-scan .sl-card-art rect,#v-scan .sl-card-art circle{fill:rgba(255,255,255,.06)}
#v-scan .sl-card-art [stroke]{stroke:rgba(255,255,255,.42)}
#v-scan .sl-card-art path:last-child{stroke:var(--accent)}
#v-scan .sl-status{
  background:rgba(18,18,22,.78);
  border:1px solid rgba(255,255,255,.12);
  color:#f4f4f6;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
/* Der Fortschrittsbalken ist unsichtbar, solange nichts laeuft. */
#v-scan .sl-fort,.sl-fort{background:transparent}
#v-scan .sl-fort i,.sl-fort i{background:var(--accent)}
#v-scan .sl-idle .btn{box-shadow:0 4px 16px rgba(0,0,0,.45)}

/* Abzeichen "Kamera an/aus" soll als Abzeichen erkennbar sein. */
#v-scan .sl-camera-badge{
  background:var(--panel-3);border:0;color:var(--ink-soft);
  font-weight:550;letter-spacing:0;text-transform:none;
}
html[data-theme="dark"] #v-scan .sl-camera-badge{background:var(--panel-2)}
#v-scan .sl-camera-badge.active{background:var(--accent-soft);color:var(--accent)}

/* Ueberschriften bekommen beim Sprung den Fokus, sind aber keine
   Bedienelemente - sie sollen keinen Rahmen zeigen. */
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible,
h1:focus-visible,h2:focus-visible,h3:focus-visible,
#v-scan h1:focus-visible,#v-scan h2:focus-visible,
#slTitle:focus-visible,#slDamageTitle:focus-visible{
  outline:none!important;
}

/* Auch der Filterpfeil im Pokedex wird zum Winkel. */
.filterchip .caret{
  font-size:0!important;display:inline-flex;align-items:center;justify-content:center;
  width:12px;height:12px;flex:0 0 12px;opacity:1;color:currentColor;
}
.filterchip .caret::after{
  content:"";display:block;width:5.5px;height:5.5px;
  border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;
  transform:translateX(-1.5px) rotate(-45deg);
  transition:transform var(--t-base) var(--ease-out);
}
.chip.filterchip.on .caret::after{transform:translateY(-1.5px) rotate(45deg)}

/* Systemeigene Bedienelemente (Auswahlfelder, Bildlaufleisten, Datumswahl)
   folgen dem Modus der App. */
html:root,html[data-theme="light"]:root{color-scheme:light}
html[data-theme="dark"]:root{color-scheme:dark}

/* Auf Beruehrung soll nichts blau aufblitzen und nichts den Kontextmenue-
   Kreis zeigen - beides verraet sofort eine Webseite. */
button,.chip,.btn,.cell,.slot,.prow,.genhead,.setrow,nav.neo-nav button{
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}
input,textarea,.note,.pdet p,.sl-dia{-webkit-user-select:text;user-select:text}

/* --- 15 · Fortschrittsring -------------------------------------------------
   Der Ring bestand aus vier Kreisen: Aussenkante, Bahn, Fortschritt und
   einer zweiten Innenkante. Zwei davon waren nur Zierrat aus dem
   Geraetelook und haben den Wert in der Mitte eingeengt. */
.ring svg circle:nth-child(1){stroke:none!important;fill:transparent!important}
.ring svg circle:nth-child(2){stroke:var(--panel-3)!important;stroke-width:10!important}
html[data-theme="dark"] .ring svg circle:nth-child(2){stroke:var(--panel-2)!important}
.ring svg circle:nth-child(3){stroke-width:10!important;stroke-linecap:round}
.ring svg circle:nth-child(4){stroke:none!important}