/* ==========================================================================
   MAIL LENS (Sep 2026). Additive only.
   HU tokens: navy #243447, muted #5A6472, sage #4E6640, rule #E4EAE0 /
   #EFEAE0 / #E4DFD2, stone #FBFAF8 / #F4F6F1, focus #CF9E3F, and a pale blue
   Mail Lens accent #3C6188 on #EEF3F8 (the tint Phase 2 already uses for the
   Mail Lens hub icon). Playfair headings, existing radii, phone-first.
   Scoped to #lvxSec (the panel) and #lvxSheet (the forms).
   ========================================================================== */

/* ---- the landing card, built exactly like the other five ----------------- */
#lvxSec .lvx-bc.is-mailart{
  background-color:#FFFFFF !important; border-color:#E7E2D6 !important;
  background-image:url('../assets/img/a30d8fbedf4a1afb.webp');
  background-repeat:no-repeat; background-position:right 12px bottom 10px;
  background-size:64px auto; padding-bottom:14px;
}
#lvxSec .lvx-bc.is-mailart .lvx-bc-note{ padding-right:74px; }
#lvxSec .lvx-bc.is-mailart .lvx-bc-foot{ padding-right:74px; }
#lvxSec .lvx-bc.is-mailart .lvx-bc-n{
  font-family:'Playfair Display',Georgia,serif !important; letter-spacing:.02em;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
}
#lvxSec .lvx-bc.is-mailart .lvx-bc-c{
  color:#4A6B3F !important; -webkit-text-fill-color:#4A6B3F !important;
}
@media (max-width:620px){ #lvxSec .lvx-bc.is-mailart{ background-size:58px auto; } }

/* ---- panel header -------------------------------------------------------- */
#lvxSec .mlx-tag{
  margin:0 0 8px; font-family:'Playfair Display',Georgia,serif;
  font-size:1.06rem; font-weight:700; line-height:1.4;
  color:#3C6188 !important; -webkit-text-fill-color:#3C6188 !important;
}
#lvxSec .mlx-scope{
  margin:0 0 10px; padding:9px 13px; border-radius:12px; font-size:.8rem; font-weight:700;
  background:#EEF3F8; border:1px solid #D6E3EE;
  color:#3C6188 !important; -webkit-text-fill-color:#3C6188 !important;
}
#lvxSec .mlx-bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 16px; }
#lvxSec .mlx-how{
  cursor:pointer; font:inherit; font-size:.78rem; font-weight:800;
  padding:10px 16px; min-height:44px; border-radius:999px;
  background:#fff; border:1px solid #DDD7C9;
  color:#3D4A3A !important; -webkit-text-fill-color:#3D4A3A !important;
}
#lvxSec .mlx-how:hover{ background:#F1F4EE; border-color:#CFE0C8; }
#lvxSec .mlx-how:focus-visible{ outline:3px solid #CF9E3F; outline-offset:2px; }
#lvxSec .mlx-count{
  font-size:.8rem; font-weight:800;
  color:#8A8272 !important; -webkit-text-fill-color:#8A8272 !important;
}

