/* ========================================================================== 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 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, .app-shell-mobile-btn{ --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: brand mark + collapse/close icon buttons ------------------- */ .sidebar > .h-16{ border-bottom: 1px solid var(--tb-border); } .tb-side__logo{ background: var(--tb-card); border: 1px solid var(--tb-border); box-shadow: var(--tb-lift); } .tb-side__logo-mark{ width: 24px; height: 24px; object-fit: contain; } .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); } /* 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