/* SolsticioUI — Sidebar / NavGroup / NavItem / ThemeToggle
 * All colors via --sol-* variables so theme/palette switching applies automatically.
 * Use position: sticky for header/footer inside a scrollable body — works inside any
 * flex/grid layout the consumer provides.
 */

/* ─────────────────────────────────────────────────────────────────
   UNLAYERED resets — needed to win against the host app's unlayered
   global link resets (e.g. `a { text-decoration: underline }`) which
   ship without @layer. Unlayered rules ALWAYS beat @layer rules per CSS
   spec, so the rules below — kept minimal — guarantee correct render
   regardless of what the consumer loads alongside SolsticioUI.
   Higher specificity (compound `.sol-sidebar a.sol-sidebar__item`)
   plus `:where()` for state colors keeps the resets robust without
   blocking consumer overrides.
   ───────────────────────────────────────────────────────────────── */
.sol-sidebar a.sol-sidebar__item,
.sol-sidebar a.sol-sidebar__item:hover,
.sol-sidebar a.sol-sidebar__item:focus,
.sol-sidebar a.sol-sidebar__item:visited {
  text-decoration: none;
  color: var(--sol-shell-text-secondary, var(--sol-text-secondary));
}

.sol-sidebar a.sol-sidebar__item:hover {
  color: var(--sol-shell-text, var(--sol-text-primary));
}

/* Active item text is MAX contrast (not accent) — the accent lives in the
   3px edge; the identity gesture is edge + elevated surface + strong text. */
.sol-sidebar a.sol-sidebar__item--active,
.sol-sidebar a.sol-sidebar__item--active:hover,
.sol-sidebar a.sol-sidebar__item--active:focus {
  color: var(--sol-shell-text, var(--sol-text-primary));
}

