/* ==========================================================================
   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.
   • Tokens are re-declared with a --tb- prefix and SCOPED to the sidebar chrome,
     so we never clobber the global --ink the clay/material components rely on.
   Loaded in <head> AFTER the clay/material design system so it always wins.
   ========================================================================== */

/* --- Toy Box tokens, scoped to the shell sidebar chrome only ------------- */
.sidebar,
#global-sidebar-tooltip,
.tb-acct-menu,
.tb-install-guide{
  --tb-violet:      oklch(58% 0.19 300);
  --tb-violet-deep: oklch(46% 0.17 300);
  --tb-rose:        oklch(70% 0.16 10);
  --tb-card:        oklch(99.5% 0.002 300);   /* raised panel face */
  --tb-ink:         oklch(23% 0.03 300);      /* primary text (local, not global --ink) */
  --tb-soft:        oklch(45% 0.025 300);     /* muted text / rest icons */
  --tb-hover:       oklch(93% 0.03 300);      /* subtle hover wash */
  --tb-border:      oklch(88% 0.03 300);
  --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-strong: 0 0 0 3px oklch(58% 0.19 300 / .30);
  --tb-dur: .15s;
}

/* --- 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; }

.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;
}
/* Active row — flat violet fill, white content (DS [aria-current] rule) */
.sidebar .tb-side__item[aria-current]{
  background: var(--tb-violet);
  color: #fff;
}
.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: #fff;
  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: #fff; 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-notif-face:   oklch(97.5% 0.018 10);
  --tb-notif-hover:  oklch(95% 0.03 10);
  --tb-notif-border: oklch(90% 0.05 10);
}
.dark .sidebar{
  --tb-notif-face:   oklch(29% 0.035 10);
  --tb-notif-hover:  oklch(33% 0.045 10);
  --tb-notif-border: oklch(41% 0.05 10);
}
.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: #fff; }
.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: #fff; 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); }
.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__head{
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .6rem .65rem;
}
.tb-acct-menu__avatar{
  width: 2.5rem; height: 2.5rem; border-radius: 999px; flex-shrink: 0; overflow: hidden;
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: .95rem;
}
.tb-acct-menu__avatar img{ width: 100%; height: 100%; object-fit: cover; }
.tb-acct-menu__who{ min-width: 0; }
.tb-acct-menu__name,
.tb-acct-menu__meta{ margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-acct-menu__name{ font-weight: 800; font-size: .92rem; line-height: 1.25; }
.tb-acct-menu__meta{ font-size: .76rem; color: var(--tb-soft); line-height: 1.3; }
.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: oklch(70% 0.16 10 / .14);
  color: oklch(48% 0.17 10);
}
.tb-acct-menu__item--exit:hover .material-symbols-outlined,
.tb-acct-menu__item--exit:focus-visible .material-symbols-outlined{ color: oklch(55% 0.18 10); }
.tb-acct-menu__item--exit:focus-visible{ box-shadow: inset 0 0 0 2px var(--tb-rose); }
.dark .tb-acct-menu__item--exit:hover,
.dark .tb-acct-menu__item--exit:focus-visible{ color: oklch(82% 0.1 10); }

/* 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 with .clay-card) --------------- */
#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);
}


/* --- Optional dark seam (harmless if the shell never sets .dark) --------- */
.dark .sidebar,
.dark #global-sidebar-tooltip,
.dark .tb-acct-menu,
.dark .tb-install-guide{
  --tb-violet-deep: oklch(80% 0.13 300);
  --tb-card:   oklch(25.5% 0.026 300);
  --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);
}


/* --- "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: rgb(20 10 40 / .45); 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: #fff; 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); }