/* ---- filters ------------------------------------------------------------- */
#lvxSec .mlx-tools{
  display:grid; gap:14px; margin:0 0 18px; padding:16px;
  background:#FBFAF8; border:1px solid #EFEAE0; border-radius:18px;
}
#lvxSec .mlx-find{ display:flex; gap:10px; flex-wrap:wrap; }
#lvxSec .mlx-find .mlx-q{ flex:1 1 220px; min-width:0; }
#lvxSec .mlx-fl{
  display:block; font-size:.68rem; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; margin:0 0 4px;
  color:#8A8272 !important; -webkit-text-fill-color:#8A8272 !important;
}
#lvxSec .mlx-selects{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
#lvxSec .mlx-sel{ width:100%; }
#lvxSec .mlx-newcat, #lvxSec .mlx-clear{
  justify-self:start; cursor:pointer; font:inherit; font-size:.76rem; font-weight:800;
  padding:9px 14px; min-height:40px; border-radius:999px;
  background:#fff; border:1px solid #DDD7C9;
  color:#3D4A3A !important; -webkit-text-fill-color:#3D4A3A !important;
}
#lvxSec .mlx-newcat:hover{ background:#F1F4EE; border-color:#CFE0C8; }
#lvxSec .mlx-clear{ color:#8A5A4A !important; -webkit-text-fill-color:#8A5A4A !important; }
#lvxSec .mlx-clear:hover{ background:#FBF1F1; border-color:#E4C9C9; }
#lvxSec .mlx-newcat:focus-visible, #lvxSec .mlx-clear:focus-visible{ outline:3px solid #CF9E3F; outline-offset:2px; }
#lvxSec .mlx-dates{ display:grid; gap:8px; }
#lvxSec .mlx-chips{ display:flex; flex-wrap:wrap; gap:8px; }
#lvxSec .mlx-chip{
  cursor:pointer; font:inherit; font-size:.76rem; font-weight:800;
  padding:9px 14px; min-height:40px; border-radius:999px;
  background:#fff; border:1px solid #E4DFD2;
  color:#5A6472 !important; -webkit-text-fill-color:#5A6472 !important;
}
#lvxSec .mlx-chip:hover{ background:#F1F4EE; border-color:#CFE0C8; }
#lvxSec .mlx-chip.on{
  background:#3C6188 !important; border-color:#3C6188 !important;
  color:#fff !important; -webkit-text-fill-color:#fff !important;
}
#lvxSec .mlx-chip:focus-visible{ outline:3px solid #CF9E3F; outline-offset:2px; }
#lvxSec .mlx-range{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* ---- the list ------------------------------------------------------------ */
#lvxSec .mlx-month{
  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;
}
#lvxSec .mlx-month:first-child{ margin-top:0; }
#lvxSec .mlx-list{ display:grid; gap:10px; }
#lvxSec .mlx-row{
  display:grid; gap:6px; 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 .mlx-row:hover{
  transform:translateY(-1px); box-shadow:0 10px 22px rgba(36,52,71,.10); border-color:#D6E3EE;
}
#lvxSec .mlx-row:focus-visible{ outline:3px solid #CF9E3F; outline-offset:2px; }
#lvxSec .mlx-top{ display:grid; grid-template-columns:1fr auto; align-items:start; gap:10px; }
#lvxSec .mlx-subj{
  font-family:'Playfair Display',Georgia,serif; font-size:1rem; font-weight:700;
  line-height:1.35; min-width:0; overflow-wrap:anywhere;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
}
#lvxSec .mlx-st, #lvxSheet .mlx-st{
  white-space:nowrap; padding:4px 10px; border-radius:999px;
  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 .mlx-st.is-action{ background:#FBF4E6; border-color:#EBDCBB; color:#8A6524 !important; -webkit-text-fill-color:#8A6524 !important; }
#lvxSec .mlx-st.is-waiting{ background:#EEF3F8; border-color:#D6E3EE; color:#3C6188 !important; -webkit-text-fill-color:#3C6188 !important; }
#lvxSec .mlx-st.is-done{ background:#E7EFE2; border-color:#CFE0C8; color:#3F5733 !important; -webkit-text-fill-color:#3F5733 !important; }
#lvxSec .mlx-meta{
  display:flex; flex-wrap:wrap; gap:4px 12px; font-size:.79rem;
  color:#5A6472 !important; -webkit-text-fill-color:#5A6472 !important;
}
#lvxSec .mlx-when{ font-weight:700; }
#lvxSec .mlx-tags{ display:flex; flex-wrap:wrap; gap:6px; }
#lvxSec .mlx-t{
  padding:4px 10px; border-radius:999px; font-size:.7rem; font-weight:800;
  background:#F4F6F1; border:1px solid #E2E8DD;
  color:#4E6640 !important; -webkit-text-fill-color:#4E6640 !important;
}
#lvxSec .mlx-t.is-cat{
  background:#EEF3F8; border-color:#D6E3EE;
  color:#3C6188 !important; -webkit-text-fill-color:#3C6188 !important;
}
#lvxSec .mlx-t.is-tag{
  background:#fff; border-color:#E4DFD2; font-weight:700;
  color:#8A8272 !important; -webkit-text-fill-color:#8A8272 !important;
}
#lvxSec .mlx-marks{
  font-size:.72rem; font-weight:700;
  color:#8A8272 !important; -webkit-text-fill-color:#8A8272 !important;
}

/* ---- one saved email ----------------------------------------------------- */
#lvxSec .mlx-dstat{ margin:0 0 14px; }
#lvxSec .mlx-detail{
  display:grid; gap:1px; margin:0 0 6px;
  background:#EFEAE0; border:1px solid #EFEAE0; border-radius:16px; overflow:hidden;
}
#lvxSec .mlx-drow{
  display:grid; grid-template-columns:130px 1fr; gap:12px; padding:12px 14px; background:#fff;
}
#lvxSec .mlx-dl{
  font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:#8A8272 !important; -webkit-text-fill-color:#8A8272 !important;
}
#lvxSec .mlx-dv{
  font-size:.88rem; overflow-wrap:anywhere;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
}
#lvxSec .mlx-body{
  margin:0 0 6px; padding:14px 16px; border-radius:14px; white-space:pre-line;
  background:#FBFAF8; border:1px solid #EFEAE0; font-size:.88rem; line-height:1.6;
  color:#3F4753 !important; -webkit-text-fill-color:#3F4753 !important;
}
#lvxSec .mlx-atts{ list-style:none; margin:0 0 6px; padding:0; display:grid; gap:7px; }
#lvxSec .mlx-atts li{
  padding:11px 14px; border-radius:12px; font-size:.86rem; font-weight:700;
  background:#fff; border:1px solid #EFEAE0;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
}
#lvxSec .mlx-acts{ display:flex; gap:10px; flex-wrap:wrap; margin:0 0 6px; }
#lvxSec .mlx-delbtn{
  color:#9A4A4A !important; -webkit-text-fill-color:#9A4A4A !important;
  border-color:#E4C9C9 !important;
}
#lvxSec .mlx-delbtn:hover{ background:#FBF1F1 !important; }
#lvxSec .mlx-confirm{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:14px 0 6px;
  padding:14px 16px; border-radius:16px; background:#FBF1F1; border:1px solid #E4C9C9;
}
#lvxSec .mlx-confirm p{
  flex:1 1 200px; margin:0; font-size:.88rem; font-weight:700;
  color:#8A3A3A !important; -webkit-text-fill-color:#8A3A3A !important;
}
#lvxSec .mlx-danger{
  background:#9A4A4A !important; border-color:#9A4A4A !important;
  color:#fff !important; -webkit-text-fill-color:#fff !important;
}
#lvxSec .mlx-hint{
  margin:6px 0 0; font-size:.76rem; line-height:1.5;
  color:#8A8272 !important; -webkit-text-fill-color:#8A8272 !important;
}

