@font-face{font-family:'Playfair Display';font-weight:500;font-display:swap;src:url(fonts/playfair-display-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-weight:600;font-display:swap;src:url(fonts/playfair-display-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-weight:700;font-display:swap;src:url(fonts/playfair-display-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:Poppins;font-weight:400;font-display:swap;src:url(fonts/poppins-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:Poppins;font-weight:500;font-display:swap;src:url(fonts/poppins-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:Poppins;font-weight:600;font-display:swap;src:url(fonts/poppins-latin-600-normal.woff2) format('woff2')}
:root{--sage:#B4BF8E;--cream:#EEF2DF;--soft:#D2D9B8;--char:#464646;--text:#212529;--link:#76834A;--white:#fff;--line:#dfe5c9;--danger:#a4453a;--r:16px;
--font-h:'Playfair Display',Georgia,serif;--font-b:Poppins,system-ui,-apple-system,'Segoe UI',sans-serif}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:var(--font-b);color:var(--text);background:var(--cream);font-size:15px;line-height:1.5;-webkit-text-size-adjust:100%}
a{color:var(--link)}
h1,h2,h3{font-family:var(--font-h);font-weight:600;margin:0;color:var(--text)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
.btn{background:var(--sage);color:var(--text);border:0;border-radius:999px;padding:11px 20px;font-weight:600;min-height:44px}
.btn:hover{filter:brightness(.96)}
.btn.dark{background:var(--char);color:#fff}
.btn.ghost{background:transparent;border:1.5px solid var(--sage)}
.btn.sm{padding:6px 14px;min-height:34px;font-size:13px}
.btn.danger{background:transparent;color:var(--danger);border:1.5px solid #e3c2bd}
.btn:disabled{opacity:.5;cursor:default}
.link{background:none;border:0;color:var(--link);padding:4px;font-weight:500;text-decoration:underline}
label{display:block;font-size:12.5px;font-weight:500;color:var(--char);margin:12px 0 4px}
input,select,textarea{width:100%;border:1.5px solid var(--soft);background:#fff;border-radius:12px;padding:10px 12px;min-height:44px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--link);box-shadow:0 0 0 3px rgba(180,191,142,.45)}
textarea{resize:vertical}
.err{color:var(--danger);font-size:13px;margin:8px 0 0;min-height:18px}
.muted{color:#5d6358;font-size:13px}
.chip{display:inline-block;background:var(--soft);color:var(--text);border-radius:999px;padding:1px 10px;font-size:11.5px;font-weight:500}
.badge{background:var(--char);color:#fff;border-radius:999px;min-width:20px;height:20px;padding:0 6px;font-size:11.5px;font-weight:600;display:inline-flex;align-items:center;justify-content:center}

/* auth */
.auth{min-height:100%;display:flex;flex-direction:column;background:linear-gradient(180deg,var(--sage) 0,var(--sage) 210px,var(--cream) 210px)}
.auth .hero{padding:44px 24px 20px;text-align:center}
.auth .hero h1{font-size:34px;line-height:1.1}
.auth .hero h1 .wm{display:block;margin:0 auto;height:auto;width:min(270px,80%)}
.auth .hero p{margin:8px 0 0;font-size:14px}
.card{background:#fff;border-radius:var(--r);box-shadow:0 4px 18px rgba(70,70,70,.1);padding:20px}
.auth .card{width:min(440px,calc(100% - 32px));margin:0 auto 32px}
.tabs{display:flex;background:var(--cream);border-radius:999px;padding:4px;margin-bottom:6px}
.tabs button{flex:1;border:0;background:none;border-radius:999px;padding:9px;font-weight:600;color:var(--char)}
.tabs button.on{background:var(--sage);color:var(--text)}
.demo-box{margin:16px auto 0;text-align:center;font-size:13px}

/* shell */
.shell{height:100%;display:flex;flex-direction:column;max-width:1180px;margin:0 auto;background:var(--cream)}
@media(min-width:900px){body{background:var(--soft)}.shell{box-shadow:0 0 40px rgba(0,0,0,.12)}}
.top{background:var(--sage);color:var(--text);padding:calc(10px + env(safe-area-inset-top)) 16px 12px;display:flex;align-items:center;gap:12px;flex:0 0 auto}
.top .brand{font-family:var(--font-h);font-weight:700;font-size:20px;line-height:1.15}
.top .brand .wm{display:block;height:26px;width:auto;max-width:100%}
.top .sub{font-size:12px;opacity:.9}
.top .grow{flex:1;min-width:0}
.top .back{background:rgba(255,255,255,.45);border:0;border-radius:50%;width:38px;height:38px;font-size:20px;line-height:1;display:none}
.banner{background:var(--char);color:#fff;font-size:12.5px;padding:7px 16px;text-align:center}
.banner a{color:var(--soft)}
.body{flex:1;min-height:0;display:flex}
.pane-list{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}
.pane-thread{flex:1.6;min-width:0;min-height:0;display:none;flex-direction:column;background:#fbfcf5;border-left:1px solid var(--line)}
.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.nav{display:flex;background:#fff;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);flex:0 0 auto}
.nav button{flex:1;background:none;border:0;padding:9px 4px 8px;font-size:11.5px;font-weight:500;color:var(--char);display:flex;flex-direction:column;align-items:center;gap:1px;position:relative}
.nav button .ic{font-size:20px;line-height:1.2}
.nav button.on{color:var(--text);font-weight:600}
.nav button.on::before{content:"";position:absolute;top:0;left:25%;right:25%;height:3px;background:var(--sage);border-radius:0 0 3px 3px}
.nav .badge{position:absolute;top:4px;left:calc(50% + 8px)}
/* mobile: show either list or thread */
.mode-thread .pane-list{display:none}.mode-thread .pane-thread{display:flex}.mode-thread .top .back{display:block}.mode-thread .nav{display:none}
@media(min-width:900px){
  .pane-list{flex:0 0 380px}.pane-thread{display:flex!important}
  .mode-thread .pane-list{display:flex}.mode-thread .nav{display:flex}.top .back{display:none!important}
  .nav{order:-1;border-top:0;border-bottom:1px solid var(--line)}
}
.empty-thread{margin:auto;text-align:center;color:#5d6358;padding:30px}
.empty-thread h3{margin-bottom:6px}

/* vendor list */
.countdown{margin:14px 16px 4px;padding:14px 16px;background:var(--soft);border-radius:var(--r);display:flex;justify-content:space-between;align-items:center;gap:10px}
.countdown b{font-family:var(--font-h);font-size:26px;line-height:1}
.vrow{display:flex;gap:12px;align-items:center;padding:12px 16px;background:#fff;margin:8px 16px;border-radius:14px;border:1.5px solid transparent;cursor:pointer;box-shadow:0 1px 4px rgba(70,70,70,.07)}
.vrow:hover,.vrow.on{border-color:var(--sage)}
.avatar{width:46px;height:46px;border-radius:50%;background:var(--sage);color:var(--text);display:flex;align-items:center;justify-content:center;font-family:var(--font-h);font-weight:700;font-size:19px;flex:0 0 auto}
.vrow .mid{flex:1;min-width:0}
.vrow .nm{font-weight:600;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.vrow .pv{font-size:13px;color:#5d6358;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vrow.unread .pv{color:var(--text);font-weight:500}
.vrow .meta{text-align:right;font-size:11.5px;color:#5d6358;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.fab{position:sticky;bottom:12px;margin:12px 16px;display:block;width:calc(100% - 32px);box-shadow:0 6px 18px rgba(70,70,70,.2)}
.sec-title{padding:16px 16px 0;font-size:20px}

/* booking nudges */
.nudges{margin:0 0 4px}
.nudge-title{padding-bottom:0;font-size:18px;color:#3f5a3e}
.nudge-sub{margin:2px 16px 4px}
.nudge{margin:8px 16px;padding:12px 14px;background:#fff;border-radius:14px;border:1.5px solid var(--soft);border-left:5px solid var(--sage);box-shadow:0 1px 4px rgba(70,70,70,.07);display:flex;flex-direction:column;gap:8px}
.nudge.late{border-left-color:#627D60;background:#f8faf0}
.nudge-msg{font-size:14px;line-height:1.4}
.nudge-late{margin-top:3px;font-size:12.5px;font-weight:600;color:#4c6549}
.nudge-act{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.nudge-act .link{font-size:13px;color:#5d6358;font-weight:400}
.nudge-more{display:block;margin:2px 16px 6px;font-size:13px}

/* thread */
.thead{display:flex;align-items:center;gap:10px;padding:10px 16px;background:#fff;border-bottom:1px solid var(--line);flex:0 0 auto}
.thead .t{flex:1;min-width:0}
.thead .t b{font-family:var(--font-h);font-size:18px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pin{background:#fff;border-bottom:1px solid var(--line);flex:0 0 auto;display:flex;flex-direction:column;min-height:0}
.pin-h{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:var(--soft);font-weight:600;font-size:13px;cursor:pointer;user-select:none}
.pin-b{padding:10px 16px 14px;font-size:13.5px}
.kv{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px dashed var(--line)}
.kv:last-child{border-bottom:0}
.kv span:first-child{color:#5d6358}
.kv span:last-child{font-weight:500;text-align:right}
.pill{border-radius:999px;padding:1px 9px;font-size:11.5px;font-weight:600}
.pill.ok{background:var(--sage)}.pill.warn{background:#f4d9a8}.pill.late{background:#efc1ba}.pill.urgent{background:#f0a35c;color:#4a2a05;font-weight:700}
.msgs{flex:1 1 0;min-height:140px;overflow-y:auto;padding:14px 14px 6px;display:flex;flex-direction:column;gap:8px;-webkit-overflow-scrolling:touch}
.day{align-self:center;font-size:11.5px;color:#5d6358;background:var(--soft);border-radius:999px;padding:1px 12px;margin:6px 0}
.msg{max-width:82%;display:flex;flex-direction:column;gap:2px}
.msg.me{align-self:flex-end;align-items:flex-end}
.msg .who{font-size:11.5px;color:#5d6358;padding:0 6px}
.msg .bub{background:#fff;border:1px solid var(--line);border-radius:16px 16px 16px 4px;padding:8px 13px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}
.msg.me .bub{background:var(--sage);border-color:var(--sage);border-radius:16px 16px 4px 16px}
.msg.planner .bub{background:var(--soft);border-color:var(--soft)}
.msg .tm{font-size:10.5px;color:#7a8070;padding:0 6px}
.att img{max-width:240px;max-height:220px;border-radius:12px;display:block;margin-top:6px;border:1px solid var(--line)}
.att a.file{display:inline-flex;gap:6px;align-items:center;margin-top:6px;background:rgba(255,255,255,.7);border-radius:10px;padding:6px 10px;font-size:13px;text-decoration:none;color:var(--text);border:1px solid var(--line)}
.compose{background:#fff;border-top:1px solid var(--line);padding:8px 10px calc(8px + env(safe-area-inset-bottom));flex:0 0 auto}
.compose .row{display:flex;gap:8px;align-items:flex-end}
.compose textarea{min-height:44px;max-height:120px;border-radius:22px;padding:10px 16px;resize:none}
.compose .att-btn{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--soft);background:#fff;font-size:20px;flex:0 0 auto}
.compose .send{height:44px;flex:0 0 auto}
.chosen{display:flex;gap:6px;flex-wrap:wrap;padding:0 4px 8px}
.chosen span{background:var(--soft);border-radius:999px;padding:2px 6px 2px 12px;font-size:12px;display:inline-flex;align-items:center;gap:4px}
.chosen button{border:0;background:none;font-size:15px;line-height:1}
.vname{padding:6px 14px 0;background:#fff;font-size:12px}
.vname input{min-height:34px;padding:5px 10px;margin-left:6px;width:min(220px,60%);display:inline-block}

/* sheets */
.overlay{position:fixed;inset:0;background:rgba(33,37,41,.45);display:flex;align-items:flex-end;justify-content:center;z-index:50}
.sheet{background:#fff;width:100%;max-width:520px;max-height:92vh;overflow-y:auto;border-radius:22px 22px 0 0;padding:20px 20px calc(20px + env(safe-area-inset-bottom))}
@media(min-width:600px){.overlay{align-items:center}.sheet{border-radius:22px}}
.sheet h2{font-size:22px;margin-bottom:4px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.linkbox{display:flex;gap:8px;background:var(--cream);border-radius:12px;padding:8px 8px 8px 12px;align-items:center;margin-top:8px}
.linkbox code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px}
.stub{background:#fff6dc;border:1px solid #f0dc9c;border-radius:10px;padding:8px 12px;font-size:12.5px;margin-top:10px}
.kd-row{display:grid;grid-template-columns:1fr 150px 36px;gap:6px;margin-bottom:6px}
.kd-row button{border:0;background:none;font-size:18px;color:var(--danger)}

/* search + team */
.searchbar{padding:14px 16px 6px}
.res{display:block;background:#fff;margin:8px 16px;border-radius:14px;padding:10px 14px;cursor:pointer;box-shadow:0 1px 4px rgba(70,70,70,.07)}
.res .sn{font-size:13.5px;margin-top:2px}
.res mark{background:var(--soft);color:var(--text);border-radius:3px;padding:0 2px}
.panel{background:#fff;border-radius:var(--r);margin:12px 16px;padding:14px 16px;box-shadow:0 1px 4px rgba(70,70,70,.07)}
.panel h3{font-size:18px;margin-bottom:6px}
.ob{border-top:1px dashed var(--line);padding:8px 0;font-size:12.5px}
#toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);background:var(--char);color:#fff;padding:10px 18px;border-radius:999px;opacity:0;pointer-events:none;transition:.25s;z-index:99;font-size:13.5px;max-width:90vw}
#toast.show{opacity:1;transform:translateX(-50%)}
.loading{padding:40px;text-align:center;color:#5d6358}
.thead .btn{padding:4px 12px;min-height:34px;font-size:13px}
.pin-h span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:8px}
#app{height:100%}
.hero-logo{display:block;margin:0 auto 8px;width:56px;height:56px;border-radius:13px}
.auth .hero{padding-top:28px}

.thead .invbtn{max-width:128px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto}
.thead .btn{flex:0 0 auto}.thead .invbtn{flex:0 1 auto}
.pin-hint{margin:0 0 8px;padding:8px 10px;background:var(--soft);border-radius:10px;color:var(--muted,#6b6b6b);font-size:13px}
.pin-files{display:flex;flex-direction:column;gap:4px;align-items:flex-end;max-width:70%}
.pin-files a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.pin-b .btn.sm{margin:2px 4px 2px 0}

.pay-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px;padding:10px;border:1px solid var(--line);border-radius:12px;position:relative}
.pay-row input[data-f=label]{grid-column:1/3;padding-right:44px}
.pay-row input[type=date]{min-width:0}
.pay-row .pay-paid{display:flex;align-items:center;gap:8px;margin:0;min-height:44px}
.pay-row .pay-paid input{width:20px;min-height:20px}
.pay-row button{position:absolute;top:6px;right:6px;width:36px;height:36px;border:0;background:none;font-size:20px;color:var(--danger)}
.kv.plan span:last-child{font-weight:600}

.paidrow{align-items:center;margin-top:-2px}
.paidrow .pay-paid{display:flex;align-items:center;gap:8px;margin:0;min-height:44px}
.paidrow .pay-paid input{width:20px;min-height:20px}
.pay-row input[data-f=paid_amount]{min-width:0}
/* payments coming up */
.paydue{margin:0 0 4px}
.paydue-row{margin:8px 16px;padding:11px 14px;background:#fff;border-radius:14px;border:1.5px solid var(--soft);border-left:5px solid #e3c488;box-shadow:0 1px 4px rgba(70,70,70,.07);display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer}
.paydue-row.urgent{border-left-color:#f0a35c}
.paydue-row.late{border-left-color:#d98b80;background:#fdf6f4}
.paydue-mid{min-width:0}
.paydue-vn{font-weight:600;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.paydue-sub{font-size:12.5px;line-height:1.35}
.paydue-row .pill{white-space:nowrap}
.pay-row > div label{margin:0 0 3px;font-size:12px}
.pay-row .pay-paid{align-self:end}
.paidrow{align-items:end}

/* Contract section: expanded body scrolls inside a capped height so the chat keeps most of the screen */
.pin-h{flex:0 0 auto;padding:7px 16px}
.pin-b{max-height:20vh;max-height:20dvh;min-height:96px;overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding:4px 16px 10px;
 background:linear-gradient(#fff 30%,rgba(255,255,255,0)) top/100% 22px no-repeat local,linear-gradient(rgba(255,255,255,0),#fff 70%) bottom/100% 22px no-repeat local,linear-gradient(rgba(70,80,60,.16),rgba(70,80,60,0)) top/100% 8px no-repeat scroll,linear-gradient(rgba(70,80,60,0),rgba(70,80,60,.18)) bottom/100% 10px no-repeat scroll;background-color:#fff}
.pin-b .kv{padding:3px 0;font-size:13px;line-height:1.35}
.pin-b .pill{padding:0 8px;font-size:11px}
.pin-b .pin-hint{margin:4px 0 6px;padding:6px 10px}
@media(max-height:560px){.pin-b{max-height:30vh;max-height:30dvh}}
@media(min-width:900px){.pin-b{max-height:40vh}}

/* money summary: total · paid · left + progress bar */
.money{margin:4px 0 6px;padding:8px 10px;background:var(--cream);border-radius:12px}
.money-line{font-size:13px;line-height:1.35}.money-line b{font-weight:600}
.money-bar{height:8px;margin-top:6px;background:#fff;border-radius:99px;overflow:hidden;border:1px solid var(--line)}
.money-bar i{display:block;height:100%;background:linear-gradient(90deg,#B4BF8E,#627D60);border-radius:99px;min-width:0}
.money-note{margin-top:5px;font-size:12px;color:#7a5a1f}
.sched-h{font-size:14px;margin:14px 0 2px;font-family:var(--font-b);font-weight:600;color:#627D60}

/* email alerts */
.field-hint{font-size:12px;color:#5d6358;margin:4px 2px 2px;line-height:1.35}
.toggle{display:flex;align-items:flex-start;gap:12px;cursor:pointer;margin:4px 0 0;font-size:14px;line-height:1.35;color:var(--text)}
.toggle input{position:absolute;opacity:0;width:1px;height:1px}
.toggle .tg-ui{flex:0 0 46px;height:28px;border-radius:999px;background:#cfd5bd;position:relative;transition:background .2s;margin-top:2px}
.toggle .tg-ui::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.toggle input:checked+.tg-ui{background:#2C3A2C}
.toggle input:checked+.tg-ui::after{transform:translateX(18px)}
.toggle input:focus-visible+.tg-ui{outline:2px solid var(--link);outline-offset:2px}
.alog{margin-top:8px}.alog summary{cursor:pointer;font-size:13px;color:var(--link);padding:4px 0}
/* planner rows in Team (invite status + actions) */
.pl-row{border-bottom:1px dashed var(--line);padding:8px 0}
.pl-row b{color:var(--text)}
.pl-st{font-size:12.5px;margin:4px 0 6px;line-height:1.35}
.pl-st.ok{color:#4f6b2f;font-weight:600}
.pl-st.warn{color:var(--danger)}
.pl-act{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pl-act .link{font-size:13px}