/* The app's bottom bar: a floating pill; the current item shows its label inside a moving pill (app-nav.js), the others are icons.
   Loaded after app-refresh.css, which styles the same bar in another way: this file wins by order. */
body.app .appnav { left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); padding: 6px; border: 1px solid var(--dg-border); border-radius: 30px; background: var(--dg-surface); box-shadow: 0 8px 24px rgba(0, 0, 0, .16); justify-content: space-between; gap: 0; }
body.app .appnav button { position: relative; z-index: 1; flex: 0 0 auto; flex-direction: row; align-items: center; gap: 8px; height: 46px; min-width: 46px; padding: 0 12px; border-radius: 23px; font-size: 13.5px; font-weight: 600; letter-spacing: 0; color: var(--dg-text-muted); justify-content: center; }
body.app .appnav button i { width: 24px; height: 24px; border-radius: 0; overflow: visible; background: none !important; }
body.app .appnav button i::before, body.app .appnav button i::after { display: none; }
body.app .appnav button .ic { width: 24px; height: 24px; }
body.app .appnav button span { display: none; white-space: nowrap; }
body.app .appnav button[aria-current=true] { color: var(--dg-accent-ink); }
body.app .appnav button[aria-current=true] span { display: inline; }
body.app .appnav button[aria-current=true] .ic { color: var(--dg-accent-ink); }
body.app .appnav .up-pill { position: absolute; z-index: 0; top: 6px; bottom: 6px; left: 0; width: 0; border-radius: 23px; background: var(--dg-accent-bg); pointer-events: none; contain: layout paint; }
body.app .appnav .up-ghost { position: absolute; z-index: 1; pointer-events: none; white-space: nowrap; font-size: 13.5px; font-weight: 600; color: var(--dg-accent-ink); line-height: 46px; }
body.app main.page { padding-bottom: 110px; }

/* The app's drawer holds only what belongs to the Uposatha calendar: language, theme, font size, its own settings, share, help.
   The site's rows (find on the page, the multitool, the reading modes, the site settings, the buttons of the home page, login) are hidden. */
body.app #dg-drawer .dg-find-open,
body.app #dg-drawer #dg-drawer-multitool,
body.app #dg-drawer #dg-drawer-modes,
body.app #dg-drawer #dg-add-tile,
body.app #dg-drawer #dg-edit-tiles,
body.app #dg-drawer #dg-restore-tiles,
body.app #dg-drawer a[href="/settings/"],
body.app #dg-drawer a[href="/login"] { display: none !important; }


/* the drawer goes under the bar only while it is open; the rest of the time the bar stays at its normal 30, below every ordinary sheet/toast (z-index 50-60) - a modal like "Add to calendar" must not hide behind it */
body.app.dg-drawer-open .appnav { z-index: 1090; }
body.app #dg-drawer .dg-drawer-body { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
.up-appfoot { display: none; }
body.app .up-appfoot { display: block; margin-top: 18px; }
.up-appfoot .up-rate { display: flex; justify-content: space-between; align-items: center; }
.up-appfoot .up-rate-em { font-size: 16px; font-weight: 400; letter-spacing: 2px; }
.up-appfoot .up-ver { display: flex; justify-content: space-between; padding: 8px 4px 0; font-size: 12px; color: var(--dg-text-muted); }

/* the moving pill is the feedback of the bar: the designer's ripple inside the icons is off here (it was drawn outside the shrunken icon box) */
body.app .appnav .up-rip { display: none; }
body.app .appnav button i { isolation: isolate; }

/* Summary in the app: one card. The moon, the state of today (the Uposatha of which day), the date and the phase, and below them the countdown to the next one.
   The page's own "today" card is not shown (its date and phase are copied into the hero by app-refresh.js). */
body.app #s-summary, body.app[data-app-tab=home] #s-summary { display: none !important; }
#up-hero .hk:empty { display: none; }
#up-hero .hd { margin: 6px 0 0; font-size: 19px; font-weight: 600; }
#up-hero .hp { margin: 4px 0 0; font-size: 13.5px; color: var(--dg-text-2); }
body[data-mode=lite] #up-hero .dt { display: none; } /* the short view of the page keeps only the phase, the percent and the lunar day */
#up-hero .hc { margin: 18px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--dg-accent-ink); }
body.app[data-app-tab=home] #up-hero { margin-bottom: 0; }
#up-hero .hp .dot { margin: 0 6px; }

/* no reader frame in the app: the suttas open on the site */
body.app #reader { display: none !important; }
#up-hero .hn { margin: 18px 0 0; }
#up-hero .hc { margin: 8px 0 8px; }

/* the drawer's header already has the share button (site and app) */
#dg-drawer #d-share { display: none; }

