/* The Broons – family hub. Mobile-first design system (MBC-dark inspired). */
:root{
  --bg:#070b18; --bg-2:#0c1226; --surface:#0f1730; --surface-2:#151f3f;
  --ink:#e6ecf8; --heading:#f6f8ff; --muted:#9aa8c6; --dim:#7584a6;
  --line:rgba(130,170,255,.14); --line-strong:rgba(31,209,255,.4);
  --cyan:#1fd1ff; --violet:#8b7bff; --rose:#ff7a9c; --amber:#ffc857; --green:#3ee39a; --danger:#ff5d7a;
  --accent:var(--cyan); --accent-ink:#04121c;
  --grad:linear-gradient(135deg,#1fd1ff 0%,#7c6cff 55%,#ff7a9c 100%);
  --r:18px; --r-sm:12px; --pill:999px;
  --shadow:0 1px 0 rgba(255,255,255,.04) inset,0 14px 40px rgba(0,0,0,.35);
  --focus:0 0 0 3px var(--bg),0 0 0 5px var(--cyan);
  --font:"Inter","Segoe UI Variable","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --tabbar-h:64px;
  color-scheme:dark;
}
html.light{
  --bg:#f4f6fb; --bg-2:#ffffff; --surface:#ffffff; --surface-2:#eef2fa;
  --ink:#1a2540; --heading:#0d1730; --muted:#55627d; --dim:#6b7893;
  --line:rgba(16,32,72,.1); --line-strong:rgba(37,99,235,.45);
  --cyan:#0a7fbf; --violet:#5b4bdb; --rose:#d6336c; --green:#15803d; --amber:#b45309; --danger:#c81e45;
  --accent:#1d5fd6; --accent-ink:#fff;
  --shadow:0 1px 2px rgba(16,32,72,.05),0 10px 30px rgba(16,32,72,.07);
  --focus:0 0 0 3px var(--bg),0 0 0 5px var(--accent);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{margin:0;min-height:100vh;min-height:100dvh;font:16px/1.5 var(--font);color:var(--ink);background:var(--bg);
  background-image:radial-gradient(1100px 500px at -10% -20%,rgba(31,209,255,.10),transparent 60%),radial-gradient(900px 480px at 110% -10%,rgba(139,123,255,.12),transparent 55%);
  background-attachment:fixed;-webkit-font-smoothing:antialiased}
html.light body{background-image:radial-gradient(1000px 420px at -10% -20%,rgba(29,95,214,.08),transparent 60%),radial-gradient(800px 420px at 110% -10%,rgba(214,51,108,.06),transparent 55%)}
img,svg{max-width:100%}
a{color:var(--cyan);text-decoration:none;text-underline-offset:3px}
a:hover{text-decoration:underline}
h1,h2,h3{color:var(--heading);letter-spacing:-.02em;line-height:1.2}
h1{font-size:clamp(1.55rem,4.5vw,2.25rem);margin:.2em 0 .5em;font-weight:780}
h2{font-size:1.05rem;margin:0 0 12px;font-weight:720}
h3{font-size:.78rem;margin:18px 0 6px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);font-weight:700}
p{margin:0 0 12px}
.muted{color:var(--muted)}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:10px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--accent);color:var(--accent-ink);padding:10px 14px;border-radius:10px;font-weight:700}
.skip:focus{top:12px}
.ico{flex:none;display:block}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ---------- Header ---------- */
.top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:saturate(1.4) blur(18px);-webkit-backdrop-filter:saturate(1.4) blur(18px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top)}
.top-inner{max-width:1180px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:10px;color:var(--heading);text-decoration:none;font-weight:780;letter-spacing:-.02em}
.brand:hover{text-decoration:none}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-text small{font-size:.7rem;font-weight:600;color:var(--dim);letter-spacing:.04em;text-transform:uppercase}
.mark{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--grad);color:#fff;font-weight:850;box-shadow:0 6px 18px rgba(124,108,255,.35)}
.mark-lg{width:64px;height:64px;border-radius:20px;font-size:1.8rem}
.topnav{display:none}
.who{margin-left:auto;display:flex;align-items:center;gap:6px}
.who form{margin:0}
.avatar{display:none;width:34px;height:34px;border-radius:50%;place-items:center;font-weight:800;font-size:.9rem;color:#fff;background:linear-gradient(135deg,var(--violet),var(--rose))}
.icon-btn{width:42px;height:42px;padding:0;display:grid;place-items:center;border-radius:12px;background:transparent;color:var(--muted);border:1px solid var(--line);cursor:pointer;transition:.15s}
.icon-btn:hover,.icon-btn[aria-current]{color:var(--heading);border-color:var(--line-strong);background:color-mix(in srgb,var(--cyan) 8%,transparent);text-decoration:none}
.icon-btn .ico{width:20px;height:20px}

/* ---------- Mobile tab bar ---------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:2px;padding:6px 6px calc(6px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--bg-2) 88%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabbar::-webkit-scrollbar{display:none}
.tabbar a{flex:1 0 52px;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--dim);text-decoration:none;font-size:.68rem;font-weight:700;border-radius:14px;position:relative}
.tabbar a .ico{width:22px;height:22px}
.tabbar a.active{color:var(--heading)}
.tabbar a.active::before{content:"";position:absolute;top:3px;width:28px;height:3px;border-radius:3px;background:var(--grad)}
.tabbar a.active .ico{color:var(--cyan)}

/* ---------- Layout ---------- */
main{display:block;outline:none}
.page{max-width:1180px;margin:0 auto;padding:18px 14px calc(var(--tabbar-h) + 36px + env(safe-area-inset-bottom))}
.foot{display:none;text-align:center;color:var(--dim);font-size:.8rem;padding:24px 16px 40px}
.grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:14px}
.split{display:block}
.hero{margin:6px 0 16px}
.hero h1{margin:0 0 2px}
.hero .muted{margin:0;font-weight:600}
.eyebrow{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);font-weight:750;margin:0 0 4px}

