/* UX-Politur (Oktober 2026): Touch-Ziele, Lesbarkeit unter Saison-Deko, Fokus, sanfte Mikro-Interaktionen.
   Nur Tokens, kein backdrop-filter. Wird nach app.css geladen. */

/* --- Touch-Ziele >= 44 px --- */
.segmented button, .chip, .who-chip, .zh-alloff, .btn.soft, .btn.primary, .fo-wstart, .toast .btn,
.pager-pills button, .fmt-bar button, .w-mini, .w-face { min-height: var(--tap, 44px); }
.w-mini { min-width: var(--tap, 44px); width: var(--tap, 44px); height: var(--tap, 44px); }
.w-face { min-width: var(--tap, 44px); display: inline-grid; place-items: center; }
.fmt-bar button { min-width: var(--tap, 44px); }
.chip .x { width: 32px; height: 32px; }
.cal-day { min-height: 48px; }

/* --- Typografie: lange Titel in der Kopfleiste nicht abschneiden --- */
@media (max-width: 430px) {
  .topbar-title { font-size: 18px; }
  .topbar { gap: 6px; }
}
.empty { line-height: 1.45; }
.empty .btn { margin-top: 14px; }
.empty[role="alert"] .big { animation: none; }

/* --- Fokus: klar sichtbar, nur bei Tastatur --- */
:focus:not(:focus-visible) { outline: none; }
.input:focus-visible, .note-title-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.btn:focus-visible, .tab:focus-visible, .chip:focus-visible, .segmented button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Saison-Themes: Karten bleiben lesbar, auch wenn Deko dahinter liegt --- */
html[data-season]:root { --surface: color-mix(in srgb, var(--surface-1) 94%, transparent); --surface-glass: color-mix(in srgb, var(--surface-0) 97%, transparent); }
html[data-season] :is(.card, .w, .menu-item, .more-tile, .mood-card, .item, .counter, .stat, .ev, .cal-grid, .segmented) { background: color-mix(in srgb, var(--surface-1) 95%, transparent) !important; }
html[data-season] .tabbar { background: var(--surface-0); }

/* --- Sanfte Rückmeldung --- */
.btn, .chip, .tab, .segmented button, .menu-item, .more-tile, .mood-card { -webkit-tap-highlight-color: transparent; }
.item, .menu-item, .more-tile, .mood-card, .w { transition: transform .15s var(--ease-spring, ease), background .2s, border-color .2s; }
@media (hover: hover) { .menu-item:hover, .more-tile:hover { border-color: var(--accent-line, var(--line-2)); } }
.chips { scroll-padding: 0 16px; }
@media (prefers-reduced-motion: reduce) { .item, .menu-item, .more-tile, .mood-card, .w, .btn { transition: none; } }

#cal-today, #new-folder { min-height: var(--tap, 44px); }

/* Saison-Deko liegt unter dem Inhalt (sonst malen Kürbisse/Hügel über Text); Vollbild-Overlays im View bleiben ausgenommen */
html[data-season] .views { position: relative; z-index: 1; }
html[data-season] .views:has(.fo-full) { z-index: auto; }

/* Ladezustand: Skeleton statt "Lade ..."-Text */
.skel-list { display: grid; gap: 10px; padding: 8px 0; }
.skel-list i { display: block; height: 58px; border-radius: 16px; background: linear-gradient(90deg, var(--fill-2, rgb(255 255 255 / .06)) 0%, color-mix(in srgb, var(--text) 10%, transparent) 50%, var(--fill-2, rgb(255 255 255 / .06)) 100%); background-size: 200% 100%; animation: skel 1.4s linear infinite; }
.skel-list i:nth-child(2) { opacity: .75; } .skel-list i:nth-child(3) { opacity: .5; }
@keyframes skel { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel-list i { animation: none; } }

/* Fehlerzustand im Kalender: Platz über dem Plus-Knopf */
.empty[role="alert"] { padding-bottom: 104px; }

/* Listen-Segmente (4 Reiter): seitlich scrollbar mit Rand-Hinweis */
.list-seg { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.list-seg::-webkit-scrollbar { display: none; }
.list-seg button { flex: 0 0 auto; padding: 0 16px; scroll-snap-align: start; }

/* Admin-Reiter: 44 px, Rand-Hinweis auf weitere Reiter */
.adm-tab { min-height: 44px; }
.adm-tabs { mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }

/* Restliche Touch-Ziele (spezifischer als die Ursprungsregeln) */
.btn.soft#cal-today, button#cal-today, .wx-chip, .wx-refresh, .zh-guide > summary { min-height: var(--tap, 44px) !important; }
.wx-chip.wx-add, .wx-refresh { min-width: var(--tap, 44px); }