/* Ma Tontine — "Wax & Indigo" design layer (21 Oct 2026)
   Inspired by West African wax-print and indigo cloth and Senegalese bissap.
   Loaded after style.css and readable.css. Bolder type, deeper colour, stronger contrast.
   Palette:
     baobab   #0A5236  primary, headings, active states
     ink      #0F2419  body text
     saffron  #F4B000  highlights, celebration, focus ring
     indigo   #3A2FA3  information, second accent
     bissap   #A8124A  late / warnings / destructive
     paper    #F2F7F0  page background */
:root{
  --forest:#0A5236;--forest-dark:#073D28;--forest-mid:#17784F;
  --ink:#0F2419;--muted:#34493D;--line:#CFDDCB;--cream:#F2F7F0;--soft:#E2F1DA;
  --lime:#F4B000;--saffron:#F4B000;--saffron-deep:#9A6A00;--saffron-soft:#FFF0C2;
  --indigo:#3A2FA3;--indigo-soft:#ECEAFD;--bissap:#A8124A;--bissap-soft:#FCE1EB;
  --red:#A8124A;--orange:#8A5A00;
  --shadow:0 1px 0 #0F241912,0 10px 28px -18px #0A523640;
  background:var(--cream);color:var(--ink)
}

/* ---------- Type: bold throughout ---------- */
body{font-weight:600;color:var(--ink);background:var(--cream)}
p,li,td,label,input,select,textarea{font-weight:600}
strong,b,th{font-weight:800}
h1,h2,h3,h4{color:var(--forest);font-weight:800;letter-spacing:-.4px}
h1{letter-spacing:-.9px}
.muted,.page-heading p,.hint,.sub{color:var(--muted)}
.number,.stat-value,.summary-pot strong{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}