/* ---------- Cards ---------- */
.card,.notice,.event{background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 96%,transparent),color-mix(in srgb,var(--surface) 88%,transparent));border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--shadow);min-width:0}
.card>h2:first-child,.card-head{display:flex;align-items:center;gap:10px}
.card-head h2{margin:0}
.card-head{margin-bottom:12px}
.card-head .btn,.card-head a.more{margin-left:auto}
.card .ci{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--c,var(--cyan)) 16%,transparent);color:var(--c,var(--cyan))}
.card .ci .ico{width:18px;height:18px}
.card.wide{grid-column:1/-1}
.row,.item{padding:11px 0;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.row:last-child,.item:last-child{border-bottom:0}
.row>strong{min-width:7.5em;font-weight:650;color:var(--heading)}
.row>a{font-weight:650}
.row>.muted{margin-left:auto;font-size:.88rem}
.rows-2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.rows-2 .row{flex-direction:column;align-items:flex-start;gap:0}
.rows-2 .row>strong{min-width:0;font-size:.8rem;color:var(--muted);font-weight:600}
.rows-2 .row>div{font-weight:700;color:var(--heading);font-variant-numeric:tabular-nums}
.pot-total{font-size:clamp(1.7rem,6vw,2.3rem);font-weight:800;letter-spacing:-.03em;margin:0 0 6px;color:var(--heading);font-variant-numeric:tabular-nums}
.stat-big{font-size:2.6rem}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none;vertical-align:middle}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 8px}
.card>p:last-child{margin-bottom:0}
.card>p:last-child .btn{margin-top:6px}

