/* ==========================================================================
   sidebar_toybox.css — Toy Box skin for the app-shell sidebar.

   The sidebar in base.html uses the DESIGN-SYSTEM component API documented in
   DESIGN.md §4 and demoed in the specimen:  .tb-side / .tb-side__label /
   .tb-side__item  ([aria-current] = violet fill), plus a few app-shell-only
   sub-elements (__logo, __icon-btn, __avatar, __foot-link, __logout) for the
   header/footer chrome the marketing rail doesn't have.

   Self-contained on purpose:
   • We do NOT load site_toybox.css here — its bare element selectors (body, a,
     h1–h3, .card, table…) would leak into every page that has no .tbm wrapper,
     including the /studio/ surfaces that share this same shell.
   • It reads --tb-* tokens that the active design defines for the sidebar chrome
     (see "Tokens" below), so it never clobbers the global --ink the components use.
   Loaded in <head> AFTER the design's own head.
   ========================================================================== */

/* --- Tokens: supplied by the active design, never defaulted here --------------------------------------------
   Every --tb-* name this sheet reads (violet, card, ink, soft, hover, border, radii, lift, rings, motion, the ink on an
   accent fill, the sign-out and backdrop colours) is defined by the design that is on screen, in its own files:
   core/designs/clay/shell.css, core/designs/material/shell.css, core/calm/shell.css, core/<world>/shell.css,
   core/minimal/shell.css. The --tb- prefix is a historical hook name, not a dependency on Toy Box. This sheet is
   layout, structure and the way each part reads those tokens. --- */

/* --- Panel: light card surface + soft lift + hairline edge --------------- */
.sidebar.tb-side{
  background: var(--tb-card);
  border: 0;
  border-inline-end: 1px solid var(--tb-border);
  box-shadow: var(--tb-lift);
}

/* --- Panel layout: the app shell rail is a full-height flex COLUMN -------
   The "loaded AFTER the design system so it always wins" note above does not
   hold for a page that links site_toybox.css from its own content/styles block
   -- base.html renders those after this file, so that sheet's marketing
   nav-rail rule (.tb-side{display:grid;align-content:start;padding:1rem})
   wins on equal specificity and silently re-lays-out the shell: `flex flex-col`
   is off, the nav's `flex-1` stops expanding, and the user chip rides up under
   the last nav item instead of sitting at the bottom. Element + both classes
   outranks a lone class whatever the load order. --- */
aside.sidebar.tb-side{
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 0;
  border-radius: 0;
}

/* --- Header: the wordmark, and one collapse/expand toggle -----------------
   Expanded, the toggle sits at the end of the header, always visible. Collapsed, it is the brand mark, which turns into the expand chevron
   on hover (the pattern ChatGPT's sidebar uses). --- */
.sidebar > .h-16{ border-bottom: 1px solid var(--tb-border); }

.tb-side__brand{ display: flex; align-items: center; min-width: 0; border-radius: var(--tb-r-sm); }
.tb-side__brand:focus-visible{ outline: none; box-shadow: var(--tb-ring-strong); }
.tb-side__wordmark{ height: 26px; width: auto; display: block; }
/* The coloured wordmark has dark letters; a dark shell (.dark) swaps in the white one. */
.sidebar .tb-side__wordmark--on-dark{ display: none; }
.dark .sidebar .tb-side__wordmark--on-dark{ display: block; }
.dark .sidebar .tb-side__wordmark--on-light{ display: none; }

.tb-side__toggle{
  position: relative; flex-shrink: 0;
  display: grid; place-items: center;
  width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: var(--tb-r-sm);
  background: transparent; color: var(--tb-soft); cursor: pointer;
  transition: background var(--tb-dur), color var(--tb-dur);
}
.tb-side__toggle:hover{ background: var(--tb-hover); color: var(--tb-violet-deep); }
.tb-side__toggle:focus-visible{ outline: none; box-shadow: var(--tb-ring-strong); }
/* Mark and chevron share one box, crossfading. */
.tb-side__toggle-mark,
.tb-side__toggle-icon{ grid-area: 1 / 1; transition: opacity var(--tb-dur) ease-out, transform .2s ease-out; }
.tb-side__toggle-mark{ width: 24px; height: 24px; object-fit: contain; opacity: 0; }

