/* F40 v2 home styles. Builds on shared/brand.css for header / footer /
   typography and only declares the v2-specific layout primitives:
   the streak / points header badges, the daily-tiles row, and the
   pack grid with its completion-badge state. */

/* Shared bottom Back-to-home row used by pack / profile / admin pages.
   Loaded here because home.css is the only v2 stylesheet imported by
   every authenticated v2 page. Replaces the small top-left
   .v2-back-link that lived inline at the top of each page header —
   moved to the bottom so the affordance sits in the same thumb region
   as the page's primary CTAs (Start Quick Mix, Sign out, etc). */
.v2-page-back-row {
  text-align: center;
  margin: 32px 0 0;
}
.v2-page-back-row .btn-ghost {
  min-width: 160px;
}

/* Header search affordance + header badges decorate the v2 site
   header (macros_v2.html site_header_v2). The search-link rules
   moved to shared/brand.css so v2-aware admin / curator pages —
   which use site_header_v2 but don't load v2/css/home.css — pick
   them up too. */

/* --- Header badges (streak flame + reward-points gem) ---------------------
   Badge styles moved to shared/brand.css so v2-aware admin / curator pages
   that use site_header_v2 but don't load v2/css/home.css still pick them
   up. Same pattern as the header-search-link rules — keep page-agnostic
   header chrome shared. */

/* --- Page shell ----------------------------------------------------------- */

.v2-body {
  background: #fafafa;
  margin: 0;
}

.v2-home {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 20px 64px;
}

.v2-section-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

/* --- Daily tiles row ------------------------------------------------------ */

.v2-daily-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 32px;
}

@media (max-width: 720px) {
  .v2-daily-row { grid-template-columns: 1fr; }
}

.v2-tile {
  display: block;
  position: relative;        /* anchor for the streak chip */
  padding: 24px;
  border-radius: 16px;
  text-decoration: none;
  color: #111827;
  background: #fff;
  border: 1px solid #e5e7eb;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Streak chip pinned to the top-right of each daily tile. Same
   visual as the streak badge in the v2 site header (🔥 + number).
   Hidden until the home-summary fetch confirms a non-zero streak —
   home.js toggles the `.hidden` class. */
.v2-tile-streak {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 13px;
  font-weight: 700;
  color: #1f2937;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.v2-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.06); }
.v2-tile:focus-visible { outline: 2px solid #4338ca; outline-offset: 2px; }

.v2-tile-warmup    { background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%); }
.v2-tile-challenge { background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%); }

.v2-tile-eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  margin-bottom: 8px;
}

.v2-tile-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
}

/* Mobile-only line break inside tile titles. Used by the Challenge
   tile to wrap "Crack a Sign, / Craft a Sign" onto two lines on
   phones (where the tile is full-width but still narrow) while
   keeping it on a single line on desktop. */
.v2-tile-title-br { display: none; }
@media (max-width: 720px) {
  .v2-tile-title-br { display: inline; }
}

.v2-tile-meta {
  font-size: 14px;
  color: #4b5563;
  margin-bottom: 16px;
}

/* Filled pill CTA at the bottom of each daily tile. The tile itself is
   the click target (whole-tile <a>), so the pill is purely a visual
   affordance: it tells the user "this tile is actionable" against the
   pastel gradient background. Dark slate fill keeps the contrast high
   on both the warm-up (amber) and challenge (blue) backgrounds and
   matches the avatar/button language elsewhere on the site. */
.v2-tile-cta {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;
  background: #1f2937;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.v2-tile:hover .v2-tile-cta { background: #111827; }

.v2-tile.v2-tile-done {
  opacity: 0.78;
  border-color: #bbf7d0;
}

/* Done state: green check inside the dark pill. Inherit the pill's
   white text so the check reads as a positive marker, not a clashing
   green-on-dark element. */
.v2-tile.v2-tile-done .v2-tile-cta::before {
  content: "✓ ";
  font-weight: 700;
}

/* --- Pack grid section ---------------------------------------------------- */

.v2-pack-section { margin-top: 8px; }

.v2-pack-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.v2-recommended {
  font-size: 13px;
  color: #6b7280;
}

.v2-recommended strong { color: #4338ca; }

.v2-pack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.v2-pack-loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: 32px;
  color: #9ca3af;
  font-size: 14px;
}

.v2-pack-card {
  position: relative;
  display: block;
  padding: 16px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  text-decoration: none;
  color: #111827;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.v2-pack-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  border-color: #d1d5db;
}

.v2-pack-card:focus-visible {
  outline: 2px solid #4338ca;
  outline-offset: 2px;
}

/* Opened-but-not-completed: subtle background tint, no badge. */
.v2-pack-card.v2-pack-opened { background: #fafafb; }

/* Completed: corner checkmark badge (with optional ×N count). */
.v2-pack-card.v2-pack-completed { background: #f0fdf4; border-color: #bbf7d0; }
.v2-pack-card.v2-pack-completed .v2-pack-badge { display: inline-flex; }

/* Recommended-next: blue accent border. */
.v2-pack-card.v2-pack-recommended { border-color: #818cf8; box-shadow: 0 0 0 2px #e0e7ff; }

.v2-pack-icon {
  font-size: 28px;
  line-height: 1;
  margin-bottom: 8px;
}

.v2-pack-name {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
  /* Truncate long pack names cleanly without affecting the height. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v2-pack-meta {
  font-size: 12px;
  color: #6b7280;
}

.v2-pack-badge {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #15803d;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

/* --- Welcome popup (v2 GA cutover) --------------------------------------- */

/* F58: video-consent transparency banner — a slim, non-blocking bar at the
   top of the home content, shown to users on the opt-out default until they
   click "Got it". Persistent (no auto-fade); home.js toggles `.hidden`. */
.v2-consent-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 6px 12px;
  background: #f8f7fb;
  border: 1px solid #e7e3f0;
  border-radius: 8px;
  color: #6b7280;
}

.v2-consent-banner.hidden {
  display: none;
}

.v2-consent-banner-text {
  margin: 0;
  flex: 1 1 240px;
  font-size: 0.78rem;
  line-height: 1.4;
}

.v2-consent-banner-ack {
  flex: 0 0 auto;
  padding: 3px 10px;
  font-size: 0.75rem;
  font-weight: 500;
  background: transparent;
  color: #6b7280;
  border: 1px solid #d4cfe0;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.v2-consent-banner-ack:hover {
  background: #efecf6;
  color: #374151;
}

/* --- Unauthenticated state -----------------------------------------------
   Mirrors v1 home's signed-out treatment: dim the interactive surfaces
   so they read as "preview" and surface a Google sign-in button in
   the pack grid slot. The dim applies via opacity + pointer-events so
   the visual layout stays identical to the auth state — only the
   affordance shifts. */
/* Dim only — pointer-events stay live so the click hijack on tiles
   can call preventDefault + prompt sign-in, and the inline Google
   button in the CTA below remains clickable. Cursor switches to
   default so the affordance reads as "preview", not "go". */
.v2-unauth-dimmed {
  opacity: 0.5;
}
a.v2-unauth-dimmed { cursor: default; }

.v2-unauth-cta {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 28px 16px;
  text-align: center;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.v2-unauth-lede {
  margin: 0;
  font-size: 1rem;
  color: #4b5563;
}

/* F54: a daily tile whose streak broke but is still restorable. The cue
   is informative (the tile links to its activity); Buy/Restore live on
   the Profile Streak Freeze card. */
.v2-tile-meta.v2-tile-broke,
.v2-tile-broke .v2-tile-meta { color: #b45309; font-weight: 600; }