/* ============================================================================
 * discover-redesign.css: Discover home + bottom nav in the design family
 * (DWIJ-98; replaces the DWIJ-96 violet glass). Values come from family.css
 * (--f-*), so both themes (Galaxy dark, Sand light) share one set of rules.
 * Signed-off prototype: frontend/_tmp/design-family.html on the dev box.
 *
 * Geometry the walk pins (qa/ui-layout/family-walk.mjs):
 *   gutter 16 · grid gap 12 · tile ~148 tall · Manifest padding 30 all round ·
 *   nav 72 tall, labels on one baseline 13px above the pill's bottom edge,
 *   Meera photo 68px seated half over the pill's top edge.
 * ========================================================================== */

:root{
  --mo-micro:180ms;
  --mo-enter:360ms;
  --mo-overlay:300ms;
  --mo-ease:cubic-bezier(.2,.7,.2,1);
  --mo-stagger:60ms;
  --glass-radius:20px;
}

/* ============================ HEADER (scrolls away with the page) ============================ */
.home-screen .home-header{
  display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:4px 0 0;
}
.home-header .brand{display:flex;align-items:center;gap:12px;min-width:0}
.home-header .brand-lotus{
  width:46px;height:46px;border-radius:50%;flex:0 0 46px;
  border:1px solid rgba(var(--f-hi-rgb),.55);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.home-header .brand-lotus img{width:62%;height:62%;object-fit:contain}
.home-header .brand-name{font-family:var(--font-display);font-size:26px;font-weight:500;letter-spacing:.2px;color:var(--f-text)}
.home-header .home-greeting{
  margin-left:auto;font-family:var(--font-ui);font-size:12.5px;line-height:1.3;text-align:right;color:var(--f-text-2);
}

/* ============================ GRID ============================ */
.home-screen .home-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.home-screen .home-grid > .hero-card,
.home-screen .home-grid > .panchang-card,
.home-screen .home-grid > .meera-strip,
.home-screen .home-grid > .reports-section{grid-column:1 / -1}

/* ============================ GLASS (clickable tier) ============================ */
.home-screen .app-tile,
.home-screen .hero-card,
.home-screen .meera-strip{
  position:relative;overflow:hidden;border-radius:var(--f-radius);
  border:1px solid var(--f-edge);
  -webkit-backdrop-filter:blur(var(--f-blur)) saturate(var(--f-sat));backdrop-filter:blur(var(--f-blur)) saturate(var(--f-sat));
  box-shadow:inset 0 1px 0 var(--f-bevel),var(--f-shadow);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;cursor:pointer;
  transition:transform var(--mo-micro) ease,box-shadow var(--mo-micro) ease,border-color var(--mo-micro) ease;
}
/* active tier: bright edge, gentle lift */
.home-screen .app-tile:active,
.home-screen .hero-card:active,
.home-screen .meera-strip:active,
.home-screen .report-card:active{
  transform:translateY(-2px) scale(1.01);
  border-color:color-mix(in srgb,var(--f-accent) 70%,var(--f-hi));
  box-shadow:inset 0 1px 0 var(--f-bevel),0 0 0 1px rgba(var(--f-accent-rgb),.35),0 14px 34px rgba(var(--f-accent-rgb),.30);
}

/* ============================ MANIFEST (the one card with words) ============================ */
.home-screen .hero-card{
  display:block;text-align:left;padding:30px;
  border-color:color-mix(in srgb,var(--f-hi) 30%,var(--f-edge));
  background:radial-gradient(120% 90% at 100% 100%, rgba(var(--f-accent-rgb),.22), transparent 60%),rgba(var(--f-surface-rgb),var(--f-glass-a));
}
.home-screen .hero-card .hero-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.home-screen .hero-card .hero-title{
  font-family:var(--font-display);font-weight:500;font-size:34px;line-height:1.1;letter-spacing:.2px;margin:0;color:var(--f-text);
}
.home-screen .hero-card .hero-begin{
  flex:none;display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:9px 18px;
  font-family:var(--font-ui);font-weight:500;font-size:14.5px;line-height:1.3;
  color:var(--f-cta-ink);background:var(--f-cta);box-shadow:var(--f-cta-shadow);
}
.home-screen .hero-card .hero-sub{
  margin:12px 0 0;font-family:var(--font-ui);font-size:14.5px;line-height:1.4;color:var(--f-text-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:none;
}

/* ============================ TODAY (panchang): the featured card in the panchang_v1 arm ============================ */
/* Moon glyph + kicker, the plan line (serif, the card's largest text) and the
   personal line with its verdict dot. Painted by features/home/panchang-card.js. */
.home-screen .panchang-card{
  display:flex;align-items:flex-start;gap:16px;padding:20px 22px 18px;
  border-color:color-mix(in srgb,var(--f-hi) 30%,var(--f-edge));
  background:radial-gradient(120% 90% at 100% 100%, rgba(var(--f-accent-rgb),.22), transparent 60%),linear-gradient(90deg, rgba(var(--f-hi-rgb),.10), transparent 70%),rgba(var(--f-surface-rgb),var(--f-glass-a));
}
.home-screen .panchang-card .pc-moon{flex:none;display:block;width:48px;height:48px;margin-top:2px}
.home-screen .panchang-card .pc-moon svg{display:block;width:100%;height:100%}
.home-screen .panchang-card .moon-disc{fill:rgba(var(--f-text-rgb),.08);stroke:rgba(var(--f-hi-rgb),.5);stroke-width:1}
.home-screen .panchang-card .moon-lit{fill:var(--f-gold-2)}
:root[data-theme="light"] .home-screen .panchang-card .moon-lit{fill:var(--f-hi)}
.home-screen .panchang-card .pc-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.home-screen .panchang-card .pc-row{display:flex;align-items:center;gap:8px}
.home-screen .panchang-card .pc-kicker{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--font-ui);font-size:var(--label-size,10.5px);letter-spacing:var(--label-track,1.6px);text-transform:uppercase;font-weight:500;color:var(--f-hi);
}
.home-screen .panchang-card .pc-open{margin-left:auto;flex:none;font-family:var(--font-ui);font-size:12.5px;color:var(--f-text-3);display:inline-flex;align-items:center;gap:3px}
.home-screen .panchang-card .pc-plan{margin:0;font-family:var(--font-display);font-size:19.5px;line-height:1.3;color:var(--f-text)}
.home-screen .panchang-card .pc-personal{display:flex;align-items:center;gap:7px;font-family:var(--font-ui);font-size:13.5px;line-height:1.3;color:var(--f-text-2)}
.home-screen .panchang-card .pc-dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--f-text-3)}
.home-screen .panchang-card .pc-dot.is-good{background:#7BBFA5}
.home-screen .panchang-card .pc-dot.is-avoid{background:#D98B6A}
:root[data-theme="light"] .home-screen .panchang-card .pc-dot.is-good{background:#2F7D5F}
.home-screen .panchang-card.is-loading .pc-plan{opacity:.6}

/* ============================ ICON TILES (icon + one word) ============================ */
.home-screen .app-tile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-height:148px;padding:16px 10px;text-align:center;font:inherit;color:var(--f-text);
  background:
    radial-gradient(90% 70% at 50% 28%, color-mix(in srgb,var(--tint,#7a6cc0) 26%,transparent), transparent 70%),
    rgba(var(--f-tile-rgb),calc(var(--f-glass-a) - .06));
}
:root[data-theme="light"] .home-screen .app-tile{
  background:
    radial-gradient(90% 70% at 50% 28%, color-mix(in srgb,var(--tint,#d9a77a) 22%,transparent), transparent 70%),
    rgba(var(--f-tile-rgb),.5);
}
.home-screen .app-tile:disabled{cursor:default}
.home-screen .app-tile .tile-art{display:block;width:84px;height:84px;flex:none;pointer-events:none}
.home-screen .app-tile .tile-art svg{width:100%;height:100%;overflow:visible}
.home-screen .app-tile .app-tile-title{font-family:var(--font-display);font-size:18.5px;font-weight:500;line-height:1.2;color:var(--f-text)}
.home-screen .app-tile .app-tile-sub{display:none}

/* icon theming per theme (venn additive on dark, translucent on light) */
.home-screen .tile-art .vennballs{mix-blend-mode:screen}
:root[data-theme="light"] .home-screen .tile-art .vennballs{mix-blend-mode:normal;opacity:.82}
:root[data-theme="light"] .home-screen .tile-art .kx{stroke:#9c6b26}
:root[data-theme="light"] .home-screen .tile-art .haze{opacity:.22}

/* ============================ ASK MEERA ============================ */
.home-screen .meera-strip{
  display:flex;align-items:center;gap:12px;padding:14px 16px;text-align:left;font:inherit;color:var(--f-text);
  background:rgba(var(--f-surface-rgb),var(--f-glass-a));
}
.home-screen .meera-strip .ask-av{width:34px;height:34px;flex:0 0 34px}
.home-screen .meera-strip .ask-av svg{width:34px;height:34px}
.home-screen .meera-strip .ask-text{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.home-screen .meera-strip .ask-label{font-size:10.5px;letter-spacing:2px;text-transform:uppercase;font-weight:500;color:var(--f-hi)}
/* two-line fixed slot: the typewriter never changes the strip's height */
.home-screen .meera-strip .meera-strip-q{
  font-size:15px;line-height:1.35;color:var(--f-text);white-space:normal;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em;
}
.home-screen .meera-strip .ask-chev{flex:none;width:18px;height:18px;stroke:var(--f-text-3);fill:none;stroke-width:1.8}

/* ============================ REPORTS (flat cards in a sideways scroller) ============================ */
.home-screen .reports-section{margin-top:10px}
.home-screen .reports-head{display:flex;align-items:baseline;justify-content:space-between;margin:12px 2px 10px}
.home-screen .reports-label{margin:0;font-family:var(--font-display);font-weight:500;font-size:19px;color:var(--f-text)}
.home-screen .reports-hint{font-size:12px;color:var(--f-text-3)}
/* overflow-x also clips vertically: cards stay flat (bevel only), or a drop
   shadow would be cut into a visible line */
.home-screen .reports-scroll{
  display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  margin:0 calc(-1 * var(--f-gutter));padding:4px var(--f-gutter) 10px;scrollbar-width:none;
}
.home-screen .reports-scroll::-webkit-scrollbar{display:none}
.home-screen .report-card{
  flex:0 0 72%;scroll-snap-align:start;border-radius:var(--f-radius);padding:16px;cursor:pointer;
  background:rgba(var(--f-surface-rgb),var(--f-glass-a));
  -webkit-backdrop-filter:blur(var(--f-blur)) saturate(var(--f-sat));backdrop-filter:blur(var(--f-blur)) saturate(var(--f-sat));
  border:1px solid var(--f-edge);box-shadow:inset 0 1px 0 var(--f-bevel);
  transition:transform var(--mo-micro) ease,box-shadow var(--mo-micro) ease,border-color var(--mo-micro) ease;
}
.home-screen .report-card.is-soon{opacity:.6;cursor:default}
.home-screen .report-pill{
  display:inline-block;font-size:10px;letter-spacing:1.6px;text-transform:uppercase;padding:4px 8px;border-radius:999px;
  border:1px solid rgba(var(--f-hi-rgb),.5);color:var(--f-hi);
}
.home-screen .report-title{margin-top:8px;font-family:var(--font-display);font-size:19px;font-weight:500;color:var(--f-text)}
.home-screen .report-sub{margin-top:2px;font-size:12.5px;line-height:1.4;color:var(--f-text-2)}

/* ============================ ENTRANCE ============================ */
@keyframes homeRiseV2{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.home-screen .hero-card,.home-screen .app-tile,.home-screen .meera-strip,.home-screen .reports-section{
  animation:homeRiseV2 .42s var(--mo-ease) backwards;   /* backwards: :active can still move it */
}
.home-screen .app-tile[data-slot="bundle"]{animation-delay:.05s}
.home-screen .app-tile[data-slot="tarot"]{animation-delay:.10s}
.home-screen .app-tile[data-slot="prakriti"]{animation-delay:.15s}
.home-screen .app-tile[data-slot="numerology"]{animation-delay:.20s}
.home-screen .app-tile[data-slot="kundali"]{animation-delay:.25s}
.home-screen .app-tile[data-slot="gemstones"]{animation-delay:.30s}
.home-screen .meera-strip{animation-delay:.35s}
.home-screen .reports-section{animation-delay:.40s}
@media (prefers-reduced-motion: reduce){
  .home-screen .hero-card,.home-screen .app-tile,.home-screen .meera-strip,.home-screen .reports-section{animation:none}
}

/* one gutter for every tab (Discover, Chat, Profile): 16px, the nav's own edge */
.tab-content{padding-left:var(--f-gutter);padding-right:var(--f-gutter)}
/* clear the floating nav so the last card is tappable */
.home-screen{padding:0 0 124px}

/* ============================ BOTTOM NAV ============================ */
/* Floating pill. Every item is a fixed 72px column with its label pinned 13px
   above the pill's bottom edge, so the three labels share one baseline; Meera's
   photo floats above its label without pushing it down. */
.bottom-nav{
  display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:72px;align-items:stretch;
  height:72px;padding:0;border-radius:24px;left:16px;right:16px;bottom:calc(12px + env(safe-area-inset-bottom));width:auto;transform:none;
  max-width:408px;margin:0 auto;gap:0;justify-items:stretch;
  background:rgba(var(--f-surface-rgb),.9);border:1px solid var(--f-edge);
  -webkit-backdrop-filter:blur(var(--f-blur)) saturate(var(--f-sat));backdrop-filter:blur(var(--f-blur)) saturate(var(--f-sat));
  box-shadow:inset 0 1px 0 var(--f-bevel),0 12px 30px rgba(0,0,0,.35);
}
:root[data-theme="light"] .bottom-nav{box-shadow:inset 0 1px 0 var(--f-bevel),0 12px 30px rgba(120,84,46,.16)}
.bottom-nav .nav-tab,
.bottom-nav .nav-center{
  position:relative;height:72px;width:auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;
  padding:0 0 13px;background:none;border:0;margin:0;border-radius:0;min-width:0;color:var(--f-text-3);cursor:pointer;
  font-family:var(--font-ui);font-size:11.5px;font-weight:500;letter-spacing:.2px;line-height:1;
}
.bottom-nav .nav-tab svg{width:22px;height:22px;stroke:currentColor;fill:none;opacity:1}
.bottom-nav .nav-tab span,
.bottom-nav .nav-fab-label{font-size:11.5px;font-weight:500;line-height:1}
.bottom-nav .nav-tab.active{color:var(--f-text)}
.bottom-nav .nav-tab.active svg{transform:none}
.bottom-nav .nav-tab.active::after{display:none}
.bottom-nav .nav-fab-label{color:var(--f-text-2)}
/* Meera: her photo, one clean circle with the tiles' sharp glass edge */
.bottom-nav .nav-fab{
  position:absolute;left:50%;top:-34px;transform:translateX(-50%);
  width:68px;height:68px;border-radius:50%;padding:0;margin:0;overflow:hidden;cursor:pointer;
  background:rgb(var(--f-surface-rgb));border:1px solid var(--f-edge);box-shadow:var(--f-shadow);
}
.bottom-nav .nav-fab img{width:100%;height:100%;object-fit:cover;display:block;filter:none}
.bottom-nav .nav-fab::after{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  box-shadow:inset 0 1px 0 var(--f-bevel),inset 0 0 0 1px rgba(255,255,255,.10);
}

/* Ready-count badge on the Numerology tile (numo_hint). */
.app-tile { position: relative; }
.app-tile-badge {
  position: absolute; top: 10px; right: 10px; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--f-accent); color: var(--f-cta-ink);
  font: 500 11px/20px var(--font-ui); text-align: center;
  box-shadow: 0 2px 8px rgba(var(--f-accent-rgb), .4);
}