@layer solsticio-components {

  /* ─────────────────────────────────────────────
     Wrapper
     ───────────────────────────────────────────── */
  .sol-sidebar {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: var(--sol-sidebar-width, 260px);
    /* The device's start edge (a notch in landscape) sits inside the column, never under its content. */
    padding-inline-start: var(--sol-safe-area-inline-start);
    /* Fixed at viewport height — NOT min-height. The consumer typically mounts
       the sidebar in a flex row layout, where flex items default to
       `align-items: stretch`. With min-height (a floor, not a ceiling), the
       flex stretch will grow the sidebar to the height of the tallest sibling
       (often the main content area, which can be 2-3x the viewport on long
       pages). That defeats `position: sticky` because there is no remaining
       scroll space for the sidebar to "stick" against. Using a fixed `height`
       caps the size regardless of flex behavior; the inner .sol-sidebar__nav
       already handles overflow when nav content itself exceeds the viewport. */
    height: 100vh;
    /* The dynamic viewport where supported: on a phone 100vh is the height with the address bar
       hidden, so with it showing the sidebar's foot sits below the visible area. Identical on a
       desktop, where the two units agree. */
    height: 100dvh;
    /* Warm dark drawer in BOTH themes — the shell is the identity layer; the
       content canvas follows the user's theme. --sol-sidebar-bg remains the
       consumer hook to tint or replace the drawer surface. */
    background: var(--sol-sidebar-bg, var(--sol-shell-bg, var(--sol-bg-surface)));
    border-inline-end: 1px solid var(--sol-shell-border, var(--sol-border));
    color: var(--sol-shell-text, var(--sol-text-primary));
    /* The shell speaks the suite's typeface even when the host page doesn't. */
    font-family: var(--sol-font-family, system-ui, sans-serif);
    transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    /* Expanded: overflow visible so footer popovers (SolPaletteSwitcher menu) can escape upward.
       The inner .sol-sidebar__nav handles its own vertical scroll. NOTE: overflow-x:hidden with
       overflow-y:visible makes the browser clamp overflow-y to auto (CSS spec) — which would clip the
       popover. So horizontal clipping is applied ONLY when collapsed (where label overflow matters). */
    overflow: visible;
  }

  .sol-sidebar--collapsed {
    width: calc(var(--sol-sidebar-collapsed-width, 64px) + var(--sol-safe-area-inline-start));
    overflow-x: hidden;
  }

  /* ─────────────────────────────────────────────
     Brand
     ───────────────────────────────────────────── */
  .sol-sidebar__brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sol-space-2, 8px);
    /* Same height as the topbar so the brand row and topbar form one continuous strip. */
    height: calc(var(--sol-topbar-height, 56px) + var(--sol-safe-area-top));
    padding: var(--sol-safe-area-top) var(--sol-space-3, 12px) 0;
    /* Same 2px accent edge as the topbar — the two form one continuous top
       strip, landed by a single full-width accent line. */
    border-bottom: 2px solid var(--sol-accent);
    flex-shrink: 0;
    box-sizing: border-box;
  }

  .sol-sidebar__brand-content {
    display: flex;
    align-items: center;
    gap: var(--sol-space-2, 8px);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
  }

  /* In collapsed mode hide brand-content entirely (display: none) — width: 0
     alone is not enough because flex: 1 still claims grow space, which pushes
     the chevron toggle off-center even with justify-content: center. */
  .sol-sidebar--collapsed .sol-sidebar__brand-content {
    display: none;
  }

  /* Center the chevron toggle horizontally so it lines up with the icon
     column below. Padding goes to 0 so the button itself is the centered item. */
  .sol-sidebar--collapsed .sol-sidebar__brand {
    justify-content: center;
    padding-inline-start: 0;
    padding-inline-end: 0;
  }

  .sol-sidebar__icon-btn {
    box-sizing: border-box;
    flex-shrink: 0;
    width: var(--sol-control-h);
    height: var(--sol-control-h);
    /* Subtle border + strong text so the collapse control is discoverable, not invisible (consumer finding F13). */
    border: 1px solid var(--sol-shell-border, var(--sol-border));
    background: transparent;
    color: var(--sol-shell-text, var(--sol-text-primary));
    border-radius: var(--sol-radius-action);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
  }

  /* Warm/Material icon buttons are circular. */
  [data-sol-skin="warm"] .sol-sidebar__icon-btn,
  [data-sol-skin="material"] .sol-sidebar__icon-btn {
    border-radius: 50%;
  }

  .sol-sidebar__icon-btn:hover {
    background: var(--sol-shell-hover, var(--sol-bg-muted));
    color: var(--sol-shell-text, var(--sol-text-primary));
    border-color: var(--sol-shell-border, var(--sol-border));
  }

  .sol-sidebar__icon-btn:focus-visible {
    outline: none;
    box-shadow: var(--sol-focus-shadow);
  }

  .sol-sidebar__icon-btn svg {
    width: 16px;
    height: 16px;
  }

  /* ─────────────────────────────────────────────
     Nav body (scrollable)
     ───────────────────────────────────────────── */
  .sol-sidebar__nav {
    box-sizing: border-box;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--sol-space-2, 8px);
    display: flex;
    flex-direction: column;
    gap: var(--sol-space-1, 4px);
  }

  /* The tree container (role="tree") mirrors the nav column. flex-shrink: 0 + min-height: auto
     keep it at content height so the nav SCROLLS instead of squashing entries (which have
     overflow: hidden) when an expanded parent overflows the viewport. Same rule on both platforms. */
  .sol-sidebar__tree {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    min-height: auto;
    gap: var(--sol-space-1, 4px);
  }

  /* Breathing room between top-level groups (SolNavParent) and the loose top items. */
  .sol-sidebar__tree > .sol-sidebar__parent {
    margin-top: var(--sol-space-2, 8px);
  }

  /* Custom scrollbar (subtle, theme-aware) */
  .sol-sidebar__nav::-webkit-scrollbar {
    width: 6px;
  }
  .sol-sidebar__nav::-webkit-scrollbar-thumb {
    background: var(--sol-shell-border, var(--sol-border));
    border-radius: 3px;
  }
  .sol-sidebar__nav::-webkit-scrollbar-thumb:hover {
    background: var(--sol-shell-text-muted, var(--sol-text-muted));
  }

  /* ─────────────────────────────────────────────
     NavGroup
     ───────────────────────────────────────────── */
  .sol-sidebar__group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: var(--sol-space-4, 16px);
  }

  .sol-sidebar__group-label {
    font-size: 0.7rem;
    font-weight: var(--sol-font-weight-semibold, 600);
    text-transform: uppercase;
    /* Wide tracking on tiny uppercase — the section-label voice of the shell. */
    letter-spacing: 0.08em;
    color: var(--sol-shell-text-muted, var(--sol-text-muted));
    padding: var(--sol-space-1, 4px) var(--sol-space-3, 12px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: opacity 0.15s;
  }

  .sol-sidebar--collapsed .sol-sidebar__group-label {
    opacity: 0;
    height: 0;
    padding: 0;
    margin: 0;
    pointer-events: none;
  }

  /* ─────────────────────────────────────────────
     NavItem
     ───────────────────────────────────────────── */
  .sol-sidebar__item {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--sol-space-2, 10px);
    padding: 9px var(--sol-space-3, 12px);
    color: var(--sol-shell-text-secondary, var(--sol-text-secondary));
    text-decoration: none;
    border-radius: var(--sol-radius-menu);
    font-size: 0.9rem;
    font-weight: var(--sol-font-weight-medium, 500);
    transition: background 0.12s, color 0.12s, box-shadow 0.12s;
    cursor: pointer;
    border: 1px solid transparent;
    /* Accent bar slot on the left (transparent until active) — the "you are here" cue.
       Drawn with an inset box-shadow so it doesn't shift layout. */
    box-shadow: inset calc(3px * var(--sol-dir, 1)) 0 0 transparent;
    overflow: hidden;
    white-space: nowrap;
  }

  .sol-sidebar__item:hover {
    background: var(--sol-shell-hover, var(--sol-bg-muted));
    color: var(--sol-shell-text, var(--sol-text-primary));
  }

  .sol-sidebar__item:focus-visible {
    outline: none;
    box-shadow: var(--sol-focus-shadow), inset calc(3px * var(--sol-dir, 1)) 0 0 transparent;
  }

  /* Active = the identity gesture: 3px accent edge + slightly elevated warm
     surface + max-contrast text. The accent stays in the edge (and icon),
     not in the text — long-session legibility over decoration. */
  .sol-sidebar__item--active {
    background: var(--sol-shell-active, color-mix(in srgb, var(--sol-accent) 12%, transparent));
    color: var(--sol-shell-text, var(--sol-text-primary));
    font-weight: var(--sol-font-weight-semibold, 600);
    box-shadow: inset calc(3px * var(--sol-dir, 1)) 0 0 var(--sol-accent);
  }

  /* Warm/Material drop Standard's left accent bar — the tinted rounded surface alone is the cue. */
  [data-sol-skin="warm"] .sol-sidebar__item--active,
  [data-sol-skin="material"] .sol-sidebar__item--active {
    box-shadow: none;
  }

  .sol-sidebar__item--active:hover {
    background: color-mix(in srgb, var(--sol-shell-active, var(--sol-bg-muted)) 88%, white);
    color: var(--sol-shell-text, var(--sol-text-primary));
  }

  .sol-sidebar__item-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Icons pop with the active palette accent. Override per-app:
         .my-sidebar { --sol-sidebar-icon-color: var(--sol-text-secondary); } */
    color: var(--sol-sidebar-icon-color, var(--sol-accent));
    transition: color 0.12s;
  }

  .sol-sidebar__item-icon svg {
    width: 18px;
    height: 18px;
  }

  /* Hover/active keep the same accent (consistency); opacity pop on hover */
  .sol-sidebar__item:hover .sol-sidebar__item-icon {
    color: var(--sol-sidebar-icon-color-hover, var(--sol-accent-hover, var(--sol-accent)));
  }

  .sol-sidebar__item-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.15s;
  }

  .sol-sidebar--collapsed .sol-sidebar__item {
    justify-content: center;
    padding-inline-start: 0;
    padding-inline-end: 0;
  }

  /* Hide label and badge entirely with display: none — same reason as
     brand-content: the base rule has flex: 1 on the label, so width: 0 alone
     leaves the icon left-aligned because the label still claims grow space. */
  .sol-sidebar--collapsed .sol-sidebar__item-label,
  .sol-sidebar--collapsed .sol-sidebar__item-badge {
    display: none;
  }

  /* ─────────────────────────────────────────────
     Badge variants on NavItem
     ───────────────────────────────────────────── */
  .sol-sidebar__item-badge {
    flex-shrink: 0;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: var(--sol-font-weight-semibold, 600);
    line-height: 1.4;
    transition: opacity 0.15s;
  }

  .sol-sidebar__item-badge--info {
    background: var(--sol-info-muted);
    color: var(--sol-info-text, var(--sol-info));
  }
  .sol-sidebar__item-badge--success {
    background: var(--sol-success-muted);
    color: var(--sol-success-text, var(--sol-success));
  }
  .sol-sidebar__item-badge--warning {
    background: var(--sol-warning-muted);
    color: var(--sol-warning-text, var(--sol-warning));
  }
  .sol-sidebar__item-badge--danger {
    background: var(--sol-danger-muted);
    color: var(--sol-danger-text, var(--sol-danger));
  }
  .sol-sidebar__item-badge--neutral {
    background: var(--sol-shell-hover, var(--sol-bg-muted));
    color: var(--sol-shell-text-secondary, var(--sol-text-secondary));
  }
  .sol-sidebar__item-badge--default {
    background: var(--sol-shell-hover, var(--sol-bg-muted));
    color: var(--sol-shell-text-secondary, var(--sol-text-secondary));
  }

  /* Semantic badge text is mixed towards white so it clears the warm dark
     drawer in BOTH themes (the plain state colors are tuned per light/dark
     canvas, not for the fixed shell). */
  .sol-sidebar__item-badge--info    { color: color-mix(in srgb, var(--sol-info) 55%, white); }
  .sol-sidebar__item-badge--success { color: color-mix(in srgb, var(--sol-success) 55%, white); }
  .sol-sidebar__item-badge--warning { color: color-mix(in srgb, var(--sol-warning) 55%, white); }
  .sol-sidebar__item-badge--danger  { color: color-mix(in srgb, var(--sol-danger) 55%, white); }

  /* ─────────────────────────────────────────────
     NavParent (expandable sub-group)
     ───────────────────────────────────────────── */
  .sol-sidebar__parent {
    display: flex;
    flex-direction: column;
  }

  .sol-sidebar__parent-trigger {
    /* Inherits .sol-sidebar__item styling; this just adds parent-specific bits */
    width: 100%;
    text-align: start;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
  }

  .sol-sidebar__parent-trigger:focus-visible {
    outline: none;
    box-shadow: var(--sol-focus-shadow);
  }

  /* Subtle highlight on the parent itself when one of its children is active. */
  .sol-sidebar__parent--has-active > .sol-sidebar__parent-trigger {
    color: var(--sol-shell-text, var(--sol-text-primary));
  }

  /* Chevron rotates 90° when expanded */
  .sol-sidebar__parent-chevron {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-inline-start: auto;
    color: var(--sol-shell-text-muted, var(--sol-text-muted));
    transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .sol-sidebar__parent-chevron svg {
    width: 14px;
    height: 14px;
  }

  .sol-sidebar__parent--expanded > .sol-sidebar__parent-trigger .sol-sidebar__parent-chevron {
    transform: rotate(90deg);
  }

  /* Children container — collapsed by default with grid trick for smooth height anim */
  .sol-sidebar__parent-children {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
  }

  .sol-sidebar__parent--expanded > .sol-sidebar__parent-children {
    grid-template-rows: 1fr;
  }

  /* Single inner div is the only grid item — min-height: 0 lets the row collapse to 0. */
  .sol-sidebar__parent-children-inner {
    min-height: 0;
  }

  /* Depth-aware indent for nested SolNavParent levels.
     Per CSS spec, using `--x: calc(var(--x, 0) + 1)` to "count" depth via a single
     cascading custom property is detected as a cycle and resolves to the fallback —
     so we use explicit descendant selectors instead. Specificity grows naturally with
     depth, so deeper rules win the cascade.
     Depth 1 step = icon width + gap = 28px (matches the parent's icon column).
     Depth 2+  step = 16px per additional level — visibly indented but tighter than
     the first level so deep trees stay readable.
     Both are exposed as custom properties so consumers can tune visually. */
  .sol-sidebar {
    --sol-nav-indent-first: calc(18px + var(--sol-space-2, 10px));  /* 28px */
    --sol-nav-indent-sub: 16px;                                       /* tighter for nested */
  }

  /* Depth 1 — direct child of ONE parent inner */
  .sol-sidebar__parent-children-inner > .sol-sidebar__item,
  .sol-sidebar__parent-children-inner > .sol-sidebar__parent > .sol-sidebar__parent-trigger {
    padding-inline-start: calc(var(--sol-space-3, 12px) + var(--sol-nav-indent-first));
  }

  /* Depth 2 — nested two levels deep */
  .sol-sidebar__parent-children-inner .sol-sidebar__parent-children-inner > .sol-sidebar__item,
  .sol-sidebar__parent-children-inner .sol-sidebar__parent-children-inner > .sol-sidebar__parent > .sol-sidebar__parent-trigger {
    padding-inline-start: calc(var(--sol-space-3, 12px) + var(--sol-nav-indent-first) + var(--sol-nav-indent-sub));
  }

  /* Depth 3 — nested three levels deep */
  .sol-sidebar__parent-children-inner .sol-sidebar__parent-children-inner .sol-sidebar__parent-children-inner > .sol-sidebar__item,
  .sol-sidebar__parent-children-inner .sol-sidebar__parent-children-inner .sol-sidebar__parent-children-inner > .sol-sidebar__parent > .sol-sidebar__parent-trigger {
    padding-inline-start: calc(var(--sol-space-3, 12px) + var(--sol-nav-indent-first) + var(--sol-nav-indent-sub) * 2);
  }

  /* Depth 4 — practical cap; deeper trees fall through and reuse this padding */
  .sol-sidebar__parent-children-inner .sol-sidebar__parent-children-inner .sol-sidebar__parent-children-inner .sol-sidebar__parent-children-inner > .sol-sidebar__item,
  .sol-sidebar__parent-children-inner .sol-sidebar__parent-children-inner .sol-sidebar__parent-children-inner .sol-sidebar__parent-children-inner > .sol-sidebar__parent > .sol-sidebar__parent-trigger {
    padding-inline-start: calc(var(--sol-space-3, 12px) + var(--sol-nav-indent-first) + var(--sol-nav-indent-sub) * 3);
  }

  .sol-sidebar__parent-popover-header {
    display: none; /* Only shown in collapsed-mode flyout */
  }

  /* ─────────────────────────────────────────────
     Collapsed mode — flyout for expandable parents
     ───────────────────────────────────────────── */
  .sol-sidebar--collapsed .sol-sidebar__parent {
    position: relative;
  }

  .sol-sidebar--collapsed .sol-sidebar__parent-trigger {
    justify-content: center;
    padding-inline-start: 0;
    padding-inline-end: 0;
  }

  .sol-sidebar--collapsed .sol-sidebar__parent-chevron,
  .sol-sidebar--collapsed .sol-sidebar__parent-trigger .sol-sidebar__item-label {
    display: none;
  }

  .sol-sidebar--collapsed .sol-sidebar__parent-children {
    /* Replace inline expand animation with a hover flyout to the right */
    position: absolute;
    inset-inline-start: 100%;
    top: 0;
    margin-inline-start: 6px;
    min-width: 220px;
    /* Flyouts emanate from the drawer — they keep the shell surface. */
    background: var(--sol-shell-surface, var(--sol-bg-elevated));
    border: 1px solid var(--sol-shell-border, var(--sol-border));
    border-radius: var(--sol-radius-menu);
    box-shadow: var(--sol-elev-overlay);
    padding: var(--sol-space-1, 4px);
    z-index: 9999;

    /* Hidden until trigger or popover is hovered */
    display: flex;
    flex-direction: column;
    gap: 2px;
    grid-template-rows: none;
    overflow: visible;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(calc(-4px * var(--sol-dir, 1)));
    transition: opacity 0.12s, transform 0.12s, visibility 0s linear 0.12s;
  }

  .sol-sidebar--collapsed .sol-sidebar__parent:hover .sol-sidebar__parent-children,
  .sol-sidebar--collapsed .sol-sidebar__parent:focus-within .sol-sidebar__parent-children {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
    transition: opacity 0.12s, transform 0.12s, visibility 0s;
  }

  .sol-sidebar--collapsed .sol-sidebar__parent-popover-header {
    display: block;
    padding: 6px 12px 4px;
    font-size: 0.7rem;
    font-weight: var(--sol-font-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sol-shell-text-muted, var(--sol-text-muted));
    border-bottom: 1px solid var(--sol-shell-border, var(--sol-border));
    margin-bottom: 4px;
  }

  /* In flyout mode the inner wrapper becomes transparent so flex gap applies to items directly */
  .sol-sidebar--collapsed .sol-sidebar__parent-children-inner {
    display: contents;
  }

  /* Items inside the flyout get full padding back (override the depth indent).
     Also covers nested parent triggers — the flyout flattens the tree visually
     since each nested parent reveals its own sub-flyout to the right (recursive sub-flyout pattern). */
  .sol-sidebar--collapsed .sol-sidebar__parent-children-inner > .sol-sidebar__item,
  .sol-sidebar--collapsed .sol-sidebar__parent-children-inner > .sol-sidebar__parent > .sol-sidebar__parent-trigger {
    padding-inline-start: var(--sol-space-3, 12px);
    justify-content: flex-start;
  }

  /* Labels become visible inside the flyout — overrides display:none from the
     general collapsed rule. Same for nested parent labels and chevrons. */
  .sol-sidebar--collapsed .sol-sidebar__parent-children-inner .sol-sidebar__item-label {
    display: inline;
    opacity: 1;
    visibility: visible;
  }

  .sol-sidebar--collapsed .sol-sidebar__parent-children-inner .sol-sidebar__parent-chevron {
    display: inline-flex;
  }

  /* ─────────────────────────────────────────────
     Footer
     ───────────────────────────────────────────── */
  .sol-sidebar__footer {
    flex-shrink: 0;
    padding: var(--sol-space-2, 8px) var(--sol-space-3, 12px) calc(var(--sol-space-2, 8px) + var(--sol-safe-area-bottom));
    border-top: 1px solid var(--sol-shell-border, var(--sol-border));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sol-space-2, 8px);
  }

  .sol-sidebar--collapsed .sol-sidebar__footer {
    flex-direction: column-reverse;
    padding: var(--sol-space-2, 8px) var(--sol-space-1, 4px) calc(var(--sol-space-2, 8px) + var(--sol-safe-area-bottom));
  }

  .sol-sidebar--collapsed .sol-sidebar__footer > *:not(.sol-sidebar__icon-btn) {
    display: none;
  }

  /* ── SolPaletteSwitcher ─────────────────────────────────────────────
     Palette selector (swatch + name) with a pop-up list. Menu opens UPWARD
     since the switcher usually lives in the sidebar footer. */
  .sol-palette-switcher {
    position: relative;
  }
  .sol-palette-switcher__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--sol-space-2, 8px);
    padding: 6px 10px;
    background: transparent;
    border: 1px solid var(--sol-shell-border, var(--sol-border));
    border-radius: var(--sol-radius-md, 6px);
    color: var(--sol-shell-text, var(--sol-text-primary));
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
  }
  .sol-palette-switcher__trigger:hover {
    background: var(--sol-shell-hover, var(--sol-bg-muted));
    border-color: var(--sol-accent);
  }
  .sol-palette-switcher__dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  }
  .sol-palette-switcher__menu {
    position: absolute;
    inset-inline-start: 0;
    bottom: calc(100% + 6px);
    z-index: 1000;
    min-width: 168px;
    padding: 6px;
    /* Opens over the drawer footer — keeps the shell surface. */
    background: var(--sol-shell-surface, var(--sol-bg-elevated, var(--sol-bg-surface)));
    border: 1px solid var(--sol-shell-border, var(--sol-border));
    border-radius: var(--sol-radius-lg, 10px);
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .sol-palette-switcher__option {
    display: flex;
    align-items: center;
    gap: var(--sol-space-2, 9px);
    width: 100%;
    padding: 8px 10px;
    background: none;
    border: none;
    border-radius: var(--sol-radius-md, 7px);
    color: var(--sol-shell-text, var(--sol-text-primary));
    font: inherit;
    font-size: 0.82rem;
    text-align: start;
    cursor: pointer;
  }
  .sol-palette-switcher__option:hover {
    background: var(--sol-shell-hover, var(--sol-bg-muted));
  }
  .sol-palette-switcher__option--current {
    font-weight: 700;
  }
}