.sidebar.collapsed .tb-side__toggle{
  width: 40px; height: 40px; opacity: 1;
  background: var(--tb-card); border: 1px solid var(--tb-border); box-shadow: var(--tb-lift);
  border-radius: 14px;
}
.sidebar.collapsed .tb-side__toggle-mark{ opacity: 1; }
.sidebar.collapsed .tb-side__toggle-icon{ opacity: 0; }
.sidebar.collapsed .tb-side__toggle:hover .tb-side__toggle-mark,
.sidebar.collapsed .tb-side__toggle:focus-visible .tb-side__toggle-mark{ opacity: 0; }
.sidebar.collapsed .tb-side__toggle:hover .tb-side__toggle-icon,
.sidebar.collapsed .tb-side__toggle:focus-visible .tb-side__toggle-icon{ opacity: 1; }
@media (prefers-reduced-motion: reduce){
  .tb-side__toggle, .tb-side__toggle-mark, .tb-side__toggle-icon{ transition: none; }
}

.tb-side__icon-btn,
.tb-side__icon-btn--rose{ transition: color var(--tb-dur), background var(--tb-dur); }
.tb-side__icon-btn:hover{ background: var(--tb-hover); color: var(--tb-violet-deep); }
.tb-side__icon-btn--rose:hover{ background: var(--tb-hover); color: var(--tb-rose); }

/* --- Nav items: FULL Toy Box .tb-side__item spec (layout + skin) --------
   Mirrors site_toybox.css .tb-side__item so the rows keep flex layout,
   padding and rounding once the clay-nav-item classes are gone. --- */
.sidebar .tb-side__item{
  display: flex;
  align-items: center;
  gap: .7em;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  color: var(--tb-ink);
  padding: .6em .8em;
  border: 0;
  border-radius: var(--tb-r-md);
  background: transparent;
  transition: background var(--tb-dur), color var(--tb-dur);
}
.sidebar .tb-side__item:hover{
  background: var(--tb-hover);
  color: var(--tb-ink);
  transform: none;
}
/* A hairline between two runs of a long menu (an Education Manager's school entries and the platform-wide ones). */
.sidebar .tb-side__sep{ height: 1px; margin: .5rem .8rem; border: 0; background: var(--tb-border); }
/* Active row — flat violet fill, white content (DS [aria-current] rule) */
.sidebar .tb-side__item[aria-current]{
  background: var(--tb-violet);
  color: var(--tb-on);
}
.sidebar .tb-side__item[aria-current]:hover{ background: var(--tb-violet-deep); }
.sidebar .tb-side__item:focus-visible{ outline: none; box-shadow: var(--tb-ring-strong); }

/* Unread counters (_sidebar_item.html `item.badge`): a pill at the row end, and a
   corner badge on the icon that only the collapsed rail shows. Empty = hidden. */
.sidebar .tb-side__icon-wrap{ position: relative; display: inline-flex; flex-shrink: 0; }
.sidebar .tb-side__badge{
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--tb-violet); color: var(--tb-on);
  font-size: 11px; font-weight: 800; line-height: 20px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.sidebar .tb-side__badge:empty{ display: none !important; }
.sidebar .tb-side__badge--pill{ margin-inline-start: auto; flex: none; }
.sidebar .tb-side__item[aria-current] .tb-side__badge{ background: var(--tb-on); color: var(--tb-violet-deep); }
.sidebar .tb-side__badge--corner{
  position: absolute; top: -6px; inset-inline-end: -8px; min-width: 16px; height: 16px;
  padding: 0 4px; font-size: 10px; line-height: 16px; box-shadow: 0 0 0 2px var(--tb-card);
}
.sidebar:not(.collapsed) .tb-side__badge--corner{ display: none; }

/* Notifications (notifications/partials/bell.html): the first row, above Dashboard.
   A utility, not a destination: a soft rose-tinted face with a hairline, rose
   counts like every other bell badge, and no active state, so it reads as
   special without outranking the violet current-page row. --- */
.sidebar .tb-side__utility{ margin-bottom: .75rem; }
.sidebar .tb-side__item.tb-side__notif{
  width: 100%; font: inherit; font-weight: 600; font-size: .95rem; text-align: start; cursor: pointer;
  background: var(--tb-notif-face);
  box-shadow: inset 0 0 0 1px var(--tb-notif-border);
}
.sidebar .tb-side__item.tb-side__notif:hover{ background: var(--tb-notif-hover); }
.sidebar .tb-side__item.tb-side__notif:focus-visible{ box-shadow: inset 0 0 0 1px var(--tb-notif-border), var(--tb-ring-strong); }
.sidebar .tb-side__notif .tb-side__badge{ background: var(--tb-rose); color: var(--tb-on); }
.sidebar.collapsed .tb-side__utility{ display: flex; justify-content: center; }
.sidebar.collapsed .tb-side__item.tb-side__notif{ width: 44px; height: 44px; border-radius: 14px; }

/* Stacked "Studio" sub-label: muted at rest, legible on the violet row */
.sidebar .sidebar-subtext{ color: var(--tb-soft); opacity: 1; }
.sidebar .tb-side__item[aria-current] .sidebar-subtext{ color: var(--tb-on); opacity: .82; }

