/* THE BAR ALONG THE BOTTOM, ON EVERY PAGE.
 *
 * It used to live inline in index.html and the-world.html and nowhere else,
 * which meant that the moment a seven-year-old opened a book, a daily story
 * or the Spelling Academy, the app stopped being an app: no way back except
 * the browser's own back arrow, which is not on the screen at all once the
 * site is saved to the home screen and running standalone. He would get
 * stranded in a comic with no way out but the home button.
 *
 * So it is one component now, in one file, injected by sc/tabs.js. Adding a
 * page never means pasting four inline SVGs again.
 *
 * --sc-tab-h is the contract: anything else fixed to the bottom of a page
 * sits ON TOP of the bar by offsetting itself with it, and the body reserves
 * the same amount so the last thing on the page is never underneath it.
 * qa/touch.js checks exactly that, at six device sizes.
 */

:root {
  --sc-tab-h: calc(64px + env(safe-area-inset-bottom));
}

.sc-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
  display: flex;
  /* Opaque, not .97: over the cream page of a daily story the last line
     of text ghosted through it and read as a smudge rather than a bar. */
  background: #0c1120;
  border-top: 2px solid #2a3550;
  padding: 6px 4px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom));
}
.sc-tabbar .tab {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: 52px;
  text-decoration: none; color: #8a93a8;
  font-family: 'Comic Neue', system-ui, sans-serif; font-weight: 700; font-size: 12px;
  -webkit-tap-highlight-color: transparent;
}
.sc-tabbar .tab svg { width: 26px; height: 26px; }
.sc-tabbar .tab.active { color: #2fe6ff; }
.sc-tabbar .tab:active { opacity: .6; }

/* THE ROOM THE BAR TAKES IS THE PAGE'S JOB, NOT THIS FILE'S.
 *
 * This file used to set  body.sc-has-tabs { padding-bottom: var(--sc-tab-h) }
 * which looked right and was wrong: the books already reserved 90px for the
 * read-aloud pill, the dailies 96px and the reader 128px, all of it written
 * as the bottom value of a `padding` shorthand. A flat padding-bottom here
 * REPLACED those numbers with 64px, so adding the bar did not push content
 * clear of it, it pulled content further under it. qa/touch.js counted 41
 * things hidden underneath.
 *
 * So each page adds var(--sc-tab-h) to whatever it already reserved, and the
 * gate checks the sum at six device sizes. */

/* A full-screen overlay is not a page: the tabs would sit on top of a comic
 * somebody is reading. sc/tabs.js adds this while one is open. */
body.sc-tabs-off .sc-tabbar { display: none; }

@media print { .sc-tabbar { display: none !important; } }