/* keli.life components. Mobile-first, rounded, token-driven. Import after tokens.css and fonts.css. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--color-bg);color:var(--color-ink);font-family:var(--font-body);font-size:var(--text-base);line-height:1.55}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:700;line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:var(--text-3xl)}h2{font-size:var(--text-2xl)}h3{font-size:var(--text-xl)}
p{margin:0 0 1em}
a{color:var(--color-teal-ink);text-underline-offset:3px}
img,svg{max-width:100%}
:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px;border-radius:var(--radius-sm)}
.muted{color:var(--color-ink-muted)}
.stack>*+*{margin-top:var(--space-4)}
.row{display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap}

/* Buttons: pill, 48px touch target */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:48px;padding:0 var(--space-6);border:0;border-radius:var(--radius-pill);font:600 var(--text-base)/1 var(--font-heading);cursor:pointer;text-decoration:none;background:var(--color-coral-solid);color:var(--color-coral-on);transition:transform var(--motion-fast) var(--motion-ease),box-shadow var(--motion-fast) var(--motion-ease),filter var(--motion-fast)}
.btn:hover{filter:brightness(.97);box-shadow:var(--shadow-md)}
.btn:active{transform:scale(.98)}
.btn-secondary{background:var(--color-surface);color:var(--color-ink);box-shadow:inset 0 0 0 2px var(--color-line)}
.btn-forest{background:var(--color-forest-solid);color:var(--color-forest-on)}
.btn-teal{background:var(--color-teal-solid);color:var(--color-teal-on)}
.btn-ghost{background:transparent;color:var(--color-ink)}
.btn[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn svg,.icon{width:20px;height:20px;flex:none;stroke:currentColor}

/* Cards */
.card{background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-sm)}
.card h3{margin-bottom:.25em}
.tint-coral{background:var(--color-coral-tint)}.tint-teal{background:var(--color-teal-tint)}.tint-forest{background:var(--color-forest-tint)}.tint-amber{background:var(--color-amber-tint)}.tint-lavender{background:var(--color-lavender-tint)}
.tint-coral,.tint-teal,.tint-forest,.tint-amber,.tint-lavender{box-shadow:none}

/* Owner chips and dots: who owns this? */
.chip{display:inline-flex;align-items:center;gap:var(--space-2);padding:4px 12px;border-radius:var(--radius-pill);font:600 var(--text-sm)/1.4 var(--font-heading);background:var(--color-sunken);color:var(--color-ink)}
.chip::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.chip-fran{background:var(--owner-fran-tint);color:var(--owner-fran-ink)}
.chip-marta{background:var(--owner-marta-tint);color:var(--owner-marta-ink)}
.chip-family{background:var(--owner-family-tint);color:var(--owner-family-ink)}
.chip-teal{background:var(--color-teal-tint);color:var(--color-teal-ink)}
.chip-coral{background:var(--color-coral-tint);color:var(--color-coral-ink)}
.chip-forest{background:var(--color-forest-tint);color:var(--color-forest-ink)}
.chip-amber{background:var(--color-amber-tint);color:var(--color-amber-ink)}
.chip-lavender{background:var(--color-lavender-tint);color:var(--color-lavender-ink)}
.chip-shared{background:var(--owner-family-tint);color:var(--owner-family-ink)}
/* A member's color (members.color) picks the class; shared household items use *-shared. fran/marta/family are the pilot aliases. */
.dot{display:inline-block;width:12px;height:12px;border-radius:50%}
.dot-fran{background:var(--owner-fran)}.dot-marta{background:var(--owner-marta)}.dot-family{background:var(--owner-family)}
.dot-teal{background:var(--color-teal)}.dot-coral{background:var(--color-coral)}.dot-forest{background:var(--color-forest)}.dot-amber{background:var(--color-amber)}.dot-lavender{background:var(--color-lavender)}.dot-shared{background:var(--owner-family)}

/* Event blocks (calendar / today list) */
.event{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border:2px solid transparent;background:var(--color-surface)}
.event strong{font-family:var(--font-heading)}
.event-fran{border-color:var(--owner-fran);background:var(--owner-fran-tint)}
.event-marta{border-color:var(--owner-marta);background:var(--owner-marta-tint)}
.event-family{border-color:var(--owner-family);background:var(--owner-family-tint)}
.event-teal{border-color:var(--color-teal);background:var(--color-teal-tint)}
.event-coral{border-color:var(--color-coral);background:var(--color-coral-tint)}
.event-forest{border-color:var(--color-forest);background:var(--color-forest-tint)}
.event-amber{border-color:var(--color-amber);background:var(--color-amber-tint)}
.event-lavender{border-color:var(--color-lavender);background:var(--color-lavender-tint)}
.event-shared{border-color:var(--owner-family);background:var(--owner-family-tint)}

/* Form fields */
.field{display:grid;gap:var(--space-1)}
.field label{font:600 var(--text-sm)/1.4 var(--font-heading)}
.field input,.field select,.field textarea{min-height:48px;padding:0 var(--space-4);border:2px solid var(--color-line);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-ink);font:inherit}
.field textarea{padding:var(--space-3) var(--space-4);min-height:96px}
.field input:focus{border-color:var(--color-teal-ink)}
.field .hint{font-size:var(--text-sm);color:var(--color-ink-muted)}
.field .error{font-size:var(--text-sm);color:var(--color-danger)}

/* Bottom tab bar (max 5) and quick add */
.tabbar{display:flex;justify-content:space-around;gap:var(--space-1);padding:var(--space-2) var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom));background:var(--color-surface);border-top:1px solid var(--color-line)}
.tabbar a{display:grid;justify-items:center;gap:2px;min-width:64px;min-height:48px;padding:var(--space-1) var(--space-2);color:var(--color-ink-muted);text-decoration:none;font:600 var(--text-xs)/1.2 var(--font-heading);border-radius:var(--radius-md)}
.tabbar a[aria-current="page"]{color:var(--color-coral-ink);background:var(--color-coral-tint)}
.fab{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:50%;border:0;background:var(--color-coral-solid);color:var(--color-coral-on);box-shadow:var(--shadow-lg);cursor:pointer}
.fab svg{width:26px;height:26px}
.badge{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:var(--radius-pill);background:var(--color-coral-solid);color:var(--color-coral-on);font:700 var(--text-xs)/1 var(--font-heading)}