/* ==========================================================================
   mobile_shell.css — the app shell below the `lg` breakpoint (< 1024px):
   top bar (.tb-mtop), bottom dock (.tb-dock) and the "More" sheet (.tb-more).
   Markup: core/partials/_mobile_shell.html. Behaviour: core/js/mobile_shell.js.

   Self-contained for the same reason as sidebar_toybox.css: tokens carry a
   --tb- prefix and are scoped to this chrome, so they never leak into page
   content or clobber the global --ink the clay/material components use.
   At 1024px+ none of this renders; the sidebar is the navigation.
   ========================================================================== */

.tb-mshell{
  --tb-violet:      oklch(58% 0.19 300);
  --tb-violet-deep: oklch(46% 0.17 300);
  --tb-violet-wash: oklch(58% 0.19 300 / .14);
  --tb-rose:        oklch(70% 0.16 10);
  --tb-card:        oklch(99.5% 0.002 300);
  --tb-glass:       oklch(99.5% 0.002 300 / .86);
  --tb-ink:         oklch(23% 0.03 300);
  --tb-soft:        oklch(45% 0.025 300);
  --tb-hover:       oklch(93% 0.03 300);
  --tb-border:      oklch(88% 0.03 300);
  --tb-r-lg: 28px; --tb-r-md: 18px; --tb-r-sm: 12px;
  --tb-lift: 0 2px 4px rgb(40 20 80 / .06), 0 12px 28px -8px rgb(40 20 80 / .16),
             0 32px 64px -24px rgb(40 20 80 / .22);
  --tb-ring: 0 0 0 3px oklch(58% 0.19 300 / .35);
  --tb-dur: .18s;
  --tb-mtop-h: 56px;
  --tb-dock-h: 64px;
}
.dark .tb-mshell{
  --tb-violet-deep: oklch(80% 0.13 300);
  --tb-violet-wash: oklch(70% 0.15 300 / .22);
  --tb-card:   oklch(25.5% 0.026 300);
  --tb-glass:  oklch(25.5% 0.026 300 / .88);
  --tb-ink:    oklch(95% 0.008 300);
  --tb-soft:   oklch(72% 0.02 300);
  --tb-hover:  oklch(33% 0.028 300);
  --tb-border: oklch(40% 0.02 300);
  --tb-lift: 0 2px 4px rgb(0 0 0 / .35), 0 12px 28px -8px rgb(0 0 0 / .55),
             0 32px 64px -24px rgb(0 0 0 / .65);
}

/* Desktop: the sidebar owns navigation. */
@media (min-width: 1024px){
  .tb-mshell{ display: none !important; }
}

@media (max-width: 1023.98px){
  /* The sidebar is desktop navigation; below lg the dock replaces it
     (the old off-canvas drawer and hamburger are gone). */
  .sidebar.tb-side{ display: none !important; }

  /* Room for the fixed chrome, safe areas included (viewport-fit=cover). */
  .tb-mshell-main{
    padding-top: calc(var(--tb-mtop-h, 56px) + env(safe-area-inset-top, 0px));
  }
  .tb-mshell-main.has-dock{
    padding-bottom: calc(var(--tb-dock-h, 64px) + env(safe-area-inset-bottom, 0px) + 8px);
  }
  html.tb-more-lock,
  html.tb-more-lock body{ overflow: hidden; }

  /* Notifications (scoped under .notif-ui to outrank notifications.css, which
     loads later): the panel drops from under the top bar, and toasts ride
     above the dock instead of under it. */
  .notif-ui .notif-panel,
  .notif-ui .notif-panel.is-collapsed{
    top: calc(56px + env(safe-area-inset-top, 0px) + .5rem);
    max-height: calc(100dvh - 56px - 64px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 1.5rem);
  }
  .notif-ui .notif-toasts{
    inset-inline: .75rem;
    inset-block-end: calc(64px + env(safe-area-inset-bottom, 0px) + .75rem);
    width: auto;
  }
}

