/* ==========================================================================
   PROJECT DETAIL -- organisation layer (Sep 2026).
   Additive only. Uses the existing Life Vault tokens: ink #243447,
   muted #5A6472, sage #4E6640, rule #E4EAE0 / #EFEAE0 / #E4DFD2,
   tint #F4F6F1 / #FBFAF8, focus #CF9E3F. Phone-first, single column.
   Scoped to #lvxSec (the panel) and #lvxSheet (the modal) so nothing leaks.
   ========================================================================== */

/* ---- NEXT UP ------------------------------------------------------------- */
#lvxSec .projx-next{
  position:relative; margin:18px 0 14px; padding:16px 18px 16px 20px;
  background:#F4F6F1; border:1px solid #E2E8DD; border-radius:18px;
  border-left:4px solid #4E6640;
}
#lvxSec .projx-next.is-empty{ background:#FBFAF8; border-color:#E4DFD2; border-left-color:#D9D2C2; }
#lvxSec .projx-next-l{
  margin:0 0 4px; font-size:.68rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:#4E6640 !important; -webkit-text-fill-color:#4E6640 !important;
}
#lvxSec .projx-next.is-empty .projx-next-l{
  color:#8A8272 !important; -webkit-text-fill-color:#8A8272 !important;
}
#lvxSec .projx-next-t{
  margin:0; font-family:'Playfair Display',Georgia,serif;
  font-size:1.08rem; font-weight:700; line-height:1.4;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
}
#lvxSec .projx-next-t.projx-next-none{
  font-family:'Nunito',system-ui,sans-serif; font-size:.9rem; font-weight:600;
  color:#5A6472 !important; -webkit-text-fill-color:#5A6472 !important;
}
#lvxSec .projx-next-m{
  margin:6px 0 0; font-size:.78rem; font-weight:700;
  color:#5A6472 !important; -webkit-text-fill-color:#5A6472 !important;
}

/* ---- + ADD TO PROJECT ---------------------------------------------------- */
#lvxSec .projx-add{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; margin:0 0 4px; cursor:pointer; font:inherit;
  font-size:.95rem; font-weight:800; min-height:54px; padding:14px 20px;
  border-radius:999px; border:1px solid #4E6640 !important; background:#4E6640 !important;
  color:#fff !important; -webkit-text-fill-color:#fff !important;
  box-shadow:0 8px 20px rgba(78,102,64,.22);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
#lvxSec .projx-add:hover{ background:#445A38 !important; border-color:#445A38 !important; transform:translateY(-1px); }
#lvxSec .projx-add:active{ transform:translateY(0); }
#lvxSec .projx-add:focus-visible{ outline:3px solid #CF9E3F; outline-offset:3px; }
#lvxSec .projx-add-p{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%; font-size:1.05rem; font-weight:800; line-height:1;
  background:rgba(255,255,255,.20);
}

/* ---- EVERYTHING FOR THIS PROJECT ---------------------------------------- */
#lvxSec .projx-cards,
#lvxSheet .projx-opts{ display:grid; grid-template-columns:1fr; gap:10px; }

#lvxSec .projx-c,
#lvxSheet .projx-opt{
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:14px;
  width:100%; text-align:left; cursor:pointer; font:inherit;
  background:#fff; border:1px solid #E4EAE0; border-radius:18px; padding:15px 16px;
  box-shadow:0 3px 12px rgba(36,52,71,.05);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
#lvxSec .projx-c:hover,
#lvxSheet .projx-opt:hover{
  transform:translateY(-1px); box-shadow:0 10px 22px rgba(36,52,71,.10); border-color:#CFE0C8;
}
#lvxSec .projx-c:focus-visible,
#lvxSheet .projx-opt:focus-visible{ outline:3px solid #CF9E3F; outline-offset:2px; }

#lvxSec .projx-c-i,
#lvxSheet .projx-c-i{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:13px; background:#F4F6F1;
  color:#4E6640 !important; -webkit-text-fill-color:#4E6640 !important;
}
#lvxSec .projx-i--invoices, #lvxSheet .projx-i--invoices{ background:#FBF4E6; color:#A9762A !important; -webkit-text-fill-color:#A9762A !important; }
#lvxSec .projx-i--mail,     #lvxSheet .projx-i--mail{     background:#EEF3F8; color:#3C6188 !important; -webkit-text-fill-color:#3C6188 !important; }
#lvxSec .projx-i--photos,   #lvxSheet .projx-i--photos{   background:#F6F0F4; color:#8A4F73 !important; -webkit-text-fill-color:#8A4F73 !important; }
#lvxSec .projx-i--notes,    #lvxSheet .projx-i--notes{    background:#FBFAF3; color:#8A7A33 !important; -webkit-text-fill-color:#8A7A33 !important; }

