/* shell.css — the site-wide bar that sits above every page of raku.online.
   Injected by shell.js so there is exactly one copy of the markup; this file
   reserves its space up front so nothing shifts when it appears.

   The bar is position:fixed rather than a flex child because base.css lays out
   body as a flex row (sidebar + main), and a full-width child would become a
   column in that row. */

:root {
  --shell-h: 52px;
  /* One hue per section. Solarized accents, which is what the playground's own
     UI already uses (#d33682 Run button, #268bd2 links) — so these are the rest
     of a palette that is already on the site, not a new one. */
  --hue-play:   #d33682;
  --hue-tour:   #cb4b16;
  --hue-drills: #6c71c4;
  --hue-spec:   #2aa198;
  --hue-faq:    #268bd2;
}
html[data-theme-active="dark"] {
  --hue-play:   #e766a6;
  --hue-tour:   #e4763f;
  --hue-drills: #949ae4;
  --hue-spec:   #3fc3b8;
  --hue-faq:    #58a9e0;
}

body { padding-top: var(--shell-h); }

/* base.css pins the sidebar to the viewport top; it now starts below the bar. */
.sidebar { height: calc(100vh - var(--shell-h)); top: var(--shell-h); }

/* The theme switcher is a bar item. Pages ship it as position:fixed for the
   moment before shell.js moves it in; once it is inside the bar it becomes an
   ordinary flex child at the right-hand end, in the same place on every page. */
.theme-switch { top: 9px; z-index: 45; }
.shell .theme-switch {
  position: static;
  align-items: center;
  padding: 0 .7rem 0 .8rem;
  border-left: 1px solid var(--border);
}
.shell .theme-menu { top: calc(var(--shell-h) - 6px); right: .5rem; }

.shell {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--shell-h);
  z-index: 40;
  display: flex;
  align-items: stretch;
  background: var(--sidebar);
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  user-select: none;
}

.shell-mark {
  display: flex;
  align-items: center;
  padding: 0 1.1rem;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -.02em;
  color: var(--fg);
  text-decoration: none;
  border-right: 1px solid var(--border);
  white-space: nowrap;
}
.shell-mark:hover { text-decoration: none; background: var(--bg); }
.shell-mark .tld { color: var(--muted); font-weight: 500; }

.shell-nav { display: flex; align-items: stretch; }

.shell-tab {
  display: flex;
  align-items: center;
  padding: 0 1.05rem;
  color: var(--muted);
  text-decoration: none;
  font-weight: 550;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.shell-tab:hover { color: var(--fg); background: var(--bg); text-decoration: none; }
.shell-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }

/* Where you are, in that section's colour. */
.shell-tab[aria-current="page"] { color: var(--fg); font-weight: 680; }
.shell-tab[data-hue="play"][aria-current="page"]   { border-bottom-color: var(--hue-play); }
.shell-tab[data-hue="tour"][aria-current="page"]   { border-bottom-color: var(--hue-tour); }
.shell-tab[data-hue="drills"][aria-current="page"] { border-bottom-color: var(--hue-drills); }
.shell-tab[data-hue="spec"][aria-current="page"]   { border-bottom-color: var(--hue-spec); }
.shell-tab[data-hue="faq"][aria-current="page"]    { border-bottom-color: var(--hue-faq); }
.shell-mark[aria-current="page"] { background: var(--bg); border-bottom: 3px solid var(--muted); }

.shell-spacer { flex: 1 1 auto; }

/* Off-site, and marked as such. */
.shell-out {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: 0 .9rem;
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
  border-left: 1px solid var(--border);
  white-space: nowrap;
}
.shell-out:hover { color: var(--fg); background: var(--bg); text-decoration: none; }
.shell-out .arr { font-size: 10px; }

/* The interpreter everything here runs on, and the way to read about it. */
.shell-engine {
  display: flex;
  align-items: center;
  padding: 0 .9rem;
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  border-left: 1px solid var(--border);
  white-space: nowrap;
}
.shell-engine:hover { color: var(--fg); background: var(--bg); text-decoration: none; }
.shell-engine[aria-current="page"] { color: var(--fg); background: var(--bg); }



@media (max-width: 46rem) {
  .shell-mark .tld { display: none; }
  .shell-out { display: none; }
  .shell-engine { display: none; }
  .shell-tab { padding: 0 .7rem; }
}