/* ──────────────────────────────────────────────────────────────────────────
   Manitya — app mode.
   Everything here is scoped to html.in-app, which is set ONLY inside the Android
   app / installed PWA (see the head snippet on every page). The website that
   browser visitors see is untouched.
   ────────────────────────────────────────────────────────────────────────── */

:root{
  --app-bar:56px;
  --app-tabs:64px;
  --app-bg:#FFFFFF;
  --app-surface:#FFFFFF;
  --app-soft:#F8F5F1;
  --app-ink:#3A2F24;
  --app-ink-soft:rgba(74,60,45,.66);
  --app-line:rgba(92,79,59,.10);
  --app-accent:#C8643A;
  --app-accent-soft:rgba(232,140,90,.16);
  --app-help:#C8553A;
  --app-glow:#FFF1E2;
}
html.dark{
  --app-bg:#211A13;
  --app-surface:#2D241B;
  --app-ink:#F3E9DA;
  --app-ink-soft:rgba(243,233,218,.66);
  --app-line:rgba(243,233,218,.10);
  --app-accent:#F2A77C;
  --app-accent-soft:rgba(242,167,124,.16);
  --app-help:#F2A07A;
  --app-glow:#4A3423;
  --app-soft:#2D241B;
}

/* native-feeling screen changes (Chrome 126+); website visitors never match this */
@media (display-mode: standalone){
  @view-transition{ navigation:auto; }
}
::view-transition-old(root),::view-transition-new(root){ animation-duration:.2s; }
.app-bar{ view-transition-name:app-bar; }
.app-tabs{ view-transition-name:app-tabs; }

html.in-app{ color-scheme:light dark; -webkit-tap-highlight-color:transparent; overscroll-behavior-y:none; scroll-padding-top:calc(var(--app-bar) + 12px); }
html.in-app, html.in-app body{ overflow-x:clip; }
html.in-app body{ padding-top:var(--app-bar); padding-bottom:calc(var(--app-tabs) + env(safe-area-inset-bottom)); }

/* ── website chrome the app replaces ── */
html.in-app .top-nav,
html.in-app .site-footer,
html.in-app .mark,
html.in-app .theme-toggle,
html.in-app .audio-toggle,
html.in-app .backlink,
html.in-app .back-to-dar,
html.in-app .scroll-cue,
html.in-app .crisis-strip{ display:none !important; }

/* sticky "jump to a tradition" menu on wisdom pages sits under the app bar */
html.in-app .sticky-jumper{ top:calc(var(--app-bar) + 8px) !important; }

