/* heute.css — Heute-Ansicht, Wetterzeile, Wochenleiste, Kalender, Termin-Sheets
   (Grossupdate 05.09.2026, Strang HEUTE). Bestehende Tokens aus app.css; neue Tokens des
   Design-Briefs (--ink-2, --ink-3, --line-2, --fs-display, --fs-eyebrow, --ease-out) nur mit Fallback.
   Prata nur als Display (font-weight 400), keine Akzentfarbe, Tippziele >= 44 px. */

/* ---------- Layout der Heute-Ansicht ---------- */
.today{padding:0 18px 16px;display:flex;flex-direction:column;gap:6px}
.today h2.sec{margin:22px 0 10px}
.today .card+.card{margin-top:10px}
.today__day{display:flex;flex-direction:column;gap:14px;padding-top:6px}
.today .eyebrow,.daylist .eyebrow{display:block;font:600 var(--fs-eyebrow,.6875rem)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3,#6e6a60)}
.today-date{padding:2px 0 0}
.today-display{font-family:var(--serif);font-weight:400;font-size:var(--fs-display,clamp(2.125rem,1.614rem + 2.095vw,3.5rem));line-height:1.05;letter-spacing:0;margin:6px 0 0;color:var(--ink)}
.today-logged{border-color:var(--ok);background:var(--ok-wash)}
.today-start{margin-top:4px}
.today .num{font-variant-numeric:tabular-nums}

/* ---------- Wetterzeile (Brief 5.6) ---------- */
.weather{display:flex;align-items:center;gap:12px;padding:6px 0 14px;border-bottom:1px solid var(--line);min-height:44px}
.weather .ic22{color:var(--ink-2,var(--muted));width:26px;height:26px}
.weather .temp{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,1.6rem + 1.6vw,2.75rem);line-height:1;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.weather .temp sup{font-size:.45em;vertical-align:top;position:relative;top:.35em}
.weather .cond{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.weather .cond b{font:600 15px/1.2 var(--sans);color:var(--ink)}
.weather .cond span{font-size:12px;line-height:1.35;color:var(--ink-3,#6e6a60)}
.weather .edit{position:relative;margin-left:auto;flex-shrink:0;font:600 12px/1 var(--sans);color:var(--ink-2,var(--muted));background:none;border:0;border-bottom:1px solid var(--line-2,var(--line-strong));padding:3px 0;cursor:pointer}
.weather .edit::after{content:'';position:absolute;inset:-16px -10px}   /* 44-px-Trefferflaeche */
.weather .edit:hover{color:var(--ink);border-color:var(--ink)}

/* ---------- Termine heute als Chips ---------- */
.today-ev{display:flex;flex-direction:column;gap:8px}
.today-ev-empty{margin:0;line-height:1.5}
.ev-chips{display:flex;flex-wrap:wrap;gap:8px}
.ev-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:400 13px/1 var(--sans);cursor:pointer;text-align:left;max-width:100%;transition:border-color .16s var(--ease-out,cubic-bezier(.22,1,.36,1))}
.ev-chip:hover{border-color:var(--ink)}
.ev-chip .num{font-variant-numeric:tabular-nums;color:var(--ink-2,var(--muted))}
.ev-chip b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-chip .ev-occ{color:var(--ink-3,#6e6a60);font-size:12px}
.ev-chip .ev-occ::before{content:'·';margin-right:8px}

/* ---------- Vorschlaege und Karteileichen ---------- */
.sug-head{margin-bottom:10px}
.sug-items{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.sug-items::-webkit-scrollbar{display:none}
.sug-thumb{flex-shrink:0;width:62px;height:78px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);padding:3px;cursor:pointer;display:flex;align-items:center;justify-content:center;overflow:hidden}
.sug-thumb img,.sug-thumb svg{width:100%;height:100%;object-fit:contain;display:block}
.sug-thumb .cut{width:100%;height:100%}
.dead-items{margin-top:12px}
.dead-items .sug-thumb{width:56px;height:70px;border-radius:11px}
.sug-why{margin-top:8px;line-height:1.5}
.sug-btns{margin-top:12px}

/* ---------- Wochenleiste (Brief 5.5) ---------- */
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.day{display:flex;flex-direction:column;align-items:center;gap:5px;min-height:44px;padding:8px 0 8px;border-radius:12px;border:1px solid transparent;background:transparent;cursor:pointer;color:var(--ink);font-family:var(--sans);transition:background .16s var(--ease-out,cubic-bezier(.22,1,.36,1)),border-color .16s var(--ease-out,cubic-bezier(.22,1,.36,1))}
.day .dow{font:600 var(--fs-eyebrow,.6875rem)/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3,#6e6a60)}
.day .num{font:400 1.125rem/1 var(--serif);color:var(--ink);font-variant-numeric:tabular-nums}
.day .dots{display:flex;gap:3px;height:5px;align-items:center}
.day .dot,.cal-legend .dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--ink);opacity:0}
.cal-legend .dot{opacity:1}
.day.has .dot{opacity:1}
.day.worn .num{box-shadow:inset 0 -2px 0 var(--line-2,var(--line-strong));padding-bottom:2px}
.cal-legend .worn-mark{display:inline-block;width:12px;height:2px;background:var(--line-2,var(--line-strong));vertical-align:middle;margin-left:10px}
.day.is-today{border-color:var(--line-2,var(--line-strong));background:var(--surface)}
.day:hover{background:var(--surface-2)}
.day[aria-pressed="true"]{background:var(--ink);border-color:var(--ink)}
.day[aria-pressed="true"] .num,.day[aria-pressed="true"] .dow,.day[aria-pressed="true"] .wx{color:var(--bg)}
.day[aria-pressed="true"] .dot{background:var(--bg)}
.day[aria-pressed="true"].worn .num{box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--bg) 55%,transparent)}
.day .wx{display:flex;flex-direction:column;align-items:center;gap:1px;color:var(--ink-2,var(--muted));min-height:14px}
.day .wx svg{width:15px;height:15px}
.day .wx .num2{font-size:10.5px;line-height:1;font-variant-numeric:tabular-nums}
.cal-legend{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-3,#6e6a60);margin:8px 2px 0}

/* ---------- Monatsraster mit KW-Spalte ---------- */
.month-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:2px 0 10px}
.month-title{font-family:var(--serif);font-weight:400;font-size:19px;margin:0;letter-spacing:0}
.month-title span{color:var(--ink-3,#6e6a60)}
.month{display:grid;grid-template-columns:26px repeat(7,1fr);gap:4px;align-items:stretch}
.month .hd{font:600 var(--fs-eyebrow,.6875rem)/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3,#6e6a60);text-align:center;padding:4px 0 6px}
.month .kw{font-size:10.5px;color:var(--ink-3,#6e6a60);display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.month .kw.hd{font-size:var(--fs-eyebrow,.6875rem)}
.month .day{min-height:44px;aspect-ratio:1;padding:0;justify-content:center;gap:4px;border-radius:10px}
.month .day .num{font-size:.9375rem}
.month .day.out{opacity:.38}
.month .day.out[aria-pressed="true"]{opacity:.7}
.cal-day{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}

/* ---------- Tagesliste (Sheet und unter dem Monat) ---------- */
.daylist{display:flex;flex-direction:column;gap:10px;padding-bottom:6px}
.daylist-head{display:flex;flex-direction:column;gap:4px}
.daylist-title{font-family:var(--serif);font-weight:400;font-size:19px;margin:0;letter-spacing:0}
.day-wx{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);font-size:13px;color:var(--ink-2,var(--muted))}
.day-wx b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.day-wx.muted{color:var(--ink-3,#6e6a60)}
.daylist-sec{margin-top:6px;min-height:44px}
.daylist-empty{margin:0;line-height:1.5}
.ev-list{display:flex;flex-direction:column;gap:6px}
.ev-row{display:flex;align-items:stretch;gap:6px}
.ev-main{flex:1;min-width:0;display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 12px;border-radius:13px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;text-align:left;font-family:var(--sans)}
.ev-main:hover{border-color:var(--ink)}
.ev-main .ev-time{flex-shrink:0;width:64px;font-size:13px;color:var(--ink-2,var(--muted));font-variant-numeric:tabular-nums}
.ev-main .ev-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.ev-main .ev-tx b{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-main .ev-tx span{font-size:12px;color:var(--ink-3,#6e6a60);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-del{flex-shrink:0;width:44px;min-height:44px;border-radius:13px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2,var(--muted));cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.ev-del svg{width:18px;height:18px}
.ev-del:hover{color:var(--danger);border-color:var(--danger)}
.worn-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.worn-row::-webkit-scrollbar{display:none}
.worn-thumb{flex-shrink:0;width:52px;height:66px;border-radius:11px;border:1px solid var(--line);background:var(--surface-2);padding:3px;cursor:pointer;display:flex;align-items:center;justify-content:center;overflow:hidden}
.worn-thumb img,.worn-thumb svg{width:100%;height:100%;object-fit:contain;display:block}
.worn-thumb .cut{width:100%;height:100%}

/* ---------- Termin-Sheet ---------- */
.ev-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ev-form label.lbl{margin-top:0}
.ev-form .field{min-width:0}
.pillwrap{display:flex;flex-wrap:wrap;gap:7px}
.pillwrap .pill{min-height:44px}
.ev-del-btn{width:52px;flex:0 0 52px;padding:0}
.ev-del-btn svg{width:18px;height:18px}

/* ---------- Wetter-Sheet ---------- */
.wx-status{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line)}
.wx-status>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.wx-status b{font-size:15px;font-weight:600}
.wx-status .ic22{color:var(--ink-2,var(--muted));width:26px;height:26px}
.wx-status .btn.sm{min-width:44px;min-height:44px;padding:0 10px}
.wx-search{display:flex;gap:8px;align-items:stretch}
.wx-search .field{flex:1;min-width:0}
.wx-gps{width:auto;flex-shrink:0;min-height:48px;padding:0 14px;font-size:13.5px;font-weight:600}
.wx-gps svg{width:16px;height:16px}
.wx-list{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.wx-list:empty{display:none}
.wx-opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:48px;padding:8px 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;text-align:left;font-family:var(--sans)}
.wx-opt:hover{border-color:var(--ink)}
.wx-opt b{font-size:14px;font-weight:600}
.wx-opt span{font-size:12px;color:var(--ink-3,#6e6a60)}
.wx-manual{margin-top:14px;border-top:1px solid var(--line);padding-top:6px}
.wx-manual summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--ink-2,var(--muted));list-style:none}
.wx-manual summary::-webkit-details-marker{display:none}
.wx-manual summary::before{content:'';width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg);margin-right:10px;transition:transform .16s}
.wx-manual[open] summary::before{transform:rotate(45deg)}
.wx-attrib{margin:16px 0 4px;line-height:1.5}

/* ---------- Desktop: Innenleben der Spalten (den 5/7-Split macht app.css) ---------- */
@media (min-width:1024px){
  .today{padding:0 0 24px}
  .today__sug>h2.sec,.today__dead>h2.sec{grid-column:1/-1}
  .today__sug .card+.card{margin-top:0}
  .today__sug .sug{display:flex;flex-direction:column}
  .today__sug .sug-why{flex:1}
  .today__day{padding-top:10px}
}
@media (hover:hover) and (pointer:fine){
  .today__sug:hover .sug{opacity:.78;transition:opacity .24s var(--ease-out,cubic-bezier(.22,1,.36,1))}
  .today__sug .sug:hover{opacity:1}
}
.wx-manual input[type=range]{accent-color:var(--ink)}
/* Tippziele: kleine Knoepfe in Heute-Bereichen auf 44 px heben */
.today-ev .btn.sm,.daylist-sec .btn.sm{min-height:44px}