/* FamilyPlanner UI Mobile-first. Top bar only. Family-configurable colours via --color-primary / --color-accent (injected per request in ). */ :root{ --color-primary:#4f46e5; --color-accent:#06b6d4; --bg:#f5f6f9; --surface:#ffffff; --surface-2:#fbfbfd; --text:#171a21; --muted:#6b7280; --border:#e6e8ee; --ring:color-mix(in srgb, var(--color-primary) 35%, transparent); --shadow:0 1px 2px rgba(16,20,30,.06), 0 8px 24px -16px rgba(16,20,30,.28); --radius:16px; --radius-sm:10px; --space:16px; --maxw:1120px; --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial, "Apple Color Emoji","Segoe UI Emoji",sans-serif; } html[data-theme="dark"]{ --bg:#0f1115; --surface:#171a21; --surface-2:#1c2029; --text:#e8eaf0; --muted:#9aa2af; --border:#262b36; --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -18px rgba(0,0,0,.7); } @media (prefers-color-scheme:dark){ html[data-theme="auto"]{ --bg:#0f1115; --surface:#171a21; --surface-2:#1c2029; --text:#e8eaf0; --muted:#9aa2af; --border:#262b36; --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -18px rgba(0,0,0,.7); } } *{box-sizing:border-box} /* The hidden attribute must always win, also over display:flex/grid classes. */ [hidden]{display:none !important} html,body{margin:0} body{ font-family:var(--font); background:var(--bg); color:var(--text); line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; padding-bottom:env(safe-area-inset-bottom); } a{color:inherit;text-decoration:none} .container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--space)} .container--wide{max-width:min(1500px,98vw)} /* ---- Top bar ---- */ .topbar{ position:sticky;top:0;z-index:30; background:color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--border); } .topbar__inner{display:flex;align-items:center;gap:12px;height:60px} .brand{display:flex;align-items:center;gap:10px;font-weight:680;letter-spacing:-.01em} .brand__name{font-size:1.02rem} @media (max-width:430px){.brand__name{display:none}} .brand__mark{ width:28px;height:28px; background:url("/assets/img/favicon.svg") center/contain no-repeat; } .brand__mark--lg{width:46px;height:46px} .brandlk{display:inline-flex;align-items:center;gap:10px;text-decoration:none;line-height:1} .brandlk__text{display:flex;flex-direction:column;gap:3px} .brandlk__word{font-weight:800;font-size:1.16rem;letter-spacing:-.02em} .brandlk__a{color:#4f46e5} .brandlk__b{color:#0891b2} .brandlk__sub{font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .brandlk--lg{gap:14px} .brandlk--lg .brandlk__word{font-size:1.95rem} .brandlk--lg .brandlk__sub{font-size:.74rem;letter-spacing:.18em} @media (prefers-color-scheme:dark){.brandlk__a{color:#818cf8}.brandlk__b{color:#22d3ee}} /* To-do module */ .todo-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0 16px} .todo-filters__status{display:inline-flex;gap:6px;flex-wrap:wrap} /* Desktop: a static "Filters" label sits inline at the front of the filter row. */ .todo-filters__label{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:.86rem;font-weight:600} /* The clickable toggle (in the header button row) is mobile-only. */ .todo-filterbtn{display:none} @media (max-width:760px){ .todo-filterbtn{display:inline-flex;align-items:center;gap:6px;margin-right:auto} .shop__headbtns{width:100%} .todo-filters__label{display:none} .todo-filters{display:none;margin:10px 0 16px} .todo-filters.is-open{display:flex;flex-direction:column;align-items:stretch} .todo-filters.is-open .todo-filters__status{justify-content:flex-start} .todo-filters.is-open .todo-filters__sel{max-width:none} } .chip{border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:999px;padding:6px 14px;font:inherit;font-size:.86rem;font-weight:600;cursor:pointer} .chip.is-on{background:var(--color-primary);border-color:transparent;color:#fff} .todo-filters__sel{max-width:200px} .todo-list{display:flex;flex-direction:column;gap:10px} .todo-card{display:flex;align-items:flex-start;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 16px} .todo-card__check{margin-top:3px;width:20px;height:20px;flex:none;cursor:pointer} .todo-card__body{flex:1;min-width:0;cursor:pointer} .todo-card__top{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .todo-card__title{margin:0;font-size:1rem;font-weight:640} .todo-card.is-done .todo-card__title{text-decoration:line-through;color:var(--muted)} .todo-chip{font-size:.72rem;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--surface-2);color:var(--muted)} .todo-chip--private{background:#eef2ff;color:#3730a3} .todo-prio{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:2px 8px;border-radius:999px} .todo-prio--high{background:#fee2e2;color:#b91c1c} .todo-prio--low{background:transparent;color:var(--muted);border:1px solid var(--border)} .todo-card__meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:7px} .todo-meta{font-size:.8rem;color:var(--muted);display:inline-flex;align-items:center;gap:4px} .todo-meta--who{background:var(--surface-2);border-radius:999px;padding:2px 9px;font-weight:600} .todo-due{font-size:.8rem;font-weight:600;color:var(--muted);white-space:nowrap} .todo-due.is-overdue{color:#dc2626;font-weight:700} .todo-due.is-today{color:#d97706;font-weight:700} .todo-dialog{width:min(520px,94vw)} .todo-extra{margin-top:8px;border-top:1px solid var(--border);padding-top:12px} .todo-extra__h{font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:12px 0 6px} .todo-checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px} .todo-checkitem{display:flex;align-items:center;gap:9px;padding:4px 0} .todo-checkitem input{width:18px;height:18px;flex:none;cursor:pointer} .todo-checkitem span{flex:1;min-width:0} .todo-checkitem.is-done span{text-decoration:line-through;color:var(--muted)} .todo-x{border:0;background:transparent;color:var(--muted);font-size:1.15rem;line-height:1;cursor:pointer;padding:0 4px} .todo-x:hover{color:#dc2626} .todo-additem{display:flex;gap:8px;margin-top:8px} .todo-additem .input{flex:1} .todo-atts{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:4px} .todo-att{display:flex;align-items:center;gap:8px} .todo-att a{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .todo-upload{cursor:pointer} .todo-catlist{margin-bottom:14px} .todo-dot{width:14px;height:14px;border-radius:50%;background:var(--border);flex:none} .nav{display:flex;gap:4px;align-items:center;flex:1 1 auto;min-width:0} .nav__items{display:flex;gap:4px;align-items:center;flex:1 1 auto;min-width:0;overflow:hidden} .nav__more{flex:0 0 auto} .nav__more .navdd__toggle{display:inline-flex;align-items:center;gap:3px} .nav__link{ padding:8px 12px;border-radius:999px;color:var(--muted); font-size:.94rem;font-weight:560;white-space:nowrap;transition:color .15s,background .15s; } .nav__link:hover{color:var(--text)} .nav__link.is-active{background:var(--color-primary);color:#fff} /* Settings dropdown in the top bar */ .navdd{position:relative} .navdd__toggle{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px} .navdd__toggle::-webkit-details-marker{display:none} .navdd__menu{ position:absolute;top:calc(100% + 8px);right:0;z-index:60; display:flex;flex-direction:column;min-width:200px;padding:6px; background:var(--surface);border:1px solid var(--border); border-radius:var(--radius-sm);box-shadow:var(--shadow); } .navdd__item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;color:var(--muted);font-size:.93rem;font-weight:560} .navdd__item:hover{color:var(--text);background:var(--surface-2)} .navdd__item.is-active{background:var(--color-primary);color:#fff} .navdd__item svg{width:17px;height:17px;flex:none;opacity:.85} .navdd__item.is-active svg{opacity:1} .account{display:flex;align-items:center;gap:10px;margin-left:8px} .account__me{display:inline-flex;text-decoration:none;border-radius:50%} .account__logout{display:flex} .profile__head{display:flex;align-items:center;gap:14px;margin-bottom:18px} .profile__name{font-weight:700;font-size:1.1rem} .ha-map{padding:12px 0;border-top:1px solid var(--border)} .ha-map:first-child{border-top:0} .ha-map__head{margin-bottom:8px} .ha-map__chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px} .ha-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 10px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);font-size:.85rem} .ha-chip__x{border:0;background:transparent;color:var(--muted);font-size:1.1rem;line-height:1;cursor:pointer;padding:0 2px} .ha-chip__x:hover{color:#dc2626} .ha-map__add{display:flex;flex-wrap:wrap;align-items:center;gap:8px} .ha-map__add .input{flex:1;min-width:160px} .notif-log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column} .notif-log__row{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--border)} .notif-log__row:first-child{border-top:0} .notif-log__time{flex:none;font-variant-numeric:tabular-nums;color:var(--muted);font-size:.85rem;width:42px} .notif-log__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .notif-log__title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .notif-log__text{font-size:.85rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .notif-log__badge{flex:none;font-size:.72rem;font-weight:700;padding:3px 8px;border-radius:999px} .notif-log__badge.is-ok{background:color-mix(in srgb,#16a34a 18%,var(--surface));color:#15803d} .notif-log__badge.is-fail{background:color-mix(in srgb,#dc2626 18%,var(--surface));color:#b91c1c} .notif-log__badge.is-none{background:var(--surface-2);color:var(--muted)} /* Public landing page */ .landing{max-width:none;padding:0} .btn--lg{padding:14px 24px;font-size:1.04rem} .lp__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1120px;margin:0 auto;padding:18px 20px} .lp__brand{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:1.1rem} .lp__nav{display:flex;gap:8px} /* Hero */ .lp__hero{ display:grid;grid-template-columns:1fr;gap:32px;align-items:center; max-width:1120px;margin:0 auto;padding:32px 20px 28px; } @media (min-width:880px){.lp__hero{grid-template-columns:1.05fr .95fr;padding:56px 20px 40px}} .lp__eyebrow{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase; color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 12%,var(--surface)); padding:6px 12px;border-radius:999px;margin-bottom:16px} .lp__title{font-size:clamp(2.1rem,5.2vw,3.3rem);line-height:1.08;letter-spacing:-.02em;margin:0 0 16px} .lp__lead{font-size:1.15rem;color:var(--muted);margin:0 0 26px;max-width:540px} .lp__cta{display:flex;gap:12px;flex-wrap:wrap} .lp__note{margin:16px 0 0;font-size:.85rem;color:var(--muted)} .lp__hero-art{max-width:520px;margin:0 auto;width:100%} .lp__hero-art svg{width:100%;height:auto;display:block;filter:drop-shadow(0 18px 40px rgba(10,12,18,.12))} /* Feature cards with icons */ .lp__features{display:grid;gap:16px;grid-template-columns:1fr;max-width:1120px;margin:0 auto;padding:28px 20px} @media (min-width:640px){.lp__features{grid-template-columns:1fr 1fr}} @media (min-width:980px){.lp__features{grid-template-columns:1fr 1fr 1fr}} .lp__feature{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);transition:transform .12s ease, box-shadow .12s ease} .lp__feature:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(10,12,18,.12)} .lp__ico{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:13px;margin-bottom:12px; color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 14%,var(--surface))} .lp__ico svg{width:24px;height:24px} .lp__ico--shopping{color:#16a34a;background:color-mix(in srgb,#16a34a 14%,var(--surface))} .lp__ico--tasks{color:#d97706;background:color-mix(in srgb,#f59e0b 16%,var(--surface))} .lp__ico--home{color:var(--color-accent);background:color-mix(in srgb,var(--color-accent) 16%,var(--surface))} .lp__feature-name{margin:0 0 6px;font-size:1.08rem} .lp__feature-desc{margin:0;color:var(--muted);font-size:.92rem;line-height:1.5} /* Phone-mockup showcase */ .lp__showcase{max-width:1080px;margin:0 auto;padding:20px 20px 8px;display:flex;flex-direction:column;gap:36px} .lp__show-row{display:grid;grid-template-columns:1fr;gap:24px;align-items:center} @media (min-width:820px){ .lp__show-row{grid-template-columns:0.9fr 1.1fr;gap:40px} .lp__show-row--rev .lp__show-art{order:2} } .lp__show-art{display:flex;justify-content:center} .lp-phone{width:100%;max-width:240px;height:auto;filter:drop-shadow(0 22px 44px rgba(10,12,18,.18))} .lp__show-text h2{font-size:1.5rem;margin:0 0 10px;letter-spacing:-.01em} .lp__show-text p{color:var(--muted);margin:0 0 16px;font-size:1.02rem;line-height:1.55} .lp__checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .lp__checks li{position:relative;padding-left:30px;font-weight:560} .lp__checks li::before{content:"";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%; background:color-mix(in srgb,#16a34a 18%,var(--surface))} .lp__checks li::after{content:"";position:absolute;left:6px;top:7px;width:8px;height:5px; border-left:2px solid #16a34a;border-bottom:2px solid #16a34a;transform:rotate(-45deg)} /* Scrolling reviews */ .reviews{padding:36px 0 8px;overflow:hidden} .reviews__head{text-align:center;max-width:680px;margin:0 auto 22px;padding:0 20px} .reviews__head h2{font-size:1.6rem;margin:0 0 6px} .reviews__viewport{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .reviews__track{display:flex;gap:16px;width:max-content;padding:8px 8px;animation:lp-marquee 48s linear infinite} .reviews:hover .reviews__track{animation-play-state:paused} @keyframes lp-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} .review{flex:0 0 320px;max-width:320px;margin:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;display:flex;flex-direction:column;gap:10px} .lp-stars{color:#f59e0b;letter-spacing:2px;font-size:.95rem} .review__text{margin:0;font-size:.95rem;line-height:1.55} .review__who{display:flex;align-items:center;gap:10px;font-size:.9rem} .review__avatar{flex:none;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.85rem} .review__avatar--a{background:var(--color-primary)} .review__avatar--b{background:#16a34a} .review__avatar--c{background:#f59e0b} .review__avatar--d{background:var(--color-accent)} .review__avatar--e{background:#db2777} @media (prefers-reduced-motion:reduce){.reviews__track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}} .lp__closing{text-align:center;padding:40px 20px 60px} .lp__closing h2{font-size:1.6rem;margin:0 0 8px} .lp__closing .muted{margin:0 0 20px} /* Site footer */ .sitefooter{border-top:1px solid var(--border);margin-top:32px;padding:18px 0;color:var(--muted)} .sitefooter__inner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.85rem} .sitefooter__links{display:flex;align-items:center;gap:8px} .sitefooter__links a{color:var(--muted)} .sitefooter__links a:hover{color:var(--text)} .avatar{ width:34px;height:34px;border-radius:50%; display:grid;place-items:center;font-weight:680;color:#fff;font-size:.9rem; background:linear-gradient(135deg,var(--color-primary),var(--color-accent)); } .avatar--lg{width:52px;height:52px;font-size:1.2rem} .avatar--photo{overflow:hidden;background:var(--surface-2)} .avatar--photo img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block} .input--file{padding:8px;font-size:.85rem} /* ---- Buttons ---- */ .btn{ --bg-btn:var(--surface); display:inline-flex;align-items:center;justify-content:center;gap:8px; font:inherit;font-weight:600;font-size:.95rem;cursor:pointer; padding:11px 16px;border-radius:var(--radius-sm); border:1px solid var(--border);background:var(--bg-btn);color:var(--text); transition:transform .04s ease, background .15s, border-color .15s, opacity .15s; } .btn:active{transform:translateY(1px)} .btn:disabled{opacity:.6} .btn.is-busy{opacity:.6;cursor:progress;pointer-events:none} .btn:focus-visible{outline:none;box-shadow:0 0 0 4px var(--ring)} .btn--primary{background:var(--color-primary);border-color:transparent;color:#fff} .btn--primary:hover{background:color-mix(in srgb,var(--color-primary) 90%, #000)} .btn--outline{background:transparent;border-color:color-mix(in srgb,var(--color-primary) 45%, var(--border))} .btn--ghost{background:transparent;border-color:transparent;color:var(--muted)} .btn--ghost:hover{color:var(--text);background:var(--surface-2)} .btn--sm{padding:7px 11px;font-size:.85rem} .btn--block{width:100%} /* ---- Cards & layout ---- */ .page{padding:24px 0 64px} .page--center{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px} .page__head{margin-bottom:20px} .eyebrow{margin:0 0 6px;font-size:.78rem;font-weight:680;letter-spacing:.08em;text-transform:uppercase;color:var(--color-primary)} .page__title{margin:0;font-size:clamp(1.5rem,5vw,2rem);font-weight:720;letter-spacing:-.02em} .page__lead{margin:8px 0 0;color:var(--muted)} .card{ background:var(--surface);border:1px solid var(--border); border-radius:var(--radius);padding:20px;box-shadow:var(--shadow); position:relative;overflow:hidden; } .card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px; background:linear-gradient(90deg,var(--color-primary),var(--color-accent));opacity:.9} .card__title{margin:0 0 6px;font-size:1.05rem;font-weight:680;letter-spacing:-.01em} .card__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px} .card__head .card__title{margin:0} .card__hint{margin:0 0 14px;color:var(--muted);font-size:.9rem} .card--highlight{border-color:color-mix(in srgb,var(--color-accent) 50%,var(--border))} .grid{display:grid;gap:14px;grid-template-columns:1fr} @media (min-width:560px){.grid{grid-template-columns:1fr 1fr}} @media (min-width:860px){.grid{grid-template-columns:1fr 1fr 1fr}} .settings-grid{display:grid;gap:16px;grid-template-columns:1fr} @media (min-width:720px){.settings-grid{grid-template-columns:1fr 1fr}} /* ---- Modules ---- */ .module__top{display:flex;align-items:center;justify-content:flex-start;gap:10px} .module__name{margin:0;font-size:1.05rem;font-weight:680;flex:1;min-width:0} /* dashboard module icon badge + greeting */ .module__icon{width:36px;height:36px;flex:none;display:inline-flex;align-items:center;justify-content:center;border-radius:11px;color:#fff;background:linear-gradient(135deg,var(--color-primary),var(--color-accent))} .module__icon svg{width:20px;height:20px} .module__icon--shopping{background:linear-gradient(135deg,#16a34a,#65a30d)} .module__icon--tasks{background:linear-gradient(135deg,#f59e0b,#f97316)} .module__icon--todo{background:linear-gradient(135deg,#0ea5e9,#14b8a6)} .module__icon--recipes{background:linear-gradient(135deg,#ec4899,#f43f5e)} .module__icon--passwords{background:linear-gradient(135deg,#64748b,#475569)} .dash-hero .page__title{display:flex;align-items:center;gap:8px;flex-wrap:wrap} /* dashboard rows: agenda+taken (halves), then boodschappen/recepten/game (thirds) */ .dash-row{display:grid;gap:16px;margin-bottom:16px} .dash-row--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))} .dash-row--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))} /* recipe suggestion on the dashboard */ .recsug{display:flex;gap:12px;align-items:center;margin-top:4px} .recsug__img{width:64px;height:64px;border-radius:10px;object-fit:cover;flex:none} .recsug__body{display:flex;flex-direction:column;gap:2px;min-width:0} .recsug__label{font-size:.7rem;font-weight:640;letter-spacing:.05em;text-transform:uppercase;color:var(--color-primary)} .recsug__title{font-weight:680;overflow:hidden;text-overflow:ellipsis} .recsug__meta{font-size:.82rem} .todo-bell{font-size:.85em;vertical-align:middle} .upcoming__item--click{cursor:pointer;border-radius:8px;margin:0 -6px;padding-left:6px;padding-right:6px} .upcoming__item--click:hover{background:color-mix(in srgb,var(--color-primary) 8%,transparent)} .module__desc{margin:8px 0 0;color:var(--muted);font-size:.92rem} .module--soon{opacity:.78} /* Shopping summary on the dashboard card */ .shopsum{margin:12px 0 0;font-weight:680;font-size:.95rem} .shopsum__cats{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .shopsum__chip{ font-size:.74rem;font-weight:700;border:1.5px solid var(--border); border-radius:999px;padding:3px 9px;white-space:nowrap; } /* Upcoming events on the dashboard agenda card */ .upcoming{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column} .upcoming__item{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--border)} .upcoming__text{display:flex;flex-direction:column;min-width:0} .upcoming__title{font-weight:620;font-size:.93rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .upcoming__meta{color:var(--muted);font-size:.8rem} .upcoming__who{flex:none} .tag{font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase; color:var(--color-accent);border:1px solid color-mix(in srgb,var(--color-accent) 40%,var(--border)); padding:3px 8px;border-radius:999px} /* ---- Forms ---- */ .form{display:flex;flex-direction:column;gap:14px} .form--inline{margin-top:16px} .field{display:flex;flex-direction:column;gap:6px} .field__label{font-size:.82rem;font-weight:600;color:var(--muted)} .input{ font:inherit;color:var(--text);background:var(--surface-2); border:1px solid var(--border);border-radius:var(--radius-sm);padding:11px 13px;width:100%; transition:border-color .15s, box-shadow .15s; } .input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 4px var(--ring)} .input--code{letter-spacing:.3em;font-size:1.1rem;text-align:center} .row{display:flex;gap:14px;flex-wrap:wrap} .field--color{flex:1} .swatch{width:100%;height:46px;padding:4px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2);cursor:pointer} /* ---- Auth ---- */ .auth{min-height:calc(100vh - 0px);display:grid;place-items:center;padding:32px 16px} .auth__card{width:100%;max-width:400px;padding:28px} .auth__head{text-align:center;margin-bottom:18px;display:flex;flex-direction:column;align-items:center;gap:8px} .auth__check{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center; font-size:1.6rem;font-weight:700;background:#16a34a;color:#fff;line-height:1} .auth__check--bad{background:#dc2626} .auth__title{margin:0;font-size:1.4rem;font-weight:720;letter-spacing:-.02em} .auth__sub{margin:0;color:var(--muted);font-size:.92rem} .auth__divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.8rem;margin:18px 0} .auth__divider::before,.auth__divider::after{content:"";height:1px;flex:1;background:var(--border)} .auth__hint{margin:10px 0 0;color:var(--muted);font-size:.85rem;min-height:1em;text-align:center} .hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden} .auth__card{position:relative} .auth__lang{position:absolute;top:12px;right:12px;display:flex;gap:2px;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:2px} .auth__lang-opt{font-size:.74rem;font-weight:700;letter-spacing:.02em;color:var(--muted);text-decoration:none;padding:3px 9px;border-radius:999px;line-height:1.2} .auth__lang-opt.is-active{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.08)} .auth__remember{margin:2px 0 4px} .auth__forgot{margin:-4px 0 10px;text-align:right;font-size:.84rem} .auth__forgot a{color:var(--muted)} .auth__recover-lead{margin:0 0 12px;color:var(--muted);font-size:.84rem;line-height:1.45} .auth__recover-lead strong{color:var(--text)} .auth__magic{margin-top:4px} .auth__magic:target{scroll-margin-top:16px} .auth__resend{margin-top:8px} .auth__warn{margin:0 0 12px;color:var(--muted);font-size:.8rem;line-height:1.4} .people{list-style:none;margin:0;padding:0;display:grid;gap:10px} .person{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer; background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;font:inherit;color:var(--text)} .person:hover{border-color:var(--color-primary)} .person__name{font-weight:620} .person__hint{margin-left:auto;font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em} /* ---- Lists, notices, misc ---- */ .list{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-direction:column} .list__row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)} .list__row:last-child{border-bottom:0} .muted{color:var(--muted);font-size:.86rem} .actions{display:flex;gap:10px;flex-wrap:wrap} .status{font-weight:700;margin:0 0 8px} .status--on{color:#16a34a}.status--off{color:var(--muted)} .notice{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:16px;font-size:.9rem} .notice--accent{border-color:color-mix(in srgb,var(--color-accent) 50%,var(--border))} /* Clickable trusted-network notice = one-tap trusted-IP sign-in. */ .trustedlogin{margin:0 0 16px} .notice--action{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin:0;text-align:left;cursor:pointer;font:inherit;font-size:.9rem;color:var(--text);transition:border-color .15s,background .15s} .notice--action:hover{border-color:var(--color-accent);background:color-mix(in srgb,var(--color-accent) 8%,var(--surface-2))} .notice__cta{flex:none;font-weight:700;color:var(--color-accent);white-space:nowrap} .elevate{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .link{color:var(--color-primary);font-weight:600} .reveal{margin:6px 0 14px} .reveal summary{cursor:pointer;color:var(--muted);font-size:.86rem} .key{display:block;margin-top:8px;word-break:break-all;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:10px;font-size:.78rem} .codes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px} .codes li{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:8px;text-align:center;letter-spacing:.05em} /* ---- Flash ---- */ /* Toasts: a stack pinned bottom-right. House-style surface cards with a coloured accent stripe per type. On mobile they sit above the bottom nav. */ .flash-stack{ position:fixed;bottom:16px;right:max(16px,env(safe-area-inset-right)); top:auto;left:auto;transform:none;z-index:90; display:flex;flex-direction:column;gap:10px; width:min(360px,calc(100vw - 32px));pointer-events:none; } .flash{ position:relative;pointer-events:auto;overflow:hidden; display:flex;align-items:center;gap:12px; padding:13px 14px 13px 18px; border-radius:var(--radius); font-size:.92rem;font-weight:560;line-height:1.35; color:var(--text);background:var(--surface); border:1px solid var(--border);box-shadow:var(--shadow); animation:flash-in .26s cubic-bezier(.2,.7,.3,1); } .flash::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--muted)} .flash--success::before{background:#16a34a} .flash--error::before{background:#dc2626} .flash--info::before{background:var(--color-primary)} .flash > span{flex:1;min-width:0} .flash__x{ flex:none;width:26px;height:26px;border-radius:8px; display:grid;place-items:center; border:0;background:transparent;color:var(--muted); font-size:1.25rem;line-height:1;cursor:pointer; transition:background .15s,color .15s; } .flash__x:hover{background:var(--surface-2);color:var(--text)} @keyframes flash-in{from{opacity:0;transform:translate(8px,12px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.flash{animation:none}} /* Lift the toasts above the fixed bottom nav on phones. */ @media (max-width:760px){.flash-stack{bottom:calc(70px + env(safe-area-inset-bottom))}} /* ---- Shopping list ---- */ .shop__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px} .shop__headbtns{display:flex;align-items:center;gap:10px;margin-left:auto;justify-content:flex-end;flex-wrap:wrap} .shop__status{font-size:.8rem;font-weight:640;color:#b45309;background:color-mix(in srgb,#f59e0b 16%,var(--surface)); border:1px solid #f59e0b66;border-radius:999px;padding:4px 10px} /* voice (tap-to-talk) add */ .shop__mic{font-size:1.05rem;line-height:1;padding-left:11px;padding-right:11px} .shop__mic.is-listening{background:#dc2626;border-color:transparent;color:#fff;animation:shop-mic-pulse 1.1s ease-in-out infinite} @keyframes shop-mic-pulse{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.45)}50%{box-shadow:0 0 0 7px rgba(220,38,38,0)}} .shop__voice{margin:0 0 12px;font-size:.9rem;color:var(--muted)} .shop__add{margin-bottom:14px;padding:14px} .shop__barcode{ display:flex;align-items:center;gap:10px; font-size:.85rem;font-weight:620; background:color-mix(in srgb,var(--color-accent) 12%,var(--surface)); border:1px solid color-mix(in srgb,var(--color-accent) 45%,var(--border)); border-radius:var(--radius-sm);padding:8px 12px; } .shop__barcode-clear{margin-left:auto;border:0;background:transparent;color:var(--muted);font-size:1.1rem;cursor:pointer;line-height:1} .shop__barcode-clear:hover{color:var(--text)} .shop__cats,.shop__filters{display:flex;flex-wrap:wrap;gap:8px} .shop__filters{margin:0 0 12px} .shopchip{ font:inherit;font-size:.85rem;font-weight:620;cursor:pointer; padding:6px 12px;border-radius:999px;border:1.5px solid var(--border); background:var(--surface);transition:transform .05s ease; } .shopchip:active{transform:scale(.96)} /* Filter-only category: dashed outline hints its items are hidden by default. */ .shopchip--fo{border-style:dashed} .shop__list{list-style:none;margin:0;padding:0;background:var(--surface);border:1px solid var(--border); border-radius:var(--radius);overflow:hidden} .shop__list:empty{display:none} .shopitem{display:flex;align-items:center;border-bottom:1px solid var(--border)} .shopitem:last-child{border-bottom:0} .shopitem__main{ flex:1;display:flex;align-items:center;gap:8px;flex-wrap:wrap; padding:13px 14px;cursor:pointer;min-width:0; user-select:none;-webkit-user-select:none;-webkit-touch-callout:none; } .shopitem__main.is-holding{background:color-mix(in srgb,var(--color-primary) 10%,var(--surface));transition:background .45s ease .15s} .shopitem__icon{width:32px;height:32px;flex:none;border-radius:50%;object-fit:cover;background:var(--surface-2);border:1px solid var(--border)} .shopitem--done .shopitem__icon{opacity:.5} .shopitem__name{font-weight:600} .shopitem__tag{font-size:.68rem;font-weight:700;color:#fff;border-radius:999px;padding:2px 8px;letter-spacing:.02em} @media (max-width:760px){ /* Phones: shrink category badges to colour-only dots to save row space. */ .shopitem__tag{width:11px;height:11px;padding:0;font-size:0;border-radius:50%;flex:none;overflow:hidden} } .shopitem__qtywrap{margin-left:auto;display:flex;align-items:center;gap:6px;flex:none} .shopitem__qty{ background:var(--surface-2);border:1px solid var(--border);border-radius:8px; padding:3px 10px;font-size:.9rem;font-weight:700;white-space:nowrap;min-width:34px;text-align:center; } .shopitem__step{ width:32px;height:32px;border-radius:50%;border:1px solid var(--border); background:var(--surface-2);font:inherit;font-size:1.1rem;font-weight:700;line-height:1; color:var(--color-primary);cursor:pointer;flex:none; } .shopitem__step:disabled{opacity:.35;cursor:default} .shopitem__step:active:not(:disabled){background:color-mix(in srgb,var(--color-primary) 15%,var(--surface-2))} .shopitem--done .shopitem__qty{font-weight:500;color:var(--muted);text-decoration:line-through} /* !important: the tag colour is set inline from the category, grey must win here */ .shopitem--done .shopitem__tag{background:var(--border) !important;color:var(--muted);text-decoration:line-through} .shopitem__edit{border:0;background:transparent;color:var(--muted);font-size:1rem;cursor:pointer;padding:13px 14px} /* On phones the pencil is hidden: press-and-hold a row opens the edit modal. */ @media (max-width:760px){.shopitem__edit{display:none}} /* Edit-item modal (replaces populating the add form on top). */ .shopedit{border:0;border-radius:var(--radius);padding:18px;width:min(440px,94vw);background:var(--surface);color:var(--text);box-shadow:var(--shadow);overflow:hidden} .shopedit::backdrop{background:rgba(10,12,18,.55)} /* Product photo as a header banner spanning the modal's top edge. */ .shopedit__banner{display:block;width:calc(100% + 36px);margin:-18px -18px 14px;max-height:170px;object-fit:cover;background:var(--surface-2)} .shopedit__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px} .shopedit__title{margin:0;font-size:1.1rem;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} [data-shop-edit-close]{flex:none;width:40px;height:40px;padding:0;display:grid;place-items:center;border:0;background:transparent;color:var(--muted);font-size:1.7rem;line-height:1;cursor:pointer} [data-shop-edit-close]:hover{color:var(--text)} .shopedit .shop__cats{margin:14px 0} .shopedit .actions{display:flex;gap:8px;margin-top:14px} .shopedit__qty{display:flex;align-items:center;gap:8px} .shopedit__qty .input{flex:1;min-width:0;text-align:center} /* Phones: no room for +/- steppers in the list (edit in the modal instead), and rows must never wrap — long descriptions get an ellipsis. */ @media (max-width:760px){ .shopitem__step{display:none} .shopitem__qtywrap--implicit{display:none} .shopedit__qty .shopitem__step{display:grid;place-items:center} .shopitem__main{flex-wrap:nowrap} .shopitem__name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} } .shopitem--striking .shopitem__name{text-decoration:line-through;opacity:.45} .shopitem--striking{background:color-mix(in srgb,var(--color-primary) 5%,var(--surface))} .shopitem--done .shopitem__name{text-decoration:line-through;color:var(--muted);font-weight:500} .shopitem--empty{padding:16px;color:var(--muted);cursor:default} .shop__done-title{font-size:.95rem;font-weight:680;color:var(--muted);margin:20px 0 8px} .shop__list--done .shopitem__main{padding:10px 14px} /* ---- Chores game ---- */ .chores__members{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;margin-bottom:14px} .chores__member{ display:flex;flex-direction:column;align-items:center;gap:4px;flex:none; padding:10px 14px;border-radius:var(--radius-sm);border:1.5px solid var(--border); background:var(--surface);min-width:86px; } .chores__member.is-active{border-color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 7%,var(--surface))} .chores__membername{font-size:.82rem;font-weight:640} .chores__memberpts{font-size:.78rem;color:var(--muted);font-weight:700} .chores__balance{display:flex;align-items:baseline;gap:10px;margin:4px 0 14px} .chores__balance-num{font-size:1.6rem;font-weight:780;letter-spacing:-.02em} /* Day toggle (today / yesterday) for backdating a "done" tap */ .choreday-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px} .choreday{display:inline-flex;gap:4px;padding:4px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm)} .choreday__tab{padding:7px 16px;border-radius:8px;font-weight:640;font-size:.9rem;color:var(--muted);text-decoration:none} .choreday__tab.is-active{background:var(--color-primary);color:#fff} .choreday__note{margin-left:auto;padding:6px 12px;border-radius:999px;font-size:.85rem;font-weight:600; color:#c2410c;background:color-mix(in srgb,#dc2626 12%,transparent);border:1px solid color-mix(in srgb,#dc2626 30%,transparent)} html[data-theme="dark"] .choreday__note{color:#fca5a5;background:color-mix(in srgb,#dc2626 22%,transparent);border-color:color-mix(in srgb,#dc2626 45%,transparent)} @media (prefers-color-scheme:dark){html[data-theme="auto"] .choreday__note{color:#fca5a5;background:color-mix(in srgb,#dc2626 22%,transparent);border-color:color-mix(in srgb,#dc2626 45%,transparent)}} .btn--yesterday{background:color-mix(in srgb,var(--color-primary) 55%, #d9822b)} .btn--yesterday:hover{background:color-mix(in srgb,var(--color-primary) 45%, #c2730f)} /* Milestone celebration: full-screen confetti + congrats card */ .celebrate{border:0;padding:0;margin:0;inset:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;background:transparent;overflow:hidden} .celebrate[open]{display:flex;align-items:center;justify-content:center} .celebrate::backdrop{background:rgba(10,12,18,.62);backdrop-filter:blur(3px)} .celebrate__confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} .celebrate__card{position:relative;z-index:1;width:min(420px,92vw);background:var(--surface);color:var(--text); border-radius:var(--radius);box-shadow:var(--shadow);padding:30px 26px;text-align:center; display:flex;flex-direction:column;align-items:center;gap:12px;animation:celebrate-pop .45s cubic-bezier(.2,1.25,.4,1)} @keyframes celebrate-pop{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}} .celebrate__medal{display:inline-flex;animation:celebrate-bob 1.4s ease-in-out infinite} .celebrate__medal .badge-emoji{font-size:5rem;line-height:1} @keyframes celebrate-bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-7px) rotate(4deg)}} .celebrate__title{margin:2px 0 0;font-size:1.5rem;font-weight:800;letter-spacing:-.01em} .celebrate__sub{margin:0;color:var(--muted);font-size:1rem;line-height:1.5} .celebrate .btn[data-modal-close]{width:100%;height:auto;min-width:0;padding:11px 16px;font-size:1rem;font-weight:680;border-radius:var(--radius-sm);color:#fff;margin-top:8px} .celebrate .btn[data-modal-close]:hover{background:color-mix(in srgb,var(--color-primary) 90%, #000);color:#fff} .chores__approvals{margin-bottom:14px;border-color:color-mix(in srgb,var(--color-accent) 50%,var(--border))} .chores__tasks{display:grid;gap:12px;grid-template-columns:1fr} @media (min-width:720px){.chores__tasks{grid-template-columns:1fr 1fr}} .choretask--paused{opacity:.65} .choretask__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .choretask__name{margin:0;font-size:1.02rem;font-weight:680} .choretask__meta{display:flex;align-items:center;gap:10px;margin-top:6px;font-size:.9rem;flex-wrap:wrap} .choretask__pts{font-weight:700;color:var(--color-primary)} .choretask__streak,.choretask__freeze{font-weight:640} .choretask__hint{margin:6px 0 0;font-size:.8rem;color:var(--muted)} .choretask__action{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none} .chores__donebtn{min-width:110px} .chores__checked{font-size:1.5rem} .chores__rejected{color:#dc2626;border-color:#dc262666} .choretask__pause{margin-top:10px;padding-top:8px;border-top:1px solid var(--border);font-size:.82rem} .chores__shoptitle{font-size:1.05rem;font-weight:700;margin:22px 0 10px} .chores__shop{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} .chorereward{padding:14px;text-align:center;position:relative;overflow:hidden} .chorereward--locked{opacity:.55} .chorereward__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.16;pointer-events:none} .chorereward__body{position:relative} .chorereward__name{margin:0;font-size:.95rem;font-weight:660} .chorereward__pts{margin:8px 0;font-size:1.1rem;font-weight:760} .chorereward__date{margin:0;font-size:.78rem} .chorereward--done{opacity:.82} /* Redeem confirmation modal */ .redeem-dialog{width:min(380px,94vw);text-align:center;position:relative;padding:0;overflow:hidden} .redeem-dialog__close{position:absolute;top:8px;right:8px;z-index:2} .redeem-dialog__art{ display:flex;align-items:center;justify-content:center; height:180px;background:var(--surface-2);font-size:4rem;overflow:hidden; } .redeem-dialog__img{width:100%;height:100%;object-fit:cover;display:block} .redeem-dialog__name{margin:16px 18px 4px;font-size:1.25rem;font-weight:740;letter-spacing:-.01em} .redeem-dialog__pts{margin:0;font-size:1.4rem;font-weight:800} .redeem-dialog__balance{margin:6px 18px 0;font-size:.85rem} .redeem-dialog form{margin:16px 18px 8px} .redeem-dialog > [data-modal-close]{margin:0 18px 18px;width:calc(100% - 36px)} .chores__shopnote{margin-top:10px;font-size:.82rem} .chores__count{display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:999px; background:#fff;color:var(--color-primary);font-size:.74rem;font-weight:800;padding:0 5px;margin-left:4px} .choretask__icon{font-size:1.15rem;margin-right:2px} .chores__approveall{margin-top:12px} .choremanage__pts{width:80px;flex:none;text-align:center} .choremanage__icon .input{width:64px;text-align:center} .choremanage__list{display:flex;flex-direction:column;gap:4px;margin-bottom:8px} .choremanage__item{border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;background:var(--surface-2)} .choremanage__item summary{font-weight:620;font-size:.92rem} .choremanage__form{margin-top:10px;gap:10px} .choremanage__remove{margin-top:8px;display:flex;justify-content:flex-end} .choremanage__addtitle{font-size:.92rem;font-weight:680;margin:14px 0 8px;color:var(--muted)} /* Game v3: streak row, compact task cards, subtabs, manage rows */ .gstreaks{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:12px} .gstreaks__chip{ display:inline-flex;align-items:center;gap:5px;flex:none; background:color-mix(in srgb,#f59e0b 14%,var(--surface)); border:1.5px solid #f59e0b88;border-radius:999px;padding:6px 12px; font-size:.86rem;font-weight:700; } .gstreaks__icon{font-size:1rem} .gstreaks__freeze{font-weight:640;font-size:.78rem} .gtask-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));grid-auto-rows:1fr} .gtask{position:relative;overflow:hidden;padding:12px;display:flex;flex-direction:column;gap:6px} .gtask--paused{opacity:.6} .gtask__bg{position:absolute;right:-8px;bottom:-16px;font-size:4.6rem;opacity:.10;pointer-events:none;line-height:1} .gtask__name{margin:0;font-size:.92rem;font-weight:680;position:relative} .gtask__meta{display:flex;align-items:center;gap:8px;font-size:.82rem;font-weight:640;position:relative;flex-wrap:wrap} /* Embedded dashboards (iframe) */ .dashmain{padding:0;max-width:none;width:100%} .dashframe{display:flex;flex-direction:column;min-height:60vh} .dashframe__bar{display:flex;align-items:center;justify-content:space-between;gap:10px; padding:6px 14px;border-bottom:1px solid var(--border);background:var(--surface)} .dashframe__label{font-weight:600} .dashframe__frame{flex:1 1 auto;width:100%;height:82vh;border:0;display:block;background:var(--surface-2)} .dashframe__hint{font-size:.78rem;padding:6px 14px;margin:0} .dashframe--bare .dashframe__frame{height:calc(100dvh - 62px)} @media (max-width:720px){.dashframe__frame{height:74vh}.dashframe--bare .dashframe__frame{height:calc(100dvh - 120px)}} /* Admin → Families: compact rows, status badges, filter bar */ .famfilter{display:flex;flex-wrap:wrap;gap:16px;margin:0 0 14px} .field--inline{display:flex;align-items:center;gap:8px;margin:0} .field--inline .field__label{margin:0;white-space:nowrap} .famlist{list-style:none;margin:0;padding:0} .famrow{display:flex;align-items:center;justify-content:space-between;gap:14px; padding:10px 2px;border-bottom:1px solid var(--border)} .famrow:last-child{border-bottom:0} .famrow__main{min-width:0} .famrow__name{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .famrow__sub{font-size:.82rem;margin-top:2px} .famrow__actions{display:flex;align-items:center;gap:8px;flex-shrink:0} .famrow__tier{width:auto;min-width:120px} .famrow__approve{display:inline-flex;gap:6px} .famrow__saved{font-size:.78rem;min-width:60px} .famrow__saved--bad{color:#dc2626} .badge{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase; padding:2px 8px;border-radius:999px;border:1px solid transparent} .badge--approved{background:rgba(34,160,110,.12);color:#1d9e75;border-color:rgba(34,160,110,.3)} .badge--pending{background:rgba(234,160,20,.14);color:#9a6b00;border-color:rgba(234,160,20,.35)} .badge--rejected{background:rgba(220,60,60,.12);color:#c0392b;border-color:rgba(220,60,60,.3)} @media (max-width:560px){.famrow{flex-direction:column;align-items:stretch}.famrow__actions{flex-wrap:wrap}} /* Add-to-home-screen suggestion banner */ .pwa-banner{position:fixed;left:50%;bottom:16px;z-index:2000;display:flex;gap:12px;align-items:center; width:calc(100% - 24px);max-width:440px;padding:12px 14px;background:var(--surface);color:var(--text); border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow); transform:translate(-50%,150%);opacity:0;transition:transform .3s ease,opacity .3s ease} .pwa-banner--in{transform:translate(-50%,0);opacity:1} .pwa-banner__icon{width:40px;height:40px;flex:0 0 auto;border-radius:9px} .pwa-banner__txt{flex:1 1 auto;min-width:0} .pwa-banner__title{margin:0;font-weight:600;font-size:.95rem} .pwa-banner__body{margin:2px 0 0;font-size:.82rem;color:var(--muted)} .pwa-banner__actions{display:flex;gap:6px;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end} @media (max-width:480px){.pwa-banner{flex-wrap:wrap}.pwa-banner__actions{width:100%}} .gtask__badge{display:inline-flex;align-items:center} .gtask__badgex{font-size:.72rem;font-weight:700;margin-left:1px} .badge-emoji{font-size:22px;line-height:1;display:inline-block;vertical-align:middle} .badge-emoji--lg{font-size:30px} .badge-svg{vertical-align:middle} .badge-editor{margin:6px 0 12px} .badge-row{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap} .badge-row__preview{width:32px;min-height:34px;display:inline-flex;align-items:center;justify-content:center} .badge-row__days{width:84px} .badge-row__name{flex:1 1 130px;min-width:120px} .badge-row__pick{width:140px} .badge-row__icon{width:120px} .badge-row__del{flex:0 0 auto} .gtask__action{margin-top:auto;position:relative;display:flex;flex-direction:column;gap:6px;align-items:stretch} .gtask__action .tag{align-self:flex-start} .gtask__pauselink{position:absolute;right:0;bottom:0} .gtask__pausebtn{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:.95rem;padding:4px;opacity:.55} .gtask__pausebtn:hover{opacity:1} .gtask__pausenote{margin:4px 0 0;font-size:.76rem;position:relative} .chores__showall{margin-top:10px} .agenda-dialog--wide{width:min(640px,96vw)} .agenda-dialog--wide [data-search]{margin-bottom:12px} .gtask-grid--modal{max-height:60vh;overflow-y:auto;padding:2px} .subtabs{display:flex;gap:6px;margin-bottom:16px} .subtabs__tab{padding:8px 16px;border-radius:999px;font-size:.92rem;font-weight:620;color:var(--muted);border:1px solid var(--border);background:var(--surface)} .subtabs__tab.is-active{background:var(--color-primary);border-color:transparent;color:#fff} .manage-row__label{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap} .dashrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--border)} .dashrow:last-child{border-bottom:0} .dashrow__edit{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1 1 320px;margin:0} .dashrow__label{flex:0 1 150px;min-width:120px} .dashrow__url{flex:1 1 220px;min-width:160px} .dashrow__actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .manage-row--off{opacity:.55} .manage-row__icon{font-size:1.2rem} .manage-row__thumb{width:34px;height:34px;border-radius:8px;object-fit:cover;flex:none} .gamekid__pts{margin-left:auto;font-weight:760;font-size:.95rem} .gamekid__medals{margin-left:auto;font-weight:680;font-size:.9rem;color:var(--muted)} .gamekid__medals + .gamekid__pts{margin-left:0} .chores-danger{border-color:color-mix(in srgb,#dc2626 35%,var(--border))} .chores-danger .card__title{color:#dc2626} /* Device (trusted network) avatar */ .avatar--device{background:linear-gradient(135deg,#64748b,#94a3b8);font-size:1rem} .devicephoto{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);align-items:center} /* Home Assistant: uniform tiles (fixed height, clamped names) + modals */ .ha-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} .ha-tile{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px; height:128px;padding:10px;cursor:pointer;font:inherit;color:var(--text); border-radius:var(--radius);border:1.5px solid var(--border); background:var(--surface);box-shadow:var(--shadow);overflow:hidden; transition:transform .05s ease, border-color .15s; } .ha-tile:active{transform:scale(.97)} .ha-tile--on{background:color-mix(in srgb,#f59e0b 14%,var(--surface));border-color:#f59e0b} .ha-tile--clim.ha-tile--active{background:color-mix(in srgb,#ef4444 8%,var(--surface));border-color:#ef444488} .ha-tile__icon{font-size:1.6rem;line-height:1} .ha-tile__name{ font-weight:660;font-size:.88rem;text-align:center;line-height:1.25; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; max-height:2.5em; } .ha-tile__big{font-size:1.35rem;font-weight:780;letter-spacing:-.02em;line-height:1.1} .ha-tile__sub{font-size:.74rem;font-weight:700;color:var(--muted);white-space:nowrap} .ha-tile--on .ha-tile__sub{color:#b45309} .ha-thermo__target{display:flex;align-items:center;gap:14px;justify-content:center} .ha-thermo__set{font-size:1.6rem;font-weight:760;min-width:84px;text-align:center} .ha-clim__current{margin:0 0 14px;font-size:1.1rem;font-weight:680} .ha-clim__picker{margin:6px 0} .ha-clim__label{text-align:center;margin:4px 0 14px;font-size:.8rem} .ha-bigtoggle{margin-bottom:14px} .ha-dim__row{display:flex;align-items:center;gap:12px;margin-top:8px} .ha-dim__icon{font-size:1.1rem;flex:none} .ha-dim__range{flex:1;accent-color:#f59e0b;height:32px} .ha-dim__hint{margin:8px 0 0;font-size:.78rem} .burger{display:none} .navdd__sep{height:1px;background:var(--border);margin:6px 4px} /* Full-width divider between groups in the mobile settings grid. */ .moresheet__sep{grid-column:1/-1;height:1px;background:var(--border);margin:4px 0} /* Mobile: app-style bottom bar with icons; the top nav row is hidden. */ .bottomnav{display:none} .moresheet{border:0;border-radius:18px 18px 0 0;padding:10px 14px 18px;width:100%;max-width:none;margin:auto auto 0;background:var(--surface);color:var(--text);box-shadow:var(--shadow)} .moresheet::backdrop{background:rgba(10,12,18,.55)} .moresheet__bar{width:40px;height:4px;border-radius:2px;background:var(--border);margin:2px auto 12px} .moresheet__grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px;margin-bottom:10px} .moresheet__item{display:flex;flex-direction:column;align-items:center;gap:5px;text-decoration:none;color:var(--text);font-size:.74rem;font-weight:600;padding:10px 4px;border-radius:12px;background:var(--surface-2)} .moresheet__item.is-active{color:var(--color-primary)} .moresheet__item svg{width:24px;height:24px} /* Pure-CSS view swap inside the Meer sheet: the gear is a normal tile; tapping it shows the settings tiles, "Terug" returns to the modules. */ .moresheet__cb{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;margin:-1px} .moresheet__view--settings{display:none} .moresheet__cb:checked ~ .moresheet__view--main{display:none} .moresheet__cb:checked ~ .moresheet__view--settings{display:block} .moresheet__back{display:inline-flex;align-items:center;gap:5px;cursor:pointer;color:var(--muted);font-weight:600;font-size:.85rem;padding:2px 2px 12px} .moresheet__view form{display:contents} .moresheet__item--signout{color:#dc2626;background:color-mix(in srgb,#dc2626 9%,var(--surface-2));font:inherit;width:100%;cursor:pointer} /* Admin sync-log tables. */ .dtable-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} .dtable{width:100%;border-collapse:collapse;font-size:.86rem} .dtable th,.dtable td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--border);vertical-align:top} .dtable th{font-weight:700;color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap} .dtable tbody tr:hover{background:var(--surface-2)} .dtable .nowrap{white-space:nowrap} .syncerr{color:#dc2626;word-break:break-word} .tag--cron{background:color-mix(in srgb,var(--color-primary) 14%,var(--surface-2));color:var(--color-primary)} .tag--save{background:color-mix(in srgb,#16a34a 16%,var(--surface-2));color:#15803d} /* "Your current address" hint on the trusted-networks settings card. */ .ipnow{margin:0 0 12px;font-size:.9rem;color:var(--muted)} .ipnow__addr{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:2px 7px;color:var(--text);font-size:.88rem} @media (max-width:760px){ .topbar .nav{display:none} /* The nav (which carried margin-left:auto) is hidden on mobile, so pin the avatar to the right edge explicitly. */ .account{margin-left:auto} .bottomnav{ display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80; background:var(--surface);border-top:1px solid var(--border); padding:6px 2px;padding-bottom:calc(6px + env(safe-area-inset-bottom)); justify-content:space-around;box-shadow:0 -4px 16px rgba(10,12,18,.08); } .bottomnav__item{ flex:1;display:flex;flex-direction:column;align-items:center;gap:2px; text-decoration:none;color:var(--muted);font-size:.64rem;font-weight:600; padding:4px 2px;border:0;background:transparent;cursor:pointer;min-width:0; } .bottomnav__item span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bottomnav__item.is-active{color:var(--color-primary)} .bottomnav__item svg{width:24px;height:24px} main{padding-bottom:72px} .sitefooter{margin-bottom:64px} } /* ---- Password vault ---- */ .pwvault__err{color:#dc2626;font-size:.86rem;margin:0 0 10px;font-weight:600} .pwvault__hint{display:block;font-size:.8rem;margin-top:4px} .pwimport__steps{margin:6px 0 0;padding-left:1.2em;display:flex;flex-direction:column;gap:12px} .pwimport__steps>li{padding-left:4px} /* Password generator (under the password field in the add/edit dialog) */ .pwgen__toggle{margin-top:6px;font-size:.82rem} .pwgen{margin-top:10px;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2); display:flex;flex-direction:column;gap:10px} .pwgen__len{display:flex;flex-direction:column;gap:4px;font-size:.85rem} .pwgen__len input[type=range]{width:100%} .pwgen__opts{display:flex;flex-wrap:wrap;gap:10px} .pwgen__opts .check{font-size:.85rem} .pwgen [data-pwgen-go]{align-self:flex-start} .pwvault__search{margin-bottom:10px} .pwvault__copyhint{display:flex;align-items:center;gap:6px;font-size:.8rem;margin:0 0 16px} .pwvault__copyhint svg{flex:none;opacity:.8} /* The safe (locked state) */ .pwsafe{max-width:360px;margin:24px auto;text-align:center} .pwsafe__door{ width:160px;height:160px;margin:0 auto 18px;border-radius:22px;position:relative; background: radial-gradient(circle at 50% 42%, #6b7280 0 38%, #4b5563 39% 100%); box-shadow:inset 0 0 0 6px #374151, inset 0 0 0 10px #9ca3af, 0 12px 30px -12px rgba(0,0,0,.5); } .pwsafe__dial{ position:absolute;top:50%;left:50%;width:74px;height:74px;border-radius:50%; transform:translate(-50%,-50%); background:conic-gradient(from 0deg,#cbd5e1,#94a3b8,#e2e8f0,#94a3b8,#cbd5e1); box-shadow:inset 0 0 0 6px #64748b, 0 2px 6px rgba(0,0,0,.4); display:grid;place-items:center; } .pwsafe__dial-knob{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#f1f5f9,#64748b)} .pwsafe__bolts{position:absolute;inset:0} .pwsafe__bolts span{position:absolute;width:10px;height:10px;border-radius:50%;background:#1f2937;box-shadow:inset 0 1px 1px rgba(255,255,255,.25)} .pwsafe__bolts span:nth-child(1){top:14px;left:14px} .pwsafe__bolts span:nth-child(2){top:14px;right:14px} .pwsafe__bolts span:nth-child(3){bottom:14px;left:14px} .pwsafe__bolts span:nth-child(4){bottom:14px;right:14px} .pwsafe__title{margin:0 0 14px;font-size:1.5rem;font-weight:760;letter-spacing:-.02em} .pwsafe__form{display:flex;flex-direction:column;gap:10px} .pwsafe__pin{text-align:center} .pwsafe__hint{margin:14px 0 0;color:var(--muted);font-size:.84rem} .pwsafe__setup{margin-top:16px;display:flex;flex-direction:column;gap:8px} .pwsafe__setup .link{background:none;border:0;cursor:pointer;font:inherit} .pwsafe__recover{margin:12px 0 0} .pwsafe__recover .link{background:none;border:0;cursor:pointer;font:inherit;color:var(--muted);font-size:.86rem} /* recovery key: the one-time word list + the recover-phrase input */ .pwrecover__phrase{font-family:ui-monospace,Menlo,Consolas,monospace;line-height:1.5;resize:vertical} .pwrecovery__reveal{margin-top:14px;padding:12px;border:1px solid var(--border);border-radius:10px;background:color-mix(in srgb,var(--accent) 6%,var(--surface))} .pwrecovery__warn{margin:0 0 10px;font-size:.84rem;font-weight:600;color:var(--text)} .pwrecovery__words{margin:0 0 10px;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:4px 14px;counter-reset:rw} .pwrecovery__words li{counter-increment:rw;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.92rem;font-weight:600;padding:3px 6px;border-radius:6px;background:var(--surface)} .pwrecovery__words li::before{content:counter(rw) ". ";color:var(--muted);font-weight:400} @media (min-width:560px){.pwrecovery__words{grid-template-columns:repeat(4,1fr)}} /* Entry cards, recognisable private vs shared */ .pwvault__cards{display:grid;gap:12px;grid-template-columns:1fr} @media (min-width:560px){.pwvault__cards{grid-template-columns:1fr 1fr}} @media (min-width:900px){.pwvault__cards{grid-template-columns:1fr 1fr 1fr}} .pwcard{ position:relative;overflow:hidden;display:flex;flex-direction:column; background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); padding:14px 16px;box-shadow:var(--shadow);border-left:4px solid var(--border); } .pwcard--personal{border-left-color:var(--color-accent)} .pwcard--parents{border-left-color:#f59e0b} .pwcard--shared{border-left-color:var(--color-primary)} .pwcard__bg{position:absolute;right:-10px;bottom:-10px;max-width:48%;max-height:78%;opacity:.12;pointer-events:none;object-fit:contain} .pwcard > *:not(.pwcard__bg){position:relative} .pwcard__top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px} .pwcard__name{margin:0;min-width:0;font-size:1.02rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pwcard__badge{ flex:none;font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em; padding:3px 8px;border-radius:999px; } .pwcard--personal .pwcard__badge{background:color-mix(in srgb,var(--color-accent) 18%,var(--surface));color:var(--color-accent)} .pwcard--parents .pwcard__badge{background:color-mix(in srgb,#f59e0b 20%,var(--surface));color:#b45309} .pwcard--shared .pwcard__badge{background:color-mix(in srgb,var(--color-primary) 16%,var(--surface));color:var(--color-primary)} .pwlink{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px} .pwcard__field{display:flex;align-items:center;gap:8px;margin-top:8px} .pwcard__flab{flex:none;width:38px;font-size:.66rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em} .pwcard__fwrap{position:relative;flex:1;min-width:0;display:flex} .pwcard__fval{ flex:1;min-width:0;height:32px;line-height:22px;box-sizing:border-box; font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:copy; padding:4px 8px;border-radius:8px;background:var(--surface-2);border:1px solid var(--border); user-select:none;-webkit-user-select:none; } .pwcard__fval--mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;padding-right:34px} .pwcard__fval.is-copied{background:color-mix(in srgb,#16a34a 20%,var(--surface));border-color:#16a34a} .pwcard__eye{ position:absolute;right:3px;top:50%;transform:translateY(-50%); display:flex;align-items:center;justify-content:center;width:28px;height:28px; border:0;background:transparent;color:var(--muted);cursor:pointer;padding:0; } .pwcard__eye svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .pwcard__eye:hover{color:var(--color-primary)} .pwcard__eye.is-on{color:var(--color-primary)} .pwcard__eyeslash{display:none} .pwcard__eye.is-on .pwcard__eyeslash{display:block} .pwcard__foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:12px} .pwcard__footleft{display:flex;align-items:center;gap:8px;min-width:0;flex:1} .pwcard__url{color:var(--color-primary);font-weight:600;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .pwcard__note{flex:none;display:inline-grid;place-items:center;width:26px;height:26px;padding:0; border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--muted);cursor:pointer} .pwcard__note:hover{color:var(--text)} .pwcard__note svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .pwcard__edit{flex:none;margin:0} .pwvault__gear summary{list-style:none} .pwvault__gear summary::-webkit-details-marker{display:none} .pwvault__gear .navdd__menu button.navdd__item{width:100%;text-align:left;background:transparent;border:0;cursor:pointer;font:inherit;font-size:.93rem;font-weight:560} .pwkeys__list{margin-bottom:14px} /* Copy toast */ .pwtoast{ position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:120; background:#16a34a;color:#fff;font-weight:680;font-size:.88rem; padding:10px 16px;border-radius:999px;box-shadow:var(--shadow); } .pwtoast[hidden]{display:none} /* Barcode scan overlay */ .scan{position:fixed;inset:0;z-index:100;background:rgba(8,10,16,.92);display:flex;align-items:center;justify-content:center;padding:18px} .scan[hidden]{display:none} .scan__inner{width:min(440px,100%);display:flex;flex-direction:column;gap:12px} .scan__video{width:100%;border-radius:var(--radius);background:#000;aspect-ratio:3/4;object-fit:cover} .scan__hint{color:#fff;text-align:center;margin:0;font-size:.9rem} /* Category management */ .shopcat-edit{display:flex;align-items:center;gap:8px;flex:1;flex-wrap:wrap} .shopcat-edit .input{flex:1;min-width:110px} .swatch--sm{width:38px;height:38px;flex:none} .shopcat-chipview{display:flex;align-items:center;gap:8px;font-weight:600} .shopcat-dot{width:14px;height:14px;border-radius:50%;display:inline-block} /* One edit form per group, saved together. */ .shopcat-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .shopcat-row .input{flex:1;min-width:120px} .shopcat-row .check{flex:none;white-space:nowrap} .shopcat-x{margin-left:auto;font-size:1.4rem;line-height:1;color:var(--muted)} .shopcat-x:hover{color:#dc2626} .shopcat-save{margin-top:12px;display:flex;justify-content:flex-end} .shopcat-add{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)} @media (prefers-reduced-motion:reduce){*{transition:none !important}} /* ---- Family members ---- */ .card--full{grid-column:1 / -1} .field--grow2{flex:2} .field--grow1{flex:1} .member-list{display:flex;flex-direction:column;gap:14px} .member{border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px;background:var(--surface-2)} .member--off{opacity:.6} .member__id{display:flex;align-items:center;gap:12px;margin-bottom:6px} .member__name{font-weight:680;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .member__edit{margin-top:6px} .member__more{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)} .check{display:flex;align-items:center;gap:8px;font-size:.92rem;color:var(--text);cursor:pointer} .check input{width:18px;height:18px;accent-color:var(--color-primary)} /* ---- Dashboard module links ---- */ .module--link{display:block;color:inherit;transition:transform .08s ease, border-color .15s} .module--link:hover{border-color:var(--color-primary);transform:translateY(-1px)} /* ---- Agenda: full-bleed week grid ---- */ .avatar--sm{width:26px;height:26px;font-size:.72rem;flex:none} .agenda-shell{ width:100%; height:calc(100dvh - 60px); /* exact viewport height minus the top bar */ display:flex;flex-direction:column;overflow:hidden; } .agenda-bar{ display:flex;align-items:center;gap:10px;flex-wrap:wrap; padding:8px 12px;border-bottom:1px solid var(--border);background:var(--surface); } .agenda-bar__week{display:flex;align-items:center;gap:12px;margin:0 auto} .wknav{ width:36px;height:36px;border-radius:50%;flex:none; display:grid;place-items:center; background:var(--surface-2);border:1px solid var(--border); font-size:1.45rem;line-height:1;color:var(--text);padding-bottom:3px; transition:background .15s, border-color .15s; } .wknav:hover{background:color-mix(in srgb, var(--color-primary) 12%, var(--surface-2));border-color:var(--color-primary)} .agenda-bar__title{position:relative;margin:0;font-size:1rem;font-weight:700;letter-spacing:-.01em;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .agenda-bar__range{color:var(--muted);font-weight:520;font-size:.86rem} /* clickable week title → opens a date picker to jump to any week */ .agenda-bar__titlebtn{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;display:inline-flex;align-items:baseline;gap:8px;flex-wrap:wrap;border-radius:6px} .agenda-bar__titlebtn:hover{text-decoration:underline} .agenda-bar__cal{font-size:.82em;opacity:.65;text-decoration:none;align-self:center} /* the real date input sits invisibly over the title so the native picker anchors there */ .agenda-bar__jump{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;pointer-events:none} .agenda-bar__actions{margin-left:auto;display:flex;align-items:center;gap:8px} .agenda-warn{ width:24px;height:24px;border-radius:50%;display:grid;place-items:center; background:#dc2626;color:#fff;font-weight:800;font-size:.8rem; } .agenda-srcerr{color:#dc2626} .agenda-scroll{flex:1 1 auto;overflow:auto;overscroll-behavior:contain} .agenda-grid{ display:grid; grid-template-columns:130px repeat(7, minmax(120px,1fr)); /* grid-template-rows is set per request (nonce style block): all members always fit the viewport, rows weighted by their busiest day */ grid-template-rows:44px; grid-auto-rows:minmax(44px,1fr); height:100%; min-width:100%; background:var(--bg); } .agenda-corner{ position:sticky;top:0;left:0;z-index:6; background:var(--surface);border-bottom:1px solid var(--border);border-right:1px solid var(--border); } .agenda-dayhead{ position:sticky;top:0;z-index:5; display:flex;align-items:center;justify-content:center;gap:6px; background:var(--surface);border-bottom:1px solid var(--border);border-right:1px solid var(--border); font-size:.8rem;font-weight:640;color:var(--muted);text-transform:uppercase;letter-spacing:.03em; } .agenda-dayhead__num{ display:grid;place-items:center;width:24px;height:24px;border-radius:50%; color:var(--text);font-weight:700; } .agenda-dayhead.is-today .agenda-dayhead__num{background:var(--color-primary);color:#fff} .agenda-dayhead.is-today{color:var(--color-primary)} .agenda-member{ position:sticky;left:0;z-index:4; display:flex;align-items:center;gap:8px;padding:8px; background:var(--surface);border-bottom:1px solid var(--border);border-right:1px solid var(--border); overflow:hidden; } .agenda-member__name{font-size:.86rem;font-weight:640;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .agenda-cell{ position:relative;display:flex;flex-direction:column;gap:3px;padding:3px; border-bottom:1px solid var(--border);border-right:1px solid var(--border); min-width:0;min-height:0;overflow-y:auto;scrollbar-width:thin; } .agenda-cell.is-today{background:color-mix(in srgb, var(--color-primary) 5%, var(--bg))} /* 🎉🎂 Member's own birthday — full party: gradient, bunting, confetti, balloons. Friend/family birthdays reuse only the banner + bunting (no --party gradient). */ .agenda-cell--party,.agm__cell--party{ background: linear-gradient(135deg, color-mix(in srgb,#ff6ec4 16%,var(--surface)), color-mix(in srgb,#ffd93d 16%,var(--surface)), color-mix(in srgb,#6bc5ff 16%,var(--surface))); } .bday{position:absolute;inset:0;overflow:hidden;pointer-events:none} /* keep the real content (events, banner, +) above the confetti layer */ .agenda-cell--bday > *:not(.bday),.agm__cell--bday > *:not(.bday){position:relative;z-index:1} /* bunting / slinger across the top */ .bday__bunting{position:absolute;top:28px;left:-4px;right:-4px;height:13px;display:flex;justify-content:space-around;align-items:flex-start} .bday__bunting span{width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-top:17px solid #ff6b6b} /* colour per flag */ .bday__bunting span:nth-child(2){border-top-color:#ffd93d} .bday__bunting span:nth-child(3){border-top-color:#4dd4ac} .bday__bunting span:nth-child(4){border-top-color:#6bc5ff} .bday__bunting span:nth-child(5){border-top-color:#b197fc} .bday__bunting span:nth-child(6){border-top-color:#ff8cc6} .bday__bunting span:nth-child(7){border-top-color:#ffa94d} /* let the garland sag in a round droop (ends high, middle low) */ .bday__bunting span:nth-child(1){transform:translateY(0)} .bday__bunting span:nth-child(2){transform:translateY(5px)} .bday__bunting span:nth-child(3){transform:translateY(9px)} .bday__bunting span:nth-child(4){transform:translateY(11px)} .bday__bunting span:nth-child(5){transform:translateY(9px)} .bday__bunting span:nth-child(6){transform:translateY(5px)} .bday__bunting span:nth-child(7){transform:translateY(0)} /* falling confetti */ .bday__conf{position:absolute;top:-14px;width:6px;height:10px;border-radius:1px;opacity:.95;animation:bday-fall linear infinite} .bday__conf:nth-of-type(1){left:6%;background:#ff6b6b;animation-duration:3.0s;animation-delay:0s} .bday__conf:nth-of-type(2){left:18%;background:#ffd93d;animation-duration:3.6s;animation-delay:.5s} .bday__conf:nth-of-type(3){left:30%;background:#4dd4ac;animation-duration:2.7s;animation-delay:.9s} .bday__conf:nth-of-type(4){left:42%;background:#6bc5ff;animation-duration:3.3s;animation-delay:.2s} .bday__conf:nth-of-type(5){left:54%;background:#b197fc;animation-duration:2.9s;animation-delay:1.1s} .bday__conf:nth-of-type(6){left:66%;background:#ff8cc6;animation-duration:3.5s;animation-delay:.4s} .bday__conf:nth-of-type(7){left:78%;background:#ffa94d;animation-duration:3.1s;animation-delay:.8s} .bday__conf:nth-of-type(8){left:88%;background:#63e6be;animation-duration:2.8s;animation-delay:.3s} .bday__conf:nth-of-type(9){left:48%;background:#ff6b6b;animation-duration:3.7s;animation-delay:1.3s} @keyframes bday-fall{ 0%{transform:translateY(0) rotate(0);opacity:0} 10%{opacity:.95} 100%{transform:translateY(160px) rotate(540deg);opacity:.15} } /* balloons drifting up */ .bday__balloon{position:absolute;bottom:-34px;left:12%;font-size:27px;line-height:1;animation:bday-float 5s ease-in infinite} .bday__balloon--2{left:74%;font-size:22px;animation-duration:6.5s;animation-delay:1.2s} @keyframes bday-float{ 0%{transform:translateY(0) rotate(-6deg);opacity:0} 15%{opacity:.9} 100%{transform:translateY(-170px) rotate(6deg);opacity:0} } /* big cake at the bottom of the cell — sits behind the confetti */ .bday__cake{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);font-size:52px;line-height:1;filter:drop-shadow(0 2px 3px rgba(0,0,0,.18));animation:bday-cake-bob 3.2s ease-in-out infinite} @keyframes bday-cake-bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-5px)}} /* the "Naam is jarig!" banner — same look for members and friends */ .bday__banner{ display:block;width:auto;box-sizing:border-box; position:relative;z-index:1;margin:1px 1px 3px;padding:2px 6px;border-radius:8px; text-align:center;font-size:.74rem;font-weight:700;line-height:1.25;color:#c2255c; background:rgba(255,255,255,.72);box-shadow:0 1px 3px rgba(194,37,92,.18); animation:bday-pop .5s cubic-bezier(.2,1.3,.4,1)} /* the top banner reserves room for the drooping bunting hanging under it */ .bday__banner--lead{margin-bottom:36px} .bday__age{display:inline-block;background:#c2255c;color:#fff;border-radius:999px;padding:0 6px;font-size:.7rem;margin:0 1px} /* friend banner is the same chip, just a clickable button */ .bday__banner--friend{border:0;font-family:inherit;cursor:pointer} .bday__banner--friend:hover{filter:brightness(1.04)} /* birthday management list (/agenda/birthdays) */ .bday-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px} .bday-list__row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font:inherit;color:inherit; border:1px solid var(--border);background:var(--surface);border-radius:10px;padding:10px 12px;cursor:pointer} .bday-list__row:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--surface))} .bday-list__date{flex:0 0 84px;font-weight:700;color:var(--accent)} .bday-list__name{flex:1 1 auto;font-weight:600} .bday-list__age{display:inline-block;background:#c2255c;color:#fff;border-radius:999px;padding:0 7px;font-size:.78rem;margin-left:4px} .bday-list__unknown{color:var(--muted);font-weight:400;font-size:.82rem;margin-left:4px} .bday-list__member{flex:0 0 auto;color:var(--muted);font-size:.85rem} .bday-list__bell{flex:0 0 auto} .actions--split{display:flex;justify-content:space-between;align-items:center;gap:10px} @keyframes bday-pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}} @media (prefers-reduced-motion:reduce){ .bday__conf{display:none} /* static confetti is meaningless; keep bunting + balloons */ .bday__balloon,.bday__banner,.bday__cake{animation:none} .bday__balloon{opacity:.9;bottom:auto;top:6px} } /* The agenda is a full-viewport app view; the site footer below it pushes the page just past the screen, scrolling the top row out of view. Hide it here. */ body:has(main.agenda-shell) .sitefooter{display:none} .evt{ --evt-color:var(--color-primary); display:flex;align-items:baseline;gap:5px;width:100%;min-width:0; font:inherit;font-size:.76rem;text-align:left;cursor:pointer; background:color-mix(in srgb, var(--evt-color) 14%, var(--surface)); border:1px solid color-mix(in srgb, var(--evt-color) 30%, var(--border)); border-left:3px solid var(--evt-color); border-radius:7px;padding:3px 7px;color:var(--text); } .evt:hover{background:color-mix(in srgb, var(--evt-color) 24%, var(--surface))} .evt__time{font-weight:700;color:var(--evt-color);flex:none} .evt__title{font-weight:560;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .evt--allday{background:var(--evt-color);border-color:var(--evt-color);color:#fff} .evt--allday .evt__title{font-weight:640} .agenda-cell__add{ margin-top:auto;min-height:20px;border:0;background:transparent;color:var(--muted); font-size:.95rem;font-weight:700;cursor:pointer;border-radius:6px;opacity:0; transition:opacity .12s, background .12s; } .agenda-cell:hover .agenda-cell__add, .agenda-cell__add:focus-visible{opacity:.75;background:var(--surface-2)} @media (hover:none){.agenda-cell__add{opacity:.3}} /* Display filter dropdown (hide finished events) */ .agenda-filter{position:relative} .agenda-filter summary{list-style:none;cursor:pointer} .agenda-filter summary::-webkit-details-marker{display:none} .agenda-filter[open] summary{background:var(--surface-2);border-radius:var(--radius-sm)} .agenda-filter__panel{ position:absolute;right:0;top:calc(100% + 6px);z-index:40; width:240px;padding:14px;gap:10px; background:var(--surface);border:1px solid var(--border); border-radius:var(--radius-sm);box-shadow:var(--shadow); } .agenda-filter__hours{display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--text)} .agenda-filter__num{width:64px;text-align:center} /* Event dialog */ .agenda-dialog{ border:0;border-radius:var(--radius);padding:20px; width:min(440px, 94vw);background:var(--surface);color:var(--text); box-shadow:var(--shadow); } .agenda-dialog::backdrop{background:rgba(10,12,18,.62);backdrop-filter:blur(3px)} .evt--task{display:flex;align-items:center;gap:6px;cursor:pointer;border-left:3px dashed var(--color-accent)} .evt--task .evt__title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis} .evt-task__check{width:15px;height:15px;flex:none;cursor:pointer} /* Bigger, clearer close (×) buttons in every modal */ .btn[data-modal-close],.btn[data-dialog-close]{font-size:1.7rem;line-height:1;width:40px;height:40px;min-width:40px;padding:0;border-radius:10px;color:var(--muted)} .btn[data-modal-close]:hover,.btn[data-dialog-close]:hover{color:var(--text);background:var(--surface-2)} .confirm-modal{ border:0;border-radius:var(--radius);padding:22px; width:min(380px,92vw);background:var(--surface);color:var(--text);box-shadow:var(--shadow); } .confirm-modal::backdrop{background:rgba(10,12,18,.62);backdrop-filter:blur(3px)} .confirm-modal__msg{margin:0 0 18px;font-size:1rem;line-height:1.5} .confirm-modal__input{width:100%;margin:0 0 18px;box-sizing:border-box} .confirm-modal__actions{display:flex;justify-content:flex-end;gap:10px} .btn--danger{background:#dc2626;border-color:transparent;color:#fff} .btn--danger:hover{background:color-mix(in srgb,#dc2626 88%,#000)} .agenda-dialog__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px} .agenda-dialog__title{margin:0;font-size:1.1rem;font-weight:700;letter-spacing:-.01em} .agenda-dialog__delete{margin-top:10px;display:flex;justify-content:flex-end} /* Calendar sources: stacked rows + split rules */ .list__row--stack{display:block} .srcrow__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap} .rules{margin-top:10px;padding:10px 12px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm)} .rules__title{margin:0 0 2px;font-size:.85rem;font-weight:680} .rules__list{list-style:none;margin:8px 0;padding:0;display:flex;flex-direction:column;gap:6px} .rules__item{display:flex;align-items:center;gap:8px;font-size:.9rem;flex-wrap:wrap} .rules__match{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--surface); border:1px solid var(--border);border-radius:6px;padding:1px 7px;font-size:.82rem} .rules__item form{margin-left:auto} .rules__add{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px} .rules__add .input{flex:1;min-width:120px} .rules__fallback{margin-top:12px;padding-top:10px;border-top:1px solid var(--border)} .rules__fallback-label{margin:0 0 6px;font-size:.85rem;font-weight:640} .rules__fallback-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .check--inline{font-size:.88rem} .member-checks{display:flex;flex-wrap:wrap;gap:6px 14px;padding:4px 0} .editform{display:flex;flex-direction:column;gap:10px;margin-top:8px} .input--sm{padding:8px 10px;font-size:.9rem} /* Mobile agenda (.agm): a continuous day strip starting today. The desktop week grid (.agenda-scroll) is hidden; the strip shows two days at a time, member names pinned on the left, and appends more days as you scroll right. Desktop/tablet keep the per-week grid untouched. */ .agenda-m{display:none} @media (max-width:760px){ .agenda-scroll{display:none} /* compact top bar: Vandaag · Week 39 (tap to jump) · Nieuwe afspraak */ .agenda-bar{flex-wrap:nowrap;gap:6px;padding:8px 10px} .agenda-bar__week{margin:0 auto;gap:0} .agenda-bar .wknav{display:none} /* swipe to change weeks instead */ .agenda-bar__range{display:none} /* show just the week number */ .agenda-filter{display:none} /* hide the display filter */ .agenda-bar [data-birthday-new]{display:none} /* hide birthday button (decorations stay) */ .agenda-m:not([hidden]){flex:1 1 auto;min-height:0;display:flex} .agm{flex:1 1 auto;min-height:0;display:flex;overflow:hidden;background:var(--bg)} .agm__names{flex:0 0 84px;display:flex;flex-direction:column;background:var(--surface);border-right:1px solid var(--border);z-index:2} .agm__corner{flex:0 0 46px;border-bottom:1px solid var(--border)} .agm__name{flex:1 1 0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:4px;border-bottom:1px solid var(--border);text-align:center;overflow:hidden} .agm__nametext{font-size:.72rem;font-weight:600;line-height:1.1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .agm__scroll{flex:1 1 auto;min-width:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch} .agm__day{flex:0 0 50%;min-width:0;display:flex;flex-direction:column;border-right:1px solid var(--border);scroll-snap-align:start} .agm__dh{flex:0 0 46px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-bottom:1px solid var(--border);line-height:1.1} .agm__dow{font-size:.72rem;color:var(--muted);text-transform:capitalize} .agm__dom{font-size:1.05rem;font-weight:700} .agm__dh.is-today{background:color-mix(in srgb,var(--color-primary) 12%,var(--surface));color:var(--color-primary)} .agm__dh.is-today .agm__dow{color:var(--color-primary)} .agm__cell{position:relative;flex:1 1 0;min-height:0;display:flex;flex-direction:column;gap:3px;padding:4px;border-bottom:1px solid var(--border);overflow-y:auto} .agm__cell.is-today{background:color-mix(in srgb,var(--color-primary) 5%,transparent)} .agm__cell .evt{width:100%;text-align:left} .agm__add{margin-top:auto;align-self:flex-start;border:0;background:transparent;color:var(--muted);font-size:1.15rem;line-height:1;cursor:pointer;padding:2px 6px} } /* ---- Help centre + guided setup ---- */ .helphub{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:8px} .helpcard{display:block;padding:16px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);color:inherit;transition:border-color .15s,transform .05s} .helpcard:hover{border-color:var(--color-primary)} .helpcard:active{transform:scale(.99)} .helpcard__icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--color-primary) 14%,var(--surface-2));color:var(--color-primary);margin-bottom:10px} .helpcard__icon svg{width:20px;height:20px} .helpcard__title{font-weight:700;margin:0 0 4px} .helpcard__desc{color:var(--muted);font-size:.9rem;margin:0} .guide{max-width:760px} .guide h2{margin:26px 0 8px;font-size:1.15rem} .guide p{margin:8px 0;line-height:1.6} .guide ul,.guide ol{margin:8px 0;padding-left:22px;line-height:1.6} .guide li{margin:4px 0} .guide__note{border-left:3px solid var(--color-accent);background:var(--surface-2);padding:10px 14px;border-radius:0 8px 8px 0;margin:12px 0} .guide__steps{counter-reset:step;list-style:none;padding:0;margin:14px 0} .guide__steps>li{counter-increment:step;position:relative;padding:0 0 18px 44px;border-left:2px solid var(--border);margin-left:14px} .guide__steps>li:last-child{border-left-color:transparent;padding-bottom:0} .guide__steps>li::before{content:counter(step);position:absolute;left:-15px;top:-2px;width:28px;height:28px;border-radius:50%;background:var(--color-primary);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.85rem} .guide-shot{margin:10px 0;border:1px dashed var(--border);border-radius:10px;background:var(--surface-2);color:var(--muted);padding:22px 14px;text-align:center;font-size:.86rem} .guide-shot::before{content:"🖼";display:block;font-size:1.4rem;margin-bottom:6px} .guide-fig{margin:12px 0} .guide-fig img{display:block;max-width:100%;border:1px solid var(--border);border-radius:10px} .guide-fig figcaption{color:var(--muted);font-size:.82rem;margin-top:6px} .faq details{border:1px solid var(--border);border-radius:10px;background:var(--surface);margin:8px 0;overflow:hidden} .faq summary{cursor:pointer;padding:13px 16px;font-weight:600;list-style:none} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";float:right;color:var(--muted);font-weight:700} .faq details[open] summary::after{content:"–"} .faq details[open] summary{border-bottom:1px solid var(--border)} .faq__a{padding:12px 16px;color:var(--text);line-height:1.6} .guide__back{display:inline-block;margin-bottom:10px;color:var(--muted);font-size:.9rem} /* Inline text links inside guides/FAQ must look clickable (the global rule strips link styling). Excludes buttons styled as .btn. */ .guide a:not(.btn),.faq__a a:not(.btn),.guide__note a:not(.btn){color:var(--color-primary);text-decoration:underline;text-underline-offset:2px} .guide a:not(.btn):hover,.faq__a a:not(.btn):hover,.guide__note a:not(.btn):hover{text-decoration:none} .setupwiz{max-width:620px} .setup__bar{display:flex;gap:6px;margin:6px 0 18px} .setup__dot{flex:1;height:6px;border-radius:3px;background:var(--border)} .setup__dot.is-on{background:var(--color-primary)} .setup__nav{display:flex;justify-content:space-between;gap:10px;margin-top:22px} .setup__modlist{display:flex;flex-direction:column;gap:10px;margin:14px 0} .setup__mod{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface)} .setup__mod .check{margin-left:auto} .setup__steps{margin:10px 0 16px;padding-left:20px;color:var(--text)} .setup__steps li{margin:5px 0;line-height:1.5} .setup__feedform{margin:8px 0 4px;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2)} .setup__added{margin:14px 0 4px;font-weight:600;font-size:.9rem} .setup__feedlist{margin:0;padding-left:18px;color:var(--muted);font-size:.9rem} .setup__feedlist li{margin:3px 0} /* ---- Recipes ---- */ .recipe__head,.recipe-form__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap} .recipe__headbtns{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto} .recipe-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:8px} .recipe-card{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface);box-shadow:var(--shadow);color:inherit;transition:transform .05s,border-color .15s} .recipe-card:hover{border-color:var(--color-primary)} .recipe-card:active{transform:scale(.99)} .recipe-card__img{position:relative;display:block;aspect-ratio:16/10;background:var(--surface-2);overflow:hidden} .recipe-card__img img{width:100%;height:100%;object-fit:cover;display:block} .recipe-card__noimg{position:absolute;inset:0;display:grid;place-items:center;font-size:2rem;opacity:.5} .recipe-card__body{padding:12px} .recipe-card__title{font-weight:700;display:block;margin-bottom:4px} .recipe-card__meta{font-size:.85rem;display:flex;align-items:center;gap:6px;flex-wrap:wrap} .stars{color:var(--border);letter-spacing:1px} .stars .star--on{color:#f5a623} .stars--lg{font-size:1.1rem} .recipe__banner{width:100%;max-height:340px;object-fit:cover;border-radius:var(--radius);margin:8px 0;display:block} .recipe__top{margin-bottom:8px} .recipe__meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0 10px} .recipe__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .recipe__actions .recipe__del{display:inline} .recipe__servings{display:flex;align-items:center;gap:10px;margin-bottom:12px} .recipe__servn{font-weight:700;font-size:1.1rem;min-width:24px;text-align:center} .recipe__ings{list-style:none;margin:0 0 12px;padding:0} .recipe__ings li{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid var(--border)} .recipe__ings li:last-child{border-bottom:0} .ing__amt{flex:0 0 auto;min-width:80px;font-weight:600;color:var(--color-primary)} .recipe__desc{white-space:pre-wrap;line-height:1.6} .recipe__source{color:var(--color-primary);text-decoration:underline} .recipe__raters{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px} .rate{display:flex;gap:4px} .rate__star{font-size:1.8rem;line-height:1;background:none;border:0;cursor:pointer;color:var(--border);padding:0 2px} .rate__star.is-on{color:#f5a623} .ingrow{display:flex;gap:8px;margin-bottom:8px;align-items:center} .ingrow__amt{flex:0 0 80px} .ingrow__unit{flex:0 0 90px} .ingrow__name{flex:1;min-width:0} .recipe-form__thumb{max-width:200px;border-radius:10px;border:1px solid var(--border);margin-top:8px;display:block} .recipe-pick{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)} .recipe-pick input{width:18px;height:18px;flex:none;accent-color:var(--color-primary)} .recipe__pick{list-style:none;margin:0;padding:0;max-height:50vh;overflow:auto} .admin__btns{display:flex;gap:8px;flex-wrap:wrap} /* AI badge on recipes */ .recipe-badge{position:absolute;top:8px;left:8px;background:color-mix(in srgb,var(--color-primary) 90%,#000);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.03em;padding:3px 8px;border-radius:999px;box-shadow:var(--shadow)} .recipe-badge--inline{position:static;display:inline-block;vertical-align:middle;margin-left:8px;font-size:.6rem;padding:2px 8px} .recipe-search{display:flex;gap:8px;margin:10px 0 6px;flex-wrap:wrap} .recipe-search .input{flex:1;min-width:160px} .syncfreq{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .syncfreq__lbl{margin:0} /* ---- Landing: plans comparison ---- */ .lp__plans{max-width:1000px;margin:0 auto;padding:48px 20px;text-align:center} .lp__section-title{font-size:1.8rem;font-weight:800;letter-spacing:-.02em;margin:0 0 6px} .lp__section-lead{color:var(--muted);max-width:560px;margin:0 auto 26px} .lp__plangrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media (max-width:760px){.lp__plangrid{grid-template-columns:1fr}} .lp__plan{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);padding:22px;text-align:left} .lp__plan--comfort{border-color:var(--color-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary) 25%,transparent),var(--shadow)} .lp__plan-name{font-size:1.3rem;font-weight:800;margin:0 0 12px} .lp__plan--eco .lp__plan-name{color:#16a34a} .lp__plan--comfort .lp__plan-name{color:var(--color-primary)} .lp__plan--sport .lp__plan-name{color:#dc2626} .lp__plan-feats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .lp__plan-feats li{font-size:.92rem;color:var(--text);display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--border);padding-bottom:9px} .lp__plan-feats li:last-child{border-bottom:0} .lp__plan-cap{justify-content:flex-start !important;font-weight:600} .lp__plan-cap.is-on{color:#15803d} .lp__plan-cap.is-off{color:var(--muted);opacity:.7} /* Admin plans: fixed 3-column layout (stacks on mobile). */ .tiergrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px} @media (max-width:760px){.tiergrid{grid-template-columns:1fr}} /* ---- Shopping product management ---- */ .prodrow{border-bottom:1px solid var(--border)} .prodrow:last-child{border-bottom:0} .prodrow__sum{display:flex;align-items:center;gap:12px;cursor:pointer;padding:10px 2px;list-style:none; width:100%;text-align:left;background:none;border:0;color:inherit;font:inherit;border-radius:8px} .prodrow__sum::-webkit-details-marker{display:none} button.prodrow__sum:hover{background:var(--surface-2)} .prodrow__sum--static{cursor:default} .prodrow__go{margin-left:auto;flex:none;color:var(--muted);font-size:1rem;padding:0 4px} .prodeditdlg .prodedit__photo{display:flex;margin-bottom:8px} .prodeditdlg .prodedit__photo img{width:64px;height:64px;border-radius:8px;object-fit:cover;border:1px solid var(--border)} .prodeditdlg .prodedit__photo.is-empty{display:none} .prodedit__del{margin-top:14px;padding-top:12px;border-top:1px solid var(--border)} .prodedit__delbtn{color:var(--color-danger,#c0392b)} .prodthumb{width:40px;height:40px;flex:none;border-radius:8px;overflow:hidden;background:var(--surface-2);border:1px solid var(--border);display:grid;place-items:center} .prodthumb img{width:100%;height:100%;object-fit:cover} .prodthumb__ph{opacity:.5} .prodrow__main{min-width:0} .prodrow__meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:3px;font-size:.82rem} .prodchip{color:#fff;border-radius:999px;padding:1px 8px;font-size:.7rem;font-weight:700} .prodedit{margin:8px 0} /* Category picker as toggle chips, matching the shopping list. */ .catchips{display:flex;flex-wrap:wrap;gap:8px} .catchip{position:relative;display:inline-flex;align-items:center;font-size:.85rem;font-weight:620; cursor:pointer;padding:6px 12px;border-radius:999px;border:1.5px solid var(--cc,var(--border)); color:var(--cc,var(--text));background:var(--surface);transition:transform .05s ease} .catchip:active{transform:scale(.96)} .catchip input{position:absolute;opacity:0;width:0;height:0;pointer-events:none} .catchip:has(input:checked){background:var(--cc,var(--color-accent));color:#fff} /* Duplicate suggestions */ .card__headrow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .dupes{margin-top:10px;display:flex;flex-direction:column;gap:8px} .dupes__none{margin:6px 0 0} .dupe{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)} .dupe__info{min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px} .dupe__names{font-weight:600} .dupe__reason{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em; color:var(--muted);border:1px solid var(--border);border-radius:999px;padding:1px 8px} .dupe__actions{display:flex;gap:8px;flex:none} /* iCal feeds list (one per family / per member) */ .icalfeeds{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:10px} .icalfeed{border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:var(--surface-2)} .icalfeed__head{display:flex;align-items:center;justify-content:space-between;gap:12px} .icalfeed__url{margin:6px 0 0;word-break:break-all} .icalfeed__add{margin-top:6px;align-items:flex-end} /* IMAP mailbox cleaner */ .mb-diag{margin-top:12px;max-height:240px;white-space:pre-wrap;word-break:break-word} .mb-rowactions{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .mb-rowmsg{flex-basis:100%;font-size:.85em} .mc-acctrow{display:flex;gap:8px;align-items:center} .mc-acctrow select{flex:1 1 auto} .mc-opts{display:flex;flex-wrap:wrap;gap:14px;margin:8px 0} .mc-dry{display:inline-flex;margin:6px 0} .mc-result{margin-top:14px} .mc-result table{margin-top:8px} .mc-ret{display:flex;flex-direction:column;gap:8px;margin:8px 0} .mc-retrow{display:flex;gap:8px;align-items:center} .mc-retrow>input[type=text]{flex:1;min-width:0} .mc-retrow__m{width:120px;flex:none} .mc-ret-add{align-self:flex-start;margin-bottom:6px} .mc-log{margin:0;max-height:240px;overflow:auto;background:var(--surface-2);border:1px solid var(--border); border-radius:8px;padding:10px;font-size:.78rem;line-height:1.5;white-space:pre-wrap;word-break:break-word} .mc-tokens{font-size:.82rem} .mc-cat{border:1px solid var(--border);border-radius:8px;margin-top:8px;background:var(--surface)} .mc-cat>summary{cursor:pointer;padding:9px 12px;font-weight:700} .mc-cat__list{list-style:none;margin:0;padding:4px 12px 10px;display:flex;flex-direction:column;gap:6px; max-height:320px;overflow:auto} .mc-cat__list li{display:flex;flex-direction:column;border-bottom:1px solid var(--border);padding-bottom:5px} .mc-cat__list li:last-child{border-bottom:0} .mc-mail{flex-direction:row !important;align-items:center;gap:10px} .mc-mail__txt{display:flex;flex-direction:column;min-width:0;flex:1} .mc-mail__cat{flex:none;width:auto;max-width:160px} .mc-mail__cat--changed{border-color:var(--color-accent);font-weight:700} .mc-cat__subj{font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mc-cat__from{font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* AI usage dashboard */ .usage-range{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px} .usage-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:6px} .ucard{display:flex;flex-direction:column;gap:2px;padding:14px;border:1px solid var(--border); border-radius:12px;background:var(--surface)} .ucard--cost{background:var(--surface-2)} .ucard__n{font-size:1.35rem;font-weight:800;line-height:1.1} .ucard__l{font-size:.78rem;color:var(--muted)} .usage-note{font-size:.8rem;margin:0 0 14px} /* Merge dialog */ .prodmerge{width:min(520px,94vw)} .mrg__keephint{margin:0 0 12px;color:var(--muted);font-size:.88rem} .mrg__cols{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px} .mrg__col{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px; padding:12px 8px;border:1.5px solid var(--border);border-radius:12px;cursor:pointer} .mrg__col.is-keep{border-color:var(--color-accent);background:var(--surface-2)} .mrg__col input{margin:0 0 2px} .mrg__thumb{width:54px;height:54px;border-radius:10px;overflow:hidden;background:var(--surface-2); border:1px solid var(--border);display:grid;place-items:center} .mrg__thumb img{width:100%;height:100%;object-fit:cover} .mrg__thumb--ph{opacity:.5;font-size:1.3rem} .mrg__name{font-weight:700;word-break:break-word} .mrg__meta{font-size:.78rem} .mrg__photos{display:flex;flex-wrap:wrap;gap:8px} .mrg__photo{display:grid;place-items:center;width:56px;height:56px;border:2px solid var(--border); border-radius:10px;overflow:hidden;cursor:pointer;background:var(--surface-2)} .mrg__photo.is-on{border-color:var(--color-accent)} .mrg__photo input{position:absolute;opacity:0;width:0;height:0} .mrg__photo img{width:100%;height:100%;object-fit:cover} .mrg__photo-none{font-size:.74rem;color:var(--muted);text-align:center;padding:2px} /* Upgrade dialog: compact plan comparison */ .produpgrade{width:min(560px,94vw)} .planmini{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:6px 0 12px} .planmini__col{border:1.5px solid var(--border);border-radius:10px;padding:10px 8px} .planmini__col.is-current{border-color:var(--color-accent);background:var(--surface-2)} .planmini__name{font-weight:800;display:flex;flex-direction:column;gap:2px;margin-bottom:6px} .planmini__badge{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em; color:var(--color-accent)} .planmini__caps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;font-size:.76rem} .planmini__caps .is-off{color:var(--muted)} /* ---- Administratie (bookkeeping) ---------------------------------------- */ .ledgers{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-bottom:18px} .ledger{display:flex;flex-direction:column;gap:4px;padding:14px;border:1px solid var(--border); border-radius:12px;background:var(--surface);text-decoration:none;color:inherit} .ledger:hover{border-color:var(--color-primary);background:var(--surface-2)} .ledger__top{display:flex;align-items:center;justify-content:space-between;gap:8px} .ledger__name{font-size:1.05rem} .ledger__iban{font-size:.82rem;color:var(--muted);letter-spacing:.02em} .ledger__meta{font-size:.82rem} .ledger__todo{color:var(--color-accent);font-weight:700} .rolebadge{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em; border-radius:999px;padding:2px 8px;border:1px solid var(--border);color:var(--muted);white-space:nowrap} .rolebadge--owner{border-color:transparent;background:var(--color-primary);color:#fff} .rolebadge--editor{border-color:var(--color-accent);color:var(--color-accent)} .admnav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px} .admnav__link{padding:7px 14px;border-radius:999px;font-size:.9rem;font-weight:620; border:1px solid var(--border);background:var(--surface);color:inherit;text-decoration:none} .admnav__link:hover{border-color:var(--color-primary)} .admfilter{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px;margin-bottom:12px} .admtabs{display:flex;gap:6px} .admtab{padding:7px 14px;border-radius:999px;font-size:.9rem;font-weight:620;color:var(--muted); border:1px solid var(--border);background:var(--surface);text-decoration:none} .admtab.is-active{background:var(--color-primary);border-color:transparent;color:#fff} .field--inline{flex-direction:row;align-items:center;gap:8px} .field--inline .field__label{margin:0} .card__hint--warn{color:#b45309} .txhead{display:grid;grid-template-columns:92px minmax(0,1fr) auto minmax(150px,210px) auto;gap:12px; align-items:center;padding:4px 0 8px;border-bottom:2px solid var(--border); font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em} .txhead__col{color:var(--muted);text-decoration:none;white-space:nowrap} .txhead__col:hover{color:var(--text)} .txhead__col.is-sorted{color:var(--color-primary)} .txhead__col--amt{text-align:right} @media (max-width:720px){.txhead{display:none}} .txtable{display:flex;flex-direction:column} .txrow{display:grid;grid-template-columns:92px minmax(0,1fr) auto minmax(150px,210px) auto;gap:12px; align-items:center;padding:9px 0;border-bottom:1px solid var(--border)} .txrow:last-child{border-bottom:0} .txrow__date{font-size:.82rem;color:var(--muted);white-space:nowrap} .txrow__main{min-width:0;display:flex;flex-direction:column} .txrow__payee{font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .txrow__desc{font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .txrow__amount{font-weight:700;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap} .txrow__amount.is-neg{color:#dc2626} .txrow__amount.is-pos{color:#16a34a} .txrow__cat{display:flex;align-items:center;gap:6px} .txrow__select{width:100%} .txrow__select.is-empty{border-color:var(--color-accent)} .txrow__catinput{width:100%;min-width:120px} .txrow__catinput.is-empty{border-color:var(--color-accent)} .txrow__catinput::placeholder{color:var(--muted)} .txrow__splitbtn{flex:none;font-size:.95rem} .txrow__split{display:inline-flex;align-items:center;gap:6px;width:100%;padding:7px 10px;border-radius:8px; border:1px dashed var(--color-accent);background:var(--surface);color:var(--text);cursor:pointer;font:inherit;font-size:.85rem} .txrow__split:hover{background:var(--surface-2)} .admsplit__rows{display:flex;flex-direction:column;gap:8px;margin:8px 0} .admsplit__row{display:flex;gap:8px;align-items:center} .admsplit__amt{width:110px;flex:none;text-align:right} .admsplit__cat{flex:1 1 auto;min-width:0} .admsplit__summary{margin:6px 0 12px;font-weight:700} .admsplit__summary.is-bad{color:#dc2626} .txrow__catlabel{font-size:.85rem;color:var(--muted)} .txrow__auto{font-size:.62rem;font-weight:700;text-transform:uppercase;color:var(--color-accent)} .txrow__inv{display:flex;align-items:center;gap:4px;justify-content:flex-end} .txrow__del{color:#dc2626} .iconbtn{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;border:1px solid var(--border); background:var(--surface);color:inherit;text-decoration:none;cursor:pointer;font-size:1rem;line-height:1} .iconbtn:hover{border-color:var(--color-primary)} .iconbtn--del{color:#dc2626} .invadd{position:relative} .invadd>summary{list-style:none} .invadd>summary::-webkit-details-marker{display:none} .invadd__form{position:absolute;right:0;z-index:5;margin-top:6px;width:240px;display:flex;flex-direction:column;gap:6px; padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--surface);box-shadow:0 8px 24px rgba(0,0,0,.18)} .sharemember{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap} /* Categories single-table editor */ .cattable{display:flex;flex-direction:column} .catedit{display:grid;grid-template-columns:1fr 140px 1fr 40px;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--border)} .catedit--head{font-size:.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;border-bottom:2px solid var(--border)} .catedit--head span{padding:0 2px} .catedit__del{display:inline-grid;place-items:center;cursor:pointer;position:relative;margin:0} .catedit__del input{position:absolute;opacity:0;width:0;height:0} .catedit__del span{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;border:1px solid var(--border);color:#dc2626;font-size:1.1rem;line-height:1} .catedit__del input:checked+span{background:#dc2626;color:#fff;border-color:#dc2626} .catedit:has(.catedit__del input:checked){opacity:.55} .catedit:has(.catedit__del input:checked) .catedit__name{text-decoration:line-through} .cattable__actions{display:flex;gap:10px;align-items:center;margin-top:14px;flex-wrap:wrap} /* Jaarrekening groups */ .jrgroup{margin-bottom:8px} .jrgroup__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0;font-weight:700; border-bottom:1px solid var(--border);text-decoration:none;color:inherit} .jrgroup__head:hover{color:var(--color-primary)} .jrgroup .jrline{padding-left:14px} @media (max-width:720px){ .catedit--head{display:none} .catedit{grid-template-columns:1fr 40px;grid-template-areas:"name del" "kind kind" "group group";row-gap:6px; padding:10px 0} .catedit__name{grid-area:name} .catedit__del{grid-area:del} .catedit__kind{grid-area:kind} .catedit__group{grid-area:group} } /* Administratie dashboard */ .dashstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:14px} .dashstat{display:flex;flex-direction:column;gap:4px;padding:16px;border:1px solid var(--border);border-radius:12px; background:var(--surface);text-decoration:none;color:inherit} .dashstat:hover{border-color:var(--color-primary);background:var(--surface-2)} .dashstat__n{font-size:1.9rem;font-weight:800;line-height:1} .dashstat__n--sm{font-size:1.25rem;font-variant-numeric:tabular-nums} .dashstat__n.is-pos{color:#16a34a} .dashstat__n.is-neg{color:#dc2626} .dashstat__l{font-size:.82rem;color:var(--muted)} .dashstat--todo{border-color:var(--color-accent)} .dashstat--todo.is-active{background:color-mix(in srgb,var(--color-accent) 12%, var(--surface))} .dashstat--todo .dashstat__n{color:var(--color-accent)} .dashyear{margin:0 0 14px} .dashgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px} .dashlegend{display:flex;gap:16px;font-size:.8rem;color:var(--muted);margin-bottom:6px} .dashlegend__item{display:inline-flex;align-items:center;gap:6px} .dashdot{width:10px;height:10px;border-radius:3px;display:inline-block} .dashdot--in{background:#16a34a} .dashdot--cost{background:#dc2626} .dashchart{width:100%;height:auto;display:block} .dashbar-in{fill:#16a34a} .dashbar-cost{fill:#dc2626} .dashaxisline{stroke:var(--border);stroke-width:1} .dashaxis{fill:var(--muted);font-size:11px} .dashcats{display:flex;flex-direction:column;gap:4px} .dashcat{display:grid;grid-template-columns:1fr 110px auto;gap:10px;align-items:center;padding:6px 4px; border-radius:8px;text-decoration:none;color:inherit} .dashcat:hover{background:var(--surface-2)} .dashcat__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dashcat__bar{width:110px;height:12px} .dashcat__bar rect{fill:var(--color-primary)} .dashcat__amt{font-variant-numeric:tabular-nums;font-weight:700;text-align:right;white-space:nowrap} @media (max-width:720px){.dashgrid{grid-template-columns:1fr}.dashcat{grid-template-columns:1fr 70px auto}.dashcat__bar{width:70px}} /* Administratie: header action row, import modal, accounts */ .admhead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap} .admhead__text{min-width:0} .admhead__actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .admhead__btn{flex:none;align-self:center} .txmore{margin-top:12px;text-align:center} .txpager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:12px;flex-wrap:wrap} .admsettings__del{margin-top:16px;padding-top:12px;border-top:1px solid var(--border)} .txrow{transition:opacity .25s ease} .txrow.is-removing{opacity:0} .impprog{margin-top:8px} .impprog__label{margin:0 0 6px;font-size:.88rem;color:var(--muted)} .impprog__bar{width:100%;height:14px} .impresult{margin-top:8px} .impresult__warn{margin:8px 0 12px;padding-left:18px;font-size:.82rem;color:var(--muted)} .agenda-dialog.admimport--wide{width:min(860px,96vw)} .admmap__title{margin:0 0 4px} .admmap__row{display:flex;align-items:center;gap:10px;margin:6px 0} .admmap__row .field__label{min-width:170px;margin:0} .admmap__preview{width:100%;border-collapse:collapse;font-size:.72rem;margin:12px 0;display:block;overflow:auto;max-height:200px} .admmap__preview th,.admmap__preview td{border:1px solid var(--border);padding:3px 6px;white-space:nowrap;text-align:left} .admmap__preview th{background:var(--surface-2);position:sticky;top:0} .acctlist{list-style:none;margin:6px 0;padding:0;display:flex;flex-direction:column;gap:4px} .acctrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--border)} .acctrow:last-child{border-bottom:0} .acctrow__iban{font-variant-numeric:tabular-nums} .acctadd{margin-top:8px;align-items:flex-end;gap:8px;flex-wrap:wrap} @media (max-width:720px){ .admmap__row{flex-direction:column;align-items:stretch;gap:4px} .admmap__row .field__label{min-width:0} } .jrbar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px} .jrgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px} .jrcard{margin-bottom:0} .jrline{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:7px 0; border-bottom:1px solid var(--border);text-decoration:none;color:inherit} .jrline:hover{background:var(--surface-2)} .jrline__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .jrline__n{font-size:.78rem;white-space:nowrap} .jrline__amt{font-weight:700;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap} .jrtotal{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px; padding-top:10px;border-top:2px solid var(--border);font-weight:800} .jrresult{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:1.1rem;font-weight:800} .jrresult.is-pos .jrresult__amt{color:#16a34a} .jrresult.is-neg .jrresult__amt{color:#dc2626} .jrresult__note{margin:6px 2px 0;font-size:.8rem} /* Keyword confirm modal */ .admkw__source{margin:0 0 12px;padding:8px 10px;border-radius:8px;background:var(--surface-2); border:1px solid var(--border);font-size:.82rem;word-break:break-word} .admkw__source-label{display:block;font-weight:700;color:var(--muted);margin-bottom:2px;font-size:.72rem;text-transform:uppercase;letter-spacing:.03em} .admkw__actions{align-items:center} /* Jaarrekening month matrix */ .jrmatrix-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} .jrmatrix{border-collapse:collapse;font-size:.82rem;width:100%;min-width:1000px} .jrmatrix th,.jrmatrix td{padding:6px 12px;white-space:nowrap;border-bottom:1px solid var(--border)} .jrmatrix thead th{position:sticky;top:0;z-index:2;background:var(--surface);color:var(--muted);font-weight:700;text-align:right} .jrm-num{text-align:right;font-variant-numeric:tabular-nums} .jrm-name{text-align:left;position:sticky;left:0;z-index:1;background:var(--surface);min-width:170px} .jrmatrix thead th.jrm-name{z-index:3} .jrm-group .jrm-name{font-weight:700} .jrm-cat .jrm-name{padding-left:26px} .jrm-cat .jrm-name a{color:var(--muted);text-decoration:none} .jrm-cat .jrm-name a:hover{color:var(--color-primary)} .jrm-num a{color:inherit;text-decoration:none} .jrm-num a:hover{color:var(--color-primary);text-decoration:underline} .txchip{display:inline-flex;align-items:center;gap:10px;margin:6px 0 12px;padding:6px 12px;border-radius:999px; background:var(--surface-2);border:1px solid var(--border);font-size:.85rem} .txchip__label{font-weight:700} .txchip__clear{color:var(--muted);text-decoration:none;white-space:nowrap} .txchip__clear:hover{color:var(--color-primary)} .txrow__src{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:6px;font-size:.66rem;font-weight:700; letter-spacing:.02em;vertical-align:middle;background:var(--surface-2);color:var(--muted);border:1px solid var(--border)} .txrow__src--paypal_fee{background:#e8f0fe;color:#1a56b8;border-color:#c7dbff} .txrow__src--camt{background:#e9f7ee;color:#1c7a3e;border-color:#c4ebd1} .txrow__src--pdf{background:#fdeee8;color:#b4480f;border-color:#f6cdb6} .txrow__report{font:inherit;font-size:.8rem;color:var(--text);background:transparent;border:1px solid transparent; border-radius:6px;padding:1px 3px;max-width:8.5rem;cursor:pointer} .txrow__report:hover{border-color:var(--border)} .txrow__report:focus{border-color:var(--color-primary);outline:none;background:var(--surface)} .txrow__report.is-custom{color:var(--color-primary);font-weight:700} .txrow__booked{display:block;font-size:.66rem;line-height:1.2} .impbatches{margin-top:18px;border-top:1px solid var(--border);padding-top:14px} .impbatches__title{margin:0 0 4px;font-size:.95rem} .impbatches__list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:4px} .impbatch{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 8px;border:1px solid var(--border);border-radius:8px} .impbatch__meta{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;min-width:0} .impbatch__date{font-weight:700;font-size:.8rem} .impbatch__name{font-size:.8rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;max-width:22rem;white-space:nowrap} .impbatch__count{font-size:.72rem} .setlist{list-style:none;margin:8px 0 12px;padding:0;display:flex;flex-direction:column;gap:8px} .setrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px;border:1px solid var(--border);border-radius:8px} .setrow__form{display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex:1 1 auto;margin:0} .setrow__iban{font-weight:700;font-size:.82rem;min-width:13rem} .setrow__name{flex:1 1 9rem} .setrow__code{width:6rem} .setrow__color{width:2.4rem;height:2rem;padding:0;border:1px solid var(--border);border-radius:6px;background:none;cursor:pointer} .setrow__cols{flex:1 1 100%;font-size:.72rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .setrow__del{margin:0} .setremap{flex:1 1 100%;margin-top:4px} .setremap__summary{cursor:pointer;font-size:.8rem;color:var(--color-primary)} .setremap__form{margin-top:8px} .setremap__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin:8px 0} .admfilter__search .input{min-width:12rem} a.txrow__auto{text-decoration:none;cursor:pointer} .rultable{width:100%;border-collapse:collapse;font-size:.85rem} .rultable th,.rultable td{padding:6px 8px;border-bottom:1px solid var(--border);text-align:left;vertical-align:middle} .rultable__num{text-align:right;white-space:nowrap} .rultable__del{text-align:center} .rultable__match{max-width:24rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,monospace;font-size:.78rem;color:var(--muted)} .rultable tr:target td{background:color-mix(in srgb,var(--color-primary) 14%,transparent);box-shadow:inset 3px 0 0 var(--color-primary)} .rulchip{display:inline-block;padding:1px 7px;border-radius:6px;background:var(--surface-2);border:1px solid var(--border);font-size:.72rem;font-weight:700} .rulchip--src{background:#fdeee8;color:#b4480f;border-color:#f6cdb6;margin-left:6px} .rulsearch{margin:8px 0 12px} .admrun__bulk{margin:6px 0;font-size:.82rem} .admrun__list{max-height:300px;overflow:auto;display:flex;flex-direction:column;gap:2px;border:1px solid var(--border);border-radius:8px;padding:6px} .admrun__row{display:flex;align-items:center;gap:8px;padding:3px 4px;border-bottom:1px solid var(--border);font-size:.82rem;cursor:pointer} .admrun__meta{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;min-width:0;flex:1} .admrun__date{color:var(--muted);font-size:.74rem;min-width:5.5rem} .admrun__payee{flex:1 1 8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .admrun__amt{white-space:nowrap;font-variant-numeric:tabular-nums} .admrun__amt.is-neg{color:#dc2626}.admrun__amt.is-pos{color:#16a34a} .admrun__conflict{font-size:.7rem;color:#b45309;background:#fef3c7;border-radius:5px;padding:0 5px;white-space:nowrap} .rultable__edit{text-align:right;white-space:nowrap} .rultable__match{max-width:28rem;white-space:normal;word-break:break-word} .rulsrc{font-size:.72rem} .rulsrc--manual{color:var(--color-primary);font-weight:700} .loglist{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column} .logrow{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;padding:7px 4px;border-bottom:1px solid var(--border)} .logrow__when{font-size:.74rem;color:var(--muted);min-width:9rem} .logrow__act{font-size:.72rem;font-weight:700;padding:1px 7px;border-radius:6px;background:var(--surface-2);border:1px solid var(--border)} .logrow__act--import{background:#eef2ff;border-color:#c7d2fe;color:#3730a3} .logrow__act--reset{background:#fef2f2;border-color:#fecaca;color:#991b1b} .logrow__detail{flex:1 1 14rem} .logrow__user{font-size:.74rem} .admkw__matches{margin:10px 0;border:1px solid var(--border);border-radius:8px;padding:8px 10px;background:var(--surface-2)} .admkw__matches-label{margin:0 0 6px;font-size:.82rem;font-weight:700} .admkw__matchlist{list-style:none;margin:0;padding:0;max-height:190px;overflow:auto;display:flex;flex-direction:column;gap:2px} .admkw__match{display:flex;justify-content:space-between;gap:10px;font-size:.82rem;padding:2px 0;border-bottom:1px solid var(--border)} .admkw__match-payee{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .admkw__match-amt{white-space:nowrap;font-variant-numeric:tabular-nums} .admkw__match-amt.is-neg{color:#dc2626} .admkw__match-amt.is-pos{color:#16a34a} .admkw__bank{margin:6px 0 10px} .admkw__bank-label{display:block;font-size:.74rem;color:var(--muted);margin-bottom:2px} .admkw__bank-text{margin:0;padding:6px 8px;background:var(--surface-2);border:1px solid var(--border);border-radius:8px; font-size:.78rem;white-space:pre-wrap;word-break:break-word;max-height:120px;overflow:auto;font-family:ui-monospace,monospace} .pwauto{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--muted)} .pwauto__sel{width:auto;padding:3px 6px;font-size:.78rem} @media (max-width:560px){.pwauto__lbl{display:none}} .jrm-year{background:var(--surface-2)} .jrm-total{font-weight:800;border-top:2px solid var(--border)} .jrm-total .jrm-name{background:var(--surface-2)} .jrm-spacer td{height:12px;border:0;background:transparent} .jrm-result .jrm-num{font-size:.9rem} .jrm-result.is-pos .jrm-year{color:#16a34a} .jrm-result.is-neg .jrm-year{color:#dc2626} .reveal__summary{cursor:pointer;font-weight:700} @media (max-width:720px){ .jrgrid{grid-template-columns:1fr} .txrow{grid-template-columns:1fr auto;grid-template-areas:"main amount" "date amount" "cat inv";row-gap:6px} .txrow__main{grid-area:main} .txrow__amount{grid-area:amount;align-self:start} .txrow__date{grid-area:date} .txrow__cat{grid-area:cat} .txrow__inv{grid-area:inv} .invadd__form{right:auto;left:0} } /* Admin statistics dashboard */ .stattiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:8px 0 18px} .stattile{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:2px} .stattile__n{font-size:1.8rem;font-weight:800;line-height:1;letter-spacing:-.02em} .stattile__l{font-size:.78rem;color:var(--muted)} .statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px} .statrows{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:8px} .statrow{display:grid;grid-template-columns:11rem 1fr auto;align-items:center;gap:10px} .statrow__label{font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .statrow__val{font-size:.82rem;font-weight:700;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums} .statbar{width:100%;height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden;display:block} .statbar rect{fill:var(--color-primary)} .statbar--sec rect{fill:#16a34a} .statbar--int rect{fill:#0891b2} .statbar--page rect{fill:#d97706} @media (max-width:560px){.statrow{grid-template-columns:8rem 1fr auto}} /* ---- Floating feedback widget ---- */ .fbwidget{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:1200} .fbwidget__fab{width:50px;height:50px;border-radius:50%;border:0;cursor:pointer;background:var(--color-primary);color:#fff; box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;transition:transform .12s ease,background .12s ease} .fbwidget__fab:hover{background:color-mix(in srgb,var(--color-primary) 90%,#000);transform:translateY(-1px)} .fbwidget__fab svg{width:24px;height:24px} .fbwidget.is-open .fbwidget__fab{transform:scale(.92)} .fbwidget__pop{position:absolute;right:0;bottom:60px;width:min(330px,calc(100vw - 32px));background:var(--surface);color:var(--text); border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px;display:flex;flex-direction:column;gap:10px;animation:fbpop .16s ease} @keyframes fbpop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .fbwidget__head{display:flex;align-items:center;justify-content:space-between;gap:8px} .fbwidget__title{font-weight:700;font-size:1rem} .fbwidget__x{border:0;background:transparent;font-size:1.5rem;line-height:1;cursor:pointer;color:var(--muted);padding:0 4px} .fbwidget__x:hover{color:var(--text)} .fbwidget__lead{margin:0;font-size:.85rem} .fbwidget__form{display:flex;flex-direction:column;gap:10px} .fbwidget__msg{resize:vertical;min-height:84px} .fbwidget__check{display:flex;align-items:center;gap:8px;font-size:.9rem;cursor:pointer} .fbwidget__check input{width:16px;height:16px} .fbwidget__shot{display:flex;flex-direction:column;gap:6px} .fbwidget__hint{margin:0;font-size:.78rem} @media (max-width:768px){ .fbwidget{bottom:calc(env(safe-area-inset-bottom) + 76px)} .fbwidget__pop{position:fixed;right:12px;left:12px;bottom:calc(env(safe-area-inset-bottom) + 138px);width:auto} } @media print{.fbwidget{display:none}} /* ---- Admin feedback list ---- */ .fbgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin:10px 0 24px} .fbgrid__solvedhead{margin-top:18px} .fbcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px;display:flex;flex-direction:column;gap:8px} .fbcard__top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start} .fbcard__email{font-size:.82rem} .fbcard__date{font-size:.82rem;white-space:nowrap} .fbcard__page{margin:0;font-size:.82rem;word-break:break-all} .fbcard__msg{margin:0;white-space:pre-wrap;line-height:1.5} .fbcard__shot{display:block;max-width:200px} .fbcard__shot img{max-width:100%;border:1px solid var(--border);border-radius:var(--radius-sm)} .fbcard__resolved{margin:0;font-size:.82rem} .fbcard__note{margin:0;font-size:.9rem} .fbcard__solve{display:flex;flex-direction:column;gap:8px;margin-top:2px} .fbcard__actions{display:flex;gap:8px;flex-wrap:wrap} /* ---- Searchable combobox (agenda hockey pickers) ---- */ .combo{position:relative} .combo__list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:50;margin:0;padding:4px;list-style:none; max-height:260px;overflow:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow)} .combo__item{padding:8px 10px;border-radius:8px;cursor:pointer;font-size:.92rem} .combo__item:hover,.combo__item.is-active{background:color-mix(in srgb,var(--color-primary) 12%,var(--surface))} .combo__sub{color:var(--muted);font-size:.85em} .combo__empty{padding:8px 10px;color:var(--muted);font-size:.9rem} /* ---- Agenda calendars: card-per-link + add-type picker ---- */ .cardhead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px} .cardhead .card__title{margin:0} .agendacards{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));margin:10px 0} .agendacard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px;display:flex;flex-direction:column;gap:8px} .agendacard__head{display:flex;align-items:center;justify-content:space-between;gap:8px} .agendacard__title{font-weight:680} .agendacard__type{font-size:.72rem;font-weight:640;letter-spacing:.04em;text-transform:uppercase;color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 12%,var(--surface));border-radius:999px;padding:2px 8px;white-space:nowrap} .agendacard__meta{margin:0;font-size:.85rem;line-height:1.45} .agendacard__actions{display:flex;gap:6px;flex-wrap:wrap} .agendacard .icalfeed__url{word-break:break-all;font-size:.8rem} .agendacards__syncall{margin-top:4px} .addtype{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 14px} .addtype__btn{padding:8px 14px;border:1px solid var(--border);border-radius:999px;background:var(--surface-2);font:inherit;font-weight:600;font-size:.9rem;cursor:pointer;color:var(--text)} .addtype__btn:hover{border-color:var(--color-primary)} .addtype__btn.is-active{background:var(--color-primary);border-color:transparent;color:#fff} .addtype__panel{margin-top:4px} /* clear "linked to " line on each card */ .agendacard__member{display:flex;align-items:center;gap:7px;margin:0;font-size:.9rem} .agendacard__personicon{width:18px;height:18px;flex:none;color:var(--color-primary)} /* colour stripe down the left edge (per feed colour), like the big cards' top line */ .agendacard--striped{border-left:4px solid var(--cardc,var(--color-primary))} /* "refreshes every …" badge */ .agendacard__refresh{display:inline-flex;align-items:center;gap:5px;font-size:.8rem;color:var(--muted)} .agendacard__refreshicon{width:14px;height:14px;flex:none} .agendacard__meta{min-height:1em} /* one Bewerken button per card -> settings live in a modal */ .editmodal{display:flex;flex-direction:column;gap:14px;margin-top:6px} .editmodal__row{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .editmodal__section{border-top:1px solid var(--border);padding-top:12px} .editmodal__h{margin:0 0 4px;font-size:.95rem} .editmodal__danger{border-top:1px solid var(--border);padding-top:12px} /* a little breathing room between the two main cards */ .agenda-section + .agenda-section{margin-top:18px}