/* Today Command Center — feed + detail (ported from the prototype; uses --gs-* tokens with fallbacks).
   Loaded app-wide via `stylesheet_link_tag :app`; every rule is namespaced `.cc-`. */

/* Typography comes from the app's gs-* type classes (gs-page-title, gs-heading-lg,
   gs-body, gs-body-small, gs-group-label) applied in the markup — cc rules only add
   layout (margins/padding) and branded accents, never font family/size/weight,
   so the feed reads exactly like the rest of the app. */
.cc-feed, .cc-detail { font-family:var(--font-body, 'DM Sans', -apple-system, sans-serif); }

.cc-feed { display:flex; flex-direction:column; flex:1; min-height:0; }
.cc-greet { padding:12px 20px 2px; }
.cc-greet .cc-ctx { color:var(--gs-coral-deep,#D94045); }
.cc-greet h1 { margin-top:6px; }
.cc-meta { margin-top:4px; }
.cc-meta b { color:var(--gs-coral-deep,#D94045); }
.cc-pbar { height:4px; margin-top:10px; border-radius:4px; background:var(--gs-border,#E7E0DA); overflow:hidden; }
.cc-pfill { display:block; height:100%; width:0; border-radius:4px; background:var(--gs-coral,#EF5350); transition:width .2s ease-out; }

.cc-stage { flex:1; min-height:0; overflow-y:auto; scroll-behavior:smooth; scrollbar-width:none; overscroll-behavior:none; -webkit-overflow-scrolling:touch; }
.cc-stage::-webkit-scrollbar { display:none; }
.cc-idea { display:flex; flex-direction:column; padding:4px 0 20px; animation:cc-card-in .45s cubic-bezier(.2,.7,.2,1) both; }
@keyframes cc-card-in { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
.cc-ilabel { margin:0 16px 8px; }
.cc-card { display:flex; flex-direction:column; flex:1; min-height:0; background:var(--gs-card,#fff); box-shadow:0 8px 22px rgba(28,25,23,.06); overflow:hidden; text-decoration:none; color:inherit; touch-action:manipulation; -webkit-user-select:none; user-select:none; transition:transform .2s; }
.cc-card:active { transform:scale(.975); }
.cc-illo { flex:0 0 auto; height:min(34vh, 230px); position:relative; display:flex; align-items:center; justify-content:center; }
.cc-pill { position:absolute; top:14px; left:14px; background:rgba(255,255,255,.92); font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:6px 11px; border-radius:20px; color:var(--gs-text-secondary,#57534E); }
.cc-cbody { flex:1; padding:34px 16px 16px; }
/* Feed-tile CTA: a coral button straddling the illustration's bottom edge —
   the "action on the image" affordance; the enclosing card link owns the tap. */
.cc-tilecta { position:absolute; left:16px; right:16px; bottom:0; transform:translateY(50%); z-index:2;
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--gs-coral,#EF5350); color:#fff; font-size:var(--gs-type-body-small-size,14px);
  line-height:var(--gs-type-body-small-line,20px); font-weight:600; padding:13px; border-radius:16px;
  box-shadow:0 10px 22px rgba(239,83,80,.28); }
.cc-eyebrow { font-size:11px; font-weight:600; color:var(--gs-coral-deep,#D94045); margin-bottom:6px; }
.cc-body { margin-top:14px; }
.cc-points { margin-top:14px; list-style:none; padding:0; }
.cc-points li { position:relative; padding:4px 0 4px 26px; }
.cc-points li::before { content:"✓"; position:absolute; left:0; font-weight:800; color:var(--gs-coral,#EF5350); }
.cc-points--neutral li::before { content:"•"; color:var(--gs-text-secondary,#57534E); }

/* Fixtures & history (2026-07-24): pinned badge, end-of-deck tools, customize + history pages. */
/* Top-right: the tile CTA straddles the illustration's bottom edge, so the
   bottom corners are spoken for; the pill owns top-left. */
.cc-pinbadge { position:absolute; top:14px; right:14px; background:rgba(255,255,255,.92); font-size:10px; font-weight:700; letter-spacing:.04em; padding:5px 10px; border-radius:20px; color:var(--gs-text-secondary,#57534E); }
/* Feed tools: the past-picks panel (pinning lives on card detail pages).
   Open, the panel spans the full stage so past tiles mirror the feed layout. */
.cc-feedtools { margin-top:28px; display:flex; justify-content:center; width:min(100%, 340px); }
.cc-feedtools:has(details[open]) { width:100%; }
.cc-feedtool { display:flex; flex-direction:column; align-items:center; gap:2px; text-decoration:none; width:100%; border:1px solid var(--gs-border,#E7E0DA); border-radius:16px; background:var(--gs-warm-cream,#FFFAF7); }
.cc-ft-icon { font-size:20px; line-height:1.2; }
.cc-ft-title { font-size:13.5px; font-weight:700; color:var(--gs-text-primary,#1C1917); margin-top:4px; }
.cc-ft-sub { font-size:11px; color:var(--gs-text-secondary,#57534E); }
.cc-history { padding:20px 16px 40px; max-width:520px; margin:0 auto; }
/* Inline past-picks: the history mini-card is a <details>; open, it spans the
   tools grid and the lazy frame appends pages below via Show more. */
.cc-feedtool--hist { padding:0; }
.cc-ft-summary { list-style:none; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px; padding:14px 10px 12px; }
.cc-ft-summary::-webkit-details-marker { display:none; }
/* Open, the panel sheds its card chrome entirely — past tiles continue the
   feed end-to-end; only the summary keeps its pill look as a header. */
.cc-feedtool--hist[open] { border:0; border-radius:0; background:transparent; }
.cc-feedtool--hist[open] .cc-ft-summary { border:1px solid var(--gs-border,#E7E0DA); border-radius:16px; background:var(--gs-warm-cream,#FFFAF7); width:min(100%, 340px); margin:0 auto; }
/* Zero side padding: tiles run edge-to-edge like the feed. Bottom clearance
   matches the fixed bottom nav so Show-more never hides behind the tab bar. */
.cc-hist-inline { display:block; padding:4px 0 calc(92px + env(safe-area-inset-bottom)); text-align:left; }
.cc-hist-loading { padding:12px 0; color:var(--gs-text-muted,#A8A29E); text-align:center; }
.cc-hist-more { display:flex; justify-content:center; margin-top:16px; }

/* Pin-from-detail: slot chips on the card page; the active chip toggles off. */
.cc-pinrow { margin-top:14px; }
.cc-pinrow-label { display:block; font-size:12.5px; font-weight:700; color:var(--gs-text-secondary,#57534E); margin-bottom:8px; }
.cc-pinchips { display:flex; gap:8px; flex-wrap:wrap; }
.cc-pinchip { font-size:12.5px; font-weight:600; padding:8px 14px; border-radius:16px; border:1px solid var(--gs-border,#E7E0DA); background:var(--gs-card,#fff); color:var(--gs-text-secondary,#57534E); cursor:pointer; }
.cc-pinchip--on { border-color:var(--gs-coral,#EF5350); color:var(--gs-coral-deep,#D94045); background:var(--gs-warm-cream,#FFFAF7); }

.cc-hist-tabs { display:flex; gap:8px; margin-top:14px; }
.cc-tab { font-size:13px; font-weight:600; padding:7px 14px; border-radius:18px; border:1px solid var(--gs-border,#E7E0DA); color:var(--gs-text-secondary,#57534E); text-decoration:none; }
.cc-tab--on { border-color:var(--gs-coral,#EF5350); color:var(--gs-coral-deep,#D94045); }
/* Headers/tabs keep the feed's inset (like .cc-ilabel); tiles themselves are
   full-bleed cc-cards, identical to the feed layout. */
.cc-hist-day { margin:22px 16px 6px; }
.cc-hist-tabs { padding:0 16px; }
.cc-hist-empty { padding:0 16px; }
.cc-hidea { padding:6px 0 16px; }
.cc-hist-empty { margin-top:18px; color:var(--gs-text-secondary,#57534E); }
.cc-hist-pager { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:22px; }
.cc-cbody h3 .hl, .cc-dbody h2 .hl { color:var(--gs-coral-deep,#D94045); }
.cc-hook { margin-top:8px; }
/* CTA renders Gs::ButtonComponent (primary/default); the wrapper adds only the
   feed-specific inset + coral glow the design system button doesn't carry. */
.cc-cta-wrap { margin:12px 16px 0; }
.cc-cta-glow { box-shadow:0 10px 22px rgba(239,83,80,.28); }

/* Illustration band: default gradient + soft flat-vector art (prototype library).
   Per-key gradients set --cc-illo-bg on the `.cc-illo-<key>` wrapper. */
.cc-illo, .cc-detail .cc-dhero { background:var(--cc-illo-bg, linear-gradient(155deg,#EAF1FC,#CFE0F4)); }
.cc-illo::before, .cc-dhero::before { content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 28% 18%,rgba(255,255,255,.55),transparent 55%),radial-gradient(90% 80% at 84% 92%,rgba(28,25,23,.06),transparent 55%); pointer-events:none; z-index:0; }
.cc-illo svg { width:162px; height:162px; filter:drop-shadow(0 8px 12px rgba(28,25,23,.09)); position:relative; z-index:1; }
.cc-dhero svg { width:170px; height:170px; filter:drop-shadow(0 10px 14px rgba(28,25,23,.11)); position:relative; z-index:1; }

.cc-illo-microbe, .cc-illo-brain, .cc-illo-drop, .cc-illo-quiz, .cc-illo-chat { --cc-illo-bg:linear-gradient(155deg,#EAF1FC,#CFE0F4); }
.cc-illo-chart, .cc-illo-sunrise { --cc-illo-bg:linear-gradient(155deg,#FDEEE9,#F8DCD3); }
.cc-illo-habits, .cc-illo-plate, .cc-illo-walk, .cc-illo-community { --cc-illo-bg:linear-gradient(155deg,#EEF6EE,#D7EBD8); }
.cc-illo-target, .cc-illo-meditate { --cc-illo-bg:linear-gradient(155deg,#FFF3E0,#FBDFBC); }
.cc-illo-clock, .cc-illo-doc, .cc-illo-plan, .cc-illo-research, .cc-illo-moon { --cc-illo-bg:linear-gradient(155deg,#F0EBF7,#E0D3F0); }
.cc-illo-clinical, .cc-illo-myth { --cc-illo-bg:linear-gradient(155deg,#FDECEC,#F6C9C9); }
.cc-illo-plant, .cc-illo-challenge { --cc-illo-bg:linear-gradient(155deg,#FBF3E0,#F4E2B8); }

.cc-done { min-height:100%; align-items:center; justify-content:center; text-align:center; }
.cc-donecheck { width:74px; height:74px; border-radius:50%; background:var(--gs-coral,#EF5350); color:#fff; display:flex; align-items:center; justify-content:center; font-size:38px; box-shadow:0 10px 26px rgba(239,83,80,.35); }
.cc-done h3 { margin-top:10px; }
.cc-dsub { margin-top:4px; }
.cc-streak { font-weight:800; color:var(--gs-coral,#EF5350); white-space:nowrap; }
.cc-nextup { margin-top:20px; background:var(--gs-warm-cream,#FFFAF7); border:1px solid var(--gs-border,#E7E0DA); border-radius:16px; padding:12px 16px; max-width:280px; }
.cc-nl { font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--gs-coral-deep,#D94045); margin-bottom:5px; }
.cc-nt { font-size:12.5px; color:var(--gs-text-secondary,#57534E); line-height:1.5; }

/* detail — scrolls inside the viewport-locked main (sticky CTA sticks to its bottom) */
.cc-detail { display:flex; flex-direction:column; flex:1; min-height:0; overflow-y:auto; }
.cc-dhero { height:236px; position:relative; border-radius:0 0 34px 34px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.cc-dbody { padding:20px 22px 0; }
.cc-why { margin-top:18px; background:var(--gs-coral-glow,rgba(239,83,80,.07)); border-left:3px solid var(--gs-coral,#EF5350); border-radius:0 12px 12px 0; padding:12px 14px; }
.cc-wh { display:block; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--gs-coral-deep,#D94045); margin-bottom:8px; }
.cc-chip { display:inline-block; font-size:10.5px; font-weight:600; padding:3px 9px; border-radius:16px; background:var(--gs-card,#fff); color:var(--gs-coral-deep,#D94045); border:1px solid #F6D9D2; margin:0 4px 4px 0; }
.cc-src { margin-top:18px; font-size:11.5px; color:var(--gs-text-muted,#A8A29E); }
.cc-sourcetag { font-weight:700; color:var(--gs-coral-deep,#D94045); }
.cc-premnote { margin-top:12px; font-size:12px; color:var(--gs-text-secondary,#57534E); background:var(--gs-warm-cream,#FFFAF7); border:1px solid var(--gs-border,#E7E0DA); border-radius:12px; padding:10px 12px; }
.cc-share { position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%; border:0; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; font-size:15px; color:var(--gs-text-secondary,#57534E); cursor:pointer; z-index:1; }
.cc-share.cc-share-copied::after { content:"Link copied"; position:absolute; top:40px; right:0; white-space:nowrap; background:#1C1917; color:#fff; font-size:10.5px; padding:5px 9px; border-radius:8px; }
.cc-vote { margin-top:18px; display:flex; align-items:center; gap:10px; }
.cc-vq { font-size:13px; font-weight:600; color:var(--gs-text-secondary,#57534E); }
.cc-vbtn { font-size:17px; line-height:1; background:var(--gs-card,#fff); border:1px solid var(--gs-border,#E7E0DA); border-radius:14px; padding:8px 14px; cursor:pointer; }
.cc-voted { font-size:13px; font-weight:600; color:var(--gs-coral-deep,#D94045); }
.cc-sticky { position:sticky; bottom:0; padding:16px 20px 22px; background:linear-gradient(transparent,var(--gs-warm-cream,#FFFAF7) 26%); }
.cc-routeline { text-align:center; font-size:10.5px; color:var(--gs-text-muted,#A8A29E); margin-top:8px; }