/* ---------- Strips ---------- */
.next-strip{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin:0 0 12px;padding:14px 16px;border-radius:16px;background:color-mix(in srgb,var(--surface) 92%,transparent);border:1px solid var(--line);color:var(--ink);text-decoration:none;box-shadow:var(--shadow);transition:.15s}
a.next-strip[href]:hover{border-color:var(--line-strong);text-decoration:none}
.next-strip .dot{width:10px;height:10px;box-shadow:0 0 0 4px color-mix(in srgb,currentColor 0%,transparent)}
.next-strip strong{color:var(--heading)}
.next-strip>.muted{font-size:.9rem}
.strips{display:grid;gap:0}
.who-home{font-size:1.5rem;letter-spacing:.1em}

/* ---------- Buttons & forms ---------- */
button,.btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 16px;border-radius:var(--pill);border:1px solid var(--line);background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--heading);font:inherit;font-size:.92rem;font-weight:700;cursor:pointer;text-decoration:none;transition:.15s;line-height:1.1}
button:hover,.btn:hover{border-color:var(--line-strong);background:color-mix(in srgb,var(--cyan) 10%,transparent);text-decoration:none}
button.primary,.btn.primary{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 8px 22px rgba(124,108,255,.28)}
button.primary:hover{filter:brightness(1.08)}
button.ghost,a.ghost,.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:var(--pill);padding:10px 14px;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
button.danger,.danger{background:transparent;color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,transparent)}
button.danger:hover{background:color-mix(in srgb,var(--danger) 12%,transparent);border-color:var(--danger)}
.block{width:100%}
input[type=text],input[type=password],input[type=email],input[type=url],textarea,select{width:100%;padding:13px 14px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--bg-2);color:var(--ink);font:inherit;font-size:16px;transition:.15s}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px color-mix(in srgb,var(--cyan) 25%,transparent)}
input::placeholder,textarea::placeholder{color:var(--dim)}
input[type=color]{width:56px;height:44px;padding:4px;border-radius:12px;border:1px solid var(--line);background:var(--bg-2)}
input[type=checkbox]{accent-color:var(--cyan);width:18px;height:18px}
textarea{min-height:110px;resize:vertical}
.field{display:block}
.field>span{display:block;font-size:.82rem;font-weight:700;color:var(--muted);margin:0 0 6px}
.stack{display:grid;gap:14px}
form.inline{display:inline}
form{margin:0}
.error{background:color-mix(in srgb,var(--danger) 14%,transparent);border:1px solid color-mix(in srgb,var(--danger) 40%,transparent);color:var(--danger);padding:12px 14px;border-radius:12px;font-weight:600}
.notice-ok{border-left:4px solid var(--green)}

