/* Kotisal — "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}

/* ---------- 1.3.1 (29 Oct 2026): public homepage — intro, Sign in, legal links ---------- */
/* Static intro shown before the app loads (and to visitors or checkers without JavaScript) */
.static-intro{max-width:560px;margin:22px auto 0;padding:0 16px;text-align:center;color:var(--ink)}
.static-intro h1{font-size:22px;line-height:1.25;margin:0 0 12px}
.static-intro p{font-size:14px;line-height:1.6;margin:0 0 10px;color:var(--muted)}
.static-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px}
.static-intro a,.legal-links a,.welcome-privacy{color:var(--forest);font-weight:800;text-decoration:underline;text-underline-offset:3px}
.static-wait{font-size:12px!important;margin-top:14px!important}
/* Welcome card on the demo dashboard */
.welcome-card{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 24px;margin-bottom:22px;border-left:6px solid var(--saffron)}
.welcome-card h2{font-size:22px;line-height:1.25;margin:6px 0 8px}
.welcome-card p{font-size:14px;line-height:1.6;margin:0;color:var(--muted);max-width:640px}
.welcome-card .eyebrow{color:var(--indigo)}
.welcome-card .welcome-demo{display:flex;align-items:center;gap:7px;margin-top:10px;font-size:13px;color:var(--saffron-deep)}
.welcome-demo .icon{width:16px;height:16px;flex:none}
.welcome-actions{display:flex;flex-direction:column;align-items:center;gap:12px;flex:none}
.welcome-actions .btn{font-size:15px;padding:13px 26px;min-height:48px}
.welcome-privacy{font-size:13px}
/* Sign in button in the top bar (demo only) */
.utilities .signin-btn{min-height:36px;padding:8px 14px;font-size:13px;gap:6px;margin:0;white-space:nowrap;flex:none}
.utilities .signin-btn .icon{width:15px;height:15px}
/* Legal links in every page footer */
.legal-links{display:flex;flex-wrap:wrap;gap:4px 18px}
.legal-links a{font-size:12px;min-height:32px;display:inline-flex;align-items:center}
@media(max-width:700px){
  .welcome-card{flex-direction:column;align-items:stretch;padding:18px 17px;gap:16px}
  .welcome-card h2{font-size:19px}
  .welcome-card p{font-size:13px}
  .welcome-actions .btn{width:100%}
  .utilities .signin-btn{padding:7px 12px;font-size:13px;min-height:36px}
  /* On phones the welcome card and the drawer already say "demo"; the Sign in button gets the space */
  .utilities .badge.demo{display:none}
  .utilities .signin-btn .icon{display:none}
}

/* ---------- 1.4.0: tontine already running (wizard) ---------- */
.ongoing-box{border:1.5px solid var(--line);border-radius:10px;padding:14px 16px 6px;margin:18px 0 0;background:var(--soft)}
.ongoing-box legend{font-weight:800;color:var(--forest);padding:0 6px;font-size:14px}
.ongoing-box .check-row{margin:6px 0}
.ongoing-fields{display:none;margin-top:10px}
.ongoing-box:has(#ongoingYes:checked) .ongoing-fields{display:block}
.hint.strong-hint{display:block;color:var(--indigo);font-weight:800;margin:6px 0}
/* Owner tools card (1.4.0) */
.owner-card{border-left:6px solid var(--indigo)}
/* Radio buttons: keep them normal-sized (the generic text-input style must not apply) */
input[type=radio]{width:21px;height:21px;min-height:0;padding:0;margin:3px 0 0;border:0;border-radius:50%;flex-shrink:0;accent-color:var(--forest);cursor:pointer;background:none}
.ongoing-box .check-row{align-items:flex-start;justify-content:flex-start}

/* 1.6.0: who is signed in — visible on phones too */
.me-btn{display:inline-flex;border-radius:50%;padding:0}.me-btn:focus-visible{outline:3px solid #a7be68;outline-offset:2px}
.signed-in-as{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:#4e6353;background:#f3f6ea;border-radius:8px;padding:10px 12px;word-break:break-all}.signed-in-as .icon{width:15px;height:15px}
@media(max-width:700px){.utilities>.me-btn{display:inline-flex}.utilities>.me-btn .avatar{width:32px;height:32px}}

/* 1.7.0: member list editor */
.member-count{display:inline-flex;min-width:24px;justify-content:center;margin-left:6px;padding:1px 7px;border-radius:6px;background:#eef2e6;color:#46663a;font-size:12px;font-weight:800}.member-count.over{background:#fbeee0;color:#9a5a20}
.member-rows{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}.member-rows li{display:flex;align-items:center;gap:8px}.member-rows .row-num{width:24px;text-align:right;color:#6d7d68;font-size:13px;font-weight:700;flex-shrink:0}.member-rows input{flex:1;min-width:0}
.row-btn{width:40px;height:40px;flex-shrink:0;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:16px;font-weight:700;color:#46663a;display:inline-flex;align-items:center;justify-content:center}.row-btn:disabled{opacity:.3}.row-btn.remove{color:#a94f43;border-color:#ecd2cb}.row-btn.remove:hover{background:#fbefec}
.member-add{display:flex;gap:8px;margin-top:12px}.member-add input{flex:1;min-width:0}.member-paste{margin-top:14px}.member-paste summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--forest)}.member-paste textarea{margin-top:10px}

/* 1.8.0: mid-cycle member changes */
.member-change-actions{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}.member-change-actions .actions{gap:10px}.effect-list{margin:8px 0 16px;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:1.6}

/* 1.8.1: charter card with no circle yet */
.charter-empty{font-size:13px;font-weight:700;color:#7a5a1e;background:#fcf5e7;border:1px solid #eee3c7;border-radius:8px;padding:10px 12px;margin:0 0 12px}
/* 1.10.0: shared (half) places and circle management */
.row-btn.half{font-weight:800;font-size:15px}
.row-btn.half.on{background:var(--forest,#0A5236);color:#fff;border-color:var(--forest,#0A5236)}
.half-hint{margin:10px 0 4px}
.manage-card .setting-row .btn{flex-shrink:0}
.archived-link{margin:-6px 0 16px}
.field-error{color:var(--red,#a94f43);font-size:13px;font-weight:700;margin-top:6px;min-height:0}.field-error:empty{display:none}