/* ── top app bar ── */
.app-bar{
  position:fixed;top:0;left:0;right:0;z-index:900;height:var(--app-bar);
  display:flex;align-items:center;gap:4px;padding:0 6px;
  background:color-mix(in srgb, var(--app-bg) 90%, transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--app-line);
  color:var(--app-ink);user-select:none;-webkit-user-select:none;
}
.app-bar__btn{
  flex:0 0 auto;width:44px;height:44px;border:0;border-radius:50%;background:transparent;
  color:inherit;display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.app-bar__btn:active{ background:var(--app-accent-soft); }
.app-bar__btn svg{ width:22px;height:22px; }
.app-bar__title{
  flex:1 1 auto;min-width:0;font-family:'Plus Jakarta Sans',serif;font-size:17px;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px;
}
/* home screen brand = the website's header logo: the leaf branch, "manitya", then मनित्य beside it
   (markup is मनित्य<small>Manitya</small>, so flex order puts the branch and the English first) */
.app-bar__brand{
  flex:1 1 auto;display:flex;align-items:baseline;gap:7px;padding-left:6px;line-height:1;
  font-family:'Noto Sans Devanagari','Plus Jakarta Sans',serif;font-size:18px;font-weight:500;color:var(--rd-tc,#B5573A);
}
.app-bar__brand::before{ content:"";order:-2;align-self:center;width:40px;height:32px;
  background:url('/logo/manitya-mark.svg') center/contain no-repeat; }
html.dark .app-bar__brand::before{ background-image:url('/logo/manitya-mark-on-dark.svg'); }
.app-bar__brand small{ order:-1;font-family:'Plus Jakarta Sans',sans-serif;font-size:22px;font-weight:700;letter-spacing:-.03em;
  text-transform:lowercase;color:var(--app-ink);margin:0; }
.app-bar__help{ color:var(--app-help); }

/* ── bottom tab bar ── */
.app-tabs{
  position:fixed;left:0;right:0;bottom:0;z-index:900;box-shadow:0 -4px 18px rgba(120,80,40,.06);
  height:calc(var(--app-tabs) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
  display:flex;background:var(--app-surface);border-top:1px solid var(--app-line);
  user-select:none;-webkit-user-select:none;
}
.app-tab{
  flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  text-decoration:none;color:var(--app-ink-soft);font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:11.5px;letter-spacing:.02em;
}
.app-tab svg{ width:23px;height:23px; }
.app-tab__pill{ width:56px;height:30px;border-radius:16px;display:flex;align-items:center;justify-content:center;transition:background .2s; }
.app-tab[aria-current="page"]{ color:var(--app-ink);font-weight:500; }
.app-tab[aria-current="page"] .app-tab__pill{ background:var(--app-accent-soft);color:var(--app-accent); }

/* ── help sheet (helplines, one tap from every screen) ── */
.app-sheet-backdrop{
  position:fixed;inset:0;z-index:950;background:rgba(20,15,10,.45);opacity:0;pointer-events:none;transition:opacity .2s;
}
.app-sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:960;max-height:85vh;overflow:auto;
  background:var(--app-surface);color:var(--app-ink);border-radius:22px 22px 0 0;
  padding:10px 20px calc(24px + env(safe-area-inset-bottom));
  transform:translateY(105%);transition:transform .25s ease;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
}
.app-sheet.open{ transform:none; }
.app-sheet.open + .app-sheet-backdrop,
.app-sheet-backdrop.open{ opacity:1;pointer-events:auto; }
.app-sheet__grip{ width:40px;height:4px;border-radius:2px;background:var(--app-line);margin:4px auto 16px; }
.app-sheet h2{ font-family:'Plus Jakarta Sans',serif;font-weight:500;font-size:21px;margin:0 0 4px; }
.app-sheet p{ font-size:14.5px;line-height:1.55;color:var(--app-ink-soft);margin:0 0 14px; }

.app-callrow{
  display:flex;align-items:center;gap:14px;padding:13px 14px;margin:0 0 8px;border-radius:14px;
  background:var(--app-soft);border:1px solid var(--app-line);color:var(--app-ink);text-decoration:none;
}
.app-callrow:active{ background:var(--app-accent-soft); }
.app-callrow__icon{ flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--app-accent-soft);color:var(--app-help); }
.app-callrow__icon svg{ width:20px;height:20px; }
.app-callrow__name{ font-weight:500;font-size:15.5px; }
.app-callrow__meta{ font-size:13px;color:var(--app-ink-soft); }
.app-callrow__num{ margin-left:auto;font-weight:500;color:var(--app-help);font-size:15px;white-space:nowrap; }

/* ── chat (Mann) inside the app ── */
html.in-app body.app-chat{ padding-top:0;padding-bottom:0; }
html.in-app body.app-chat .chat-header{ display:none; }
html.in-app body.app-chat .app{
  height:100%;
  padding-top:var(--app-bar);
  padding-bottom:calc(var(--app-tabs) + env(safe-area-inset-bottom));
}
html.in-app body.app-chat .composer{ margin-bottom:0;padding-bottom:10px; }
/* when Mann mentions a helpline, the strip opens above the composer and stays */
html.in-app body.app-chat .crisis-strip.app-show{
  display:block !important;position:static;flex:0 0 auto;margin:0 4vw 8px;border-radius:14px;
  border:1px solid rgba(181,90,58,.3);box-shadow:none;
}

/* ── long reading pages: tighter spacing on a phone ── */
html.in-app .section,
html.in-app .wisdom-intro-section,
html.in-app .wisdom-closing-section{ padding:26px 18px 22px !important; }
html.in-app .dar-hero{ min-height:0 !important;padding:22px 16px 26px !important; }
html.in-app .wisdom-hero{ min-height:0 !important;padding:26px 18px 16px !important; }
html.in-app .pause-point{ padding:18px !important; }

/* ── chapters: each section folds to its title; tap to read ── */
html.in-app .app-fold{ position:relative;max-height:var(--fold-h,none);overflow:hidden;transition:max-height .3s ease; }
html.in-app .app-fold:not(.app-open){ cursor:pointer;border-bottom:1px solid var(--app-line); }
html.in-app .app-fold.app-open{ max-height:none;overflow:visible;padding-bottom:70px !important; }
html.in-app .app-fold:not(.app-open)::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:96px;pointer-events:none;z-index:2;
  background:linear-gradient(to bottom, transparent 0%, var(--fold-bg) 62%);
}
html.in-app .app-fold > .app-fold-btn{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:3;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:13.5px;font-weight:500;
  padding:9px 18px;border-radius:999px;cursor:pointer;
  color:var(--app-accent);background:var(--app-surface);border:1px solid color-mix(in srgb, var(--app-accent) 35%, transparent);
  box-shadow:0 4px 14px rgba(120,80,40,.10);
}
.app-fold-btn svg{ width:16px;height:16px;transition:transform .2s; }
.app-fold-btn .c{ display:none; }
.app-open > .app-fold-btn .o{ display:none; }
.app-open > .app-fold-btn .c{ display:inline; }
.app-open > .app-fold-btn svg{ transform:rotate(180deg); }

