body.app > #f{position:fixed;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0}
#hero-slot #f,#dock-slot #f{position:static;left:auto;width:auto;height:auto;overflow:visible;opacity:1}
/* ONL app — light look, matched to the website. Mobile-first. */
html,body{height:100%;overscroll-behavior:none}
body.app{overflow:hidden;background:#FFFFFF;color:#0D0D0D}
body.app #acctbtn{display:none !important} /* no sign-in in the app */

.shell{height:100dvh;display:flex;flex-direction:column;background:var(--bg)}
.atop{display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top) + 10px) 16px 10px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.92);backdrop-filter:saturate(1.2) blur(10px);z-index:5}
.atop .logo,.atop .iconbtn{flex:none}
.atop .logo{min-width:44px;border:0;background:none;padding:0}

main{flex:1;position:relative;overflow:hidden}
.view{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px);transition:opacity .22s ease,transform .22s ease,visibility .22s;background:#fff;z-index:0}
.view.on{opacity:1;visibility:visible;pointer-events:auto;transform:none;z-index:1}
.col{width:100%;max-width:760px;margin:0 auto}
.pad{overflow-y:auto;padding:20px 16px 28px;-webkit-overflow-scrolling:touch;flex:1}

.msgs{flex:1;overflow-y:auto;padding:8px 16px 12px;-webkit-overflow-scrolling:touch}
.msgs .col{display:flex;flex-direction:column;gap:16px}

