/* 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. Solarized has
     exactly eight accents and eight sections spent them; the ninth tab — In
     use, covering /examples, /showcase and /live — takes a true green, the
     widest gap the eight leave on the colour wheel. The tenth, Cook, takes a
     grape: the remaining gap, between Drills' violet and Play's magenta. The
     twelfth, Install, takes the indigo between FAQ's blue and Drills' violet —
     the last gap of any width left, and far enough from both to read as its
     own tab rather than as a third purple. The thirteenth, Deep, takes a brown:
     darker and greyer than Tour's orange, the one warm tone not yet spent. Pace,
     the speed page, takes a sky cyan: bluer than Spec's teal, greener and
     lighter than FAQ's blue. Support takes a sea green: bluer than In use's
     green, greener and darker than Spec's teal. Editors takes a raspberry:
     redder and darker than Play's magenta, cooler than Grid's red. Bindings
     takes a navy: deeper than Install's indigo and FAQ's blue. */
  --hue-play:   #d33682;
  --hue-inuse:  #2f9e44;
  --hue-tour:   #cb4b16;
  --hue-drills: #6c71c4;
  --hue-spec:   #2aa198;
  --hue-grid:   #dc322f;
  --hue-map:    #657b83;
  --hue-faq:    #268bd2;
  --hue-install:#4c5fd0;
  --hue-cook:   #9c36b5;
  --hue-book:   #859900;
  --hue-deep:   #a0572b;
  --hue-eco:    #b58900;
  --hue-pace:   #0e8fb0;
  --hue-film:   #b7791f;
  --hue-support:#138a5e;
  --hue-editors:#c2255c;
  --hue-bindings:#1c3f94;
  --hue-embed:  #5f3dc4;
}
html[data-theme-active="dark"] {
  --hue-play:   #e766a6;
  --hue-inuse:  #5fd077;
  --hue-tour:   #e4763f;
  --hue-drills: #949ae4;
  --hue-spec:   #3fc3b8;
  --hue-grid:   #ee5f56;
  --hue-map:    #93a1a1;
  --hue-faq:    #58a9e0;
  --hue-install:#7e8fe8;
  --hue-cook:   #cc7ae0;
  --hue-book:   #a6bf1f;
  --hue-deep:   #d9955f;
  --hue-eco:    #d5a92c;
  --hue-pace:   #3cbfdc;
  --hue-film:   #f4b73f;
  --hue-support:#43c48f;
  --hue-editors:#f06595;
  --hue-bindings:#748ffc;
  --hue-embed:  #9775fa;
}

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;
}
/* iOS 26 Safari paints the page edge-to-edge behind its floating address-bar
   chrome but pins fixed elements to the inset layout viewport below it, so
   scrolled content showed in the strip between the screen top and the bar.
   Carry the bar's background up through that strip; off-screen everywhere the
   viewport starts at the screen edge. */
.shell::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 100%;
  height: 300px;
  background: inherit;
}

.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; }

/* On screens too narrow for every tab (the 375px iPhones), the row scrolls
   sideways rather than clipping the last tabs. No scrollbar — the bar is 52px
   tall and the swipe is the familiar mobile-tab-strip gesture; shell.js brings
   the active tab into view so a clipped section is never the one you are on.
   overscroll-behavior keeps a swipe past the strip's edge from turning into
   the browser's back gesture. */
.shell-nav {
  display: flex;
  align-items: stretch;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.shell-nav::-webkit-scrollbar { display: none; }

.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.js sets --h on every tab,
   group and panel entry to its section's hue; a group takes the hue of the
   section inside it that you are in. */
.shell-tab[aria-current="page"] { color: var(--fg); font-weight: 680; border-bottom-color: var(--h, var(--muted)); }
.shell-mark[aria-current="page"] { background: var(--bg); border-bottom: 3px solid var(--muted); }

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

/* The two halves of raku.online: Learn Raku, a link out to
   learn.raku.online, set apart; then a small label opening the other half,
   Raku++, which is every tab after it. */
.shell-learn { color: var(--fg); font-weight: 650; }
.shell-learn .out { color: var(--h, var(--muted)); font-weight: 500; margin-left: .3rem; }
.shell-split {
  display: flex;
  align-items: center;
  padding: 0 .35rem 0 .9rem;
  border-left: 1px solid var(--border);
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* A group is a button that looks like a tab and opens a panel of sections. */
button.shell-tab {
  font: inherit;
  font-weight: 550;
  margin: 0;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  cursor: pointer;
}
/* A chevron drawn from two borders rather than a ▾ glyph, which at bar size
   rendered as little more than a dot. */
.shell-group .caret {
  width: 5px; height: 5px;
  margin: 0 0 3px .45rem;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
  opacity: .75;
  transition: transform .12s;
}
.shell-group[aria-expanded="true"] .caret { transform: translateY(3px) rotate(-135deg); }

/* shell.js sets left to line the panel up under its button. */
.shell-menu {
  position: absolute;
  top: calc(100% + 4px);
  width: 19rem;
  max-width: calc(100vw - 16px);
  box-sizing: border-box;
  padding: 5px;
  background: var(--card-bg, var(--bg));
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .22);
  user-select: auto;
}
.shell-menu[hidden] { display: none; }

.shell-item {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  column-gap: .35rem;
  align-items: baseline;
  padding: .45rem .6rem;
  border-radius: 7px;
  color: var(--fg);
  text-decoration: none;
}
.shell-item:hover, .shell-item:focus-visible {
  background: var(--code-bg, var(--bg));
  text-decoration: none;
  outline: none;
}
.shell-item .dot {
  grid-row: 1 / span 2;
  justify-self: center;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--h, var(--muted));
}
.shell-item.out .dot {
  width: auto; height: auto;
  background: none;
  color: var(--muted);
  font-size: 11px;
}
.shell-item .t { font-weight: 600; }
.shell-item .d { grid-column: 2; color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.shell-item[aria-current="page"] { background: var(--code-bg, var(--bg)); }
.shell-item[aria-current="page"] .t { color: var(--h); }

/* 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-engine { display: none; }
  .shell-tab { padding: 0 .7rem; }
}