:root{
  --paper:#F4F5F7; --card:#FFFFFF;
  --ink:#141A22; --body:#48505E; --muted:#6E7788; --faint:#9AA3B2;
  --rule:#DFE3E9;
  --accent:#C9412A; --accent-ink:#A5321F; --accent-wash:#FBEEEB;
  --display:'Archivo',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --text:'IBM Plex Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --shadow:0 1px 2px rgba(20,26,34,0.05), 0 12px 32px -14px rgba(20,26,34,0.22);
  --ease:cubic-bezier(0.16,1,0.3,1);
  --ground:var(--paper); --panel:var(--card); --title:var(--ink);
  --label:var(--muted); --field-bg:#FFFFFF; --field-ink:var(--ink);
}
/* admin wears the ink ground, so you always know which door you are at */
body.admin{
  --ground:#11161D; --panel:#1A2029; --title:#F2F4F7;
  --body:#AEB7C4; --muted:#8B95A4; --rule:#2A323D;
  --field-bg:#141A22; --field-ink:#F2F4F7;
}
*{box-sizing:border-box;}
html,body{overflow-x:clip;}
body{
  margin:0; min-height:100dvh; background:var(--ground); color:var(--body);
  font-family:var(--text); font-size:16px; line-height:1.6;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:40px 20px; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none;}
a:hover{color:var(--accent-ink); text-decoration:underline;}
body.admin a:hover{color:#E4674F;}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px;}

.mark{font-family:var(--display); font-weight:700; font-size:19px;
      letter-spacing:-0.02em; color:var(--title); margin-bottom:22px;
      display:inline-block;}
.mark:hover{text-decoration:none; color:var(--title);}
.mark::after{content:''; display:inline-block; width:7px; height:7px;
             background:var(--accent); margin-left:7px; vertical-align:middle;}

.panel{width:100%; max-width:392px; background:var(--panel);
       border:1px solid var(--rule); border-radius:10px;
       padding:30px 30px 32px; box-shadow:var(--shadow);}
h1{font-family:var(--display); font-weight:600; color:var(--title);
   font-size:23px; letter-spacing:-0.02em; margin:0 0 6px; text-wrap:balance;}
.sub{margin:0 0 24px; font-size:14.5px; color:var(--muted); max-width:44ch;}

/* [hidden] must actually hide. `form{display:flex}` below outranks the browser's
   UA rule for [hidden], so any hidden form still rendered. Same defect that
   cockpit.css carried for .gate. Fixed 2026-09-29. */
[hidden]{display:none !important;}

form{display:flex; flex-direction:column; gap:15px;}
.field{display:flex; flex-direction:column; gap:6px;}
label{font-size:13.5px; font-weight:500; color:var(--label);}
input{
  font-family:var(--text); font-size:15.5px; color:var(--field-ink);
  background:var(--field-bg); border:1px solid var(--rule); border-radius:4px;
  padding:11px 13px; min-height:44px; width:100%;
  transition:border-color 150ms var(--ease);
}
input:hover{border-color:var(--faint);}
input:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash);}
body.admin input:focus{box-shadow:0 0 0 3px rgba(201,65,42,0.22);}
input:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
input[aria-invalid="true"]{border-color:var(--accent);}

.btn{font-family:var(--text); font-size:15px; font-weight:500;
     padding:11px 18px; min-height:44px; border-radius:4px; border:1px solid transparent;
     background:var(--accent); color:#fff; cursor:pointer; width:100%;
     display:inline-flex; align-items:center; justify-content:center;
     transition:background 150ms var(--ease), transform 120ms var(--ease);}
.btn:hover{background:var(--accent-ink);}
.btn:active{transform:scale(0.97);}
.btn:disabled{background:var(--faint); cursor:not-allowed; transform:none;}

.note{font-size:13.5px; margin:2px 0 0; min-height:20px;}
.note.err{color:var(--accent-ink);}
body.admin .note.err{color:#F08A78;}
.note.ok{color:var(--title);}
.note code{font-family:var(--mono); font-variant-numeric:tabular-nums;
           font-size:12.5px;}

.foot{margin-top:20px; font-size:13.5px; color:var(--muted); text-align:center;}
.who{font-family:var(--mono); font-variant-numeric:tabular-nums;
     font-size:13px; color:var(--title); word-break:break-all;}
.signedin{display:flex; flex-direction:column; gap:14px;}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:0.01ms !important; animation-duration:0.01ms !important;}
}