/* ---------- Surfaces ---------- */
.card{border:1.5px solid var(--line);box-shadow:var(--shadow);background:#fff}
.sidebar{background:#fff;border-right:1.5px solid var(--line)}
.topbar{background:#fffffff7;border-bottom:1.5px solid var(--line)}
.page-footer{color:var(--muted)}

/* ---------- Brand ---------- */
.brand{color:var(--forest)}
.brand .brand-ma{color:var(--saffron-deep)}
.brand .brand-dot{color:var(--saffron)}
.brand svg{color:var(--forest)}
.tagline{color:var(--muted);font-weight:700}

/* ---------- Navigation ---------- */
.nav button{color:#24402F;font-weight:700}
.nav button:hover{background:var(--soft)}
.nav button.active{background:var(--forest);color:#fff;font-weight:800;box-shadow:0 6px 16px -8px #0A5236aa}
.nav button.active .icon{color:var(--saffron)}
.nav button .count{background:var(--soft);color:var(--forest)}
.nav button.active .count{background:var(--saffron);color:var(--ink)}
.nav-label{color:var(--muted);font-weight:800}
.mobile-nav{background:#fffffffa;border-top:1.5px solid var(--line)}
.mobile-nav button{color:#2E4A39;font-weight:800}
.mobile-nav button.active{background:var(--forest);color:#fff}
.mobile-nav button.active .icon{color:var(--saffron)}
.tabs{border-bottom:1.5px solid var(--line)}
.tabs button{color:#2E4A39;font-weight:700}
.tabs button.active{background:var(--soft);color:var(--forest);font-weight:800}
.tabs button.active:after{background:var(--saffron);height:4px}

/* ---------- Buttons & links ---------- */
.btn{border-width:2px;font-weight:800;color:var(--forest);border-color:#B5CBB2;background:#fff}
.btn:hover{border-color:var(--forest)}
.btn.primary{background:var(--forest);border-color:var(--forest);color:#fff;box-shadow:0 6px 14px -8px #0A5236cc}
.btn.primary:hover{background:var(--forest-dark);border-color:var(--forest-dark)}
.btn.primary .icon{color:var(--saffron)}
.btn.lime{background:var(--saffron);border-color:var(--saffron);color:var(--ink)}
.btn.lime:hover{background:#FFC21F;border-color:#FFC21F}
.btn.danger{color:var(--bissap);border-color:#E7A9BF}
.btn.danger.solid{background:var(--bissap);border-color:var(--bissap);color:#fff}
.btn.danger.solid:hover{background:#8C0E3D}
.link-btn{color:var(--forest);font-weight:800}
.link-btn .icon{color:var(--saffron-deep)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--saffron);outline-offset:3px}
input,select,textarea{border:1.5px solid #B9CDB6;color:var(--ink)}
input:focus,select:focus,textarea:focus{border-color:var(--forest)}
input[type=checkbox]{accent-color:var(--forest)}
.switch{background:#C9D8C5}.switch.on{background:var(--forest)}

/* ---------- Badges (all at least 4.5:1) ---------- */
.badge{font-weight:800}
.badge.green{color:#07432B;background:#D3EFDC}
.badge.orange{color:#5E3F00;background:var(--saffron-soft)}
.badge.red{color:#7E0D37;background:var(--bissap-soft)}
.badge.gray{color:#2B3F32;background:#E2EAE0}
.badge.demo{color:#5E3F00;background:var(--saffron-soft);border:1.5px solid #E8C35A}

/* ---------- Notices ---------- */
.notice,.modal-body .notice{background:#E3F2DA;border:1.5px solid #B8D9A8;color:#173F25;font-weight:600}
.notice .icon{color:var(--forest)}
.notice.warning{background:var(--saffron-soft);border-color:#EBC75E;color:#4A3200}
.notice.warning .icon{color:var(--saffron-deep)}
.money-note{color:#3B5045;font-weight:600}

/* ---------- Signature: the wax-print welcome banner ---------- */
.hero{
  color:#fff;
  background:
    linear-gradient(100deg,#0A5236 0%,#0A5236 50%,#0A5236e6 64%,#0A52368c 100%),
    radial-gradient(circle at 50% 50%,#F4B000b3 0 4px,transparent 5px) 0 0/48px 48px,
    radial-gradient(circle at 50% 50%,transparent 0 12px,#F4B00047 13px 15px,transparent 16px) 0 0/48px 48px,
    conic-gradient(from 45deg at 50% 50%,#3A2FA373 0 25%,transparent 0 50%,#3A2FA373 0 75%,transparent 0) 24px 24px/48px 48px,
    #0C6040;
  border:0;
  box-shadow:0 18px 40px -22px #0A5236
}
.hero h2{color:#fff}
.hero h2 span{color:var(--saffron)}
.hero p{color:#E9F4EC}
.hero .eyebrow{color:#FFE29A}
.hero .eyebrow:before{background:var(--saffron)}
.hero-rounds span{background:#ffffff33}
.hero-rounds span.done{background:var(--saffron)}

/* ---------- Stat cards & circle cards ---------- */
.stat{border-top:5px solid var(--forest-mid);background:#EEF8EE}
.stat:nth-child(2){border-top-color:var(--indigo);background:#F1F0FD}
.stat:nth-child(3){border-top-color:var(--saffron);background:#FFF7E0}
.stat:nth-child(4){border-top-color:var(--bissap);background:#FDF0F5}
.stat-top{color:#24402F;font-weight:800}
.stat-top .icon{color:var(--forest)}
.stat:nth-child(2) .stat-top .icon{color:var(--indigo)}
.stat:nth-child(3) .stat-top .icon{color:var(--saffron-deep)}
.stat:nth-child(4) .stat-top .icon{color:var(--bissap)}
.stat-value small,.stat-bottom{color:var(--muted)}
.stat-bottom .good,.stat .corner{color:#0B5F37}
.group-card{border-top:5px solid var(--forest-mid)}
.group-card:nth-child(3n+2){border-top-color:var(--saffron)}
.group-card:nth-child(3n+3){border-top-color:var(--indigo)}
.group-card h3{color:var(--ink)}
.group-mark{background:#D3EFDC;color:var(--forest)}
.group-card:nth-child(3n+2) .group-mark{background:var(--saffron-soft);color:var(--saffron-deep)}
.group-card:nth-child(3n+3) .group-mark{background:var(--indigo-soft);color:var(--indigo)}
.group-card:hover{border-color:#9DBF98;box-shadow:0 14px 30px -20px #0A5236}
.mini-progress{background:#DCE8D7;height:6px}
.mini-progress>span{background:linear-gradient(90deg,var(--forest),var(--forest-mid))}
.summary-pot{background:var(--saffron-soft);border:1.5px solid #EBC75E}
.summary-pot p{color:#4A3200}

/* ---------- Lists, timeline, people ---------- */
.timeline-symbol{background:#D3EFDC;color:var(--forest)}
.avatar{font-weight:800}
.tip-card{background:var(--saffron-soft);border:1.5px solid #EBC75E}
.tip-card h3,.tip-card .link-btn{color:#5E3F00}
.tip-card p{color:#4A3200}
.tip-card .eyebrow{color:#6E4C00}
.help-tile{background:var(--saffron-soft);border:1.5px solid #EBC75E}
.table-wrap tr{background:#fff;border:1.5px solid var(--line)}
.table-wrap td::before{color:#34493D}

/* ---------- Calendar ---------- */
.calendar-event{background:#D3EFDC;color:#0A4A30;font-weight:800;border-left:3px solid var(--forest)}
.calendar-event.paid{background:#E6ECE4;color:#3B5045;border-left-color:#8FA88C}
.agenda-date{background:var(--forest);color:#fff}

/* ---------- Toast & dialogs ---------- */
#toast{background:var(--forest);color:#fff;font-weight:700;border-left:5px solid var(--saffron)}
#toast.error{background:var(--bissap);border-left-color:#FFD1E0}
dialog{border:1.5px solid var(--line)}
.modal-header h2{color:var(--forest)}

@media screen and (max-width:700px){
 /* Phone: keep the headline on solid green; the cloth pattern shows only along the bottom edge */
 .hero{background:
    linear-gradient(180deg,#0A5236 0%,#0A5236 72%,#0A5236cc 86%,#0A523680 100%),
    radial-gradient(circle at 50% 50%,#F4B000b3 0 4px,transparent 5px) 0 0/40px 40px,
    radial-gradient(circle at 50% 50%,transparent 0 10px,#F4B00047 11px 13px,transparent 14px) 0 0/40px 40px,
    conic-gradient(from 45deg at 50% 50%,#3A2FA373 0 25%,transparent 0 50%,#3A2FA373 0 75%,transparent 0) 20px 20px/40px 40px,
    #0C6040}
 .hero-art{opacity:.14}
 .page-heading>.btn{font-size:16px}
}
@media print{.hero{background:#fff;color:#000}.hero h2,.hero p{color:#000}}

/* Google sign-in window */
.gsi-slot{min-height:56px;display:flex;justify-content:center;align-items:center;margin:20px 0 6px}