:root{--green:#126c38;--green-deep:#338053;--green-dark:#0c4d28;--gold:#dda440;--gold-soft:#f7edd8;
--ink:#212121;--muted:#6b7280;--line:#e4e8e6;--bg:#f6f7f6;--pale:#eef4f1;--red:#c2410c;--red-soft:#fbe9e2}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{font-family:'Karla',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:15px}
.shell{display:flex;min-height:100vh}
.side{width:232px;flex-shrink:0;background:var(--green-dark);color:#fff;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.side .brand{padding:20px 18px 16px;border-bottom:1px solid rgba(255,255,255,.12)}
.side .brand img{width:150px;display:block}
.side .brand span{display:block;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:8px}
.side nav{padding:12px 10px;flex:1}
/* 23 Sep 2026: on screens shorter than the sidebar (most laptops) the nav used to push the
   name and Sign out below the green panel and make every page scroll. The nav now scrolls
   inside the panel instead, and the brand and the name block keep their size. */
.side .brand,.side .foot{flex-shrink:0}
.side nav{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.28) transparent}
.side a{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:9px;color:rgba(255,255,255,.78);text-decoration:none;font-weight:600;font-size:14px;cursor:pointer;margin-bottom:2px}
.side a svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;flex-shrink:0}
.side a:hover{background:rgba(255,255,255,.08);color:#fff}
.side a.on{background:rgba(255,255,255,.15);color:#fff}
.side .foot{padding:14px 18px;border-top:1px solid rgba(255,255,255,.12);font-size:12px;color:rgba(255,255,255,.6)}
.side .foot b{display:block;color:#fff;font-size:13px;margin-bottom:2px}
.side .foot > span{display:block} /* the role only, not the initials badge inside .who */
.side .foot button{margin-top:10px;background:rgba(255,255,255,.14);border:0;color:#fff;font-family:inherit;font-size:12px;font-weight:700;padding:7px 11px;border-radius:7px;cursor:pointer}
.main{flex:1;min-width:0;padding:26px 30px 60px}
.head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px}
.head h1{margin:0;font-size:24px}
.head p{margin:5px 0 0;color:var(--muted);font-size:13.5px}
.btn{border:0;border-radius:9px;padding:10px 16px;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer}
.btn.primary{background:var(--green);color:#fff}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.danger{background:var(--red);color:#fff}
.btn.sm{padding:6px 11px;font-size:12.5px;border-radius:7px}
.btn:disabled{opacity:.5;cursor:default}
.btn:active{filter:brightness(.96)}
.panel{background:#fff;border:1px solid var(--line);border-radius:13px;overflow-x:auto}
.panel table{min-width:640px}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:11px;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);padding:12px 14px;background:#fafbfa;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:13px 14px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:#fafbfa}
td.right,th.right{text-align:right;white-space:nowrap}
td b{display:block}
td small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.pill{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.pill.green{background:var(--pale);color:var(--green-dark)}
.pill.grey{background:#eef2f0;color:#5b6b60}
.pill.gold{background:var(--gold-soft);color:#8a5a12}
.pill.red{background:var(--red-soft);color:var(--red)}
.empty{padding:40px 20px;text-align:center;color:var(--muted);font-size:14px}
.toolbar{display:flex;gap:10px;margin-bottom:14px;align-items:center;flex-wrap:wrap}
.toolbar input[type=search],.toolbar select{width:auto;flex:0 0 auto;min-width:210px;max-width:300px}
.toolbar .btn{flex:0 0 auto}
.modal{position:fixed;inset:0;background:rgba(16,35,26,.45);display:none;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto;z-index:50}
.modal.show{display:flex}
.modal .box{background:#fff;border-radius:15px;width:100%;max-width:620px;padding:26px}
.modal h2{margin:0 0 4px;font-size:20px}
.modal .sub{color:var(--muted);font-size:13.5px;margin-bottom:20px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid .wide{grid-column:1/-1}
label{display:block;font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=time],input[type=number],input[type=password],input[type=search],input[type=file],select,textarea{
width:100%;border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-family:inherit;font-size:14px;background:#fff;color:var(--ink)}
textarea{resize:vertical;min-height:74px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--pale);border-color:var(--green)}
.check{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;cursor:pointer;padding-top:22px;
text-transform:none;letter-spacing:0;color:var(--ink)}
.check input{width:17px;height:17px;accent-color:var(--green);cursor:pointer}
.modal .acts{display:flex;justify-content:space-between;gap:10px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.err{background:var(--red-soft);border:1px solid #f0cfc0;color:var(--red);padding:10px 13px;border-radius:9px;font-size:13.5px;margin-bottom:16px;display:none}
.err.show{display:block}
.note{background:var(--pale);border:1px solid #dcece0;color:#33604a;padding:11px 14px;border-radius:10px;font-size:13px;line-height:1.55;margin-bottom:16px}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(12px);background:#10231a;color:#fff;font-size:14px;font-weight:600;padding:12px 20px;border-radius:10px;opacity:0;pointer-events:none;transition:all .2s;z-index:80}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.gate{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px;background:var(--green)}
.gate .box{background:#fff;border-radius:16px;width:100%;max-width:380px;overflow:hidden}
.gate .cap{background:var(--green-dark);padding:24px;text-align:center}
.gate .cap img{width:180px;display:inline-block;vertical-align:middle}
.gate .cap span{display:block;color:rgba(255,255,255,.72);font-size:11px;letter-spacing:1.2px;text-transform:uppercase;margin-top:9px}
.gate .pad{padding:26px 30px 30px}
.gate h1{font-size:20px;margin:0 0 16px}
.gate .f{margin-bottom:14px}
.gate .btn{width:100%;padding:13px}
.loading{display:flex;align-items:center;justify-content:center;min-height:100vh;color:var(--muted)}
.docrow{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--line)}
.docrow:last-child{border-bottom:0}
.docrow .nm{flex:1}
.docrow .nm b{font-size:13.5px}
.docrow .nm small{display:block;color:var(--muted)}
@media (max-width:860px){
.shell{flex-direction:column}
.side{width:100%;height:auto;position:static;flex-direction:row;flex-wrap:wrap;align-items:center}
.side .brand{border-bottom:0;padding:14px}
.side .brand img{width:110px}
.side .brand span{display:none}
.side nav{display:flex;gap:4px;overflow-x:auto;padding:8px;flex:1}
.side a{white-space:nowrap;padding:9px 11px}
.side a span{display:none}
.side .foot{border-top:0;padding:10px 14px}
.main{padding:18px 14px 50px}
.grid{grid-template-columns:1fr}
}

/* ---- unread dots on the nav ---- */
.side a{position:relative}
.side a .dot{display:none;width:8px;height:8px;border-radius:50%;background:var(--gold);margin-left:auto}
.side a .dot.on{display:block}

/* ---- calendar ---- */
.cal{background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden}
.calbar{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
.calbar h2{margin:0;font-size:17px;flex:1}
.calbar button{background:#fff;border:1px solid var(--line);border-radius:8px;width:34px;height:34px;
font-size:16px;line-height:1;cursor:pointer;font-family:inherit;color:var(--ink)}
.calbar button:hover{background:var(--pale)}
.calhead{display:grid;grid-template-columns:repeat(7,1fr);background:#fafbfa;border-bottom:1px solid var(--line)}
.calhead div{padding:9px 10px;font-size:11px;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);text-align:left}
.calgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.calday{min-height:118px;min-width:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:7px 8px;cursor:pointer}
.calday:nth-child(7n){border-right:0}
.calday:hover{background:#fafbfa}
.calday.dim{background:#fbfcfb}
.calday.dim .n{color:#c3cbc6}
.calday .n{font-size:12.5px;font-weight:700;color:var(--muted);display:block;margin-bottom:5px}
.calday.today .n{background:var(--green);color:#fff;border-radius:50%;width:22px;height:22px;
display:flex;align-items:center;justify-content:center;font-size:12px}
.chip{display:block;width:100%;min-width:0;text-align:left;border:0;font-family:inherit;background:var(--pale);
color:var(--green-dark);border-left:3px solid var(--green);border-radius:5px;padding:4px 6px;
font-size:11.5px;line-height:1.3;margin-bottom:3px;cursor:pointer;overflow:hidden}
.chip:hover{background:#dcece0}
.chip b{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip.done{background:#eef2f0;color:#5b6b60;border-left-color:#9bb0a3}
.chip.unassigned{background:var(--gold-soft);color:#8a5a12;border-left-color:var(--gold)}

/* ---- tasks ---- */
.taskrow td.tick{width:44px}
.tickbtn{width:22px;height:22px;border-radius:6px;border:2px solid var(--line);background:#fff;cursor:pointer;padding:0}
.tickbtn.on{background:var(--green);border-color:var(--green)}
.tickbtn.on::after{content:'';display:block;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;
transform:rotate(45deg);margin:2px auto 0}
.done-title{text-decoration:line-through;color:var(--muted)}

/* ---- messages ---- */
.msgwrap{display:grid;grid-template-columns:290px 1fr;gap:16px;align-items:start}
.thlist{background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden}
.thlist button{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);
background:#fff;padding:13px 14px;cursor:pointer;font-family:inherit}
.thlist button:last-child{border-bottom:0}
.thlist button:hover{background:#fafbfa}
.thlist button.on{background:var(--pale)}
.thlist .t{font-size:14px;font-weight:700;display:flex;align-items:center;gap:7px}
.thlist .t .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);flex:0 0 auto}
.thlist .p{font-size:12.5px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thread{background:#fff;border:1px solid var(--line);border-radius:13px;display:flex;flex-direction:column;min-height:460px}
.thread .top{padding:14px 16px;border-bottom:1px solid var(--line);font-weight:700}
.thread .top small{display:block;font-weight:400;color:var(--muted);font-size:12.5px;margin-top:2px}
.bubbles{flex:1;padding:16px;overflow-y:auto;max-height:440px;display:flex;flex-direction:column;gap:10px}
.bub{max-width:74%;padding:9px 13px;border-radius:13px;font-size:14px;line-height:1.5}
.bub small{display:block;font-size:11px;opacity:.75;margin-bottom:3px}
.bub.them{background:var(--bg);border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:4px}
.bub.me{background:var(--green);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.composer{display:flex;gap:9px;padding:13px 16px;border-top:1px solid var(--line)}
.composer input{flex:1}
.composer .btn{flex:0 0 auto}

/* ---- media gallery ---- */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.gal figure{margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fafbfa}
.gal img,.gal video{width:100%;height:118px;object-fit:cover;display:block;background:#eef2f0}
.gal figcaption{padding:8px 10px;font-size:12px;color:var(--muted);line-height:1.4}
.gal figcaption b{display:block;color:var(--ink);font-size:12.5px}

/* ---- avatars ---- */
.av{width:34px;height:34px;border-radius:50%;object-fit:cover;background:var(--pale);flex:0 0 auto}
.av.lg{width:72px;height:72px}
.avfall{display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--green-dark);font-size:13px}
.av.lg.avfall{font-size:24px}
.person{display:flex;align-items:center;gap:11px}
.side .foot .who{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.side .foot .av{width:36px;height:36px;background:rgba(255,255,255,.16);color:#fff}
.avedit{display:flex;align-items:center;gap:14px;margin-bottom:4px}
.avedit .btn{flex:0 0 auto}
.pw{background:var(--gold-soft);border:1px solid #ecd9ac;border-radius:10px;padding:14px 16px;margin-bottom:4px}
.pw code{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:19px;font-weight:700;
color:#7a4e0a;background:#fff;border:1px solid #ecd9ac;border-radius:8px;padding:11px 13px;margin:9px 0;text-align:center}
@media (max-width:860px){ .msgwrap{grid-template-columns:1fr} }

/* ---- phones ----
   The office admin is a desktop tool, but Sara runs it on an iPhone, so the two
   things that genuinely break at 390px are fixed rather than left to fend for
   themselves: the seven column grid (55px a column is unreadable) and the nav,
   which was hiding its labels and leaving nine near-identical icons. */
.dayname{display:none}
@media (max-width:700px){
  /* The nav keeps its words and scrolls sideways instead. */
  .side a span{display:inline}
  .side nav{flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .side a{flex:0 0 auto}
  .side a .dot{margin-left:6px}

  /* The month grid becomes a list of the days that actually have something on. */
  .calhead{display:none}
  .calgrid{grid-template-columns:1fr}
  .calday{min-height:0;border-right:0;padding:12px 14px}
  .calday.empty,.calday.dim{display:none}
  .calday .n{display:none}
  .calday .dayname{display:block;font-size:12px;font-weight:700;letter-spacing:.4px;
    text-transform:uppercase;color:var(--muted);margin-bottom:7px}
  .calday.today .dayname{color:var(--green);}
  .calday.today .dayname::after{content:' · today'}
  .chip{padding:9px 11px;font-size:13px;margin-bottom:6px}
  .chip b{white-space:normal}
  .calbar{flex-wrap:wrap}
  .calbar h2{flex:1 0 100%;order:-1;margin-bottom:4px}

  /* Head and toolbar stack rather than squashing. */
  .head{flex-direction:column;gap:12px}
  .head #viewActions{width:100%;display:flex;gap:8px}
  .head #viewActions .btn{flex:1}
  .toolbar input[type=search],.toolbar select{max-width:none;flex:1 1 100%;min-width:0}

  /* Tables still scroll sideways, but say so rather than looking chopped off. */
  .panel{position:relative}
  .panel table{min-width:560px}
}

/* ---- clash warnings. A nudge, never a block. ---- */
.warnbar{background:var(--gold-soft);border:1px solid #ecd9ac;color:#7a4e0a;border-radius:11px;
padding:12px 15px;font-size:13.5px;line-height:1.55;margin-bottom:14px}
.warnbar b{color:#5f3c07}
/* A double booking must be obvious across the room, not something you notice on
   the second look. Red, outlined, and it says so in words. */
.chip.clash{background:var(--red-soft);color:#8a2c06;border-left-color:var(--red);
box-shadow:inset 0 0 0 1.5px var(--red)}
.chip.clash:hover{background:#f7ded3}
.dbl{display:inline-block;background:var(--red);color:#fff;font-size:10px;font-weight:700;
letter-spacing:.3px;text-transform:uppercase;font-style:normal;border-radius:4px;
padding:2px 5px;margin-top:4px;white-space:nowrap}
.warnbar .dbl{margin:0 4px 0 0;vertical-align:1px}
td .dbl{margin-top:0}
.warnbar{background:var(--red-soft);border-color:#f0cfc0;color:#8a2c06}
.warnbar b{color:#6d2205}

/* ---- team members who no longer have access ---- */
tr.off td{opacity:.55}
tr.off td:last-child{opacity:1}
tr.off .av{filter:grayscale(1)}


/* ---- contacts: one screen, three kinds of record ---- */
.tp{display:inline-block;font-size:11px;font-weight:600;border-radius:999px;padding:2px 9px;
white-space:nowrap;border:1px solid transparent}
.tp.org{background:var(--gold-soft);color:#7a4e0a;border-color:#ecd9ac}
.tp.con{background:#e7edf7;color:#28456f;border-color:#cfdcef}
.tp.par{background:var(--pale);color:#215b3a;border-color:#c6e3d1}
.muted{color:var(--muted)}

/* ---- pipelines: kanban ---- */
.kan{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 14px;align-items:flex-start}
.kcol{flex:0 0 258px;background:var(--bg);border:1px solid var(--line);border-radius:13px;
display:flex;flex-direction:column;max-height:calc(100vh - 232px)}
.kcol.won{background:var(--pale);border-color:#c6e3d1}
.kcol.over{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-soft)}
.kcol h4{margin:0;padding:11px 13px 9px;font-size:12.5px;font-weight:700;color:var(--ink);
letter-spacing:.2px;display:flex;align-items:baseline;gap:8px;border-bottom:1px solid var(--line)}
.kcol h4 i{margin-left:auto;font-style:normal;font-size:11px;font-weight:600;color:var(--muted);
white-space:nowrap}
.kbody{padding:10px;display:flex;flex-direction:column;gap:9px;overflow-y:auto;min-height:64px}
.kempty{font-size:12px;color:var(--muted);line-height:1.5;padding:6px 2px}
.kcard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 11px;
cursor:grab;box-shadow:0 1px 2px rgba(20,25,35,.05)}
.kcard:hover{border-color:var(--gold);box-shadow:0 2px 8px rgba(20,25,35,.09)}
.kcard.dragging{opacity:.45;cursor:grabbing}
.kcard b{display:block;font-size:13.5px;line-height:1.35;color:var(--ink)}
.kcard .who{display:block;font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.4}
.kcard .meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:7px;
font-size:11px;color:var(--muted)}
.kcard .val{font-weight:700;color:var(--ink)}
.kcard .tag{background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:1px 5px;
font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.3px}
.kcard .tag.win{background:var(--pale);color:#215b3a;border-color:#c6e3d1}
.kcard .tag.lost{background:var(--red-soft);color:#8a2c06;border-color:#f0cfc0}

/* ---- invoices ---- */
.modal .box.xl{max-width:880px}
.lines{width:100%;border-collapse:collapse;margin-top:16px}
.lines th{font-size:11px;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);text-align:left;padding:0 6px 6px}
.lines td{padding:3px 6px;vertical-align:middle}
.lines td input{width:100%}
.lines td:nth-child(2),.lines td:nth-child(3){width:96px}
.lines td:nth-child(4){width:110px;font-weight:700;white-space:nowrap}
.lines td:nth-child(5){width:44px}
.totals{display:flex;justify-content:flex-end;gap:22px;margin:12px 6px 6px;font-size:13.5px;color:var(--muted)}
.totals b{color:var(--ink);margin-left:6px}
.totals .grand{font-size:15px}
.totals .grand b{color:var(--green-dark)}
.summary{font-size:13.5px;color:var(--muted)}
.panel.pad{padding:22px}
.panel.pad h3{margin:0 0 6px;font-size:15px}
.panel.pad h3+.grid,.panel.pad .hint+.grid{margin-bottom:22px}
.hint{font-size:13px;color:var(--muted);margin:0 0 14px;line-height:1.5}
.panel.pad .acts{display:flex;gap:10px;margin-top:6px}
/* the activity trail at the top of a deal */
.dealtop{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.dealtop .pill{margin-left:6px}
.timeline{border-left:2px solid var(--line);margin:4px 0 18px 6px;padding-left:14px;display:flex;flex-direction:column;gap:7px}
.timeline div{font-size:12.5px;line-height:1.4;display:flex;gap:10px}
.timeline time{color:var(--muted);white-space:nowrap;flex:0 0 120px}

/* ---- availability ---- */
.dbl.away{background:var(--gold);color:#3d2a04}
.secttl{margin:26px 0 4px;font-size:15px}
.pats{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px}
.pat{background:#fff;border:1px solid var(--line);border-radius:13px;padding:14px 16px}
.pathead{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.pathead b{flex:1;font-size:14px}
.patdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.pd{background:var(--bg);border-radius:8px;padding:7px 4px;text-align:center;font-size:10.5px;line-height:1.45}
.pd.on{background:var(--pale)}
.pd b{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);margin-bottom:2px}
.pd.on b{color:var(--green-dark)}
.pd span{display:block;white-space:nowrap}
#av_days td:first-child{width:auto}
#av_days td:nth-child(2),#av_days td:nth-child(3){width:120px}
#av_days .check{padding-top:0}

/* ---- searchable pickers ---- */
.combo{position:relative}
.combo .cin{padding-right:30px}
.combo .cclr{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;
cursor:pointer;font-size:19px;line-height:1;color:var(--muted);padding:0 5px;border-radius:6px}
.combo .cclr:hover{color:var(--ink);background:var(--bg)}
.combo .clist{display:none;position:absolute;z-index:40;left:0;right:0;top:calc(100% + 3px);margin:0;padding:5px;
list-style:none;background:#fff;border:1px solid var(--line);border-radius:11px;max-height:264px;overflow-y:auto;
box-shadow:0 10px 30px rgba(20,25,35,.14)}
.combo.open .clist{display:block}
.combo .clist li{padding:8px 10px;border-radius:8px;font-size:13.5px;cursor:pointer;line-height:1.35}
.combo .clist li:hover,.combo .clist li.on{background:var(--pale)}
.combo .clist li.none{color:var(--muted)}
.combo .clist li.dead{cursor:default}
.combo .clist li.dead:hover{background:none}

/* ---- what kind of contact ---- */
.kindpick{margin-bottom:18px}
.kindpick>label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.4px;
color:var(--muted);font-weight:700;margin-bottom:7px}
.kinds{display:flex;flex-wrap:wrap;gap:7px}
.kbtn{font:inherit;font-size:13px;font-weight:600;border:1.5px solid var(--line);background:#fff;
color:var(--muted);border-radius:999px;padding:7px 15px;cursor:pointer}
.kbtn:hover{border-color:var(--green);color:var(--green-dark)}
.kbtn.on{background:var(--green);border-color:var(--green);color:#fff}
.kindpick .hint{margin:9px 0 0}
.tp.fund{background:#f0e9f7;color:#5b3a80;border-color:#ddd0ec}
.tp.part{background:#e9f2f6;color:#2a5f72;border-color:#cfe3ea}
.tp.supp{background:#f6f0e6;color:#75531d;border-color:#e9dcc6}
.tp.oth{background:#eef2f0;color:#5b6b60;border-color:#dde5e1}

/* ---- people at an organisation ---- */
.orgppl{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}
.opphead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.opphead b{flex:1;font-size:14px}
.oppl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.oppl li{display:flex;align-items:center;gap:10px;background:var(--bg);border-radius:9px;padding:8px 11px;font-size:13.5px}
.oppl li b{font-weight:700}
.oppl li span{color:var(--muted);font-size:12.5px}
.oppl li span:last-of-type{flex:1}

/* ---- donations ---- */
tr.unbanked td:first-child{box-shadow:inset 3px 0 0 var(--gold)}

/* ---- tags ---- */
.tagpill{display:inline-flex;align-items:center;gap:6px;background:var(--gold-soft);border:1px solid #ecd9ac;
  color:#7a4e0a;border-radius:999px;padding:3px 6px 3px 10px;font-size:12px;font-weight:600;margin:0 6px 6px 0}
.tagpill .x{border:0;background:none;cursor:pointer;font-size:15px;line-height:1;color:#7a4e0a;padding:0 4px;border-radius:999px}
.tagpill .x:hover{background:#ecd9ac}
.tagbox{min-height:30px;margin:2px 0 4px}
td .tagpill{margin:0 4px 2px 0;font-weight:500}

/* ---- participant editor: code suggestion hint, and Still attending locked by Deceased ---- */
.fieldhint{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.4}
.check.dim{opacity:.55;cursor:not-allowed}
.check input:disabled{cursor:not-allowed}

/* ---- sidebar on shorter laptop screens (23 Sep 2026) ----
   The full sidebar needs about 960px of height. Below that the spacing tightens so the
   whole nav still fits on most laptops. If it still does not fit, the nav scrolls inside
   the green panel, and a soft shadow at the top or bottom edge shows there is more,
   because on a Mac the scrollbar stays hidden until you scroll. */
@media (min-width:861px) and (max-height:960px){
  .side .brand{padding:14px 18px 10px}
  .side .brand img{width:120px}
  .side .brand span{margin-top:6px}
  .side nav{padding:6px 10px}
  .side a{padding:6px 12px;margin-bottom:1px}
  .side .foot{padding:10px 18px}
}
@media (min-width:861px){
  .side nav{
    background:
      linear-gradient(var(--green-dark) 30%,rgba(12,77,40,0)) center top,
      linear-gradient(rgba(12,77,40,0),var(--green-dark) 70%) center bottom,
      radial-gradient(farthest-side at 50% 0,rgba(0,0,0,.45),rgba(0,0,0,0)) center top,
      radial-gradient(farthest-side at 50% 100%,rgba(0,0,0,.45),rgba(0,0,0,0)) center bottom;
    background-repeat:no-repeat;
    background-size:100% 40px,100% 40px,100% 14px,100% 14px;
    background-attachment:local,local,scroll,scroll;
  }
}

/* ---- newer version ready (23 Sep 2026) ---- */
.updbar{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:45;display:flex;align-items:center;gap:12px;
  background:var(--green-dark);color:#fff;font-size:14px;font-weight:600;padding:9px 10px 9px 16px;border-radius:12px;
  box-shadow:0 8px 24px rgba(16,35,26,.22);max-width:calc(100vw - 28px)}
.updbar button{background:#fff;color:var(--green-dark);border:0;border-radius:8px;padding:7px 12px;font-family:inherit;
  font-size:13px;font-weight:700;cursor:pointer;flex:0 0 auto}

/* 23 Sep 2026, Emma's call: one-off bookings, adding on the spot, organisation or person */
.grid.is-booking .only-group,.grid:not(.is-booking) .only-booking{display:none}
.only-booking-hint{display:none}
#mBody.is-booking .only-booking-hint{display:block}
.countline{font-size:13.5px;color:var(--ink);margin:0 0 12px}
.countline b{color:var(--green-dark)}
.chip.booking{border-left-style:dashed;background:#fff;box-shadow:inset 0 0 0 1px #dcece0}
.chip.booking.done{background:#f5f7f6}
.kcard .tag.booked{background:var(--gold-soft);color:#8a5a12;border-color:#ecd9ac}
.combo .clist li.add{color:var(--green-dark);font-weight:600;border-top:1px dashed var(--line);margin-top:3px}
.combo .clist li.add:first-child{border-top:0;margin-top:0}
.combo.busy .cin{background:var(--bg);color:var(--muted)}
.addswitch{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:0 0 18px;padding:10px 12px;
  background:var(--bg);border:1px solid var(--line);border-radius:11px}
.addswitch>span{font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);margin-right:3px}
.addswitch .sbtn{font:inherit;font-size:13px;font-weight:600;border:1.5px solid var(--line);background:#fff;
  color:var(--ink);border-radius:999px;padding:6px 13px;cursor:pointer}
.addswitch .sbtn:hover{border-color:var(--green);color:var(--green-dark)}
.addswitch .sbtn.on{background:var(--green);border-color:var(--green);color:#fff;cursor:default}
.addswitch small{flex:1 1 100%;font-size:12px;color:var(--muted)}

/* 23 Sep 2026, item 9 and 10: staff checks and training */
.ck{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.2px;border-radius:999px;padding:2px 8px;
  margin:0 4px 3px 0;white-space:nowrap;border:1px solid transparent}
.ck.green{background:var(--pale);color:var(--green-dark);border-color:#c6e3d1}
.ck.gold{background:var(--gold-soft);color:#8a5a12;border-color:#ecd9ac}
.ck.red{background:var(--red-soft);color:#8a2c06;border-color:#f0cfc0}
.ck.none{background:#fff;color:var(--muted);border:1px dashed #cfd6d2}
td.cks{min-width:170px}
.orgppl.checks .oppl li{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.orgppl.checks .ckline{flex:1 1 200px;font-size:13px;color:var(--ink)}
.orgppl.checks .ckline .muted,.orgppl.checks .muted{color:var(--muted)}
label.check.renew{margin:0 0 14px;font-size:13px;text-transform:none;letter-spacing:0;color:var(--ink);font-weight:600}
.upl{margin-top:14px}
.warnbar.checks .btn{margin-left:6px;vertical-align:middle}

/* Edit pipelines (Emma's call, 29 Sep 2026) */
.btn.ghost.danger{background:#fff;color:var(--red);border-color:#f0cfc0}
.pe-top{display:flex;align-items:center;gap:10px;margin:0 0 14px;flex-wrap:wrap}
.pe-top label{margin:0}
.pe-top select{max-width:100%;flex:1 1 220px}
.pe-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0 4px}
.pe-acts .hint{margin:0}
.pe-h{font-size:12px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin:22px 0 10px}
.pe-stages{width:100%;border-collapse:collapse}
.pe-stages td{padding:7px 8px;vertical-align:middle}
.pe-stages td.pos{color:var(--muted);width:24px}
.pe-stages input.pe-sname{width:100%;min-width:140px}
.pe-stages label.check{margin:0;padding-top:0;text-transform:none;letter-spacing:0;font-size:13px;color:var(--ink);font-weight:600;white-space:nowrap}
.pe-add select{width:auto;flex:0 0 auto}
.pe-stages td small{display:block;margin-top:4px}
.nowrap{white-space:nowrap}
.pe-add{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 0}
.pe-add input{flex:1 1 200px;min-width:0}
@media (max-width:640px){
  .pe-stages thead{display:none}
  .pe-stages tr{display:grid;grid-template-columns:24px 1fr;gap:4px 8px;padding:8px 0;border-bottom:1px solid var(--line)}
  .pe-stages td{padding:2px 0;border:0}
  .pe-stages td:not(.pos){grid-column:2}
  .pe-stages td.right{text-align:left;white-space:normal}
}

/* Notes and donations on a session (Emma's call, 29 Sep 2026) */
.btn .count{display:inline-block;min-width:18px;padding:0 5px;margin-left:3px;border-radius:999px;background:var(--pale);color:var(--green-dark);font-size:11px;line-height:17px;text-align:center}
td small.don{color:var(--green-dark);font-weight:600}
.snotes{display:flex;flex-direction:column;gap:10px}
.snote{background:var(--bg);border-radius:10px;padding:10px 12px}
.snote .meta{font-size:12.5px;color:var(--muted);margin-bottom:4px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.snote .meta b{color:var(--ink)}
.snote .body{white-space:pre-wrap;font-size:14px;line-height:1.5;overflow-wrap:anywhere}