/* ==========================================================================
   ClearMint Essentials — dc-exact app chrome
   Values verbatim from the design bundles ("ClearMint Dashboard.html" et al):
   white 224px sidebar (OVERVIEW/MONEY/PLANNING/MANAGE/SETTINGS), Pro card,
   serif Newsreader page title, pill topbar cluster, #fafbf9 canvas.
   Loads after lite.css and overrides the legacy dark shell.
   ========================================================================== */

/* ---------- sidebar ---------- */
.app .side.dcsb{
  width:224px;flex:0 0 auto;background:#ffffff;color:#475569;
  border-right:1px solid #e3eae4;padding:18px 12px;
  display:flex;flex-direction:column;gap:2px;
  position:sticky;top:0;height:100vh;overflow-y:auto;scrollbar-width:none;
}
.app .side.dcsb::-webkit-scrollbar{display:none}
.dcsb-brand{
  display:flex;align-items:center;gap:8px;font-weight:800;font-size:16px;
  color:#0f1f2e;letter-spacing:-.02em;padding:0 8px 14px;
}
.dcsb-brand img{width:24px;height:24px;object-fit:contain}
.dcsb-tag{
  font-size:9px;font-weight:700;color:#2a8862;background:#d9f2e2;
  padding:2px 6px;border-radius:999px;
}
.side.dcsb nav{display:flex;flex-direction:column;gap:2px;flex:0 0 auto;overflow:visible;padding:0;margin:0}
.dcsb-group{
  font-size:10.5px;font-weight:700;letter-spacing:.09em;color:#94a3b8;
  padding:12px 10px 4px;
}
.side.dcsb nav .dcsb-group:first-child{padding-top:6px}
.side.dcsb nav button.dcsb-item{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;
  color:#475569;font-weight:500;font-size:13.5px;background:none;border:0;
  cursor:pointer;text-align:left;width:100%;font-family:inherit;line-height:1.2;
}
.side.dcsb nav button.dcsb-item:hover{background:#f0f5f1;color:#0f1f2e}
.side.dcsb nav button.dcsb-item.on{
  background:linear-gradient(135deg,#3da77c,#2a8862);color:#fff;font-weight:600;
  box-shadow:0 6px 14px -8px rgba(42,136,98,.6);
}
.side.dcsb nav button.dcsb-item svg{flex:0 0 auto}
@media(prefers-reduced-motion:no-preference){
  .side.dcsb nav button.dcsb-item{transition:background .18s ease,color .18s ease,box-shadow .18s ease}
}

/* Pro upsell card */
.dcsb-pro{
  margin-top:auto;position:relative;display:flex;flex-direction:column;gap:7px;
  background:linear-gradient(160deg,#f4faf5,#e3f2e8);border:1px solid #cfe6d6;
  border-radius:14px;padding:13px 14px;color:#0f1f2e;overflow:hidden;
  cursor:pointer;text-align:left;font-family:inherit;
}
.dcsb-pro:hover{border-color:#8ad6a8}
.dcsb-pro-phone{position:absolute;right:-16px;bottom:-20px;width:92px;height:auto;opacity:.92;pointer-events:none}
.dcsb-pro-chip{
  align-self:flex-start;display:inline-flex;align-items:center;gap:5px;
  font-size:10px;font-weight:800;color:#206a4d;background:#fff;
  border:1px solid #bfe3cd;border-radius:999px;padding:3px 9px;
}
.dcsb-pro-title{font-size:12.5px;font-weight:800;letter-spacing:-.01em;line-height:1.35;max-width:118px}
.dcsb-pro-sub{font-size:10.5px;color:#64748b;line-height:1.5;max-width:112px}
.dcsb-pro-cta{
  align-self:flex-start;font-size:11px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#3da77c,#2a8862);border-radius:999px;
  padding:6px 13px;box-shadow:0 5px 12px -7px rgba(42,136,98,.7);
}
.dcsb-pro-note{font-size:9.5px;color:#94a3b8}
.dcsb-foot{
  padding:12px 10px 2px;border-top:1px solid #eef3ef;margin-top:10px;
  font-size:12px;color:#94a3b8;
}
.side.dcsb .dcsb-foot{flex:0 0 auto}

/* ---------- topbar ---------- */
.dcmain{background:#fafbf9}
.dcmain .topbar.dctb{
  display:flex;align-items:center;gap:12px;padding:14px 28px;
  border-bottom:1px solid #e3eae4;background:rgba(250,251,249,.9);
  backdrop-filter:blur(6px);position:sticky;top:0;z-index:40;
}
.dctb-title{
  margin:0;font-family:'Newsreader',Georgia,serif;font-size:24px;font-weight:600;
  color:#0f1f2e;letter-spacing:-.01em;
}
.dctb-pill{
  display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
  color:#475569;background:#fff;border:1px solid #e3eae4;border-radius:999px;
  padding:6px 13px;cursor:pointer;font-family:inherit;
}
.dctb-pill:hover{border-color:#cfe6d6;color:#0f1f2e}
.dctb-pill.on{color:#b9863b;background:#fdf6ec;border-color:#ecd9b9}
.dctb-btn{
  display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
  color:#1a2c3d;background:#fff;border:1px solid #cdd8cf;border-radius:8px;
  padding:7px 13px;cursor:pointer;font-family:inherit;
}
.dctb-btn:hover{border-color:#8ad6a8;background:#f0faf4}
.dctb-ask{
  display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;
  color:#fff;background:linear-gradient(135deg,#3da77c,#2a8862);border:0;
  border-radius:999px;padding:8px 16px;cursor:pointer;font-family:inherit;
  box-shadow:0 6px 14px -8px rgba(42,136,98,.7);
}
.dctb-scope{
  font-size:12.5px;font-weight:600;color:#1a2c3d;background:#fff;
  border:1px solid #e3eae4;border-radius:8px;padding:7px 10px;
  font-family:inherit;cursor:pointer;max-width:188px;
}
.dctb-live{
  display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;
  letter-spacing:.02em;color:#16a34a;background:rgba(22,163,74,.08);
  border:1px solid rgba(22,163,74,.22);border-radius:999px;padding:6px 14px;
}
.dctb-live .dot{width:11px;height:11px;border-radius:50%;background:#16a34a;flex:0 0 auto}
.dctb-live .dot.pulse{animation:cme-live-pulse 1.5s ease-out infinite}
.dctb-live.off{color:#64748b;background:#f6f8f5;border-color:#e3eae4}
.dctb-live.off .dot{background:#94a3b8}
.dctb-live.err{color:#b9863b;background:#fdf6ec;border-color:#ecd9b9}
.dctb-live.err .dot{background:#d9a441}
@keyframes cme-live-pulse{
  0%{box-shadow:0 0 0 0 rgba(22,163,74,.55);opacity:1}
  70%{box-shadow:0 0 0 9px rgba(22,163,74,0);opacity:.85}
  100%{box-shadow:0 0 0 0 rgba(22,163,74,0);opacity:1}
}
@media(prefers-reduced-motion:reduce){.dctb-live .dot.pulse{animation:none}}

/* content canvas per bundle main column */
.dcmain .content{background:#fafbf9;padding:28px 32px 48px}

/* mobile: keep the slide-in drawer behavior from lite.css */
@media(max-width:900px){
  .app .side.dcsb{position:fixed;left:0;top:0;bottom:0;z-index:80;transform:translateX(-100%);transition:transform .2s ease;height:100dvh}
  .app .side.dcsb.open{transform:translateX(0);box-shadow:0 0 40px rgba(15,31,46,.25)}
  .dctb-title{font-size:20px}
  .dctb-scope{display:none}
  .dctb-btn{display:none}
}

/* Canvas color — defeat lite.css theme-alt gray/dark content rules
   (.main.theme-alt .content{--side-gray} and the :has(.side) dark variant).
   The bundles' canvas is plain paper #fafbf9 everywhere. */
.app .main.theme-alt.dcmain .content,
.app:has(.side) .main.theme-alt.dcmain .content{background:#fafbf9}
.app .main.theme-alt.dcmain .topbar.dctb,
.app:has(.side) .main.theme-alt.dcmain .topbar.dctb{background:rgba(250,251,249,.9)}