#lvxSec .projx-c-b,
#lvxSheet .projx-c-b{ display:grid; gap:2px; min-width:0; }
#lvxSec .projx-c-t,
#lvxSheet .projx-c-t{
  font-family:'Playfair Display',Georgia,serif; font-size:1rem; font-weight:700; line-height:1.3;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
}
#lvxSec .projx-c-s,
#lvxSheet .projx-c-s{
  font-size:.79rem; line-height:1.45;
  color:#5A6472 !important; -webkit-text-fill-color:#5A6472 !important;
}
#lvxSec .projx-c-n{
  flex:none; min-width:26px; padding:3px 9px; border-radius:999px; text-align:center;
  font-size:.75rem; font-weight:800; background:#E7EFE2;
  color:#3F5733 !important; -webkit-text-fill-color:#3F5733 !important;
}
#lvxSec .projx-c-soon,
#lvxSheet .projx-c-soon{
  flex:none; padding:4px 10px; border-radius:999px; white-space:nowrap;
  font-size:.66rem; font-weight:800; letter-spacing:.03em;
  background:#F3F1EA; border:1px solid #E4DFD2;
  color:#7A7466 !important; -webkit-text-fill-color:#7A7466 !important;
}
#lvxSec .projx-c-go,
#lvxSheet .projx-c-go{
  flex:none; font-size:1.3rem; line-height:1; font-weight:700;
  color:#B6BDB0 !important; -webkit-text-fill-color:#B6BDB0 !important;
}

/* ---- RECENT ACTIVITY ----------------------------------------------------- */
#lvxSec .projx-act{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
#lvxSec .projx-act-r{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px;
  background:#fff; border:1px solid #EFEAE0; border-radius:14px; padding:12px 14px;
}
#lvxSec .projx-act-d{
  flex:none; width:8px; height:8px; border-radius:50%; background:#4E6640;
}
#lvxSec .projx-act-t{
  font-size:.88rem; font-weight:700; min-width:0;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
}
#lvxSec .projx-act-w{
  flex:none; font-size:.75rem; font-weight:700; white-space:nowrap;
  color:#8A8272 !important; -webkit-text-fill-color:#8A8272 !important;
}

/* ---- PANEL BODIES (inside the existing #lvxSheet shell) ------------------ */
#lvxSheet .projx-body{ display:block; }
#lvxSheet .projx-p-tag{
  margin:0 0 12px; font-family:'Playfair Display',Georgia,serif;
  font-size:1rem; font-weight:700; line-height:1.4;
  color:#4E6640 !important; -webkit-text-fill-color:#4E6640 !important;
}
#lvxSheet .projx-p-lead{
  margin:0 0 16px; font-size:.9rem; line-height:1.6;
  color:#5A6472 !important; -webkit-text-fill-color:#5A6472 !important;
}
#lvxSheet .projx-p-h{
  margin:18px 0 8px; font-size:.7rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:#8A8272 !important; -webkit-text-fill-color:#8A8272 !important;
}
#lvxSheet .projx-will{ list-style:none; margin:0; padding:0; display:grid; gap:7px; }
#lvxSheet .projx-will li{
  position:relative; padding-left:20px; font-size:.86rem; line-height:1.5;
  color:#3F4753 !important; -webkit-text-fill-color:#3F4753 !important;
}
#lvxSheet .projx-will li:before{
  content:''; position:absolute; left:4px; top:.55em;
  width:6px; height:6px; border-radius:50%; background:#CFE0C8;
}
#lvxSheet .projx-chips{ display:flex; flex-wrap:wrap; gap:8px; }
#lvxSheet .projx-chip{
  padding:7px 14px; border-radius:999px; font-size:.78rem; font-weight:800;
  background:#F4F6F1; border:1px solid #E2E8DD;
  color:#4E6640 !important; -webkit-text-fill-color:#4E6640 !important;
}
#lvxSheet .projx-p-fmt{
  margin:0; padding:11px 14px; border-radius:12px; font-size:.84rem; font-weight:800;
  background:#F4F6F1; border:1px solid #E2E8DD;
  color:#3F4753 !important; -webkit-text-fill-color:#3F4753 !important;
}
#lvxSheet .projx-p-state{
  margin:18px 0 0; padding:13px 16px; border-radius:14px;
  font-size:.88rem; font-weight:800;
  background:#FBF4E6; border:1px solid #EBDCBB;
  color:#8A6524 !important; -webkit-text-fill-color:#8A6524 !important;
}
#lvxSheet .projx-p-foot{
  margin:12px 0 0; font-size:.79rem; line-height:1.55;
  color:#7A7466 !important; -webkit-text-fill-color:#7A7466 !important;
}
#lvxSheet .projx-p-none{
  margin:0 0 14px; padding:16px; border-radius:14px; text-align:center;
  background:#FBFAF8; border:1px dashed #E4DFD2; font-size:.86rem;
  color:#5A6472 !important; -webkit-text-fill-color:#5A6472 !important;
}

