/* Selected Today design. System font uses San Francisco on iPhone. */
:root { --sp-bg:#101113; --sp-card:#1c1d20; --sp-text:#f5f5f7; --sp-muted:#aaaab2; --sp-line:#343439; --sp-blue:#409cff; --sp-good:#66d6a0; }
:root[data-theme="hell"] { --sp-bg:#f5f5f7; --sp-card:#fff; --sp-text:#1d1d1f; --sp-muted:#65656c; --sp-line:#e8e8ed; --sp-blue:#0066d6; --sp-good:#23784c; }
body:has(#view-today.active .sp-today-header) { background:var(--sp-bg); }
#view-today:has(.sp-today-header) { max-width:560px; margin:0 auto; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--sp-text); }
.sp-today-header { position:relative; text-align:center; padding:8px 48px 0; }
.sp-today-header h1 { margin:0; font-size:23px; line-height:1.25; letter-spacing:-.6px; }
.sp-today-header p { margin:5px 0 0; color:var(--sp-muted); font-size:13px; }
.sp-today-header button { position:absolute; right:0; top:6px; width:44px; height:44px; border:1px solid var(--sp-line); border-radius:50%; background:var(--sp-card); color:var(--sp-text); font:600 17px inherit; }
.sp-intro { text-align:center; padding:16px 0 14px; }
.sp-intro .sp-greeting { color:var(--sp-muted); font-size:16px; margin:0 0 14px; }
.sp-intro h2 { font-size:32px; line-height:1.12; letter-spacing:-1.25px; font-weight:650; margin:0 0 15px; }
.sp-intro p { max-width:320px; margin:0 auto; color:var(--sp-muted); font-size:14px; line-height:1.45; }
.sp-connections { background:var(--sp-card); border:1px solid var(--sp-line); border-radius:22px; overflow:hidden; }
.sp-connection,.sp-day-row { display:flex; align-items:center; gap:12px; min-height:76px; padding:14px 16px; }
.sp-connection + .sp-connection,.sp-day-row + .sp-day-row { border-top:1px solid var(--sp-line); }
.sp-row-icon { color:var(--sp-muted); flex-shrink:0; display:flex; }
.sp-row-icon svg { width:24px; height:24px; }
.sp-row-copy { flex:1; min-width:0; text-align:left; }
.sp-row-copy strong { display:block; font-weight:600; font-size:16px; line-height:1.3; }
.sp-row-copy small { display:block; color:var(--sp-muted); font-size:12px; line-height:1.5; margin-top:3px; }
.sp-status { color:var(--sp-muted); font-size:12px; text-align:right; max-width:98px; }
.sp-status.is-ready { color:var(--sp-good); }
.sp-primary { width:100%; margin-top:20px; padding:16px 14px; min-height:52px; border:0; border-radius:16px; background:var(--sp-blue); color:#fff; font:600 15px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; cursor:pointer; }
:root:not([data-theme="hell"]) .sp-primary { background:#0879ec; }
.sp-continue { display:block; min-height:44px; padding:12px 4px; margin:2px auto; border:0; background:transparent; color:var(--sp-muted); font:inherit; font-size:13px; cursor:pointer; }
.sp-day { margin-top:10px; }
.sp-day h2 { font-size:21px; line-height:1.2; letter-spacing:-.5px; margin:0 0 13px; }
.sp-day-row { width:100%; background:transparent; border:0; color:var(--sp-text); cursor:pointer; }
.sp-day-row > svg { width:16px; flex-shrink:0; color:var(--sp-muted); }
html { scrollbar-width:none; }
.nav-sheet.offen { display:flex!important; }
.sp-today-header button { font-family:inherit; font-size:17px; font-weight:600; }
.sp-today-header h1,.sp-intro h2,.sp-day h2 { font-family:inherit; }
:root[data-theme="hell"] { color-scheme:light; }
:root[data-theme="dunkel"] { color-scheme:dark; }
.sp-intro .sp-greeting { font-weight:600; color:var(--sp-text); }
.sp-intro h2 span { color:var(--sp-muted); }
.sp-connection { min-height:62px; padding:10px 15px; gap:12px; }
.sp-row-icon { width:40px; height:40px; border-radius:50%; align-items:center; justify-content:center; background:var(--sp-bg); }
.sp-connection .sp-row-copy small:empty { display:none; }
.sp-connections > .sp-primary { width:calc(100% - 30px); margin:8px 15px 15px; }
.sp-continue { color:var(--sp-blue); }
.sp-day h2 { text-align:center; }
.sp-day-row { min-height:69px; padding:12px 15px; }
.sp-health-fields { margin:20px 0; }
.sp-health-fields div { display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--sp-line); }
.sp-health-fields dd { margin:0; text-align:right; }
#sp-health-settings { scroll-margin-top:90px; }
#sp-health-settings .btn { margin:6px 6px 0 0; min-height:44px; }
.sp-primary:focus-visible,.sp-continue:focus-visible,.sp-day-row:focus-visible,[data-profile-menu]:focus-visible { outline:3px solid var(--sp-blue); outline-offset:4px; }
@media(max-width:760px) {
 body:has(#view-today.active .sp-today-header) .topbar { display:none; }
 /* Flush bottom-nav: full width, sits on screen bottom (safe-area as padding). */
 .content:has(.sp-today-header) { padding:18px 20px calc(72px + env(safe-area-inset-bottom)); }
 #main-nav {
   position:fixed; left:0; right:0; bottom:0; width:100%;
   border:0; border-top:1px solid var(--sp-line);
   border-radius:16px 16px 0 0;
   background:var(--sp-card);
   box-shadow:0 -6px 30px #00000014;
   padding:5px 6px env(safe-area-inset-bottom);
   grid-template-columns:repeat(4,1fr); display:grid;
   box-sizing:border-box;
 }
 /* Auto-hide must clear the flush nav completely (no pill sliver). */
 #main-nav.chrome-hidden { transform:translateY(100%); }
 #main-nav .nav-btn[data-nav="sekundaer"],#main-nav .nav-mehr { display:none!important; }
 #main-nav .nav-btn { min-height:54px; padding:7px 2px; color:var(--sp-muted); border-radius:18px; }
 #main-nav .nav-btn.active { color:var(--sp-blue); background:color-mix(in srgb,var(--sp-blue) 10%,transparent); }
 #main-nav .nav-label { font-size:11px; }
 .sp-intro h2 { font-size:28px; }
}
@media(prefers-reduced-motion:reduce) { .sp-primary,.sp-day-row { transition:none; } }

#view-today:has(.sp-today-header) .heute-details { margin-top:18px; }
#view-today:has(.sp-today-header) .heute-details summary { color:var(--sp-muted); font-size:13px; }

/* Desktop: same Heute, not the old 4-column cockpit. */
@media (min-width: 761px) {
  body:has(#view-today.active .sp-today-header) .content {
    max-width: 760px;
    padding: 28px 32px 56px;
  }
  #view-today:has(.sp-today-header) {
    max-width: none;
    margin: 0;
  }
  #view-today:has(.sp-today-header) .today-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    max-width: none;
    padding: 0;
    gap: 12px;
  }
  #view-today:has(.sp-today-header) .today-widget,
  #view-today:has(.sp-today-header) .hh-hero,
  #view-today:has(.sp-today-header) .card {
    background: var(--sp-card);
    border: 1px solid var(--sp-line);
    border-radius: 22px;
  }
  #view-today:has(.sp-today-header) .today-widget.w-b2,
  #view-today:has(.sp-today-header) .today-widget {
    grid-column: auto !important;
  }
}