.main-content{flex:1;min-width:0;}

/* TOP TASK PANELS */
.top-task-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:10px;}

/* RING STACK + PIE */
.ringstack{display:flex;flex-direction:column;gap:12px;width:200px;flex-shrink:0;position:sticky;top:16px;}
.rr-card { background: var(--card); border-radius: 12px; padding: 16px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; border: 1px solid var(--border); transition: border-color 0.2s; }
.rr-card:hover { border-color: var(--border2); }
/* Removed glow */
/* Removed glow */
/* Removed glow */
/* Removed glow */
/* Calm hover motion (POS Design Bible 07-Interactions): 150ms cubic-bezier(0.16,1,0.3,1),
   small translateY/scale, no springy overshoot. Was scale(1.12) on a bouncy (.34,1.56,.64,1)
   curve plus a hover font-size jump on .rr-inner — both replaced with a small, quiet lift. */
.rr-ring{width:100px;height:100px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform 150ms cubic-bezier(0.16,1,0.3,1);}
.rr-card:hover .rr-ring{transform:scale(1.06);}
.rr-inner{width:74px;height:74px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;}
.rr-label{font-size:13px;color:var(--muted);text-align:center;font-weight:500;}
.rr-streak { background: var(--card); border-radius: 12px; padding: 20px 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; border: 1px solid var(--border); }
.rr-streak:hover { border-color: var(--border2); }
.streak-val{font-size:42px;font-weight:800;line-height:1;letter-spacing:-1px;font-family:'Geist Mono',monospace;}
.streak-fire{font-size:26px;margin-bottom:0;}
.streak-unit{font-size:13px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em;}
.streak-action{font-size:11px;padding:3px 9px;border-radius:5px;margin-top:3px;border:none;background:none;transition:all .15s;}
.streak-reset{color:var(--c-red);opacity:.4;}.streak-reset:hover{opacity:1;background:rgba(248,113,113,.1);}
.streak-start{color:var(--muted);border:1px dashed var(--border2)!important;}.streak-start:hover{color:var(--c-teal);border-color:var(--c-teal)!important;}
.ring-divider{width:60px;height:1px;background:linear-gradient(90deg,transparent,var(--border2),transparent);margin:4px auto;}


.pie-sidebar { background: var(--card); border-radius: 12px; padding: 16px; border: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pie-sidebar h3{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600;}
.pie-legend-side{display:flex;flex-direction:column;gap:3px;width:100%;}
.pie-legend-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text2);}
.pie-legend-dot{width:8px;height:8px;border-radius:3px;flex-shrink:0;}


