:root {
  /* Mobile default */
  --Sidebar-width: 100vw;
}

@media (min-width: 900px) {
  :root {
    /* Tablet / medium screens */
    --Sidebar-width: 35vw;
  }
}

@media (min-width: 1200px) {
  :root {
    /* Desktop */
    --Sidebar-width: 400px;
  }
}

/*
  Static fallback for --Sidebar-width so that third-party replay tools
  (e.g. Hotjar) that fail to evaluate runtime-injected CSS variables
  can still compute transforms correctly. Live runtime styles injected
  by Sidebar.jsx will override these values for end-users, so the app's
  behaviour remains unchanged.
*/