/* ---------- Login ---------- */
.auth{display:grid}
.login-wrap{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px 18px calc(24px + env(safe-area-inset-bottom))}
.login-card{width:min(400px,100%);background:color-mix(in srgb,var(--surface) 92%,transparent);border:1px solid var(--line);border-radius:24px;padding:28px 22px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.login-brand{text-align:center;margin-bottom:20px}
.login-brand .mark{margin:0 auto 14px}
.login-brand h1{margin:0;font-size:1.7rem}
.login-brand p{margin:2px 0 0}
.fine{font-size:.82rem;text-align:center;margin:16px 0 0}

/* ---------- Calendar ---------- */
.cal-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cal-nav h1{flex:1;margin:0;min-width:8em;text-align:center;font-size:clamp(1.3rem,4vw,1.9rem)}
.cal-nav .ghost{width:44px;justify-content:center;padding:0;font-size:1.1rem}
.cal-nav .btn{order:5;width:100%}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.filters label{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:var(--pill);padding:8px 12px;font-size:.85rem;font-weight:650;cursor:pointer;background:color-mix(in srgb,var(--surface) 80%,transparent)}
.filters label::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--dot)}
.filters input{width:16px;height:16px;margin:0}
.month{display:grid;grid-template-columns:1fr;gap:6px}
.dow{display:none;font-size:.72rem;color:var(--dim);padding:4px 6px;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.daycell{min-height:0;background:color-mix(in srgb,var(--surface) 90%,transparent);border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.daycell:not(:has(.chip)){display:none}
.daycell.today{display:block;border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan) inset}
.daycell.empty{display:none}
.daycell>strong{font-size:.85rem;color:var(--muted)}
.daycell.today>strong{color:var(--cyan)}
.chip{font-size:.82rem;margin-top:5px;padding:5px 8px;border-left:3px solid var(--cyan);border-radius:7px;background:color-mix(in srgb,var(--ink) 6%,transparent);overflow:hidden;text-overflow:ellipsis}
.chip[hidden]{display:none}

/* ---------- Noticeboard ---------- */
.notice{margin:12px 0;position:relative}
.notice.pinned{border-color:color-mix(in srgb,var(--amber) 45%,transparent);box-shadow:inset 4px 0 0 var(--amber),var(--shadow)}
.notice>strong{color:var(--heading)}
.notice p{margin:10px 0}
.notice form{margin-top:8px}
.notice textarea{min-height:80px}
.notice details{margin-top:10px}

/* ---------- Savings / charts ---------- */
.mia-pots .pot-total{margin:0}
.bar{flex:1 1 100%;height:8px;border-radius:99px;background:color-mix(in srgb,var(--ink) 10%,transparent);overflow:hidden;margin:2px 0}
.bar span{display:block;height:100%;border-radius:99px}
.pie-row{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.pie{width:140px;height:140px;flex:none;transform:rotate(0)}
.legend div{display:flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums;margin:3px 0}

/* ---------- Maps ---------- */
#car-map{height:280px;border-radius:14px;margin-top:12px;border:1px solid var(--line);overflow:hidden;z-index:0}
.map-lg{height:min(60vh,480px)!important}
.leaflet-container img{max-width:none!important}
.leaflet-container{background:var(--bg-2)}

/* ---------- Future radio dock (inert) ---------- */
.radio-dock{position:fixed;left:12px;right:12px;bottom:calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom));z-index:35}
.radio-dock[hidden]{display:none}

/* legacy helpers kept for compatibility */
.switches{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.switch{width:100%;min-height:92px;border-radius:16px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.switch.on{background:#14532d;color:#ecfdf5}
.hello{display:none}

/* ---------- Tablet ---------- */
@media (min-width:640px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page{padding-inline:22px}
  .login-card{padding:36px 32px}
  .cal-nav .btn{order:0;width:auto}
}
/* ---------- Desktop ---------- */
@media (min-width:960px){
  :root{--tabbar-h:0px}
  .tabbar{display:none}
  .topnav{display:flex;gap:2px;margin-left:10px}
  .topnav a{display:flex;align-items:center;gap:7px;color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:var(--pill);font-size:.88rem;font-weight:650;transition:.15s}
  .topnav a .ico{width:18px;height:18px;opacity:.85}
  .topnav a:hover{color:var(--heading);background:color-mix(in srgb,var(--ink) 6%,transparent);text-decoration:none}
  .topnav a.active{color:var(--heading);background:color-mix(in srgb,var(--cyan) 12%,transparent);box-shadow:inset 0 0 0 1px var(--line-strong)}
  .topnav a.active .ico{color:var(--cyan);opacity:1}
  .avatar{display:grid}
  .page{padding:28px 24px 48px}
  .foot{display:block}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .card.span-2{grid-column:span 2}
  .strips{grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:0 14px}
  .month{grid-template-columns:repeat(7,minmax(0,1fr))}
  .dow{display:block}
  .daycell,.daycell:not(:has(.chip)){display:block;min-height:104px;padding:6px 8px}
  .daycell.empty{display:block;background:transparent;border:0}
  .chip{font-size:.72rem;padding:3px 6px;white-space:nowrap}
  .radio-dock{left:auto;right:24px;width:380px;bottom:24px}
}
@media (min-width:1100px){.topnav a{padding:8px 14px}}

/* Family logo mark */
.mark.mark-img{padding:0;overflow:hidden;background:#f6ead2;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.mark.mark-img img{width:100%;height:100%;object-fit:cover;display:block}