/* ---- notes list inside the panel ---------------------------------------- */
#lvxSheet .projx-nlist{ list-style:none; margin:0 0 14px; padding:0; display:grid; gap:8px; }
#lvxSheet .projx-nrow{
  display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:10px;
  background:#fff; border:1px solid #EFEAE0; border-radius:14px; padding:12px 14px;
}
#lvxSheet .projx-ntext{
  font-size:.88rem; line-height:1.5; min-width:0; overflow-wrap:anywhere;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
}
#lvxSheet .projx-nwhen{
  font-size:.72rem; font-weight:700; white-space:nowrap;
  color:#8A8272 !important; -webkit-text-fill-color:#8A8272 !important;
}
#lvxSheet .projx-nx{
  flex:none; width:32px; height:32px; border-radius:50%; cursor:pointer; font:inherit;
  font-size:.78rem; line-height:1; background:#fff; border:1px solid #E4DFD2;
  color:#8A8272 !important; -webkit-text-fill-color:#8A8272 !important;
}
#lvxSheet .projx-nx:hover{ background:#FBF1F1; border-color:#E4C9C9; color:#9A4A4A !important; -webkit-text-fill-color:#9A4A4A !important; }
#lvxSheet .projx-nx:focus-visible{ outline:3px solid #CF9E3F; outline-offset:2px; }
#lvxSheet .projx-nadd{ display:flex; gap:10px; flex-wrap:wrap; }
#lvxSheet .projx-nadd .lvf-i{ flex:1 1 200px; min-width:0; }

/* ---- phone ---------------------------------------------------------------- */
@media (max-width:620px){
  #lvxSec .projx-c,
  #lvxSheet .projx-opt{ grid-template-columns:auto 1fr auto; padding:14px; gap:12px; }
  #lvxSec .projx-c .projx-c-go,
  #lvxSheet .projx-opt .projx-c-go{ display:none; }
  #lvxSec .projx-c-i, #lvxSheet .projx-c-i{ width:38px; height:38px; border-radius:12px; }
  #lvxSec .projx-c-t, #lvxSheet .projx-c-t{ font-size:.95rem; }
  #lvxSec .projx-act-r{ grid-template-columns:auto 1fr; row-gap:2px; }
  #lvxSec .projx-act-w{ grid-column:2; justify-self:start; }
  #lvxSheet .projx-nadd .lvf-btn{ flex:1 1 auto; }
}
@media (prefers-reduced-motion:reduce){
  #lvxSec .projx-add, #lvxSec .projx-c, #lvxSheet .projx-opt{ transition:none; }
  #lvxSec .projx-add:hover, #lvxSec .projx-c:hover, #lvxSheet .projx-opt:hover{ transform:none; }
}
/* ==========================================================================
   PHASE 2 additions
   ========================================================================== */

/* the two new icon tints */
#lvxSec .projx-i--mood, #lvxSheet .projx-i--mood{ background:#F3F1F8; color:#5C4C8A !important; -webkit-text-fill-color:#5C4C8A !important; }
#lvxSec .projx-i--hu,   #lvxSheet .projx-i--hu{   background:#EEF4F2; color:#3C7A6B !important; -webkit-text-fill-color:#3C7A6B !important; }

/* ---- Mood Board examples ------------------------------------------------- */
#lvxSheet .projx-ex{ display:grid; gap:10px; }
#lvxSheet .projx-ex-c{
  background:#FBFAF8; border:1px solid #EFEAE0; border-radius:14px; padding:13px 15px;
}
#lvxSheet .projx-ex-t{
  margin:0 0 6px; font-size:.8rem; font-weight:800; letter-spacing:.02em;
  color:#5C4C8A !important; -webkit-text-fill-color:#5C4C8A !important;
}
#lvxSheet .projx-ex-l{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
#lvxSheet .projx-ex-l li{
  padding:5px 11px; border-radius:999px; font-size:.75rem; font-weight:700;
  background:#fff; border:1px solid #E7E2D6;
  color:#5A6472 !important; -webkit-text-fill-color:#5A6472 !important;
}