/* TAB NAVIGATION */
.tab-bar{display:flex;gap:4px;margin:12px 0;background:var(--bg2);border-radius:12px;padding:4px;}
.tab-btn{flex:1;padding:10px 16px;border:none;background:none;border-radius:10px;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .2s;}
.tab-btn.active{background:var(--c-green);color:#fff;box-shadow:0 2px 8px rgba(93,170,122,.3);}
.tab-btn:not(.active):hover{background:var(--glass-hover);}
/* STREAK PANEL */
.streak-panel{display:flex;gap:10px;padding:12px;margin-bottom:12px;align-items:stretch;flex-wrap:wrap;}
/* Was scale(1.1) on the bouncy curve plus a dual green glow shadow — this is a daily-use data
   card (sober/smoke-free counters), not a one-off celebration, so it gets the same calm hover
   treatment as .rr-card/.target-pill instead of Trophy-Cabinet-style richness. */
.streak-card{border-radius:14px;background:var(--card);border:1px solid var(--border);padding:16px 12px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:120px;flex-shrink:0;transition:transform 150ms cubic-bezier(0.16,1,0.3,1),border-color 150ms cubic-bezier(0.16,1,0.3,1);}.streak-card:hover{transform:translateY(-3px);border-color:var(--border2);z-index:2;}
.streak-card .streak-fire{font-size:22px;}
.streak-card .streak-val{font-size:38px;font-weight:800;line-height:1;letter-spacing:-1px;}
.streak-card .streak-unit{font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em;}
.streak-card .streak-action{font-size:9px;padding:2px 6px;border-radius:4px;margin-top:4px;border:none;background:none;cursor:pointer;}
.streak-reset{color:var(--c-red);opacity:.4;}.streak-reset:hover{opacity:1;background:rgba(248,113,113,.1);}
/* Single row, max 6 cards (renderStreaks() caps the item count) — grid-auto-flow:column with no
   explicit grid-template-columns means each card gets its own auto-generated column instead of
   wrapping to a second row, and the columns divide the available width evenly regardless of how
   many of the 6 slots are actually filled. Old .target-pill rules kept below (still used by the
   dormant Manage-view overflow list) but no longer the primary rendering. Achieved
   (.tcard-achieved) and running (.tcard) cards share this one row — align-items:start keeps each
   card at its own natural height instead of the default stretch forcing every card in the row to
   match the tallest one. */
.target-grid{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(130px,1fr);gap:10px;min-width:0;width:100%;align-items:start;}
.target-pill { border-radius: 12px; background: var(--card); border: 1px solid var(--border); padding: 16px; display: flex; align-items: center; justify-content: space-between; position: relative; min-height: 76px; overflow: hidden; }.target-pill:hover { border-color: var(--border2); }

/* PORTRAIT TARGET CARDS */
.tcard{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px 16px 16px;display:flex;flex-direction:column;gap:10px;transition:border-color 150ms cubic-bezier(0.16,1,0.3,1);}
.tcard:hover{border-color:var(--border2);}
.tcard-cat{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:3px 7px;border-radius:5px;align-self:flex-start;}
.tcard-name{font-size:13px;font-weight:600;color:var(--text);line-height:1.35;flex:1;}
.tcard-pct-row{display:flex;align-items:baseline;gap:2px;}
.tcard-pct{font-size:30px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;font-family:'Geist Mono',monospace;}
.tcard-pct-sign{font-size:14px;font-weight:700;color:var(--muted);}
.tcard-track{height:5px;background:var(--border);border-radius:3px;overflow:hidden;}
.tcard-fill{height:100%;border-radius:3px;transition:width .3s;}
.tcard-meta{font-size:10px;color:var(--muted2);display:flex;justify-content:space-between;font-variant-numeric:tabular-nums;}
.tcard-actions{display:flex;gap:6px;margin-top:2px;}
.tcard-actions .target-pill-btn{flex:1;text-align:center;}
.target-pill-name{font-size:14px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word;line-height:1.2;}
.target-pill-cat{font-size:10px;padding:2px 6px;border-radius:4px;display:inline-block;}
.target-pill-pct{font-size:22px;font-weight:700;}
.target-pill-btn{font-size:10px;padding:3px 8px;border-radius:4px;border:1px solid var(--border);background:none;color:var(--text2);cursor:pointer;transition:all .12s;}.target-pill-btn:hover{border-color:var(--c-teal);color:var(--c-teal);}
/* ACHIEVED PORTRAIT CARDS — vivid, full-opacity solid pastel backgrounds (fintech-dashboard
   reference), replacing the old washed .achieve-tile pill/tint treatment. Reuses .tcard's
   layout (same border-radius, gap, flex column) but taller padding and no border, so achieved
   status reads as a deliberate step up rather than a dimmer variant of the running cards. */
.tcard{min-height:198px;}
.tcard-achieved{border:none;padding:24px 16px 20px;color:#1a1a18;position:relative;overflow:hidden;transition:transform 150ms cubic-bezier(0.16,1,0.3,1);}
/* .tcard.tcard-achieved (specificity 0,2,0) beats the plain .tcard min-height above regardless
   of source order — a lone .tcard-achieved{min-height} rule here would tie with .tcard's and
   lose to whichever is declared later, silently making achieved cards the same height as
   running ones instead of "slightly taller" as required. */
.tcard.tcard-achieved{min-height:238px;}
.tcard-achieved:hover{transform:translateY(-3px);}
.tcard-achieved .tcard-cat{background:rgba(0,0,0,.12);color:#1a1a18;}
.tcard-achieved .tcard-name{color:#1a1a18;}
.tcard-achieved .at-trophy{font-size:32px;line-height:1;margin-top:4px;}
.tcard-achieved .at-date{font-size:11px;font-weight:600;color:rgba(26,26,24,.62);margin-top:auto;}
@keyframes achievePop{0%{transform:scale(0) rotate(-8deg);opacity:0;}60%{transform:scale(1.05) rotate(2deg);opacity:1;}80%{transform:scale(.98) rotate(-1deg);}100%{transform:scale(1) rotate(0);}}
@keyframes achieveAlive{0%,100%{transform:translateY(0);}50%{transform:translateY(-2px);}}
.tcard-achieved.fresh{animation:achievePop .5s cubic-bezier(.34,1.56,.64,1) both;}
.achieve-alive{animation:achieveAlive 2.5s ease-in-out infinite;}
.target-overflow{margin-top:4px;}
.target-overflow-row{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:8px 12px;margin-bottom:4px;}
.target-overflow-row summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none;font-size:12px;}
.target-overflow-row summary::-webkit-details-marker{display:none;}
.target-overflow-actions{margin-top:8px;padding-top:8px;border-top:1px solid var(--border);display:flex;gap:6px;align-items:center;}
/* TAB CONTENT */
.tab-content{display:none;}
.tab-content.active{display:block;}

/* SECTION LABELS */
.section-label { font-size: 14px; letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; margin: 32px 0 16px; font-weight: 700; border-bottom: 1px solid var(--border); padding-bottom: 8px; }

.view-content{display:none;}.view-content.active{display:block;}
/* REMINDERS SECTION */
.reminders-section{margin-top:12px;padding:12px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;opacity:.85;}
.reminders-header{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:6px;}
.reminders-header::before{content:'';display:block;width:3px;height:12px;background:var(--c-blue);border-radius:2px;flex-shrink:0;}
/* Upcoming Tasks is now a <details>, closed by default — hide the native marker, add a plain
   chevron that flips open so it still reads as expandable. */
summary.reminders-header::-webkit-details-marker{display:none;}
summary.reminders-header::after{content:'▸';margin-left:auto;font-size:10px;color:var(--muted2);}
details[open]>summary.reminders-header::after{content:'▾';}
.reminders-section .trow{opacity:.8;font-size:13px;}
/* MANAGE VIEW */
@media (max-width: 600px) {
  html, body { overflow-x: hidden !important; width: 100%; max-width: 100vw; }
}
/* MINTLIFY / POS DESIGN BIBLE GRID SYSTEM */
.app-container {
  display: flex;
  min-height: 100vh;
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.sidebar-nav {
  display: none;
}
.main-workspace {
  flex: 1;
  padding: 16px;
  max-width: 100%;
}

@media (min-width: 1024px) {
  .app-container {
    display: grid;
    grid-template-columns: 240px 1fr 300px;
    gap: 32px;
    padding: 0 32px;
    max-width: 1600px;
    margin: 0 auto;
  }
  .sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 32px;
    height: calc(100vh - 64px);
    border-right: 1px solid var(--border);
    padding-right: 24px;
  }
  .main-workspace {
    padding: 32px 0;
  }
  .view-nav { display: none !important; }
}

/* AI CHAT OVERLAY (PHASE 2 PREP) */
.ai-overlay {
  position: fixed;
  top: 76px;
  right: -360px;
  width: 100%;
  max-width: 360px;
  height: calc(100vh - 76px);
  background: var(--bg);
  border-left: 1px solid var(--border);
  z-index: 60;
  transition: right 300ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: -8px 0 24px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
}

body.ai-open .ai-overlay {
  right: 0;
}

/* Wide screen left shift physics */
@media (min-width: 1024px) {
  body.ai-open .app-container {
    transform: translateX(-240px);
  }
}

.ai-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  background: var(--c-green);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 212, 164, 0.3);
  cursor: pointer;
  z-index: 50;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  border: none;
}
.ai-fab:hover {
  transform: scale(1.06);
}
.ai-fab:active {
  transform: scale(0.96);
}
body.ai-open .ai-fab {
  display: none;
}

.ai-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ai-title {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ai-close {
  background: var(--bg2);
  border: 1px solid var(--border);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--muted);
}
.ai-close:hover {
  background: var(--card2);
  color: var(--text);
}



.ai-msg {
  padding: 10px 14px;
  border-radius: 12px;
  max-width: 85%;
  font-size: 14px;
  line-height: 1.5;
}
.ai-msg-system {
  background: rgba(148, 163, 184, 0.1);
  color: var(--muted);
  align-self: center;
  text-align: center;
  font-size: 13px;
}
.ai-msg-user {
  background: rgba(0, 212, 164, 0.15);
  color: var(--text);
  align-self: flex-end;
  border-bottom-right-radius: 2px;
  border: 1px solid rgba(0, 212, 164, 0.3);
}
.ai-msg-ai {
  background: var(--bg2);
  color: var(--text);
  align-self: flex-start;
  border-bottom-left-radius: 2px;
  border: 1px solid var(--border);
}
.ai-msg-ai p { margin: 0 0 8px 0; }
.ai-msg-ai p:last-child { margin: 0; }
.ai-msg-ai ul, .ai-msg-ai ol { margin: 0 0 8px 0; padding-left: 20px; }
.ai-msg-ai li { margin-bottom: 4px; }
.ai-msg-ai strong { font-weight: 600; color: var(--c-green); }