/* ============================================================
   HOOMANING V4 — NOW ONLY
   Functional browsing first; visual language remains intentionally restrained.
   ============================================================ */

.v4-now { max-width:620px; }
.v4-now-intro { padding-bottom:14px; }
.v4-now-intro h1 { margin-bottom:4px; }
.v4-now-intro p { margin:0; color:var(--text-dim); font-size:14px; }

/* Lightweight filters: time is primary, place/company are optional controls. */
.v4-now-filters { display:grid; gap:8px; margin:0 0 12px; padding:12px 14px; border:1px solid var(--line); border-radius:16px; background:rgba(25,31,34,.72); backdrop-filter:blur(12px); }
.v4-filter-row { display:grid; grid-template-columns:66px minmax(0,1fr); align-items:center; gap:10px; }
.v4-filter-row>span { color:var(--text-faint); font-family:var(--font-mono); font-size:8.5px; letter-spacing:.13em; }
.v4-filter-row>div { display:flex; flex-wrap:wrap; gap:5px; }
.v4-filter-chip { min-height:29px; padding:5px 10px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.012); color:var(--text-dim); font-size:10.5px; white-space:nowrap; transition:border-color .16s ease,background .16s ease,color .16s ease,transform .16s ease; }
.v4-filter-chip:hover { transform:translateY(-1px); color:var(--text); border-color:rgba(142,163,255,.38); }
.v4-filter-chip.active { color:var(--text); border-color:rgba(142,163,255,.52); background:rgba(142,163,255,.10); box-shadow:inset 0 0 0 1px rgba(142,163,255,.04); }
.v4-now-filters.compact { margin-bottom:10px; padding-block:10px; }

.v4-now-home-screen { display:grid; gap:0; }
.v4-now-idle { min-height:320px; border:1px solid var(--line); }
.v4-now-idle small { min-height:16px; }

/* Sphere / orbital depth metaphor. Background suggestions are abstract only. */
.v4-sphere-stage { position:relative; isolation:isolate; }
.v4-sphere-ghosts { position:absolute; inset:-18px -18px -14px; z-index:0; overflow:hidden; pointer-events:none; border-radius:34px; }
.v4-ghost { position:absolute; left:50%; top:50%; width:67%; height:58%; border:1px solid rgba(142,163,255,.22); border-radius:38%; background:linear-gradient(135deg,rgba(142,163,255,.10),rgba(118,217,184,.045)); filter:blur(15px); opacity:.16; transform-origin:center; }
.v4-ghost.g1 { transform:translate(-58%,-54%) rotate(-18deg) scale(.90); }
.v4-ghost.g2 { transform:translate(-42%,-46%) rotate(21deg) scale(.82); opacity:.12; }
.v4-ghost.g3 { transform:translate(-51%,-50%) rotate(74deg) scale(.72); opacity:.08; filter:blur(22px); }
.v4-orbit-line { position:absolute; left:50%; top:49%; translate:-50% -50%; border:1px solid rgba(142,163,255,.15); border-radius:50%; filter:blur(.1px); opacity:.52; }
.v4-orbit-line.o1 { width:88%; height:47%; transform:rotate(-13deg); }
.v4-orbit-line.o2 { width:61%; height:69%; transform:rotate(18deg); border-color:rgba(118,217,184,.12); }

.v4-now-card { position:relative; z-index:2; min-height:400px; display:grid; grid-template-rows:minmax(0,1fr) 82px; overflow:hidden; padding:24px 24px 18px; border:1px solid var(--line); border-radius:24px; background:radial-gradient(circle at 50% 20%,rgba(142,163,255,.065),transparent 29%),radial-gradient(circle at 70% 67%,rgba(118,217,184,.035),transparent 28%),var(--surface); box-shadow:0 24px 70px rgba(0,0,0,.12); }
.v4-now-home { position:absolute; left:16px; top:16px; z-index:8; width:36px; height:36px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:rgba(16,20,22,.76); color:var(--text-dim); font-size:18px; backdrop-filter:blur(10px); transition:color .16s ease,border-color .16s ease,transform .16s ease; }
.v4-now-home:hover { color:var(--text); border-color:rgba(142,163,255,.44); transform:translateX(-1px); }

