/* notis: two worlds, News and the Library (t-75; Karl, 1 Oct 2026, after the SAS app).
   Built on the Botnest design system 1.1 (.bn-floatbar, .bn-edgetab, .bn-worldswitch). This
   sheet says which world a page is in, gives the Library its tint, places the bars on a phone
   and slides the page sideways when a reader crosses from one world to the other. */

:root {
  --bn-screen-h: var(--screen-h, 100dvh);   /* the visible screen, measured by the page's script when it runs */
  --nt-news: var(--bn-action);
  --nt-lib: var(--bn-chart-5);              /* the Library's sea-green: Botnest's teal, the colour of case hue 1 */
  /* the Library's colour as words: mixed toward the text colour so it reads at AA on its ground */
  --nt-lib-ink: color-mix(in srgb, var(--bn-chart-5) 62%, var(--bn-text));
  --nt-lib-ground: color-mix(in srgb, var(--bn-chart-5) 5%, var(--bn-bg));   /* 5%: --bn-text-3 stays at AA on it (4.52; 7% fell to 4.43) */
}

/* ---- the Library's tint: the whole page, edge to edge, so the reader knows where they are */
html[data-world="library"], html[data-world="library"] body,
html[data-world="library"] .bar { background: var(--nt-lib-ground); }
.nt-libword { margin-left: 8px; align-self: center; font: 700 0.62em/1 var(--bn-font-ui); letter-spacing: 0; color: var(--nt-lib-ink); }

/* ---- the desktop: News | Library in the header, then that world's own places */
.nt-switch { flex: none; margin-left: 20px; }
.nt-switch > a[data-world-go="news"] svg { color: var(--nt-news); }
.nt-switch > a[data-world-go="library"] { --bn-worldswitch-accent: var(--nt-lib-ink); }
.nt-switch > a[data-world-go="library"] svg { color: var(--nt-lib); }
.nt-switch > a { min-height: 38px; }
html[data-world="library"] .nt-switch { background: color-mix(in srgb, var(--bn-chart-5) 12%, var(--bn-surface-2)); }
.top-right .nt-switch { margin: 0 8px 0 0; }   /* the front page's own header */
.top-right .nt-switch > a { height: 32px; padding: 0 12px; font-size: 13.5px; }
@media (max-width: 840px) { .nt-switch > a, .top-right .nt-switch > a { height: 44px; min-height: 44px; } }   /* touch tablets: Botnest's 44px up to 840px */

/* ---- the phone: the world's glass bar, and the other world as a tab on the screen edge */
.nt-worldbar, .nt-edge { display: none; }
/* the front page colours every link inside .page (site.css P:15); the bar's labels stay ink */
.page a.bn-floatbar-item, .page a.bn-floatbar-item:hover, .page a.bn-edgetab, .page a.bn-edgetab:hover,
.page .nt-menu-panel a, .page .nt-menu-panel a:hover { color: var(--bn-text); text-decoration: none; }
.nt-worldbar[aria-label="Library"] { --bn-floatbar-accent: var(--nt-lib); }   /* the selected icon; labels are always --bn-text (Botnest 1.1.3) */
.nt-edge[data-world-go="library"] { --bn-edgetab-tint: var(--nt-lib); }
.nt-edge[data-world-go="news"] { --bn-edgetab-tint: var(--nt-news); }
.nt-menu { display: flex; min-width: 0; }
.nt-menu > summary { list-style: none; flex: 1 1 auto; }
.nt-menu > summary::-webkit-details-marker { display: none; }
.nt-menu[open] > summary svg { color: var(--bn-action); }
.nt-menu[open] > summary { background: var(--bn-glass-lens); color: var(--bn-text); font-weight: var(--bn-weight-bold);
  box-shadow: inset 0 1px 0 var(--bn-glass-highlight), var(--bn-shadow-1); }
.nt-menu-panel {
  /* placed against the bar itself: the bar's backdrop-filter makes it the frame for anything
     fixed inside it, so the panel opens just above the bar, as wide as the bar and its edge tab */
  position: absolute; z-index: 41; left: 0; right: -80px; bottom: calc(100% + 10px);
  display: flex; flex-direction: column; padding: 8px; border-radius: var(--bn-radius-lg); box-sizing: border-box;
  max-height: 70vh; overflow-y: auto;
  background: var(--bn-glass); -webkit-backdrop-filter: blur(var(--bn-blur)); backdrop-filter: blur(var(--bn-blur));
  border: 1px solid var(--bn-border); box-shadow: var(--bn-shadow-3);
}
.nt-menu-panel a { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px; border-radius: var(--bn-radius-sm);
  font: var(--bn-weight-medium) 16px/1 var(--bn-font-ui); color: var(--bn-text); text-decoration: none; }
.nt-menu-panel a:hover { background: var(--bn-surface-2); }
.nt-menu-panel .nt-menu-h { padding: 10px 12px 4px; font: var(--bn-weight-bold) 13px/1 var(--bn-font-ui); color: var(--bn-text-3); }
.nt-menu-panel hr { width: 100%; border: 0; border-top: 1px solid var(--bn-border); margin: 6px 0; }

@media (max-width: 720px) {
  .nt-worldbar { display: grid; }
  .nt-edge { display: flex; }
  .nt-switch { display: none; }
  body:not(:has(.page)) { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
  .page .top .nav { display: none; }   /* the front page's own tab bar gives way to the world bar */
  html .page[data-view="deck"] .stage { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }   /* the deck ends above the world bar (site.css loads after this sheet) */
}

/* ---- crossing: the page slides left into the Library and right back to News.
   worlds.js names the crossing; a move within one world is not animated, and a reader who asks
   for less motion gets the browser's own short fade. */
@view-transition { navigation: auto; }
@keyframes nt-out-left { to { transform: translateX(-100%); } }
@keyframes nt-in-right { from { transform: translateX(100%); } }
@keyframes nt-out-right { to { transform: translateX(100%); } }
@keyframes nt-in-left { from { transform: translateX(-100%); } }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--bn-dur-3); animation-timing-function: var(--bn-ease-io); }
html:active-view-transition-type(to-library)::view-transition-old(root) { animation-name: nt-out-left; }
html:active-view-transition-type(to-library)::view-transition-new(root) { animation-name: nt-in-right; }
html:active-view-transition-type(to-news)::view-transition-old(root) { animation-name: nt-out-right; }
html:active-view-transition-type(to-news)::view-transition-new(root) { animation-name: nt-in-left; }