/* The Healthy Gamer player's stylesheet: meditera's look taken whole (design/meditera.css and tokens.css,
   copied unchanged from bama/wakingup1), the design base's additions (design/options/hg.css), then the few
   rules only this app's screens need. `npm run build` copies the three design files beside this one.
   Tokens only: no colour literal and no hand-typed size here. Dark only (decision 1). */
@import url("meditera.css");
@import url("hg.css");

:root { color-scheme: dark; }

/* buttons drawn where meditera draws spans: the format and caption switches, the up-next card */
.seg span { cursor: pointer; }
.upnext { width: 100%; text-align: left; }
.coll-row { text-align: left; }
.c-play:disabled { opacity: 0.4; cursor: default; }

/* the video, or the poster of an audio-only play, fills the stage drawn in the base; the icon shows under it
   until a frame or the poster is there */
.stage { position: relative; overflow: hidden; }
.stage > video, .stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: transparent; }
.np .stage { flex-shrink: 0; }

/* what comes after the one that ended: the next session's day, or the next video (K-7) */
.after { margin-top: var(--space-5); }
.after p { font-size: var(--text-sm); color: var(--color-text-2); }
.after .cta { margin-top: var(--space-2); }
.np .desc, .panel .desc { margin-top: var(--space-5); }

/* the end of the first screen */
.foot { margin-top: var(--space-8); padding-bottom: var(--space-4); }

/* on a computer the places are the sidebar, so a place page has no way back of its own, and its search sits
   beside its name (c-3); on a phone the search is the round button in the bar */
.search.wide { display: none; }
@media (min-width: 56.25em) {
  .back.top { display: none; }
  .search.wide { display: flex; }
}