/* ─────────────────────────────────────────────
   Reduced motion — collapse/expand, chevron, and flyout movement become
   instant (0.01ms keeps transitionend firing; delay cleared so the flyout's
   visibility switch is immediate too).
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  @layer solsticio-components {
    .sol-sidebar,
    .sol-sidebar__parent-chevron,
    .sol-sidebar__parent-children,
    .sol-sidebar--collapsed .sol-sidebar__parent .sol-sidebar__parent-children,
    .sol-sidebar--collapsed .sol-sidebar__parent:hover .sol-sidebar__parent-children,
    .sol-sidebar--collapsed .sol-sidebar__parent:focus-within .sol-sidebar__parent-children {
      transition-duration: 0.01ms;
      transition-delay: 0s;
    }
  }
}

/* Forced colors: the active item and focus survive with outlines, never with fill alone.
   System colors only; every container keeps a CanvasText border. Same block on both platforms. */
@layer solsticio-components {
  @media (forced-colors: active) {
    .sol-sidebar { border-inline-end: 1px solid CanvasText; }
    .sol-sidebar__brand { border-block-end: 1px solid CanvasText; }
    .sol-sidebar__footer { border-block-start: 1px solid CanvasText; }
    .sol-sidebar__item,
    .sol-sidebar__parent-trigger { border: 1px solid transparent; }
    .sol-sidebar__item--active,
    .sol-sidebar__item[aria-current="page"] {
      outline: 2px solid Highlight;
      outline-offset: -2px;
      text-decoration: underline;
      box-shadow: none;
    }
    .sol-sidebar__item:focus-visible,
    .sol-sidebar__parent-trigger:focus-visible,
    .sol-sidebar__icon-btn:focus-visible,
    .sol-palette-switcher__trigger:focus-visible {
      outline: 2px solid Highlight;
      outline-offset: -2px;
      box-shadow: none;
    }
    .sol-sidebar__item[aria-disabled="true"] { color: GrayText; }
    .sol-sidebar__parent-trigger[aria-expanded="true"] { border-block-end: 1px solid CanvasText; }
    .sol-sidebar__item-badge { border: 1px solid CanvasText; }
    .sol-sidebar--collapsed .sol-sidebar__parent-children,
    .sol-palette-switcher__menu { border: 1px solid CanvasText; }
  }
}