/* ---- how to save emails --------------------------------------------------- */
#lvxSec .mlx-steps{ margin:0 0 16px; padding-left:22px; display:grid; gap:7px; }
#lvxSec .mlx-steps li{
  font-size:.88rem; line-height:1.55;
  color:#3F4753 !important; -webkit-text-fill-color:#3F4753 !important;
}
#lvxSec .mlx-provs{ display:grid; gap:10px; }
#lvxSec .mlx-prov{ background:#fff; border:1px solid #E4EAE0; border-radius:16px; overflow:hidden; }
#lvxSec .mlx-prov.is-open{ border-color:#D6E3EE; }
#lvxSec .mlx-prov-h{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; cursor:pointer; font:inherit; text-align:left;
  padding:15px 16px; min-height:52px; background:transparent; border:0;
}
#lvxSec .mlx-prov-h:hover{ background:#FBFAF8; }
#lvxSec .mlx-prov-h:focus-visible{ outline:3px solid #CF9E3F; outline-offset:-3px; }
#lvxSec .mlx-prov-n{
  font-family:'Playfair Display',Georgia,serif; font-size:.98rem; font-weight:700;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
}
#lvxSec .mlx-prov-x{
  font-size:.9rem;
  color:#8A8272 !important; -webkit-text-fill-color:#8A8272 !important;
}
#lvxSec .mlx-prov-b{ padding:0 16px 16px; }
#lvxSec .mlx-prov-l{
  margin:10px 0 3px; font-size:.66rem; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase;
  color:#8A8272 !important; -webkit-text-fill-color:#8A8272 !important;
}
#lvxSec .mlx-prov-t{
  margin:0; font-size:.86rem; line-height:1.55;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
}
#lvxSec .mlx-prov-s{
  margin:10px 0 0; padding:11px 14px; border-radius:12px;
  font-size:.82rem; font-weight:700; line-height:1.5;
  background:#FBF4E6; border:1px solid #EBDCBB;
  color:#8A6524 !important; -webkit-text-fill-color:#8A6524 !important;
}

/* ---- the forms ------------------------------------------------------------ */
#lvxSheet .mlx-body-wrap{ display:block; }
#lvxSheet .mlx-form{ display:grid; gap:2px; }
#lvxSheet .mlx-form .lvf-l{ margin-top:14px; }
#lvxSheet .mlx-form .lvf-l:first-of-type{ margin-top:0; }
#lvxSheet .mlx-req{ color:#9A4A4A !important; -webkit-text-fill-color:#9A4A4A !important; }
#lvxSheet .mlx-area{ min-height:84px; resize:vertical; font-family:inherit; }
#lvxSheet .mlx-hint{
  margin:5px 0 0; font-size:.75rem; line-height:1.5;
  color:#8A8272 !important; -webkit-text-fill-color:#8A8272 !important;
}
#lvxSheet .mlx-hint--foot{ margin-top:12px; }
#lvxSheet .mlx-foot{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; padding-top:16px;
  border-top:1px solid #EFEAE0;
}

@media (max-width:620px){
  #lvxSec .mlx-selects{ grid-template-columns:1fr; }
  #lvxSec .mlx-range{ grid-template-columns:1fr; }
  #lvxSec .mlx-find .lvf-btn{ flex:1 1 auto; }
  #lvxSec .mlx-bar .lvf-btn, #lvxSec .mlx-bar .mlx-how{ flex:1 1 auto; }
  #lvxSec .mlx-drow{ grid-template-columns:1fr; gap:3px; }
  #lvxSec .mlx-acts .lvf-btn{ flex:1 1 auto; }
  #lvxSheet .mlx-foot .lvf-btn{ flex:1 1 auto; }
}
@media (prefers-reduced-motion:reduce){
  #lvxSec .mlx-row{ transition:none; }
  #lvxSec .mlx-row:hover{ transform:none; }
}