/* narrow screens (a 360 px phone): the bar with the label of the current item must fit in the capsule, or the last item is cut */
@media (max-width: 380px) {
  body.app .appnav { left: 8px; right: 8px; padding: 5px; }
  body.app .appnav button { padding: 0 9px; min-width: 40px; gap: 6px; font-size: 13px; }
  body.app .appnav button span { overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 340px) {
  body.app .appnav button { padding: 0 5px; min-width: 34px; gap: 5px; font-size: 12.5px; }
}

/* An app bar instead of the site's header: the logo and the name of the screen. No search field, no burger (the gear of the bar opens the settings),
   no big page title (the bar says it). */
body.app .tbar .hsearch, body.app .tbar .hbtns, body.app .intro { display: none !important; }
body.app .tbar { padding: 10px 16px 6px; }
body.app .tbar .in { max-width: none; justify-content: flex-start; min-height: 44px; }
body.app .tbar .wordmark { position: static; transform: none; display: flex; align-items: center; gap: 10px; }
body.app .tbar .wordmark .up-mark { display: block; width: 32px; height: 26px; }
body.app .tbar .wordmark b { display: inline; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
body.app main.page { padding-top: 2px; }
/* nothing here is a link to click with a mouse: no hover, no browser focus ring on tap, no rubber band of the page */
body.app { overscroll-behavior-y: none; }
body.app :focus:not(:focus-visible) { outline: none; }

/* the app: the list tab holds two views with their own small switch; only the chosen one shows */
body.app[data-app-tab=list] .lvseg { display: flex; }
body.app[data-app-tab=list] #s-list, body.app[data-app-tab=list] #s-dates { display: none; }
body.app[data-app-tab=list][data-screen=list] #s-list, body.app[data-app-tab=list][data-screen=dates] #s-dates { display: block; }
body.app:not([data-app-tab=list]) #s-dates { display: none !important; }

/* in the app: today is a grey plaque, the chosen day an amber one, no outline */
body.app .grid .c[data-today=true] { box-shadow: none; background: color-mix(in srgb, var(--dg-navy-ink) 22%, var(--dg-surface)); }
body.app .grid .c[data-sel=true] { box-shadow: none; background: color-mix(in srgb, #d9a441 26%, var(--dg-surface)); }

/* the key suttas in the app: the questions stand close, each a slim card (the designer's layer made every one 60 px tall with a big gap) */
body.app .keys li.kq { padding: 0 16px; margin: 0 0 6px; border-radius: 18px; }
body.app .keys li.kq summary { padding: 12px 0; }
body.app .keys li.kq details[open] > ul { padding-bottom: 10px; }

/* the theme and the settings sit in the corner of the app bar; the bottom bar keeps the screens only */
.apptop { display: none; }
body.app .apptop { display: flex; align-items: center; gap: 2px; margin-left: auto; }
body.app .apptop .rb { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
body.app .apptop .ic { width: 22px; height: 22px; }
body.app .apptop .th-sun { display: none; }
body.app[data-dark=true] .apptop .th-sun { display: block; }
body.app[data-dark=true] .apptop .th-moon { display: none; }

/* Settings drawer: the theme and the gear of the bar slide onto the places of the drawer's own share and close buttons, and the gear turns into the cross.
   The bar rises over the drawer (its own background and the title give way); the drawer's two buttons stay under, unseen. */
body.app .apptop .rb { position: relative; transition: transform .28s cubic-bezier(.23, 1, .32, 1); }
body.app .apptop .g-gear, body.app .apptop .g-x { transition: transform .28s cubic-bezier(.23, 1, .32, 1), opacity .2s ease-out; }
body.app .apptop .g-x { position: absolute; opacity: 0; transform: rotate(-90deg) scale(.6); }
body.app.dg-drawer-open .apptop .g-gear { opacity: 0; transform: rotate(90deg) scale(.6); }
body.app.dg-drawer-open .apptop .g-x { opacity: 1; transform: none; }
body.app .tbar .wordmark { transition: opacity .2s ease-out; }
body.app.dg-drawer-open .tbar { z-index: 1100; background: transparent !important; box-shadow: none !important; border-bottom-color: transparent !important; pointer-events: none; transform: none; }
body.app.dg-drawer-open .tbar .wordmark { opacity: 0; }
body.app.dg-drawer-open .apptop { pointer-events: auto; }
body.app.dg-drawer-open .apptop .rb { transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(.773); }
body.app #dg-drawer .dg-drawer-share, body.app #dg-drawer .dg-drawer-close { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { body.app .apptop .rb, body.app .apptop .g-gear, body.app .apptop .g-x { transition: none; } }

/* the theme button turns into the share button when the drawer opens (the same way the gear turns into the cross) */
body.app .apptop .th-moon, body.app .apptop .th-sun, body.app .apptop .g-share { transition: transform .28s cubic-bezier(.23, 1, .32, 1), opacity .2s ease-out; }
body.app .apptop .g-share { position: absolute; opacity: 0; transform: rotate(-90deg) scale(.6); }
body.app.dg-drawer-open .apptop .th-moon, body.app.dg-drawer-open .apptop .th-sun { opacity: 0; transform: rotate(90deg) scale(.6); }
body.app.dg-drawer-open .apptop .g-share { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { body.app .apptop .th-moon, body.app .apptop .th-sun, body.app .apptop .g-share { transition: none; } }
body.app .apptop .rb { transition: transform .28s cubic-bezier(.23, 1, .32, 1), background-color .2s ease-out, box-shadow .2s ease-out; }
body.app.dg-drawer-open.up-dscroll .apptop .rb { background: var(--dg-surface); box-shadow: 0 2px 10px rgba(0, 0, 0, .2); }

/* the bar when it does not fit (a big size setting): less air, then icons only under the pill */
body.app .appnav.tight button { padding: 0 8px; min-width: 38px; gap: 5px; font-size: 12.5px; }
body.app .appnav.tighter button { padding: 0 6px; min-width: 34px; }
body.app .appnav.tighter button span { display: none !important; }

/* a phone does not blur what is behind the menu while it slides (the blur over a moving page is what makes it jerk): a plain fill */
body.app #dg-drawer { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--dg-surface) !important; }
body.app #dg-drawer { box-shadow: none !important; } /* a wide blurred shadow of a moving panel is repainted on every frame of the slide */

/* the concept name in the header: "Ariy" stays, muted, so the visible name reads plainly (an <i>, not a <span>, so the
   page's general ".wordmark span" rule for a subtitle - hidden under 900px - never catches it) */
.up-ariy { color: var(--dg-text-muted); font-weight: 500; font-style: normal; }