.v4-now-changing { min-height:286px; display:grid; grid-template-rows:148px minmax(132px,1fr); will-change:transform,opacity,filter; }
.v4-now-visual { width:138px; height:138px; position:relative; margin:0 auto; display:grid; place-items:center; }
.v4-now-visual-ring { position:absolute; left:50%; top:50%; translate:-50% -50%; border-radius:50%; border:1px solid rgba(142,163,255,.26); }
.v4-now-visual-ring.outer { width:130px; height:84px; transform:rotate(-18deg); animation:v3-orbit-cw 18s linear infinite; }
.v4-now-visual-ring.inner { width:84px; height:84px; border-color:rgba(118,217,184,.24); animation:v3-orbit-ccw 13s linear infinite; }
.v4-now-card .v2-now-card-icon { position:relative; z-index:2; width:62px; height:62px; margin:0; color:var(--sage); background:rgba(118,217,184,.035); box-shadow:0 0 0 10px rgba(118,217,184,.018); animation:v3-float 5.5s ease-in-out infinite; }
.v4-now-copy { align-self:center; min-height:132px; display:flex; flex-direction:column; justify-content:center; text-align:center; }
.v4-now-copy small { color:var(--ochre); font-family:var(--font-mono); font-size:9px; letter-spacing:.15em; }
.v4-now-copy h2 { margin:8px auto 8px; max-width:470px; font-size:26px; line-height:1.14; }
.v4-now-copy p { min-height:40px; margin:0 auto; max-width:430px; color:var(--text-dim); font-size:13px; line-height:1.5; }