/* Home hero — website wash, Localo as the hero */
#v-ask.is-home .msgs{padding:0}
#v-ask.is-home .msgs>.col{gap:0;margin:0;max-width:none}
.ask-hero{
  padding:22px 16px 8px;
  text-align:center;
  background:
    radial-gradient(520px 280px at 8% 0%, #E8F0FA 0%, transparent 70%),
    radial-gradient(460px 240px at 92% 10%, #FFF6D4 0%, transparent 70%),
    radial-gradient(520px 280px at 70% 100%, #FCEEF3 0%, transparent 70%),
    radial-gradient(600px 240px at 20% 100%, #E6F5EE 0%, transparent 70%),
    #FFFFFF;
}
.ask-hero .hero-inner{max-width:640px;margin:0 auto}
.ask-hero .kicker{margin:0 0 8px;font-size:11.5px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.ask-hero h1{font-size:clamp(28px,7vw,42px);letter-spacing:-1.4px;line-height:1.05;margin:0 0 10px;font-weight:700;color:#0D0D0D}
.ask-hero .lead{margin:0 auto 18px;max-width:36em;color:var(--ink2);font-size:15.5px;line-height:1.5}
#hero-slot{margin:0 auto 12px;max-width:640px}
#v-ask.is-home #hero-slot .composer-box{padding:10px 10px 10px 20px;border-radius:28px;box-shadow:0 8px 28px -12px rgba(13,13,13,.18)}
#v-ask.is-home #hero-slot input{padding:12px 0;font-size:16.5px}
#v-ask.is-home #hero-slot .send{width:44px;height:44px}
.ask-hero .startq{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 auto 8px;max-width:640px}
.home-topics{padding:18px 16px 8px;max-width:760px;margin:0 auto}
.home-topics h2{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin:0 0 12px;font-weight:700}
#v-ask.is-home .dock{display:none}

/* Chat */
#v-ask:not(.is-home) .dock{padding:8px 16px 8px;border-top:1px solid var(--line);background:var(--bg)}
#v-ask:not(.is-home) #dock-slot .composer-box{max-width:760px;margin:0 auto}
.demo{font-size:11.5px;color:var(--mut);text-align:center;margin-top:6px}
#v-ask:not(.is-home) .demo{display:none}
.acts{margin-top:8px}
.acts button{border:1px solid var(--line);background:none;border-radius:999px;font-size:12.5px;padding:6px 10px;color:var(--ink2);display:inline-flex;gap:5px;align-items:center;min-height:36px}
.acts .ic{width:14px;height:14px}
.guide-row{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.guide-btn{display:inline-flex;align-items:center;gap:6px;border:0;background:#0D0D0D;color:#fff;border-radius:999px;padding:8px 14px;font-size:13.5px;font-weight:650;min-height:40px}
.guide-btn .ic{width:15px;height:15px;color:#fff}
.fbq{font-size:12.5px;color:var(--mut);margin-left:4px}

/* Topic cards share colours, radius, type and Open-section pills with the website (ui.css). */
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
button.tcard, a.tcard{min-height:0;width:100%;cursor:pointer;font:inherit}
.home-topics, #topics-pad{padding-bottom:88px}

/* Topics tab */
.topics-head h2{font-size:22px;letter-spacing:-.4px;margin:4px 0 14px;font-weight:700}
/* life-pills / life-pill: shared with the website in ui.css */
.topics-head .life-pills{margin:0 0 16px}
.topic-back{border:0;background:none;color:var(--mut);font-size:14.5px;padding:0;margin:0 0 12px;display:inline-flex;gap:4px;align-items:center;min-height:44px}
.topic-back .ic{width:16px;height:16px}
.topic-page{background:#fff}
.topic-page .sec-body{padding-bottom:12px}
body.app .detail{border:0;padding:0;background:transparent}
body.app[data-sec]{--sec-accent:var(--topic-accent,#0C7A70)}

/* Map — fill the space above the tab bar; pills wrap via ui.css .seg */
#v-map .pad{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto;padding-bottom:16px;box-sizing:border-box}
#v-map .col{display:flex;flex-direction:column;flex:1;min-height:0}
#v-map .phead, #v-map .mg, #v-map .cur-maplede, #v-map .vsub{flex:none}
.appmap{flex:1 1 200px;min-height:200px;margin:8px 0 16px;position:relative}
#v-map .appmap iframe{position:absolute;inset:0;width:100%;height:100%}
.vh{font-size:24px;letter-spacing:-.6px;margin:2px 0 4px;font-weight:650}
.vsub{color:var(--mut);margin:0 0 16px;font-size:14.5px}

/* Tabs */
.tabs{display:flex;border-top:1px solid var(--line);background:#fff;padding-bottom:env(safe-area-inset-bottom);z-index:5}
.tabs button{flex:1;border:0;background:none;padding:8px 0 7px;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--mut);min-width:0;min-height:48px}
.tabs button .ic{width:22px;height:22px}
.tabs b{font-size:11px;font-weight:600}
.tabs button.on{color:#0D0D0D}
.tabs button.on .ic{stroke-width:2.1;color:#0D0D0D}

.install{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:flex-end;z-index:50}
.install[hidden]{display:none}
.install .sheet{background:var(--card);width:100%;border-radius:22px 22px 0 0;padding:22px 20px calc(22px + env(safe-area-inset-bottom))}
.install p{color:var(--ink2)}

/* Light feedback widget (extras.js defaults to a dark app look) */
body.app .onlfb-btn{background:#0D0D0D !important;color:#fff !important;border:0 !important;top:auto !important;right:12px;left:auto !important;bottom:calc(64px + env(safe-area-inset-bottom));opacity:1 !important}
body.app .onlfb-pan{background:#fff !important;color:#0D0D0D !important;border:1px solid #E7E7EA !important;top:auto !important;bottom:calc(112px + env(safe-area-inset-bottom))}
/* Don't float Feedback over topic cards, the map, or the Ask home (body classes set in app.js). */
body.app.is-ask-home .onlfb-btn,
body.app.is-topics-list .onlfb-btn,
body.app.is-ask-home .onlfb-pan,
body.app.is-topics-list .onlfb-pan,
body.app:has(#v-topics.on) .onlfb-btn,
body.app:has(#v-topics.on) .onlfb-pan,
body.app:has(#v-map.on) .onlfb-btn,
body.app:has(#v-map.on) .onlfb-pan{display:none !important}
/* Keep Feedback off the composer send button in a conversation */
body.app:has(#v-ask.on:not(.is-home)) .onlfb-btn{bottom:calc(148px + env(safe-area-inset-bottom)) !important}
body.app:has(#v-ask.on:not(.is-home)) .onlfb-pan{bottom:calc(196px + env(safe-area-inset-bottom)) !important}
body.app .onlfb-pan textarea{background:#fff !important;color:#0D0D0D !important;border:1px solid #D4D4D8 !important}
body.app .onltour .c{background:#fff !important;color:#0D0D0D !important;border:1px solid #E7E7EA !important}

@media (max-width:380px){
  .tabs b{font-size:10.5px}
  .ask-hero h1{font-size:26px}
}
@media (max-width:420px){
  .atop .betatag{display:none}
  .atop .lang button{padding:0 8px;min-width:34px}
}
@media (min-width:700px){
  .tgrid{grid-template-columns:repeat(3,1fr);gap:16px}
  .ask-hero{padding:40px 24px 16px}
  .ask-hero h1{font-size:44px}
  .atop,.dock,#v-ask.is-home .home-topics,.ask-hero{padding-left:24px;padding-right:24px}
  .tabs{justify-content:center}
  .tabs button{flex:0 0 140px}
}