/* =========================================================================
   THE DISCOVER SCREEN, rebuilt from the app's current source.

   Authored at 393x852 logical points, i.e. every number below is the SAME
   number that is in the React Native source. Scale the .screen wrapper to
   whatever size the ad needs; never retype a value at a new scale.

   Sources (values quoted, not guessed):
     discover/AuroraHero.jsx      card box, eyebrow, title, hint, Start
     discover/NextGems.jsx + GemRow/GemThread/DormantGem/ExpandRow
     discover/SectionHeader.jsx   "8 CONVERSATIONS" + the fading rule
     partner-space/SpaceSwitch.jsx  the segmented Discover/Timeline chip
     spaces/SpaceHeader.jsx, SpaceAvatar.jsx, Ground.jsx
     shared/conversations/WeaveSurface.jsx, FreeChip.jsx, tokens.json

   NOTE: this is the CURRENT build. app-store-screenshots/topics.png is the
   older "aurora bloom" design (blurred blooms, UPCOMING, padlocks,
   underlined tabs) and no longer matches the app.
   ========================================================================= */

.screen{position:relative;width:393px;height:852px;overflow:hidden;
  font-family:'Lexend',system-ui,sans-serif;background-color:#EDE0D7}

/* ---- Ground.jsx : field + light + weight + tooth ---- */
.screen .ground{position:absolute;inset:0;z-index:0;
  background-image:
    radial-gradient(130% 55% at 50% -8%, rgba(254,249,242,.95) 0%, rgba(254,249,242,0) 62%),
    radial-gradient(150% 38% at 50% 109%, rgba(213,190,181,.55) 0%, rgba(213,190,181,0) 70%)}
.screen .tooth{position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:.055;mix-blend-mode:multiply;background-size:140px 140px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---- status bar ---- */
.screen .status{position:absolute;z-index:4;left:0;right:0;top:0;height:54px}
.screen .clock{position:absolute;left:33px;top:16px;font-size:16px;font-weight:600;
  color:#2E2440;letter-spacing:.2px}
.screen .island{position:absolute;left:50%;margin-left:-62px;top:11px;width:124px;height:36px;
  border-radius:18px;background:#000}
.screen .sysr{position:absolute;right:30px;top:19px;display:flex;align-items:center;gap:6px}
.screen .sysr svg{display:block}

/* ---- SpaceHeader.jsx : 58h row, gap 12, padding 24 ---- */
.screen .hdr{position:absolute;z-index:4;left:0;right:0;top:54px;height:58px;
  display:flex;align-items:center;gap:12px;padding:0 24px}
.screen .back{width:28px;height:44px;margin-left:-4px;display:flex;align-items:center}
.screen .avatar{width:46px;height:46px;border-radius:23px;flex:0 0 auto;
  background:linear-gradient(157deg,#5B3D7A,#3E2B58);
  display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:600;color:#fff;
  box-shadow:0 4px 14px rgba(74,40,110,.38)}
.screen .who{font-size:20px;font-weight:600;color:#2E2440;letter-spacing:-.3px;
  flex:1;white-space:nowrap}
.screen .linkchip{padding:7px 18px;border-radius:16px;background:#FBF5EC;
  border:1px solid rgba(46,36,64,.10);
  box-shadow:0 3px 6px rgba(94,65,137,.18);
  font-size:13px;font-weight:600;color:#5E4189}

/* ---- SpaceSwitch.jsx : 190x34 track, 90.5x28 thumb, translate 93.5 ---- */
.screen .switch{position:absolute;z-index:4;left:24px;top:118px;
  width:190px;height:34px;border-radius:17px;padding:3px;display:flex;gap:3px;
  background:rgba(58,42,74,.065);
  box-shadow:inset 0 1.2px 2.6px rgba(46,36,64,.085), inset 0 0 0 1px rgba(46,36,64,.04)}
.screen .switch span{width:90.5px;height:28px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;letter-spacing:-.1px;font-weight:600;color:rgba(46,36,64,.70)}
.screen .switch span.on{background:#FFFCF6;font-weight:700;color:#2E2440;
  box-shadow:0 1.2px 3.5px -1px rgba(46,36,64,.17), inset 0 0 0 .8px rgba(255,255,255,.9)}

/* ---- JourneyTab.jsx : column 24, headingBlock marginTop 30 ---- */
.screen .col{position:absolute;z-index:3;left:24px;right:24px;top:174px}
/* SectionHeader.jsx : 11/800/ls 2.3 plum, gap 12, rule fades out */
.screen .sect{display:flex;align-items:center;gap:12px;padding:0 2px 16px}
.screen .sect b{font-size:11px;font-weight:800;letter-spacing:2.3px;color:#5E4189}
.screen .sect i{flex:1;height:1px;background:linear-gradient(90deg,rgba(46,36,64,.10),rgba(46,36,64,0))}

/* =========================================================================
   AuroraHero.jsx — RADIUS 30, PAD 24, minHeight 400
   ========================================================================= */
.screen .hero{position:relative;border-radius:30px;overflow:hidden;min-height:400px;
  margin:4px 0 6px;background:var(--mid);
  box-shadow:0 30px 48px rgba(40,22,58,.6);display:flex;flex-direction:column}
/* Lift → HeadLift : b1 colour, LIFT_ALPHA .15, 120% 80% at 50% 0%, out by 60% */
.screen .hero .lift{position:absolute;inset:0;
  background:radial-gradient(120% 80% at 50% 0%, var(--b1) 0%, transparent 60%)}
/* WeaveSurface.jsx : TILE = 5*sqrt2 = 7.0711, 1px lines, b1 at +45, b2 at -45 */
.screen .hero .weave, .orb .weave{position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(45deg,  var(--b1) 0 1px, transparent 1px 7.0711px),
    repeating-linear-gradient(-45deg, var(--b2) 0 1px, transparent 1px 7.0711px)}
.screen .hero .vig{position:absolute;inset:0;
  background:radial-gradient(93% 80% at 50% 50%, rgba(0,0,0,0) 25%, rgba(0,0,0,.45) 100%)}
.screen .hero .edge{position:absolute;top:0;left:1px;right:1px;height:1px;
  background:rgba(255,255,255,.13)}
.screen .hero .in{position:relative;z-index:2;padding:24px 24px 26px;
  display:flex;flex-direction:column;flex:1}

.screen .eyebrow{display:flex;align-items:center;gap:9px}
.screen .eyebrow .lead{flex:1;display:flex;align-items:center;min-width:0}
.screen .eyebrow .glint{width:8px;height:8px;border-radius:4px;margin-right:9px;
  background:var(--dot);flex:0 0 auto}
.screen .eyebrow em{font-style:normal;font-size:11px;font-weight:800;letter-spacing:2.4px;
  color:var(--meta);white-space:nowrap;overflow:hidden}
/* FreeChip.jsx tone="card" : 24h, r12, #D6AC55, 11/800/ls1.5, ink #33203E */
.screen .free{height:24px;padding:0 11px;border-radius:12px;background:#D6AC55;
  display:flex;align-items:center;font-size:11px;font-weight:800;letter-spacing:1.5px;
  color:#33203E;box-shadow:0 2px 4px rgba(60,30,10,.45);flex:0 0 auto}

.screen .spacer{flex:1;min-height:16px}
.screen .htitle{font-size:46px;font-weight:700;letter-spacing:-1.2px;line-height:45px;
  color:var(--title)}
.screen .hhint{margin-top:16px;font-size:18px;font-weight:400;line-height:24px;
  opacity:.9;max-width:280px;color:var(--title)}
.screen .fmt{margin-top:18px;display:flex;flex-direction:column;gap:11px}
.screen .fmt div{display:flex;align-items:center;gap:11px}
.screen .fmt span{font-size:14px;font-weight:500;color:var(--rest)}
.screen .fmt svg{flex:0 0 auto}
/* Start: 52h, r26, #FBF5EC→#F1E6D6, label 16.5/700/ls .2 in --bot */
.screen .start{margin-top:24px;height:52px;border-radius:26px;
  background:linear-gradient(180deg,#FBF5EC,#F1E6D6);
  display:flex;align-items:center;justify-content:center;gap:7px;
  box-shadow:0 14px 48px rgba(28,19,48,.5);
  font-size:16.5px;font-weight:700;letter-spacing:.2px;color:var(--bot)}

/* =========================================================================
   NextGems.jsx — NEXT eyebrow, 38pt orbs, dotted thread, 2 preview rows
   ========================================================================= */
.screen .next{margin-top:22px;position:relative}
.screen .next>b{display:block;font-size:11px;font-weight:800;letter-spacing:2.4px;
  color:rgba(46,36,64,.70);margin-bottom:6px;padding-left:2px}
/* GemThread.jsx : W 1.5, LEFT = 38/2 - 1.5/2 = 18.25, dash 2,6, inset 24 */
.screen .thread{position:absolute;left:18.25px;top:44px;bottom:24px;width:1.5px;
  background-image:repeating-linear-gradient(180deg,rgba(46,36,64,.22) 0 2px,transparent 2px 8px)}
.screen .grow{position:relative;z-index:1;display:flex;align-items:center;gap:15px;
  padding:12px 14px 12px 0}
.screen .grow+.grow{border-top:1px solid rgba(46,36,64,.10)}
/* DormantGem.jsx : GEM 38, weave + orb head-lift + rim */
.orb{width:38px;height:38px;border-radius:19px;position:relative;overflow:hidden;
  flex:0 0 auto;background:var(--orbD);box-shadow:0 4px 10px rgba(40,22,58,.35)}
.orb .lift{position:absolute;inset:0;
  background:radial-gradient(64% 58% at 34% 28%, var(--orbL) 0%, transparent 74%)}
.orb .rim{position:absolute;inset:0;
  background:radial-gradient(circle 19px at 50% 50%, rgba(0,0,0,0) 37%, rgba(0,0,0,.45) 100%)}
.screen .gtxt{flex:1;min-width:0}
.screen .gtxt b{display:block;font-size:17px;font-weight:700;letter-spacing:-.3px;color:#2E2440}
.screen .gtxt i{display:block;font-style:normal;font-size:14px;font-weight:400;margin-top:3px;
  color:rgba(46,36,64,.70)}
.screen .expand{margin-top:6px;min-height:44px;display:flex;align-items:center;
  justify-content:center;gap:8px;font-size:15.5px;font-weight:600;color:#5E4189}