/* --- Footer: user row + logout ------------------------------------------ */
.sidebar > div:last-child{ border-top: 1px solid var(--tb-border); }

.tb-side__avatar{
  background: linear-gradient(135deg, var(--tb-violet), var(--tb-violet-deep));
}
.tb-side__foot-link{ transition: background var(--tb-dur); }
.tb-side__foot-link:hover{ background: var(--tb-hover); }

/* --- Account chip (a <button>) + the account menu it rolls up ------------
   The menu is teleported to <body> by _sidebar.html, so it carries its own
   token scope (see the token selector above). */
button.tb-side__foot-link{
  width: 100%; border: 0; background: transparent; color: inherit;
  font: inherit; text-align: start; cursor: pointer;
}
.tb-side__foot-link.is-open{ background: var(--tb-hover); }

/* --- Design system box: the one you are in, and the way back to Settings ----
   Shown for every design system. Plain selectors on purpose: each world's shell.css restyles
   it under [data-ui-theme] (higher specificity), so only Claymorphism and Material land here. */
.tb-side__world{
  flex: none; margin-top: .5rem;
  display: flex; align-items: center; gap: .65rem;
  margin-inline: 1rem; margin-bottom: .75rem; padding: .6rem .7rem; min-height: 2.75rem;
  text-decoration: none; color: var(--tb-ink);
  background: var(--tb-hover);
  border: 1px solid var(--tb-border);
  border-radius: 14px;
  transition: border-color var(--tb-dur), background var(--tb-dur);
}
.tb-side__world:hover{ border-color: var(--tb-violet); }
.tb-side__world:focus-visible{ outline: none; box-shadow: var(--tb-ring-strong); }
.tb-side__world-ico{ color: var(--tb-violet-deep); display: inline-flex; flex: none; }
.tb-side__world-text{ display: grid; line-height: 1.2; min-width: 0; }
.tb-side__world-text small{ color: var(--tb-soft); font-size: .75rem; }
.tb-side__world-text strong{ font-size: .92rem; color: var(--tb-violet-deep); }
.sidebar.collapsed .tb-side__world{ justify-content: center; margin-inline: .5rem; }
@media (min-width: 1024px) and (max-height: 760px){
  .sidebar > nav{ min-height: 0; }
  .tb-side__world{ margin-top: .25rem; margin-bottom: .4rem; padding: .35rem .6rem; }
  .tb-side__world-text small{ display: none; }
}
.tb-side__foot-link:focus-visible{ outline: none; box-shadow: var(--tb-ring-strong); }
.tb-side__foot-chevron{
  font-size: 1.15rem !important; color: var(--tb-soft); flex-shrink: 0;
  transition: color var(--tb-dur);
}
.tb-side__foot-link:hover .tb-side__foot-chevron,
.tb-side__foot-link.is-open .tb-side__foot-chevron{ color: var(--tb-violet); }

.tb-acct-menu{
  position: fixed; z-index: 60;
  padding: .4rem;
  background: var(--tb-card);
  color: var(--tb-ink);
  border: 1px solid var(--tb-border);
  border-radius: var(--tb-r-md);
  box-shadow: var(--tb-lift);
  transform-origin: bottom center;
}
@media (min-width: 1024px){
  .tb-acct-menu.is-side{ transform-origin: bottom left; }
  [dir="rtl"] .tb-acct-menu.is-side{ transform-origin: bottom right; }
}
.tb-acct-menu__sep{ height: 1px; margin: .3rem .35rem; background: var(--tb-border); }
.tb-acct-menu__item{
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .65rem; border-radius: var(--tb-r-sm);
  color: var(--tb-ink); font-weight: 700; font-size: .9rem; text-decoration: none;
  outline: none;
  transition: background var(--tb-dur), color var(--tb-dur);
}
/* "Install app" rows anywhere in the app (menus, notification preferences): hidden until
   core/js/pwa-install.js marks <html data-pwa-installable>. A flag on the root, not [hidden] on the
   row, because the account menu is an x-if template that is cloned afresh on every open. */