/* --- admin: the enquiry inbox --- */
.panel.wide{max-width:392px;}
.panel.wide:has(#role-panel:not([hidden])){max-width:740px;}
.role-panel{margin-top:22px; padding-top:20px; border-top:1px solid var(--rule);}

.enq-head{display:flex; align-items:baseline; gap:12px; margin-bottom:14px;}
.enq-head h2{font-family:var(--display); font-weight:600; color:var(--title);
             font-size:16px; margin:0; letter-spacing:-0.012em;}
.enq-count{font-family:var(--mono); font-variant-numeric:tabular-nums;
           font-size:11.5px; color:var(--muted); flex:1;}
.enq-refresh{font-family:var(--text); font-size:12.5px; color:var(--muted);
             background:transparent; border:1px solid var(--rule);
             border-radius:4px; padding:4px 10px; min-height:28px; cursor:pointer;
             transition:color 150ms var(--ease), border-color 150ms var(--ease);}
.enq-refresh:hover{color:var(--title); border-color:var(--faint);}
.enq-refresh:active{transform:scale(0.97);}

.enq{display:flex; flex-direction:column; border-top:1px solid var(--rule);}
.enq-i{border-bottom:1px solid var(--rule);}
.enq-i summary{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
               padding:12px 2px; cursor:pointer; list-style:none;}
.enq-i summary::-webkit-details-marker{display:none;}
.enq-i summary::before{content:'+'; font-family:var(--mono); font-size:13px;
                       color:var(--muted); width:12px; flex:none;}
.enq-i[open] summary::before{content:'\2212';}
.enq-i summary:hover .enq-who{color:var(--accent);}
.enq-who{font-family:var(--text); font-weight:500; font-size:14.5px;
         color:var(--title); flex:1; min-width:0;}
.enq-meta{font-family:var(--mono); font-variant-numeric:tabular-nums;
          font-size:11px; color:var(--muted); white-space:nowrap;}
.enq-state{display:inline-block; font-family:var(--mono);
           font-variant-numeric:tabular-nums; font-size:10.5px;
           padding:2px 8px; border-radius:99px; white-space:nowrap;}
.enq-state.ok{background:rgba(52,178,125,0.14); color:#6FD3A6;}
.enq-state.waiting{background:rgba(199,158,99,0.14); color:#D9B784;}

.enq-d{padding:2px 2px 18px 22px; display:flex; flex-direction:column; gap:7px;}
.enq-r{display:flex; gap:12px; align-items:baseline;}
.enq-k{font-size:12px; color:var(--muted); width:66px; flex:none;}
.enq-v{font-family:var(--mono); font-variant-numeric:tabular-nums;
       font-size:12.5px; color:var(--title); overflow-wrap:anywhere;}
a.enq-v{color:var(--accent);}
a.enq-v:hover{color:#E4674F;}
.enq-msg{margin:8px 0 0; padding:12px 14px; border-radius:4px;
         background:rgba(255,255,255,0.03); border:1px solid var(--rule);
         font-size:14px; color:var(--body); white-space:pre-wrap;
         overflow-wrap:anywhere; max-width:60ch;}
.enq-reply{width:auto; align-self:flex-start; margin-top:12px; font-size:13.5px;
           padding:8px 14px; min-height:36px; text-decoration:none;}
.enq-reply:hover{text-decoration:none; color:#fff;}

/* --- customer portal + join --- */
body.portal{--ground:var(--paper); --panel:var(--card); --title:var(--ink);}
.portal-panel{max-width:392px;}
.portal-panel:has(#signed:not([hidden])){max-width:680px;}

.portal-top{display:flex; justify-content:space-between; align-items:flex-start;
            gap:16px; padding-bottom:16px; border-bottom:1px solid var(--rule);}
.portal-top .btn{width:auto; min-height:34px; padding:6px 14px; font-size:13px;}

.account{padding-top:20px;}
.account + .account{margin-top:8px; border-top:1px solid var(--rule);}
.pane-head{display:flex; align-items:baseline; gap:10px; margin-bottom:6px;}
.pane-head h2{font-family:var(--display); font-weight:600; color:var(--title);
              font-size:20px; margin:0; letter-spacing:-0.018em;}
.role-chip{font-family:var(--mono); font-size:10.5px; padding:2px 8px;
           border-radius:99px; background:var(--accent-wash); color:var(--accent-ink);}

.pane{padding:18px 0 4px; border-top:1px solid var(--rule); margin-top:14px;}
.pane-t{font-family:var(--display); font-weight:600; color:var(--title);
        font-size:14px; margin:0 0 12px; letter-spacing:-0.008em;}
.pane-empty{margin:0; font-size:14px; color:var(--muted); max-width:52ch;}

.proj{display:flex; flex-direction:column; gap:14px;}
.proj-top{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;}
.proj-i h4{font-family:var(--text); font-weight:500; font-size:15px;
           color:var(--title); margin:0; flex:1;}
.proj-status{font-family:var(--mono); font-size:10.5px; padding:2px 8px;
             border-radius:99px; background:rgba(110,119,136,0.14); color:var(--muted);}
.proj-status.active{background:rgba(52,178,125,0.14); color:#2E8F63;}
.proj-status.blocked{background:rgba(229,72,77,0.12); color:var(--accent-ink);}
.proj-status.done{background:rgba(110,119,136,0.14); color:var(--muted);}
.proj-next{margin:5px 0 0; font-size:14px; color:var(--body); max-width:56ch;}
.proj-when{margin:4px 0 0; font-family:var(--mono); font-variant-numeric:tabular-nums;
           font-size:11px; color:var(--faint);}

.inv{display:flex; flex-direction:column;}
.inv-i{display:flex; align-items:center; justify-content:space-between; gap:14px;
       flex-wrap:wrap; padding:12px 0; border-bottom:1px solid var(--rule);}
.inv-i:last-child{border-bottom:none;}
.inv-l{display:flex; flex-direction:column; gap:2px; min-width:0;}
.inv-ref{font-family:var(--mono); font-variant-numeric:tabular-nums;
         font-size:13px; color:var(--title);}
.inv-date{font-family:var(--mono); font-variant-numeric:tabular-nums;
          font-size:11px; color:var(--faint);}
.inv-r{display:flex; align-items:center; gap:10px;}
.inv-amt{font-family:var(--mono); font-variant-numeric:tabular-nums;
         font-size:15px; font-weight:500; color:var(--title);}
.inv-state{font-family:var(--mono); font-size:10.5px; padding:2px 8px;
           border-radius:99px; background:rgba(199,158,99,0.16); color:#8A6B36;}
.inv-state.paid{background:rgba(52,178,125,0.14); color:#2E8F63;}
.inv-state.overdue{background:rgba(229,72,77,0.12); color:var(--accent-ink);}
.inv-pay{width:auto; min-height:36px; padding:8px 14px; font-size:13.5px;}
.inv-pay:hover{text-decoration:none; color:#fff;}

.invite{display:flex; flex-direction:column; gap:12px; align-items:flex-start;}
.invite select{font-family:var(--text); font-size:14.5px; color:var(--field-ink);
               background:var(--field-bg); border:1px solid var(--rule);
               border-radius:4px; padding:9px 11px; min-height:42px; width:100%;}
.invite .btn{width:auto;}
.invite-out{margin:0; font-size:13.5px; color:var(--muted);
            display:flex; flex-direction:column; gap:8px; align-items:flex-start;}
.invite-out.err{color:var(--accent-ink);}
.invite-out.ok{color:var(--body);}
.invite-link{font-family:var(--mono); font-size:11.5px; color:var(--title);
             background:rgba(20,26,34,0.05); border:1px solid var(--rule);
             border-radius:4px; padding:8px 10px; overflow-wrap:anywhere;
             display:block; width:100%;}
.invite-out .btn{min-height:32px; padding:5px 12px; font-size:12.5px;}

.offer-rows{display:flex; flex-direction:column; gap:7px; padding:14px 0 2px;
            border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
            margin-bottom:4px;}
.offer-rows .enq-k{color:var(--muted);}
.offer-rows .enq-v{color:var(--title);}

.portal-acts{display:flex; align-items:center; gap:16px; flex:none;}
.portal-acts .navlink{font-size:13.5px; font-weight:500; color:var(--muted);}
.portal-acts .navlink:hover{color:var(--accent); text-decoration:none;}

/* --- admin tabs --- */
.panel.wide:has(#role-panel:not([hidden])){max-width:780px;}
.tabs{display:flex; gap:2px; border-bottom:1px solid var(--rule); margin-bottom:16px;}
.tab{font-family:var(--text); font-size:13.5px; font-weight:500; color:var(--muted);
     background:transparent; border:none; border-bottom:2px solid transparent;
     padding:9px 14px; min-height:38px; cursor:pointer; margin-bottom:-1px;
     transition:color 150ms var(--ease), border-color 150ms var(--ease);}
.tab:hover{color:var(--title);}
.tab.on{color:var(--title); border-bottom-color:var(--accent);}
.tab:active{transform:scale(0.97);}
.tab-body{min-height:120px;}
.tab-count{font-family:var(--mono); font-variant-numeric:tabular-nums;
           font-size:11.5px; color:var(--muted); margin:0 0 12px;}

.acct-row{display:flex; align-items:baseline; gap:12px; width:100%; text-align:left;
          background:transparent; border:none; border-bottom:1px solid var(--rule);
          padding:13px 2px; cursor:pointer; font-family:var(--text);}
.acct-row:hover .enq-who{color:var(--accent);}
.acct-detail{display:flex; flex-direction:column;}
.acct-detail > .enq-refresh{align-self:flex-start; margin-bottom:14px;}

.mem{display:flex; flex-direction:column;}
.mem-i{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
       padding:9px 0; border-bottom:1px solid var(--rule);}
.mem-i:last-child{border-bottom:none;}

.admin-form{display:flex; flex-direction:column; gap:11px; align-items:flex-start;
            margin-top:16px; padding-top:16px; border-top:1px solid var(--rule);}
.admin-form .field{width:100%;}
.admin-form select{font-family:var(--text); font-size:14.5px; color:var(--field-ink);
                   background:var(--field-bg); border:1px solid var(--rule);
                   border-radius:4px; padding:9px 11px; min-height:42px; width:100%;}
.admin-form textarea{min-height:66px; resize:vertical;}
.admin-form .btn{width:auto;}

.msg-sum{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;}
.todo{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px;}
.todo li{font-size:13.5px; color:var(--muted);}