/* ---- Existing HU Item (the old "Linked to this project", relocated) ------ */
#lvxSheet .projx-hu{
  margin:0 0 12px; padding:13px 15px;
  background:#FBFAF8; border:1px solid #EFEAE0; border-radius:16px;
}
#lvxSheet .projx-hu-h{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  flex-wrap:wrap; margin-bottom:8px;
}
#lvxSheet .projx-hu-n{
  font-family:'Playfair Display',Georgia,serif; font-size:.98rem; font-weight:700;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
}
#lvxSheet .projx-hu-add{
  cursor:pointer; font:inherit; font-size:.76rem; font-weight:800;
  padding:8px 14px; min-height:38px; border-radius:999px;
  background:#fff; border:1px solid #DDD7C9;
  color:#3D4A3A !important; -webkit-text-fill-color:#3D4A3A !important;
}
#lvxSheet .projx-hu-add:hover{ background:#F1F4EE; border-color:#CFE0C8; }
#lvxSheet .projx-hu-add:focus-visible{ outline:3px solid #CF9E3F; outline-offset:2px; }
#lvxSheet .projx-hu-l{ list-style:none; margin:0; padding:0; display:grid; gap:7px; }
#lvxSheet .projx-hu-r{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px;
  background:#fff; border:1px solid #EFEAE0; border-radius:12px; padding:10px 12px;
}
#lvxSheet .projx-hu-t{
  font-size:.86rem; font-weight:700; min-width:0; overflow-wrap:anywhere;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
}
#lvxSheet .projx-hu-x{
  flex:none; cursor:pointer; font:inherit; font-size:.72rem; font-weight:800;
  padding:6px 12px; min-height:34px; border-radius:999px;
  background:#fff; border:1px solid #E4DFD2;
  color:#8A8272 !important; -webkit-text-fill-color:#8A8272 !important;
}
#lvxSheet .projx-hu-x:hover{ background:#FBF1F1; border-color:#E4C9C9; color:#9A4A4A !important; -webkit-text-fill-color:#9A4A4A !important; }
#lvxSheet .projx-hu-x:focus-visible{ outline:3px solid #CF9E3F; outline-offset:2px; }
#lvxSheet .projx-hu-none{
  margin:0; font-size:.82rem;
  color:#8A8272 !important; -webkit-text-fill-color:#8A8272 !important;
}

/* ---- the existing payments markup, now rendered inside the panel ---------
   projPaymentsHTML() emits .lvp-* classes that were only ever styled under
   #lvxSec. These mirror those rules under #lvxSheet. The markup, the actions
   and the payment engine are untouched. ---------------------------------- */
#lvxSheet .projx-pay{ margin:0 0 4px; }
#lvxSheet .projx-pay .lvp-sech:first-child{ margin-top:0; }
#lvxSheet .lvp-sech{
  margin:18px 0 10px; font-family:'Playfair Display',Georgia,serif;
  font-size:1.02rem; font-weight:700;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
}
#lvxSheet .lvp-sub{
  margin:0 0 12px; font-size:.86rem; line-height:1.6;
  color:#5A6472 !important; -webkit-text-fill-color:#5A6472 !important;
}
#lvxSheet .lvp-pays{ display:flex; flex-direction:column; gap:9px; margin:0 0 12px; }
#lvxSheet .lvp-pay{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:#fff !important; border:1px solid #E3E7EC !important; border-radius:15px;
  padding:13px 16px;
}
#lvxSheet .lvp-pay.is-paid{ background:#F6F8F5 !important; }
#lvxSheet .lvp-pay{ row-gap:8px; }
#lvxSheet .lvp-pay-t{
  flex:1 1 100%; min-width:0; font-size:.92rem; font-weight:800;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
}
#lvxSheet .lvp-pay-m{ margin-left:auto; }
#lvxSheet .lvp-pay-a{
  display:block; font-size:.74rem; font-weight:600; margin-top:2px;
  color:#8B94A0 !important; -webkit-text-fill-color:#8B94A0 !important;
}
#lvxSheet .lvp-pay-m{
  font-size:.95rem; font-weight:800; flex:none;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
}
#lvxSheet .lvp-pay-s{
  font-size:.76rem; font-weight:800; flex:none;
  color:#3F6B3A !important; -webkit-text-fill-color:#3F6B3A !important;
}
#lvxSheet .lvp-mini{
  cursor:pointer; font:inherit; font-size:.76rem !important; font-weight:800;
  padding:8px 14px !important; min-height:38px !important; border-radius:999px;
  background:#fff; border:1px solid #DDD7C9;
  color:#3D4A3A !important; -webkit-text-fill-color:#3D4A3A !important;
}
#lvxSheet .lvp-mini:hover{ background:#F1F4EE; border-color:#CFE0C8; }
#lvxSheet .lvp-mini:focus-visible{ outline:3px solid #CF9E3F; outline-offset:2px; }
#lvxSheet .lvp-mini.is-go{
  background:#5F8F5A !important; border-color:#5F8F5A !important;
  color:#fff !important; -webkit-text-fill-color:#fff !important;
}
#lvxSheet .lvp-actions{ display:flex; gap:10px; flex-wrap:wrap; margin:0 0 4px; }

@media (max-width:620px){
  #lvxSheet .projx-hu-h{ align-items:flex-start; }
  #lvxSheet .projx-hu-add{ width:100%; }
  #lvxSheet .lvp-actions .lvf-btn{ flex:1 1 auto; }
}