/* 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); }

/* Radius scale. Nine ad-hoc values read as unconsidered; three steps plus a
   pill cover every surface in the feed.
   .cc-history is listed explicitly: it renders inline under the feed AND as a
   standalone page, where it is inside neither .cc-feed nor .cc-detail — an
   undefined var() there would invalidate the whole border-radius declaration
   and leave history tiles square. */
.cc-feed, .cc-detail, .cc-history {
  --cc-r-sm: 12px;   /* chips, inline controls */
  --cc-r-md: 16px;   /* cards, buttons, panels */
  --cc-r-lg: 34px;   /* hero corners — the value the hero already had; the scale
                        names it rather than moving it. */
  --cc-r-pill: 999px;
}

.cc-feed { display:flex; flex-direction:column; flex:1; min-height:0; }
.cc-greet { padding:14px 20px 6px; }
.cc-greet .cc-ctx { color:var(--gs-coral-deep,#C7323A); }
.cc-greet h1 { margin-top:6px; }
.cc-meta { margin-top:4px; }
.cc-meta b { color:var(--gs-coral-deep,#C7323A); }

/* Continuous scroll fill (main's behaviour). The segments-per-pick version
   measured taps rather than progress, and "4 of 4" was reachable without
   reading anything. Reverted 2026-08-04 on the founder's call.
   The row is what pins: `flex:0 0 auto` because .cc-feed is a flex column, and
   it carries the page background plus a hairline so the deck scrolls UNDER it
   instead of touching it. Without that band a headline slides up to within a
   few pixels of the track and reads as clipped. Side padding matches
   .cc-greet's 20px, so the bar lines up with the copy that used to contain it. */
.cc-pbar-row { flex:0 0 auto; padding:10px 20px 9px; background:var(--gs-sand,#F5EEE8); border-bottom:1px solid var(--gs-border,#E7E0DA); }
.cc-pbar { height:4px; 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,#D93A3E); 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; } }
/* Every tile animates in and scales on press, and the feed is nothing but
   tiles — so with Reduce Motion on, the whole surface moves. `both` on the
   fill mode means the animation also holds the from-state, so it has to be
   `none` rather than a zero duration or the tiles never become visible. */
@media (prefers-reduced-motion: reduce) {
  .cc-idea { animation: none; }
  .cc-card { transition: none; }
  .cc-card:active { transform: none; }
  .cc-pfill { transition: none; }
  .cc-stage { scroll-behavior: auto; }
}
.cc-ilabel { margin:0 16px 8px; }
.cc-card { position:relative; 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); }
/* A reveal tile is one big tap target, but an <a> wrapping the card cannot
   contain the ⋯ button — so the link is an empty overlay instead, and the ⋯
   sits above it. Decorative overlays below opt out of pointer events so the
   tap still lands on the link underneath. */
.cc-cardlink { position:absolute; inset:0; z-index:1; }
.cc-cardlink:focus-visible { outline:2px solid var(--gs-coral-deep,#C7323A); outline-offset:-3px; }
.cc-illo { flex:0 0 auto; height:min(34vh, 230px); position:relative; display:flex; align-items:center; justify-content:center; }
/* Literal ink, not --gs-text-secondary: the illustration gradients below are
   hardcoded light values that dark mode never overrides, and this pill sits on
   a 92%-white chip on top of them. Following the theme token made it #C4BBB5
   on near-white in dark — 1.89:1, the worst reading on the surface. */
.cc-pill { pointer-events:none; 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:var(--cc-r-pill); color:#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. */
span.cc-tilecta { pointer-events:none; }
.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,#D93A3E); color:var(--gs-on-coral,#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:var(--cc-r-md);
  /* Neutral elevation, not a coral glow — see .cc-cta-glow. */
  box-shadow:0 2px 8px rgba(28,25,23,.16); }
.cc-eyebrow { font-size:11px; font-weight:600; color:var(--gs-coral-deep,#C7323A); margin-bottom:6px; }
.cc-body { margin-top:14px; }
/* Neutral bullets, never a tick: these are advice, and a ✓ on "Log drinks like
   any other intake" reads as *already done*. (Spec §8 — the semantic bug that
   made the coral check worth deleting outright rather than per-card.) */
.cc-points { margin-top:14px; list-style:none; padding:0; }
.cc-points li { position:relative; padding:4px 0 4px 20px; }
.cc-points li::before { content:"•"; position:absolute; left:0; font-weight:800; color:var(--gs-text-muted,#A8A29E); }

/* 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. */
/* Literal ink for the same reason as .cc-pill — a white chip on a band that
   stays light in both themes. */
.cc-pinbadge { pointer-events:none; position:absolute; top:14px; right:56px; background:rgba(255,255,255,.92); font-size:10px; font-weight:700; letter-spacing:.04em; padding:5px 10px; border-radius:var(--cc-r-pill); color:#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:var(--cc-r-md); background:var(--gs-warm-cream,#FFFAF7); }
.cc-ft-icon { font-size:20px; line-height:1.2; display:inline-flex; }
.cc-ft-icon-svg { width:20px; height:20px; color:var(--gs-text-secondary,#57534E); }
.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:var(--cc-r-md); 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-secondary,#57534E); 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:var(--cc-r-md); border:1px solid var(--gs-border,#E7E0DA); background:var(--gs-card,#fff); color:var(--gs-text-secondary,#57534E); cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
/* The active chip's tick. Sized against the 12.5px label rather than left to
   the heroicon default, which is the bug that inflated the read-state check. */
.cc-pinchip-check { width:14px; height:14px; flex:0 0 14px; }
.cc-pinchip--on { border-color:var(--gs-coral,#D93A3E); color:var(--gs-coral-deep,#C7323A); 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:var(--cc-r-pill); border:1px solid var(--gs-border,#E7E0DA); color:var(--gs-text-secondary,#57534E); text-decoration:none; }
.cc-tab--on { border-color:var(--gs-coral,#D93A3E); color:var(--gs-coral-deep,#C7323A); }
/* 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,#C7323A); }
.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; }
/* Today's CTA is plain --gs-coral, with no local override — and it now passes
   AA, because the token itself moved (application.tailwind.css) rather than
   this one feature. A Today-only #D93A3E shipped briefly and was reverted for
   leaving the feed a visibly different red from every other button; the global
   change was the right lever and the whole app went together. Nothing to fix
   here — if the coral ever moves again, it moves there. */
/* Neutral elevation, not a coloured glow: a coral shadow under a coral button
   is a web-design signature, and it competes with the AA-passing coral above.
   Native surfaces lift with a soft neutral shadow regardless of fill color. */
.cc-cta-glow { box-shadow:0 2px 8px rgba(28,25,23,.14); }

/* 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; }
/* Direct child only. The pill and the CTA are also inside .cc-illo and carry
   their own icons; a descendant selector here sized the read-state check at
   162px and ballooned the pill from 86x27 to 303x177. */
.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; }
/* Neutral elevation, not a coral glow — see .cc-cta-glow. */
.cc-donecheck { width:74px; height:74px; border-radius:50%; background:var(--gs-coral,#D93A3E); color:var(--gs-on-coral,#fff); display:flex; align-items:center; justify-content:center; font-size:38px; box-shadow:0 4px 14px rgba(28,25,23,.16); }
.cc-done h3 { margin-top:10px; }
.cc-dsub { margin-top:4px; }
.cc-streak { font-weight:800; color:var(--gs-coral-deep,#C7323A); white-space:nowrap; }
.cc-nextup { margin-top:20px; background:var(--gs-warm-cream,#FFFAF7); border:1px solid var(--gs-border,#E7E0DA); border-radius:var(--cc-r-md); 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,#C7323A); 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; }
/* flex:0 0 — the hero is a fixed band, not a shock absorber. Inside the
   `flex:1` column it would otherwise inherit flex-shrink:1 and absorb the
   page's overflow, collapsing 236→0 as a function of body-copy length (and
   taking the category pill and share button with it) instead of scrolling. */
.cc-dhero { flex:0 0 236px; height:236px; position:relative; border-radius:0 0 var(--cc-r-lg) var(--cc-r-lg); display:flex; align-items:center; justify-content:center; overflow:hidden; }
/* The sticky CTA used to provide the bottom clearance; with it gone the body
   owns it, and must clear the fixed bottom nav so the onward link isn't
   hidden behind the tab bar. */
.cc-dbody { padding:20px 22px calc(96px + env(safe-area-inset-bottom)); }
.cc-why { margin-top:18px; background:var(--gs-coral-glow,rgba(239,83,80,.07)); border-left:3px solid var(--gs-coral,#D93A3E); border-radius:0 var(--cc-r-sm) var(--cc-r-sm) 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,#C7323A); margin-bottom:8px; }
.cc-chip { display:inline-block; font-size:10.5px; font-weight:600; padding:3px 9px; border-radius:var(--cc-r-md); background:var(--gs-card,#fff); color:var(--gs-coral-deep,#C7323A); border:1px solid #F6D9D2; margin:0 4px 4px 0; }
/* Citations and status messages read as secondary, not muted: --gs-text-muted
   is 2.52:1 on white, well under the 4.5:1 AA floor, and at 11.5px it is the
   hardest text in the feature to read. Muted survives only on the point
   bullets below, which are decoration and carry no information. */
.cc-src { margin-top:18px; font-size:11.5px; color:var(--gs-text-secondary,#57534E); }
.cc-sourcetag { font-weight:700; color:var(--gs-coral-deep,#C7323A); display:flex; align-items:center; gap:5px; }
.cc-srcicon { width:13px; height:13px; flex:0 0 13px; }
.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:var(--cc-r-sm); padding:10px 12px; display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.cc-premnote-text { margin:0; }
/* The sheet has three optional blocks; some cards render none of them. */
.cc-sheet-empty { margin:0; color:var(--gs-text-secondary,#57534E); }
.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:var(--cc-r-sm); }
.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:var(--cc-r-sm); padding:8px 14px; cursor:pointer; }
.cc-voted { font-size:13px; font-weight:600; color:var(--gs-coral-deep,#C7323A); }
.cc-sticky { position:sticky; bottom:0; padding:16px 20px 22px; background:linear-gradient(transparent,var(--gs-warm-cream,#FFFAF7) 26%); }

/* Feedback row: vote and share sit together, after the reading. Share used to
   float in the hero, offering the card before it had said anything. */
.cc-feedback { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:20px; }
.cc-feedback .cc-vote { margin-top:0; }
.cc-detail .cc-share { position:static; flex:0 0 auto; }
.cc-shareicon { width:17px; height:17px; }

/* The onward link. The answer is printed above it, so a coral button promising
   the answer contradicted the page; what survives is feedforward. */
.cc-onward { display:block; margin:22px 0 0; text-align:center; text-decoration:none;
  font-size:13px; font-weight:600; color:var(--gs-coral-deep,#C7323A); }
.cc-onward b { font-weight:700; }

/* The ⋯ sheet. A native <dialog>: the backdrop, Esc and focus trapping are the
   platform's, and opening it makes no request — so it is not an "open". */
/* Hugs the card it belongs to — floated in the gap between tiles it read as
   an orphan, equally close to the next pick. */
/* Inside the card, top-right, above the stretched link. It used to sit in
   the gap BELOW the card, where it read as belonging to neither tile.
   .cc-pinbadge shifts left to 56px to make room. */
.cc-more-wrap { position:absolute; top:10px; right:10px; z-index:3; }
.cc-more { border:1px solid var(--gs-border,#E7E0DA); border-radius:var(--cc-r-pill);
  background:var(--gs-card,#fff); padding:5px 12px; line-height:0; cursor:pointer;
  color:var(--gs-text-secondary,#57534E); }
.cc-more-icon { width:18px; height:18px; }
/* A slot that is already full states the reason in place of the affordance. */
.cc-pinchip--full { color:var(--gs-text-secondary,#57534E); background:var(--gs-warm-cream,#FFFAF7); cursor:default; }
.cc-whyfold { margin-top:16px; }
.cc-whyfold summary { cursor:pointer; }
.cc-whyfold summary::-webkit-details-marker { display:none; }
.cc-whychips { margin-top:8px; }

/* Heroicons inherit currentColor and scale with type — sized here so the feed
   never depends on a utility-class framework being loaded. */
.cc-vicon { width:18px; height:18px; display:inline-block; vertical-align:-3px; }
.cc-voted .cc-vicon { width:16px; height:16px; }
.cc-donecheck-icon { width:38px; height:38px; stroke-width:2.5; }

/* Action tiles (spec §3). No detail page, so the three authored points ride
   here and the illustration shrinks to pay for them — the constraint is that
   the tile still fits inside one stage height. The CTA leaves the illustration
   edge and sits in normal flow at the foot of the card, because on this shape
   it is the only link the tile has. */
.cc-idea--action .cc-cbody { flex:0 0 auto; padding:14px 16px 0; }
.cc-tilecta--flow { position:static; transform:none; margin:14px 16px 16px; text-decoration:none; }