/* sheet.css — Griff, Ziehen zum Schliessen und Tippziele am Sheet (08.09.2026).
   Laedt in index.html direkt nach konto.css und damit NACH app.css: die Regeln hier gewinnen
   bei gleicher Spezifitaet. Media Queries erhoehen die Spezifitaet nicht — deshalb steht die
   Grundregel jeweils vor der Ausnahme, und wo app.css denselben Selektor benutzt, ist hier
   bewusst `#sheet` statt `.sheet` notiert.
   Der bewegliche Teil (transform, transition, Scrim-Deckkraft) wird waehrend der Geste als
   Inline-Stil gesetzt (js/ui.js) und schlaegt jede Regel aus einer Datei — hier steht nur,
   was der Browser VOR der Geste wissen muss: wem die Finger-Geste gehoert. */

/* ---------- Nur Handy/Tablet: ab 720 px ist das Sheet ein zentrierter Dialog ohne Geste ---------- */
@media (max-width:719.98px){
  /* Griff und Kopfzeile gehoeren der Zieh-Geste. Ohne touch-action:none nimmt Chrome die
     Geste als Scrollen an sich und schickt mitten drin pointercancel — dann bliebe das
     Sheet auf halbem Weg stehen. */
  #sheet .grip,#sheet .sheet-head{touch-action:none}
  /* Der Griff war bisher reine Zierde. Jetzt: Tipp schliesst, Ziehen bewegt. Die Trefferflaeche
     waechst ueber ::after (Hausmittel, siehe .weather .edit) — kein Layout-Sprung. */
  #sheet .grip{position:relative;cursor:grab}
  #sheet .grip::after{content:'';position:absolute;inset:-6px 0 -14px}
  #sheet.dragging .grip{cursor:grabbing}
  /* Waehrend des Ziehens darf im Rumpf nichts mitrutschen oder markiert werden */
  #sheet.dragging .sheet-body{overflow-y:hidden}
  #sheet.dragging{user-select:none;-webkit-user-select:none}
  /* Das Gummiband am Ende des Rumpfes darf nicht nach draussen durchschlagen — sonst wackelt
     beim Ziehen nach unten die Seite dahinter mit. */
  #sheet .sheet-body{overscroll-behavior:contain}
}

/* ---------- Kalender-Sheet: Monatsraster wischen, Monats-/Jahreswahl ---------- */
/* pan-y laesst das Sheet weiter senkrecht scrollen, gibt uns aber die waagerechte Geste
   vollstaendig (kalender.js). Der Wischer haengt am Rahmen #cal-month, nicht am Raster:
   calendarPaint() ersetzt dessen Inhalt bei jedem Blaettern. */
#cal-month{touch-action:pan-y;overflow:hidden}
#cal-month .month-slide{will-change:transform}
#cal-month .month-title{background:none;border:0;padding:4px 8px;margin:0 -8px;color:inherit;
  cursor:pointer;display:inline-flex;align-items:center;gap:7px;min-height:44px;border-radius:10px;font-family:var(--serif)}
#cal-month .month-title::after{content:'';width:6px;height:6px;flex:0 0 auto;
  border-right:1.7px solid var(--ink-3,#6e6a60);border-bottom:1.7px solid var(--ink-3,#6e6a60);
  transform:translateY(-2px) rotate(45deg);transition:transform var(--t-micro,160ms) var(--ease-out,cubic-bezier(.22,1,.36,1))}
#cal-month .month-title[aria-expanded="true"]::after{transform:translateY(1px) rotate(-135deg)}
.mpick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:2px 0 4px}
.mpick button{min-height:52px;border-radius:12px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink);font:400 15px/1 var(--serif);cursor:pointer;padding:0 4px}
.mpick button.is-now{border-color:var(--line-2,var(--line-strong))}
.mpick button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.ypick{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:2px 0 12px}
.ypick .y{font:400 19px/1 var(--serif);font-variant-numeric:tabular-nums;color:var(--ink)}

@media (hover:hover) and (pointer:fine){
  #cal-month .month-title:hover{background:var(--surface-2)}
  .mpick button:hover{border-color:var(--ink)}
  .mpick button[aria-pressed="true"]:hover{border-color:var(--ink)}
}