/* THE APP SHELL (the only place besides .rs-pinned-bar that pins anything). Pulled from the Wave demo's shell:
   demo banner, top bar, top nav from 62rem, bottom tab bar under 62rem, footer, toast.
   Room math (Tourney IN-0126 lesson): on a phone the top bar is NOT sticky, so pinned things are only the tab bar
   (+ at most one .rs-pinned-bar); kit.js measures both into --tab-h / --dock-h and the body leaves that room. */
.skip { position: absolute; left: -999rem; top: 0; background: var(--ink); color: var(--bg); padding: .75rem 1rem; z-index: 100; }
.skip:focus { left: .5rem; top: .5rem; }

.demo-bar { background: var(--ink); color: var(--bg); font-size: .875rem; padding: .4rem 1rem; text-align: center; }
.demo-bar a { color: inherit; font-weight: 700; }

.top { background: var(--surface); border-bottom: 1px solid var(--line); z-index: 20; }
.top-in { box-sizing: content-box; max-width: 72rem; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .6rem 1rem; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); min-width: 0; flex: 1 1 12rem; }
.mark { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: .7rem; background: var(--ink); color: var(--bg); flex: none; }
.mark svg { width: 1.25rem; height: 1.25rem; }
.brand-t { display: flex; flex-direction: column; min-width: 0; }
.brand-t b { font-size: 1rem; }
.brand-t small { font-size: .75rem; color: var(--muted); line-height: 1.25; }
.topnav { display: none; flex-wrap: wrap; gap: .25rem; }
.topnav a { padding: .5rem .7rem; border-radius: .6rem; text-decoration: none; color: var(--muted); font-weight: 600; font-size: .95rem; min-height: 2.5rem; display: inline-flex; align-items: center; }
.topnav a[aria-current="page"] { color: var(--ink); background: var(--surface2); }
.top-tools { display: flex; align-items: center; gap: .35rem; flex: none; margin-inline-start: auto; }
.icon-btn { display: grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem; border-radius: .8rem; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); cursor: pointer; text-decoration: none; font-weight: 700; font-size: .85rem; padding: 0 .5rem; }
.icon-btn svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

main { outline: none; padding-block: 1rem 2rem; }

/* bottom tab bar (phone + tablet). Labels hide into the accessible name when a tab is too narrow for them
   (container query: works at any width and any text size, no breakpoint per screen). */
.tabbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.tabbar a { container-type: inline-size; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
  padding: .4rem .15rem .45rem; text-decoration: none; color: var(--muted); font-size: .75rem; font-weight: 600; min-height: 3.5rem; min-width: 0; }
.tabbar a > span { max-width: 100%; text-align: center; line-height: 1.15; }
.tabbar svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tabbar a[aria-current="page"] { color: var(--ink); }
.tabbar a[aria-current="page"] svg { stroke-width: 2.6; }
@container (max-width: 5.5em) { .tabbar a > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
body { padding-bottom: calc(var(--tab-h, 3.5rem) + var(--dock-h, 0px)); }

@media (min-width: 62rem) {
  .top { position: sticky; top: 0; }
  .topnav { display: flex; }
  .tabbar { display: none !important; }
  body { padding-bottom: 0; }
  .brand { flex: 0 1 auto; }
}

.foot { border-top: 1px solid var(--line); background: var(--surface); margin-top: 2rem; }
.foot-in { box-sizing: content-box; max-width: 72rem; margin: 0 auto; padding: 1.25rem 1rem 1.5rem; font-size: .88rem; display: flex; flex-direction: column; gap: .4rem; }

.toast { position: fixed; left: 1rem; right: 1rem; bottom: calc(var(--tab-h, 0px) + var(--dock-h, 0px) + 1rem); margin-inline: auto; width: fit-content;
  max-width: calc(100% - 2rem); background: var(--ink); color: var(--bg); padding: .75rem 1.1rem; border-radius: .8rem; font-weight: 650; z-index: 60; box-shadow: var(--shadow); }
@media (min-width: 62rem) { .toast { bottom: 2rem; } }