/* The app shell (web/index.html): four tabs over one page, the mini player, and the item sheet.
   On a phone the tabs are a bar at the bottom, where a thumb is; on a desk they sit in the
   header. One set of links either way - index.html draws both from one table.
   Same six colours as everything else, one accent. */

:root { --tabbar: 0px; }

/* The header's own copy of the tabs, for a wide screen. */
header .tabs { display: flex; gap: .2rem; margin-left: .5rem; }
header .tabs a.tab {
  color: var(--dim); text-decoration: none; font-size: 13px; padding: .2rem .55rem; border-radius: 4px;
}
header .tabs a.tab:hover { color: var(--text); }
header .tabs a.tab.here { color: var(--accent); background: var(--surface); }
header { align-items: center; }

.tabbar { display: none; }

/* The account picker in the header: the email, quietly, and a phone's own list when tapped. */
header .auth.compact { margin-left: auto; }
header .auth.compact select.accounts { color: var(--dim); max-width: 11rem; text-overflow: ellipsis; }

section[data-tab][hidden] { display: none; }
section .lede { color: var(--dim); font-size: 14px; margin: 1.25rem 0 1rem; }
section[data-tab="listen"] .listen { margin-top: 1.25rem; }

/* The item sheet: the whole screen, over the app, with the app still alive underneath. */
.sheet {
  position: fixed; inset: 0; z-index: 50; background: var(--bg);
  display: flex; flex-direction: column;
}
.sheet[hidden] { display: none; }
.sheet-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: calc(.5rem + env(safe-area-inset-top)) 1rem .5rem; border-bottom: 1px solid var(--line);
}
.sheet-bar button {
  background: none; border: 0; color: var(--accent); font: inherit; font-size: 15px; font-weight: 600; padding: .3rem 0; cursor: pointer;
}
.sheet-bar a { color: var(--dim); font-size: 13px; text-decoration: none; }
.sheet iframe { flex: 1; width: 100%; border: 0; background: var(--bg); }
/* The page under the sheet must not scroll behind it. */
html.sheet-open, html.sheet-open body { overflow: hidden; }
/* The mini player rides over the sheet too, so what is playing is never out of reach. */
html.sheet-open .mini { z-index: 60; }

/* The You tab: the settings, as a page and not a collapsed pane. */
.integrations.you { margin-top: 0; }
.integrations.you > h4:first-child { margin-top: 1.25rem; }
.integrations.you .more { margin-top: 2rem; }
.integrations.you .focus { margin-top: 1.5rem; }
.integrations.you .focus a { color: var(--accent); text-decoration: none; }

/* Room at the bottom for whatever is fixed there, so the last row is never under it. */
body { padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom)); }
html.has-mini body { padding-bottom: calc(var(--tabbar) + 3.6rem + env(safe-area-inset-bottom)); }
/* On the Listen tab the full player IS the page, so the mini one would be the same track twice. */
html.on-listen .mini { display: none; }
html.has-mini.on-listen body { padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom)); }

/* Signed out the sign-in card is the whole page: no tabs, no player. */
body:has(.auth.hero) .tabbar, body:has(.auth.hero) .mini { display: none; }

/* ── The phone ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 52rem) {
  :root { --tabbar: calc(3.4rem + env(safe-area-inset-bottom)); }
  header .tabs { display: none; }
  /* auth.css wraps a header with an account control onto two lines on a phone, which is right
     for the full sign-in strip and wrong for the picker alone: it fits beside the mark. */
  header:has(> .auth.compact) { flex-wrap: nowrap; padding-top: env(safe-area-inset-top); }
  header .auth.compact { width: auto; margin-left: auto; justify-content: flex-end; }
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; justify-content: space-around;
    background: var(--bg); border-top: 1px solid var(--line);
    padding: .3rem 0 calc(.3rem + env(safe-area-inset-bottom));
  }
  .tabbar a.tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: .1rem;
    color: var(--dim); text-decoration: none; font-size: 10.5px; padding: .2rem 0;
  }
  .tabbar a.tab svg { width: 22px; height: 22px; }
  .tabbar a.tab.here { color: var(--accent); }
  html.sheet-open .tabbar { display: none; }
  html.sheet-open .mini { bottom: 0; padding-bottom: calc(.35rem + env(safe-area-inset-bottom)); }
}