/* Rest — the shell's own styles.
 *
 * Only what stops being per-app once the apps are one app: the tab bar, the
 * placeholder for a domain that has not been ported yet, and the toast.
 * Everything else is inherited from css/still.css, which was lifted verbatim
 * from Still and carries the family tokens, all ten accents and dark mode.
 *
 * TOKEN DIALECT. This family speaks two: Workout Log and Meal Log use
 * --text / --surface / --muted / --hairline, while Mellow, Sleep Log and Still
 * use --ink / --canvas / --edge. The merged app is heading for the first, but
 * renaming 360 lines of working CSS during a port is churn with no safety net
 * behind it. So the canonical names are declared here as ALIASES of what is
 * already there: new code can use them today, the lifted code keeps working
 * untouched, and the rename becomes a separate, checkable step.
 */
:root{
  --text: var(--ink);
  --text-2: var(--ink-muted);
  --plane: var(--canvas);
  --surface-2: var(--surface-quiet);
  --hairline: var(--edge);
  --shadow: var(--shadow-card);
  --tabbar-h: 62px;
}

/* The screen area has to clear the tab bar, which Still never had. */
.screen{ padding-bottom: calc(32px + var(--tabbar-h)) !important; }

.tabwrap{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; align-items:stretch;
  height:calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom:env(safe-area-inset-bottom, 0px);
  background:var(--surface); border-top:1px solid var(--edge);
}
.tabbtn{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; border:0; background:none; cursor:pointer; color:var(--ink-muted);
  font:600 11.5px/1 var(--font-ui); letter-spacing:.02em;
  -webkit-tap-highlight-color:transparent;
}
.tabbtn.active{ color:var(--accent-text, var(--accent)); }
.tabbtn:focus-visible{ outline:2px solid var(--accent); outline-offset:-3px; }
.tabico{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round; }

/* A domain that exists in the tab bar but has not been ported yet. Saying so
   plainly beats an empty screen that reads as a bug. */
.notyet{
  margin:auto; text-align:center; max-width:34ch; color:var(--ink-muted);
  display:flex; flex-direction:column; gap:10px; align-items:center;
}
.notyet .nyico{ font-size:34px; }
.notyet .nyt{ font-weight:700; font-size:17px; color:var(--ink); }

#toast{
  position:fixed; left:50%; transform:translate(-50%, 12px);
  bottom:calc(var(--tabbar-h) + 18px + env(safe-area-inset-bottom, 0px));
  z-index:60; max-width:88vw;
  background:var(--ink); color:var(--canvas);
  padding:10px 16px; border-radius:10px; font-size:14px;
  opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;
}
#toast.show{ opacity:1; transform:translate(-50%, 0); }
@media (prefers-reduced-motion: reduce){ #toast{ transition:none; } }

/* ---------- a domain's sub-navigation ----------
   Sleep has three sections (Today / Trends / Guide). Those were its bottom tab
   bar when it was its own app; here the bottom bar belongs to the shell and
   switches DOMAIN, so the sections move to the top. Two bars stacked would be
   two different meanings of "tab" on one screen. */
/* FIXED, not sticky. It lives as a sibling AFTER the sleep screens in the
   document, so `position:sticky` parked it at its natural place in flow - the
   bottom of a very tall page, underneath the tab bar, where it silently
   intercepted every click aimed at it. Fixed to the top is what it means. */
.subnav{
  position:fixed; top:0; left:0; right:0; z-index:30;
  display:flex; gap:2px; padding:6px;
  background:var(--canvas); border-bottom:1px solid var(--edge);
}
html.no-subnav .subnav{ display:none; }
.subnavbtn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 6px; border:0; border-radius:9px; background:none; cursor:pointer;
  color:var(--ink-muted); font:600 13.5px/1 var(--font-ui);
  -webkit-tap-highlight-color:transparent;
}
.subnavbtn.active{ background:var(--surface); color:var(--ink); box-shadow:var(--shadow-card); }
.subnavbtn:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.subnavbtn .tabico{ width:18px; height:18px; }
.subnavbtn .tablbl{ font:inherit; }

/* Sleep's three sections sit under the fixed sub-nav and have to clear it.
   Every other screen must NOT reserve that space, or it carries a gap where no
   sub-nav exists. */
html:not(.no-subnav) #sleep-home,
html:not(.no-subnav) #sleep-trends,
html:not(.no-subnav) #sleep-guide{ padding-top:60px; }