@layer solsticio-components {
  /* ─────────────────────────────────────────────
     Drawer (narrow screens) — SolSidebar.MobileBreakpoint
     ─────────────────────────────────────────────
     Below the breakpoint the sidebar is laid over the page instead of beside it. Static media
     queries, one per breakpoint, so the layout is right on the first paint with no script deciding
     it. Widest first, so a narrower breakpoint's block wins where both apply. */
  .sol-sidebar .sol-sidebar__close-btn,
  .sol-sidebar .sol-sidebar__dismiss {
    display: none;
  }

  @media (max-width: 1024px) {
    .sol-sidebar--drawer-lg {
      position: fixed;
      inset-block: 0;
      inset-inline-start: calc(-1 * var(--sol-sidebar-width, 260px));
      z-index: var(--sol-z-modal, 1110);
      width: var(--sol-sidebar-width, 260px);
      max-width: 85vw;
      /* Closed = unreachable, not merely off-screen: without this its links stay in the Tab order
         and in the accessibility tree while nobody can see them. The delay lets the slide-out play. */
      visibility: hidden;
      transition: inset-inline-start 0.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.2s;
    }
    .sol-sidebar--drawer-lg.sol-sidebar--open {
      inset-inline-start: 0;
      visibility: visible;
      /* The dimmed page is this panel's own shadow: painted outside its box by definition, so the
         panel stays undimmed and there is no second layer to stack. */
      box-shadow: 0 0 0 100vmax var(--sol-overlay, rgba(0, 0, 0, 0.45));
      transition: inset-inline-start 0.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
    }
    .sol-sidebar--drawer-lg .sol-sidebar__collapse-btn { display: none; }
    .sol-sidebar--drawer-lg .sol-sidebar__close-btn { display: inline-flex; }
    .sol-sidebar--drawer-lg.sol-sidebar--open .sol-sidebar__dismiss {
      display: block;
      position: fixed;
      inset-block: 0;
      /* Starts where the panel ends, so it never covers the panel: a tap on the panel's own
         background must not close it. Logical, so right-to-left needs no special case. */
      inset-inline-start: min(var(--sol-sidebar-width, 260px), 85vw);
      inset-inline-end: 0;
    }
  }

  @media (max-width: 768px) {
    .sol-sidebar--drawer-md {
      position: fixed;
      inset-block: 0;
      inset-inline-start: calc(-1 * var(--sol-sidebar-width, 260px));
      z-index: var(--sol-z-modal, 1110);
      width: var(--sol-sidebar-width, 260px);
      max-width: 85vw;
      /* Closed = unreachable, not merely off-screen: without this its links stay in the Tab order
         and in the accessibility tree while nobody can see them. The delay lets the slide-out play. */
      visibility: hidden;
      transition: inset-inline-start 0.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.2s;
    }
    .sol-sidebar--drawer-md.sol-sidebar--open {
      inset-inline-start: 0;
      visibility: visible;
      /* The dimmed page is this panel's own shadow: painted outside its box by definition, so the
         panel stays undimmed and there is no second layer to stack. */
      box-shadow: 0 0 0 100vmax var(--sol-overlay, rgba(0, 0, 0, 0.45));
      transition: inset-inline-start 0.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
    }
    .sol-sidebar--drawer-md .sol-sidebar__collapse-btn { display: none; }
    .sol-sidebar--drawer-md .sol-sidebar__close-btn { display: inline-flex; }
    .sol-sidebar--drawer-md.sol-sidebar--open .sol-sidebar__dismiss {
      display: block;
      position: fixed;
      inset-block: 0;
      /* Starts where the panel ends, so it never covers the panel: a tap on the panel's own
         background must not close it. Logical, so right-to-left needs no special case. */
      inset-inline-start: min(var(--sol-sidebar-width, 260px), 85vw);
      inset-inline-end: 0;
    }
  }

  @media (max-width: 480px) {
    .sol-sidebar--drawer-sm {
      position: fixed;
      inset-block: 0;
      inset-inline-start: calc(-1 * var(--sol-sidebar-width, 260px));
      z-index: var(--sol-z-modal, 1110);
      width: var(--sol-sidebar-width, 260px);
      max-width: 85vw;
      /* Closed = unreachable, not merely off-screen: without this its links stay in the Tab order
         and in the accessibility tree while nobody can see them. The delay lets the slide-out play. */
      visibility: hidden;
      transition: inset-inline-start 0.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.2s;
    }
    .sol-sidebar--drawer-sm.sol-sidebar--open {
      inset-inline-start: 0;
      visibility: visible;
      /* The dimmed page is this panel's own shadow: painted outside its box by definition, so the
         panel stays undimmed and there is no second layer to stack. */
      box-shadow: 0 0 0 100vmax var(--sol-overlay, rgba(0, 0, 0, 0.45));
      transition: inset-inline-start 0.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
    }
    .sol-sidebar--drawer-sm .sol-sidebar__collapse-btn { display: none; }
    .sol-sidebar--drawer-sm .sol-sidebar__close-btn { display: inline-flex; }
    .sol-sidebar--drawer-sm.sol-sidebar--open .sol-sidebar__dismiss {
      display: block;
      position: fixed;
      inset-block: 0;
      /* Starts where the panel ends, so it never covers the panel: a tap on the panel's own
         background must not close it. Logical, so right-to-left needs no special case. */
      inset-inline-start: min(var(--sol-sidebar-width, 260px), 85vw);
      inset-inline-end: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .sol-sidebar--drawer-sm, .sol-sidebar--drawer-md, .sol-sidebar--drawer-lg,
    .sol-sidebar--drawer-sm.sol-sidebar--open, .sol-sidebar--drawer-md.sol-sidebar--open,
    .sol-sidebar--drawer-lg.sol-sidebar--open {
      transition: none;
    }
  }

  /* Touch: every navigation row, and the palette trigger, reaches the 44px minimum. */
  @media (pointer: coarse) {
    .sol-sidebar__item,
    .sol-palette-switcher__trigger {
      min-height: var(--sol-touch-target-min, 2.75rem);
    }
  }

  /* Forced touch (data-sol-touch on <html>): the block above, whatever the pointer. */
  :where([data-sol-touch]) .sol-sidebar__item,
  :where([data-sol-touch]) .sol-palette-switcher__trigger {
    min-height: var(--sol-touch-target-min, 2.75rem);
  }
}

/* Entrances: the palette menu pours upward out of its button, nearest option first
   (tokens: entrance primitive; the menu always opens above, data-sol-side). */
@layer solsticio-components {
  .sol-palette-switcher__menu {
    animation: sol-enter-pour var(--sol-motion-enter) var(--sol-ease-enter) backwards;
  }

  .sol-palette-switcher__option {
    animation: sol-enter-item var(--sol-step-time, 0s) var(--sol-ease-enter)
      calc(var(--sol-step, 0) * var(--sol-motion-step)) backwards;
  }
}