/* Familien-To-do: App-Layout im RunRebels-Designsystem (Bausteine run-*, Paletten per data-palette). */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100dvh;overscroll-behavior-y:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.noscript{padding:24px;font:600 18px/26px var(--font-sans)}
#app{max-width:720px;margin:0 auto}

/* Kopf */
.app-header{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top));border-bottom:3px solid var(--on-surface)}
.app-brand{margin:0;font:400 26px/1 var(--font-display);color:var(--ink)}
.app-me{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:4px 14px 4px 4px;border:2px solid var(--ink);border-radius:var(--radius-pill);background:transparent;color:var(--ink);font:600 15px/20px var(--font-sans)}
.app-me:hover{background:rgba(255,255,255,.12)}
.app-me__name{max-width:11ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar{display:inline-grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;border:2px solid var(--on-surface,#0B3C41);background:var(--surface);color:var(--on-surface);font:400 17px/1 var(--font-display)}
.avatar--sm{width:26px;height:26px;font-size:12px;border-width:2px}
.banner{margin:0;padding:10px 16px;background:var(--gelb);color:var(--tiefteal);font:600 14px/20px var(--font-sans);border-bottom:2px solid var(--tiefteal)}

/* Reiter und Filter */
.app-tabs{display:flex;gap:8px;padding:16px 16px 8px;overflow-x:auto}
.app-tab{flex:none;min-height:44px;padding:0 18px;border:2px solid var(--ink);border-radius:var(--radius-pill);background:transparent;font:600 15px/20px var(--font-sans)}
.app-tab[aria-pressed="true"],.chip-btn[aria-pressed="true"]{background:var(--ink);color:var(--ground)}
.app-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0 16px 8px}
.app-filters:empty{display:none}
.people{display:flex;flex-wrap:nowrap;gap:8px;width:100%;overflow-x:auto;padding-bottom:4px}
.people .chip-btn{flex:none}
.chip-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 8px;border:2px solid var(--ink);border-radius:var(--radius-pill);background:transparent;font:600 14px/20px var(--font-sans)}
.chip-btn:not(:has(.avatar)){padding-left:14px}
.chip-btn[aria-pressed="true"] .avatar{border-color:var(--ground)}
.cat-filter{display:block;flex:1 1 200px}
.cat-filter .run-input{min-height:44px}

/* Liste */
.app-list{padding:8px 16px 120px}
.group{margin:16px 0 24px}
.group__title{display:flex;align-items:center;gap:10px;margin:0 0 10px;font:400 20px/24px var(--font-display)}
.group__count{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 8px;border:2px solid var(--ink);border-radius:var(--radius-pill);font:400 15px/1 var(--font-numeral)}
.group--overdue .group__title{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px}
.tasks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.task{display:grid;grid-template-columns:8px auto 1fr auto;align-items:center;gap:8px 12px;padding:6px 12px 6px 0;border:2px solid var(--ink);border-radius:var(--radius-md);background:var(--ground);overflow:hidden}
.task__stripe{align-self:stretch;margin:-6px 0;background:linear-gradient(var(--stripe-1) 0 50%,var(--stripe-2) 50%)}
.task__check{min-width:44px;justify-content:center}
.task__main{display:grid;gap:6px;min-height:44px;padding:6px 0;border:0;background:transparent;text-align:left;color:var(--ink)}
.task__title{font:600 17px/24px var(--font-sans);overflow-wrap:anywhere}
.task__meta{display:flex;flex-wrap:wrap;gap:6px}
.task.is-done .task__title{text-decoration:line-through;text-decoration-thickness:2px;opacity:.75}
.chip{display:inline-block;padding:0 10px;border:2px solid var(--ink);border-radius:var(--radius-pill);font:600 13px/22px var(--font-sans);white-space:nowrap}
.chip--alert{border-style:dashed;background:var(--gelb);color:var(--tiefteal)}
.chip--prio{background:var(--ink);color:var(--ground)}
.empty{margin:48px 0;text-align:center;font:600 18px/26px var(--font-sans)}

/* Neue Aufgabe */
.app-fab{position:fixed;right:max(16px,calc((100vw - 720px) / 2 + 16px));bottom:calc(16px + env(safe-area-inset-bottom));z-index:6;display:grid;place-items:center;width:64px;height:64px;padding:0 0 4px;border:3px solid var(--tiefteal);border-radius:50%;background:var(--pink-button);color:#fff;font:400 38px/1 var(--font-display);box-shadow:0 4px 0 var(--tiefteal)}
.app-fab:active{transform:translateY(2px);box-shadow:0 2px 0 var(--tiefteal)}

/* Dialoge (Sheet) */
dialog.sheet{width:min(100%,560px);max-width:100%;max-height:92dvh;margin:auto auto 0;padding:0;border:3px solid var(--ink);border-bottom:0;border-radius:24px 24px 0 0;overflow:hidden}
dialog.sheet[open]{display:flex;flex-direction:column}
dialog.sheet::backdrop{background:rgba(11,60,65,.65)}
@media (min-width:640px){dialog.sheet{margin:auto;border-bottom:3px solid var(--ink);border-radius:24px}}
.sheet__title{margin:0;padding:18px 20px 10px;font:400 24px/28px var(--font-display)}
.sheet__form{display:flex;flex-direction:column;min-height:0}
.sheet__body{padding:6px 20px 12px;overflow-y:auto;min-height:0}
.sheet__actions{display:flex;flex-wrap:wrap;gap:10px;padding:12px 20px calc(16px + env(safe-area-inset-bottom));border-top:2px solid var(--ink);background:var(--ground)}
.sheet__actions .run-btn{flex:1 1 auto}
.run-label{display:grid;gap:8px}
textarea.run-input{resize:vertical;min-height:88px}
select.run-input{appearance:auto}
.run-input:disabled{border-style:dashed;background:transparent;color:var(--ink);-webkit-text-fill-color:var(--ink);opacity:.8}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.danger{border-style:dashed}
.rot{margin:0 0 16px;padding:12px;border:2px solid var(--ink);border-radius:var(--radius-md)}
.rot legend{padding:0 6px}
.subs{margin:0 0 16px}
.sub-list{list-style:none;margin:0 0 10px;padding:0}
.sub{display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:2px solid var(--ink)}
.sub__title{overflow-wrap:anywhere}
.sub-add{display:flex;gap:8px}
.sub-add .run-input{flex:1}
.icon-btn{flex:none;width:44px;height:44px;border:0;background:transparent;font:600 26px/1 var(--font-sans)}
.swatches{display:flex;flex-wrap:wrap;gap:10px}
.swatch{position:relative;width:48px;height:48px;padding:0;border:3px solid var(--ink);border-radius:50%;background:var(--surface)}
.swatch__dot{position:absolute;inset:8px;border-radius:50%;background:linear-gradient(135deg,var(--stripe-1) 0 50%,var(--stripe-2) 50%)}
.swatch[aria-checked="true"]{outline:4px solid var(--ink);outline-offset:3px}

/* Anmeldung */
.login{display:grid;place-items:center;min-height:100dvh;padding:24px}
.login__box{width:min(100%,420px)}
.login__lead{margin:12px 0 28px;font:600 20px/28px var(--font-sans)}
.login .run-input{background:var(--on-surface);color:var(--surface);border-color:var(--on-surface)}
.login .run-error{margin-bottom:16px}
.login .run-btn{width:100%}

/* Hinweis */
.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));z-index:20;max-width:min(92vw,420px);padding:12px 18px;border:2px solid var(--tiefteal);border-radius:var(--radius-md);background:var(--tiefteal);color:var(--creme);font:600 15px/22px var(--font-sans);transform:translate(-50%,16px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.toast.is-visible{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.toast{transition:none}.run-btn:hover{transform:none}}