html:not([data-pwa-installable]) [data-pwa-install]{ display: none !important; }
button.tb-acct-menu__item{ width: 100%; border: 0; background: none; font-family: inherit; text-align: start; cursor: pointer; }
.tb-acct-menu__item .material-symbols-outlined{ font-size: 1.25rem; color: var(--tb-soft); transition: color var(--tb-dur); }
.tb-acct-menu__label{ flex: 1; min-width: 0; }
.tb-acct-menu__tick{ opacity: 0; color: var(--tb-violet) !important; font-size: 1.1rem !important; }
.tb-acct-menu__item[aria-current="page"] .tb-acct-menu__tick{ opacity: 1; }
.tb-acct-menu__item[aria-current="page"]{ color: var(--tb-violet-deep); }
.tb-acct-menu__item:hover,
.tb-acct-menu__item:focus-visible{ background: var(--tb-hover); }
.tb-acct-menu__item:hover .material-symbols-outlined,
.tb-acct-menu__item:focus-visible .material-symbols-outlined{ color: var(--tb-violet); }
.tb-acct-menu__item:focus-visible{ box-shadow: inset 0 0 0 2px var(--tb-violet); }
.tb-acct-menu__item--exit:hover,
.tb-acct-menu__item--exit:focus-visible{
  background: var(--tb-exit-wash);
  color: var(--tb-exit-ink);
}
.tb-acct-menu__item--exit:hover .material-symbols-outlined,
.tb-acct-menu__item--exit:focus-visible .material-symbols-outlined{ color: var(--tb-exit-ink-hi); }
.tb-acct-menu__item--exit:focus-visible{ box-shadow: inset 0 0 0 2px var(--tb-rose); }


/* Roll-up: rises out of the chip. Classes driven by x-transition. */
.tb-acct-enter{ transition: opacity .16s ease-out, transform .2s cubic-bezier(.2,.8,.2,1); }
.tb-acct-leave{ transition: opacity .1s ease-in, transform .1s ease-in; }
.tb-acct-from{ opacity: 0; transform: translateY(6px) scale(.98); }
.tb-acct-to{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .tb-acct-from{ transform: none; }
}


/* --- Collapsed-state tooltip (built by JS in base.html; position, padding and type come from its utility classes,
       the face is the active design's own --tb-* values, nothing from a card component) ------------------------- */
#global-sidebar-tooltip{
  background: var(--tb-card);
  color: var(--tb-ink);
  box-shadow: var(--tb-lift);
  border: 1px solid var(--tb-border);
  border-radius: var(--tb-r-sm);
}


/* --- Account chip text -----------------------------------------------------
   Read from the sidebar's own tokens, which always sit on the sidebar's own face.
   The page palette's --theme-text (what `text-ink` is) goes near-white under a dark
   palette while this face stays light, which made the name vanish. */
.sidebar .tb-side__who{ color: var(--tb-ink); }
.sidebar .tb-side__role{ color: var(--tb-soft); }

/* --- "Add to Home Screen" guide (core/pwa/_install_ios.html) ------------- */
dialog.tb-install-guide{
  position: fixed; inset: 0; margin: auto; /* the shell's resets drop the UA's centring */
  border: 0; padding: 0; background: transparent; color: var(--tb-ink);
  width: min(420px, calc(100vw - 32px)); height: fit-content; max-height: calc(100dvh - 32px);
}
dialog.tb-install-guide::backdrop{ background: var(--tb-scrim); backdrop-filter: blur(3px); }
.tb-install-guide__card{
  display: grid; gap: .9rem; padding: 1.4rem;
  background: var(--tb-card); border: 1px solid var(--tb-border);
  border-radius: var(--tb-r-md); box-shadow: var(--tb-lift);
}
.tb-install-guide__head{ display: flex; align-items: start; justify-content: space-between; gap: .8rem; }
.tb-install-guide__head h2{ margin: 0; font-family: inherit; font-weight: 800; font-size: 1.15rem; line-height: 1.3; letter-spacing: normal; }
.tb-install-guide__x{
  flex-shrink: 0; width: 2.25rem; height: 2.25rem; display: grid; place-items: center;
  border: 0; border-radius: 999px; background: none; color: var(--tb-soft); cursor: pointer;
}
.tb-install-guide__x:hover{ background: var(--tb-hover); color: var(--tb-ink); }
.tb-install-guide__lede{ margin: 0; color: var(--tb-soft); font-size: .92rem; }
.tb-install-guide__steps{ display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.tb-install-guide__steps li{
  display: flex; align-items: center; gap: .75rem; padding: .65rem .75rem;
  border-radius: var(--tb-r-sm); background: var(--tb-hover); font-weight: 600; font-size: .92rem;
}
.tb-install-guide__steps .material-symbols-outlined{ font-size: 1.4rem; color: var(--tb-violet); }
.tb-install-guide__done{
  justify-self: end; min-height: 44px; padding: 0 1.3rem; border: 0; border-radius: 999px;
  background: var(--tb-violet); color: var(--tb-on); font: inherit; font-weight: 800; cursor: pointer;
}
.tb-install-guide__x:focus-visible,
.tb-install-guide__done:focus-visible{ outline: none; box-shadow: var(--tb-ring-strong); }


/* A right-pointing Material chevron drawn as a left one (the collapse toggle); `scale` composes with the Tailwind rotate. */
.calm-mirror{ scale: -1 1; }