/* Fixed CTA geometry: title length never moves the controls. */
.v4-now-footer { min-height:82px; display:flex; align-items:flex-end; justify-content:center; }
.v4-now-actions { width:100%; display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr) minmax(0,.85fr); gap:8px; align-items:stretch; }
.v4-action { min-height:50px; border:1px solid var(--line); border-radius:999px; padding:0 16px; font-weight:650; font-size:12.5px; color:var(--text); background:var(--surface-2); transition:transform .15s ease,border-color .15s ease,background .15s ease,opacity .15s ease; }
.v4-action:hover:not(:disabled) { transform:translateY(-1px); border-color:rgba(142,163,255,.42); }
.v4-action.primary { color:#111418; background:var(--periwinkle); border-color:var(--periwinkle); }
.v4-action.primary:hover { background:#98adff; }
.v4-action:disabled { opacity:.28; cursor:default; }

/* Browsing swaps only the suggestion content and illustration — never the page shell. */
.v4-now-changing.swap-out-next,.v4-illustration-inner.swap-out-next { animation:v4-swap-out-next .14s ease forwards; }
.v4-now-changing.swap-out-prev,.v4-illustration-inner.swap-out-prev { animation:v4-swap-out-prev .14s ease forwards; }
.v4-now-changing.swap-in-next,.v4-illustration-inner.swap-in-next { animation:v4-swap-in-next .28s cubic-bezier(.2,.8,.2,1) both; }
.v4-now-changing.swap-in-prev,.v4-illustration-inner.swap-in-prev { animation:v4-swap-in-prev .28s cubic-bezier(.2,.8,.2,1) both; }
@keyframes v4-swap-out-next { to{opacity:.08;transform:translate3d(-13px,3px,-1px) scale(.985);filter:blur(5px)} }
@keyframes v4-swap-out-prev { to{opacity:.08;transform:translate3d(13px,3px,-1px) scale(.985);filter:blur(5px)} }
@keyframes v4-swap-in-next { from{opacity:.08;transform:translate3d(18px,-2px,0) scale(.985);filter:blur(5px)} to{opacity:1;transform:none;filter:none} }
@keyframes v4-swap-in-prev { from{opacity:.08;transform:translate3d(-18px,-2px,0) scale(.985);filter:blur(5px)} to{opacity:1;transform:none;filter:none} }

/* Illustration uses the empty lower space; it is a lightweight local SVG component, not database media. */
.v4-illustration-shell { min-height:196px; margin:8px auto 0; display:grid; place-items:center; overflow:hidden; pointer-events:none; }
.v4-illustration-inner { width:min(92%,520px); height:188px; display:grid; place-items:center; will-change:transform,opacity,filter; opacity:.84; }
.v4-scene-svg { width:100%; height:100%; overflow:visible; }
.v4-scene-orbit ellipse { fill:none; stroke:rgba(142,163,255,.10); stroke-width:1; stroke-dasharray:4 9; animation:v4-scene-orbit 34s linear infinite; transform-origin:160px 92px; }
.v4-scene-orbit ellipse+ellipse { stroke:rgba(118,217,184,.09); animation-direction:reverse; animation-duration:42s; }
.v4-scene-main { fill:rgba(142,163,255,.025); stroke:rgba(220,226,230,.46); stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
.v4-scene-main .v4-scene-accent,.v4-scene-accent { fill:none; stroke:rgba(118,217,184,.80); }
.v4-scene-dot { fill:var(--clay); opacity:.62; animation:v3-pulse 4.5s ease-in-out infinite; }
.v4-scene-dot.dot-b { fill:var(--periwinkle); animation-delay:-2.1s; }
@keyframes v4-scene-orbit { to{transform:rotate(360deg)} }

/* Chosen bridge: a deliberate state change is allowed to rerender. */
.v4-chosen-card { grid-template-rows:145px minmax(135px,1fr) 82px; }
.v4-chosen-card>.v4-now-visual { grid-row:1; }
.v4-chosen-card>.v4-now-copy { grid-row:2; }
.v4-chosen-card>.v4-now-footer { grid-row:3; }
.v4-now-copy.chosen-copy h2 { font-size:29px; }
.v4-now-copy.chosen-copy p { max-width:440px; }
.v4-now-copy.chosen-copy p span { color:var(--text-faint); }
.v4-chosen-actions { width:100%; display:grid; grid-template-columns:1.2fr .9fr; gap:8px; max-width:390px; }
.v4-illustration-shell.chosen { opacity:.75; }

@media (max-width:700px){
  .v4-now { max-width:none; }
  .v4-filter-row { grid-template-columns:58px minmax(0,1fr); gap:7px; }
  .v4-filter-chip { padding-inline:9px; }
  .v4-now-card { min-height:395px; padding:20px 17px 15px; }
  .v4-now-changing { grid-template-rows:142px minmax(128px,1fr); }
  .v4-now-copy h2 { font-size:23px; max-width:340px; }
  .v4-now-copy p { max-width:340px; }
  .v4-now-actions { grid-template-columns:.82fr 1.22fr .82fr; gap:6px; }
  .v4-action { min-height:48px; padding-inline:9px; font-size:11.5px; }
  .v4-illustration-shell { min-height:170px; }
  .v4-illustration-inner { height:166px; width:100%; }
}
@media (max-width:430px){
  .v4-now-filters { padding:10px; }
  .v4-filter-row { grid-template-columns:1fr; gap:5px; }
  .v4-filter-row>span { display:none; }
  .v4-filter-row>div { justify-content:center; }
  .v4-now-card { min-height:390px; border-radius:20px; }
  .v4-now-home { width:34px;height:34px;left:12px;top:12px; }
  .v4-now-copy h2 { font-size:21px; }
  .v4-now-actions { grid-template-columns:.8fr 1.25fr .8fr; }
  .v4-action { padding-inline:6px; font-size:10.8px; }
  .v4-sphere-ghosts { inset:-10px; }
  .v4-illustration-shell { min-height:154px; }
  .v4-illustration-inner { height:150px; }
}
@media (prefers-reduced-motion:reduce){
  .v4-now-changing,.v4-illustration-inner,.v4-now-visual-ring,.v4-now-card .v2-now-card-icon,.v4-scene-orbit ellipse,.v4-scene-dot { animation:none !important; transition:none !important; }
}