/* ── Wisdom tab: a compact list with a Feelings | Voices switch ── */
.app-seg{
  position:sticky;top:var(--app-bar);z-index:20;display:flex;gap:4px;padding:4px;margin:8px 16px 14px;
  background:var(--app-surface);border:1px solid var(--app-line);border-radius:14px;
}
.app-seg button{
  flex:1 1 0;border:0;border-radius:10px;padding:10px 6px;background:transparent;cursor:pointer;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:14px;color:var(--app-ink-soft);
}
.app-seg button[aria-selected="true"]{ background:var(--app-accent-soft);color:var(--app-accent);font-weight:500; }
html.in-app body.app-hub .wisdom-hero p,
html.in-app body.app-hub .hub-rest,
html.in-app body.app-hub .hub-axis-head .kicker,
html.in-app body.app-hub .hub-axis-head h2{ display:none !important; }
html.in-app body.app-hub .hub-axis{ padding:0 16px 18px !important;margin:0 !important; }
html.in-app body.app-hub .hub-axis-head{ margin:0 4px 12px !important;padding:0 !important;text-align:left !important; }
html.in-app body.app-hub .hub-axis-head p{ font-size:13.5px !important;margin:0 0 6px !important;max-width:none !important; }
html.in-app body.app-hub .hub-axis[hidden]{ display:none !important; }
html.in-app .hub-grid{ display:flex !important;flex-direction:column;gap:10px !important;margin:0 !important;max-width:none !important; }
html.in-app .hub-card{
  display:grid !important;grid-template-columns:1fr 18px;column-gap:10px;align-items:center;
  padding:14px 16px !important;border-radius:16px !important;min-height:0 !important;height:auto !important;
  background:var(--app-surface) !important;border:1px solid var(--app-line) !important;box-shadow:none !important;
}
html.in-app .hub-card > *{ grid-column:1;margin:0 !important;text-align:left !important; }
html.in-app .hub-card .deva{ font-size:20px !important;line-height:1.3 !important; }
html.in-app .hub-card .en{ font-size:13px !important;opacity:.8; }
html.in-app .hub-card .era{ font-size:12px !important;margin-top:1px !important; }
html.in-app .hub-card .blurb{
  font-size:13.5px !important;line-height:1.45 !important;margin-top:6px !important;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
html.in-app .hub-card .go{ grid-column:2;grid-row:1 / span 4;font-size:0 !important;align-self:center; }
html.in-app .hub-card .go::after{ content:'›';font-size:26px;line-height:1;color:var(--app-ink-soft); }

/* ── bright white reading pages in the app (day theme) ── */
html.in-app:not(.dark), html.in-app:not(.dark) body{ background:#FFFFFF !important; }
html.in-app:not(.dark) .section,
html.in-app:not(.dark) .wisdom-intro-section,
html.in-app:not(.dark) .wisdom-closing-section,
html.in-app:not(.dark) .filter-bar-section,
html.in-app:not(.dark) .pinned-section,
html.in-app:not(.dark) .mini-breath-section,
html.in-app:not(.dark) .hub-axis,
html.in-app:not(.dark) .hub-main,
html.in-app:not(.dark) .sky{ background:#FFFFFF !important; }
html.in-app:not(.dark) .section.tinted,
html.in-app:not(.dark) .section.deep,
html.in-app:not(.dark) .pause-point,
html.in-app:not(.dark) .lineage-note{ background:#FAF8F5 !important; }
html.in-app:not(.dark) .dar-hero,
html.in-app:not(.dark) .wisdom-hero{ background:radial-gradient(ellipse at 50% 30%, #FFF4E8 0%, #FFFFFF 70%) !important; }
html.in-app:not(.dark) .composer{ background:linear-gradient(180deg, rgba(255,255,255,0) 0%, #FFFFFF 28%) !important; }
html.in-app .section::before,
html.in-app .dar-hero::before,
html.in-app .wisdom-hero::before,
html.in-app .grain{ display:none !important; }
html.in-app:not(.dark) .hub-card,
html.in-app:not(.dark) .card:not(.mann){ box-shadow:0 2px 10px rgba(60,40,20,.05) !important; }