/* --- Top bar -------------------------------------------------------------- */
.tb-mtop{
  position: fixed; inset-inline: 0; top: 0; z-index: 40;
  height: calc(var(--tb-mtop-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) max(.75rem, env(safe-area-inset-right, 0px)) 0 max(.75rem, env(safe-area-inset-left, 0px));
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  background: var(--tb-glass);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--tb-border);
  color: var(--tb-ink);
}
.tb-mtop__brand{
  display: flex; align-items: center; gap: .6rem; min-width: 0;
  min-height: 44px; padding-inline-end: .5rem;
  color: var(--tb-ink); text-decoration: none; border-radius: var(--tb-r-sm);
}
.tb-mtop__logo{
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 11px; overflow: hidden;
  display: grid; place-items: center; background: var(--tb-violet-wash);
}
.tb-mtop__logo img{ width: 26px; height: 26px; object-fit: contain; }
.tb-mtop__name{ font-weight: 800; font-size: 1.1rem; letter-spacing: -.01em; white-space: nowrap; }
.tb-mtop__actions{ display: flex; align-items: center; gap: .25rem; flex-shrink: 0; }
.tb-mtop__btn{
  position: relative; width: 44px; height: 44px; border: 0; border-radius: 14px;
  display: grid; place-items: center; background: transparent; color: var(--tb-soft); cursor: pointer;
  transition: background var(--tb-dur), color var(--tb-dur);
}
.tb-mtop__btn .material-symbols-outlined{ font-size: 1.5rem; }
.tb-mtop__btn .notif-badge{ top: 4px; inset-inline-end: 4px; }
.tb-mtop__btn:active{ background: var(--tb-hover); color: var(--tb-violet-deep); }
.tb-mtop__avatar{
  width: 44px; height: 44px; padding: 5px; border: 0; background: transparent; cursor: pointer;
  display: grid; place-items: center; border-radius: 999px;
  color: #fff; font-weight: 800; font-size: .95rem;
}
.tb-mtop__avatar > img,
.tb-mtop__avatar:not(:has(img)){
  width: 34px; height: 34px; border-radius: 999px; object-fit: cover;
}
.tb-mtop__avatar:not(:has(img)){
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--tb-violet), var(--tb-rose));
}
.tb-mtop__link,
.tb-mtop__cta{
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 .95rem;
  border-radius: 999px; font-weight: 800; font-size: .9rem; text-decoration: none;
}
.tb-mtop__link{ color: var(--tb-ink); }
.tb-mtop__cta{ background: var(--tb-violet); color: #fff; }

/* --- Bottom dock ---------------------------------------------------------- */
.tb-dock{
  position: fixed; inset-inline: 0; bottom: 0; z-index: 45;
  padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  background: var(--tb-glass);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-top: 1px solid var(--tb-border);
  transition: transform .22s cubic-bezier(.2,.8,.2,1);
}
.tb-dock.is-away{ transform: translateY(110%); }
.tb-dock__list{
  display: flex; height: var(--tb-dock-h); margin: 0 auto; padding: 0 .25rem;
  max-width: 640px; list-style: none;
}
.tb-dock__list > li{ flex: 1 1 0; min-width: 0; display: flex; }
.tb-dock__item{
  flex: 1; min-width: 0; min-height: 48px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 0; background: transparent; cursor: pointer; padding: 6px 2px 4px;
  color: var(--tb-soft); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.tb-dock__pill{
  position: relative; width: 56px; height: 30px; border-radius: 999px;
  display: grid; place-items: center;
  transition: background var(--tb-dur), color var(--tb-dur), transform var(--tb-dur);
}
.tb-dock__pill .material-symbols-outlined{ font-size: 1.45rem; }
.tb-dock__label{
  max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: .72rem; font-weight: 700; line-height: 1.1; letter-spacing: .01em;
}
.tb-dock__item:active .tb-dock__pill{ transform: scale(.92); background: var(--tb-hover); }
.tb-dock__item[aria-current="page"],
.tb-dock__item.is-open{ color: var(--tb-violet-deep); }
.tb-dock__item[aria-current="page"] .tb-dock__pill,
.tb-dock__item.is-open .tb-dock__pill{ background: var(--tb-violet-wash); }
.tb-dock__item[aria-current="page"] .material-symbols-outlined{
  font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}
/* The current page is folded under "More": say so with a dot. */
.tb-dock__item.is-within .tb-dock__pill::after{
  content: ""; position: absolute; top: 3px; inset-inline-end: 14px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--tb-violet); box-shadow: 0 0 0 2px var(--tb-card);
}

/* --- More sheet ----------------------------------------------------------- */
/* Named .tb-more, not .tb-sheet: the marketing phone menu (toybox_nav.html) owns
   .tb-sheet in site_toybox.css, which signed-in pages load after this file. */
.tb-more-backdrop{
  position: fixed; inset: 0; z-index: 55;
  background: rgb(20 10 40 / .42);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.tb-more{
  position: fixed; inset-inline: 0; bottom: 0; z-index: 56;
  max-height: min(86dvh, 720px); margin: 0 auto; max-width: 640px;
  display: flex; flex-direction: column;
  background: var(--tb-card); color: var(--tb-ink);
  border-radius: var(--tb-r-lg) var(--tb-r-lg) 0 0;
  box-shadow: var(--tb-lift);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overscroll-behavior: contain;
}
.tb-more__grab{ flex-shrink: 0; padding: .5rem 1rem 0; touch-action: none; }
.tb-more__handle{
  display: block; width: 40px; height: 5px; margin: 0 auto .35rem;
  border-radius: 999px; background: var(--tb-border);
}
.tb-more__head{ display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
/* Explicit font + line-height: pages that load site_toybox.css restyle bare h1-h4. */
.tb-more__title{ margin: 0; font-family: inherit; font-size: 1.15rem; line-height: 1.3; font-weight: 800; letter-spacing: normal; outline: none; }
.tb-more__close{
  width: 44px; height: 44px; border: 0; border-radius: 14px; cursor: pointer;
  display: grid; place-items: center; background: transparent; color: var(--tb-soft);
  margin-inline-end: -.5rem;
}
.tb-more__close:active{ background: var(--tb-hover); }
.tb-more__close .material-symbols-outlined{ font-size: 1.5rem; }
.tb-more__body{ overflow-y: auto; padding: .5rem 1rem 1.25rem; overscroll-behavior: contain; }

.tb-more__grid{
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem;
  margin: 0 0 1rem; padding: 0; list-style: none;
}
@media (min-width: 480px){ .tb-more__grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tb-more__tile{
  min-height: 84px; padding: .7rem .4rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
  border-radius: var(--tb-r-md); background: var(--tb-hover);
  color: var(--tb-ink); text-decoration: none; text-align: center;
  transition: background var(--tb-dur), color var(--tb-dur), transform var(--tb-dur);
}
.tb-more__tile .material-symbols-outlined{ font-size: 1.6rem; color: var(--tb-violet); }
.tb-more__tile-label{ font-size: .8rem; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.tb-more__tile:active{ transform: scale(.97); }
.tb-more__tile[aria-current="page"]{
  background: var(--tb-violet-wash); color: var(--tb-violet-deep);
  box-shadow: inset 0 0 0 2px var(--tb-violet);
}

.tb-more__account{ border-top: 1px solid var(--tb-border); padding-top: .75rem; }
.tb-more__section{
  margin: 0 0 .5rem; font-family: inherit; font-size: .75rem; line-height: 1.3; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tb-soft);
}
.tb-more__who{ display: flex; align-items: center; gap: .75rem; padding: .25rem .25rem .6rem; }
.tb-more__avatar{
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 999px; overflow: hidden;
  display: grid; place-items: center; color: #fff; font-weight: 800;
  background: linear-gradient(135deg, var(--tb-violet), var(--tb-rose));
}
.tb-more__avatar img{ width: 100%; height: 100%; object-fit: cover; }
.tb-more__who-text{ display: grid; min-width: 0; }
.tb-more__name,
.tb-more__meta{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-more__name{ font-weight: 800; }
.tb-more__meta{ font-size: .82rem; color: var(--tb-soft); }
.tb-more__row{
  display: flex; align-items: center; gap: .8rem; min-height: 52px; padding: 0 .6rem;
  border-radius: var(--tb-r-sm); color: var(--tb-ink); font-weight: 700; text-decoration: none;
}
/* "Install app" (core/js/pwa-install.js); shown and hidden by the rule in sidebar_toybox.css. */
button.tb-more__row{ width: 100%; border: 0; background: none; font: inherit; font-weight: 700; text-align: start; cursor: pointer; }
.tb-more__row .material-symbols-outlined{ font-size: 1.35rem; color: var(--tb-soft); }
.tb-more__row-label{ flex: 1; min-width: 0; }
.tb-more__chev{ font-size: 1.2rem !important; opacity: .6; }
.tb-more__row:active{ background: var(--tb-hover); }
.tb-more__row[aria-current="page"]{ color: var(--tb-violet-deep); }
.tb-more__row--exit{ color: oklch(52% 0.18 10); }
.tb-more__row--exit .material-symbols-outlined{ color: inherit; }
.dark .tb-more__row--exit{ color: oklch(78% 0.12 10); }

/* Sheet motion, driven by x-transition. */
.tb-more-enter{ transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .2s ease-out; }
.tb-more-leave{ transition: transform .18s ease-in, opacity .18s ease-in; }
.tb-more-from{ transform: translateY(100%); opacity: .6; }
.tb-more-to{ transform: none; opacity: 1; }

/* --- Focus + hover (pointer devices only, so taps never stick) ------------ */
.tb-mshell a:focus-visible,
.tb-mshell button:focus-visible{ outline: none; box-shadow: var(--tb-ring); }
.tb-dock__item:focus-visible{ box-shadow: none; }
.tb-dock__item:focus-visible .tb-dock__pill{ box-shadow: var(--tb-ring); }
@media (hover: hover){
  .tb-mtop__btn:hover,
  .tb-more__close:hover,
  .tb-more__row:hover{ background: var(--tb-hover); }
  .tb-dock__item:hover{ color: var(--tb-violet-deep); }
  .tb-more__tile:hover{ background: var(--tb-violet-wash); }
}

@media (prefers-reduced-motion: reduce){
  .tb-dock, .tb-dock__pill, .tb-more__tile{ transition: none; }
  .tb-more-enter, .tb-more-leave{ transition: opacity .15s linear; }
  .tb-more-from{ transform: none; opacity: 0; }
}