.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;}

/* The 4-ring stat column (.ringstack/.rr-card/.rr-ring/.rr-inner/.rr-label/.rr-meta*/.rr-dot*) was
   removed 2026-07-20 (round 3) on both tabs, replaced by plain number+label chips in the shared
   header bar — see .kpi-chip below and kpiChip()/renderTaskRings()/renderChecklistRings() in
   js/ui/tables.js. .rr-sub and .rr-streak are UNRELATED (Targets/streak cards) and stay. */
.rr-sub{font-size:12px;font-weight:600;color:var(--text2);margin-top:-2px;}
.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;}
.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 — both states get the same pill shape/border so the pair reads as a single
   two-way switcher, not a button sitting next to a stray label. Only fill/weight differ. */
/* Segmented control. The active tab was a saturated green fill with a coloured glow while the
   inactive one sat on the page background — so one tab shouted and the other nearly vanished,
   even though they're peers you switch between constantly. Now both read as tabs: the active one
   is distinguished by surface + text contrast (matching .view-btn's pill treatment), not colour.
   Selection state is not a status; it doesn't need a semantic colour. */
/* HEADER BAR (2026-07-20, round 3) — replaces the old full-width two-button tab-bar. Compact,
   colored pill toggle (Tasks=blue, Checklist=green) so it reads as a small control, not a second
   nav row; sits next to the readable KPI numbers and the inline Add button. See
   kpiChip()/renderTaskRings()/renderChecklistRings() (js/ui/tables.js) and switchTab()
   (js/ui/navigation.js). */
.hdr-kpi-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:12px 0 16px;padding-bottom:16px;border-bottom:1px solid var(--border);}
.kpi-row{display:flex;gap:10px;flex-wrap:wrap;}
/* 2026-07-20 (round 4): chips now sit in their own small colored pill/box instead of floating
   raw numbers directly on the page background — plain text with nothing framing it read as
   unfinished. Tinted per active tab (blue for Tasks, green for Checklist, set via the
   kpi-row-tasks/kpi-row-checklist class toggled in renderTaskRings()/renderChecklistRings(),
   js/ui/tables.js) so the chips visually agree with the toggle's own color-coding. */
.kpi-chip{display:flex;flex-direction:column;align-items:flex-start;background:var(--card2);border:1px solid var(--border);border-radius:10px;padding:8px 14px;}
.kpi-chip-val{font-size:20px;font-weight:700;color:var(--text);line-height:1;font-variant-numeric:tabular-nums;}
.kpi-chip-label{font-size:10.5px;color:var(--muted);margin-top:4px;white-space:nowrap;text-transform:uppercase;letter-spacing:.03em;}
.kpi-row-tasks .kpi-chip{background:rgba(74,154,245,.09);border-color:rgba(74,154,245,.28);}
.kpi-row-checklist .kpi-chip{background:rgba(93,170,122,.09);border-color:rgba(93,170,122,.28);}
.hdr-kpi-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.tab-bar{display:flex;gap:2px;background:var(--card2);border:1px solid var(--border);border-radius:999px;padding:3px;flex-shrink:0;}
.tab-btn{flex:none;padding:8px 16px;border:none;background:transparent;border-radius:999px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;transition:background 150ms cubic-bezier(0.16,1,0.3,1),color 150ms cubic-bezier(0.16,1,0.3,1);}
.tab-btn:not(.active):hover{color:var(--text);}
#tabBtnTasks.active{background:var(--c-blue);color:#fff;}
#tabBtnChecklist.active{background:var(--c-green);color:#fff;}
.header-add-btn{padding:9px 18px;border-radius:999px;border:none;background:var(--text);color:var(--bg);font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;transition:opacity 150ms;}
.header-add-btn:hover{opacity:.85;}
@media(max-width:600px){.hdr-kpi-bar{flex-direction:column;align-items:stretch;}.hdr-kpi-actions{justify-content:space-between;}}
/* STREAK PANEL */
/* TARGETS SHELL — a recessed --panel box (see main.css) around the whole Targets area, so it
   reads as one clearly-bounded section, not just a title floating over cards. .today-panel
   (ui/tables.css) uses the same --panel tone for the Tasks area below, so the two sections
   share one calm "shell" language while still being visibly separated by the margin between
   them (rather than needing different colors to tell them apart, which would look arbitrary). */
/* 2026-07-20: reverted to borderless — the boxed .targets-shell (background+border+padding)
   made Targets read as caged off from the rest of the page instead of sitting on it like every
   other section. Kept as a plain spacing wrapper only; no visual container any more. */
.targets-shell{margin-bottom:22px;}
.targets-shell .streak-panel{margin-bottom:0;}
.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;}
.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 — solid muted fills (see MUTED_TROPHY in js/ui/tables.js). These were
   vivid full-saturation pastels; toned down so an achieved card still reads as a step up from a
   running one without dominating the page. Reuses .tcard's layout (same radius, gap, flex
   column) with taller padding and no border. */
.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;}
/* The idle "achieve-alive" bounce (a random trophy nudged every 45s) is gone — motion with no
   cause behind it is decoration, and it moved in the corner of your eye while you were reading
   a task. The one-off pop when a target is actually achieved stays: that has a cause. */
@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);}}
.tcard-achieved.fresh{animation:achievePop .5s cubic-bezier(.34,1.56,.64,1) both;}
.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;}
/* The separate Reminders card/section is gone (2026-07-19) — a task with a bell now shows
   inline wherever its date already places it (Today/Tomorrow/Calendar/No Date), same as any
   other task; the bell icon is the only remaining reminder-specific cue. See
   DESIGN-INSIGHTS-THEME.md and CHANGELOG. reminderRow()/.rrow* (css/tables.css) were removed
   2026-07-20 once the Calendar's day-detail view switched to the shared taskCardHtml() (.daycard)
   so its tasks match Today/Tomorrow's size and are click-to-edit the same way. */
/* MANAGE VIEW */
@media (max-width: 600px) {
  html, body { overflow-x: hidden !important; width: 100%; max-width: 100vw; }
}